/* Phase 1: shared visual identity; existing content and Alpine behavior retained. */
:root {
  /* Exact primary blue sampled from speech logo-02.png. */
  --speechforces-blue: #283891;
  --navy: var(--speechforces-blue);
  --royal: var(--speechforces-blue);
  --white: #FFFFFF;
  --yellow: #FFC928;
  /* Very pale tint of the exact logo blue, used only for surface separation. */
  --light-blue: #F4F5FA;
  --text: #172B4D;
  --line: #D4D7E9;
  --radius: 0px;
  --shadow: 0 6px 22px rgb(40 56 145 / 7%);
}
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
html, body { background: var(--white); color: var(--text); }
/* Clip horizontal decoration without creating a scroll container around sticky nav. */
html, body { overflow-x: clip; max-width: 100%; }
button, a, input, select, textarea { touch-action: manipulation; }
button, a { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important; }
:focus-visible { outline: 3px solid var(--royal); outline-offset: 4px; }
nav :focus-visible, footer :focus-visible, .bg-black :focus-visible, .bg-gray-900 :focus-visible { outline-color: var(--yellow); }
h1, h2, h3, h4, h5, h6 { color: var(--navy); }
[class*="border-black"] { border-color: var(--navy) !important; }
.pattern-bg { background-image: none !important; }
.underline-thick-yellow { text-decoration-color: var(--yellow); text-decoration-thickness: 4px; text-underline-offset: 8px; }
.bg-black, .bg-gray-900, .bg-gray-800 { background-color: var(--navy) !important; }
.bg-white { background-color: var(--white) !important; }
.bg-gray-50, .bg-gray-100, .bg-blue-50, .bg-yellow-50, .bg-green-50, .bg-purple-50 { background-color: var(--light-blue) !important; }
.bg-gray-200 { background-color: var(--line) !important; }
.bg-blue-600, .bg-blue-700, .bg-red-600 { background-color: var(--royal) !important; }
.bg-yellow-500 { background-color: var(--yellow) !important; }
.bg-green-400 { background: var(--light-blue) !important; }
.bg-black\/20 { background-color: rgb(40 56 145 / 20%) !important; }
.bg-black\/50 { background-color: rgb(40 56 145 / 50%) !important; }
.bg-gray-900\/80 { background-color: rgb(40 56 145 / 80%) !important; }
.text-black, .text-gray-900, .text-gray-800 { color: var(--navy) !important; }
.text-gray-700, .text-gray-600, .text-gray-500 { color: var(--text) !important; }
.text-blue-700, .text-blue-600, .text-blue-500, .text-purple-700, .text-green-500 { color: var(--royal) !important; }
.text-yellow-500, .text-yellow-600 { color: var(--royal) !important; }
.text-white { color: var(--white) !important; }
.text-gray-100, .text-gray-300, .text-gray-400, .text-blue-400 { color: var(--light-blue) !important; }
.bg-white .text-gray-400, .bg-yellow-50 .text-gray-400, .bg-gray-50 .text-gray-400, .bg-gray-200.text-gray-400 { color: var(--text) !important; }
:is(.bg-black, .bg-gray-900, .bg-gray-800) .text-gray-400 { color: var(--light-blue) !important; }
.border-yellow-500, .border-yellow-600 { border-color: var(--yellow) !important; }
.border-blue-600, .border-blue-700 { border-color: var(--royal) !important; }
.border-gray-600, .border-gray-700, .border-gray-800 { border-color: rgb(255 255 255 / 22%) !important; }
:is(.bg-black, .bg-gray-900, .bg-gray-800) :is(h1,h2,h3,h4,h5,h6) { color: inherit; }
:is(.bg-black, .bg-gray-900, .bg-gray-800) > :is(.text-yellow-500, .text-yellow-600),
:is(.bg-black, .bg-gray-900, .bg-gray-800).text-yellow-500,
footer .text-yellow-500 { color: var(--yellow) !important; }
:is(.bg-black, .bg-gray-900, .bg-gray-800) .text-gray-500 { color: var(--light-blue) !important; }
.hover\:text-yellow-500:hover, .hover\:text-yellow-600:hover, .hover\:text-blue-700:hover, .hover\:text-blue-600:hover, .group:hover .group-hover\:text-blue-700 { color: var(--royal) !important; }
.hover\:bg-yellow-500:hover { background-color: var(--yellow) !important; color: var(--navy) !important; }
.hover\:bg-black:hover, .hover\:bg-blue-700:hover { background-color: var(--royal) !important; color: white !important; }
.hover\:bg-yellow-50:hover, .hover\:bg-gray-100:hover { background-color: var(--light-blue) !important; }
button[class*="bg-"] { border-radius: var(--radius); }
button.bg-yellow-500 { color: var(--navy) !important; border-color: var(--yellow) !important; }
button.bg-yellow-500:hover { background: var(--yellow) !important; box-shadow: 0 3px 0 var(--navy), 0 5px 14px rgb(40 56 145 / 12%) !important; }
button.bg-white { color: var(--royal) !important; border-color: var(--royal) !important; }
button.bg-white:hover { background: var(--light-blue) !important; color: var(--navy) !important; }
button.bg-black:hover { background: var(--royal) !important; color: white !important; }
input, select, textarea { border-color: var(--line) !important; color: var(--text); background: white; }
main { padding-top: 0 !important; }
main header { background: var(--white) !important; }
main header > .absolute { opacity: .025; }
main header p { border-color: var(--yellow) !important; }
main header video { filter: none; }
section[id] { scroll-margin-top: 96px; }
footer { background: var(--navy) !important; }
.site-nav { position: sticky !important; top: 0; background: var(--navy) !important; border: 0 !important; box-shadow: 0 2px 10px rgb(40 56 145 / 8%); }
.site-nav > div:first-child > div { height: 80px; gap: 24px; }
.site-nav .brand { min-width: 0; text-align: left; }
.site-nav .brand > div { border: 0 !important; border-radius: 7px; }
.site-nav .brand > span { font-style: italic; font-size: 24px; letter-spacing: -.05em; }
.site-nav .brand .text-yellow-500 { color: var(--yellow) !important; }
.site-nav .desktop-links { gap: clamp(18px, 2vw, 30px); }
.site-nav .desktop-links > * { margin: 0 !important; }
.site-nav .desktop-links button { position: relative; padding: 29px 0; min-height: 44px; border: 0; font-size: 12px; font-weight: 900; letter-spacing: .1em; font-style: italic; color: white !important; white-space: nowrap; }
.site-nav .desktop-links button::after { content: ''; position: absolute; bottom: 17px; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
.site-nav .desktop-links button:hover::after, .site-nav .desktop-links button[aria-current="page"]::after { transform: scaleX(1); }
.site-nav button[aria-current="page"], .site-nav button:hover { color: var(--yellow) !important; }
.site-nav button.bg-yellow-500 { padding: 12px 18px; min-height: 44px; box-shadow: none !important; color: var(--navy) !important; white-space: nowrap; }
.site-nav button[aria-controls] { border: 1px solid rgb(255 255 255 / 35%) !important; border-radius: 8px; }
.site-nav button[aria-controls]:hover { background: rgb(255 255 255 / 10%) !important; }
#mobile-navigation { background: var(--navy) !important; border-color: rgb(255 255 255 / 18%) !important; max-height: calc(100dvh - 80px); overflow-y: auto; gap: 4px; font-style: italic; padding: 12px 24px 24px; }
#mobile-navigation > button { margin-top: 0; min-height: 44px; padding: 12px; border-radius: 6px; font-size: 12px; }
#mobile-navigation > button[aria-current="page"] { background: rgb(255 255 255 / 7%); box-shadow: inset 3px 0 var(--yellow); }
@media (max-width: 1023px) { .site-nav .desktop-links { display: none !important; } .site-nav button[aria-controls] { display: block !important; } #mobile-navigation { display: flex; } }
@media (min-width: 1024px) { .site-nav .desktop-links { display: flex !important; } .site-nav button[aria-controls], #mobile-navigation { display: none !important; } }
@media (max-width: 639px) { .site-nav > div:first-child > div { height: 72px; gap: 12px; } .site-nav .brand > span { font-size: 19px; } #mobile-navigation { max-height: calc(100dvh - 72px); } }
/* Review refinements: readable dark surfaces and a calmer, white hero. */
body.bg-gray-50, main header.bg-gray-100 { background-color: var(--white) !important; }
main header > .absolute { display: none; }
main header p.border-black { border-left-color: var(--yellow) !important; }
main header video.grayscale { filter: none !important; }
:is(.bg-black, .bg-gray-900, .bg-gray-800) :is(.text-blue-700, .text-blue-600, .text-yellow-500, .text-yellow-600) { color: var(--yellow) !important; }
:is(.bg-black, .bg-gray-900, .bg-gray-800) :is(.text-gray-700, .text-gray-600) { color: var(--light-blue) !important; }
.bg-white :is(.text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700),
.bg-gray-50 :is(.text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700) { color: var(--text) !important; }
.site-nav .desktop-links button { color: var(--white) !important; }
.site-nav .desktop-links button[aria-current="page"], .site-nav .desktop-links button:hover { color: var(--yellow) !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Preserve the original crisp card shapes, substantial borders and hard shadows. */
.brutal-shadow { box-shadow: 4px 4px 0 0 var(--navy); }
.brutal-shadow-lg { box-shadow: 8px 8px 0 0 var(--navy); }
.brutal-shadow-yellow { box-shadow: 8px 8px 0 0 var(--yellow); }
.brutal-shadow-blue { box-shadow: 16px 16px 0 0 var(--royal); }
button.bg-yellow-500:hover { box-shadow: none !important; }

/* Colour balance: white-led surfaces, brand blue structure, selective yellow. */
main .colour-surface-white { background-color: var(--white) !important; }
/* Preserve the original underlines and hard shadow geometry, with quieter colour. */
main .underline-thick-yellow { text-decoration-color: var(--line); }
main header .underline-thick-yellow { text-decoration-color: var(--yellow); }
.brutal-shadow-yellow { box-shadow: 8px 8px 0 0 var(--speechforces-blue); }
/* Small labels and section titles stay white on blue instead of competing with CTAs. */
:is(.bg-black, .bg-gray-900, .bg-gray-800) :is(.text-blue-700, .text-blue-600, .text-blue-500, .text-yellow-500, .text-yellow-600),
:is(.bg-black, .bg-gray-900, .bg-gray-800).text-yellow-500,
footer .text-yellow-500 { color: var(--white) !important; }
/* Reset text inside white cards nested within blue sections. */
.bg-white :is(.text-blue-700, .text-blue-600, .text-yellow-500, .text-yellow-600) { color: var(--speechforces-blue) !important; }
.bg-white :is(.text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700) { color: var(--text) !important; }
main :is(.bg-black, .bg-gray-900, .bg-gray-800) .underline-thick-yellow { text-decoration-color: rgb(255 255 255 / 35%); }
/* Non-action badges use brand blue; yellow remains on important buttons and play. */
main :is(span, div).bg-yellow-500:not(.rounded-full) { background-color: var(--speechforces-blue) !important; color: var(--white) !important; }
main div.colour-registration.bg-yellow-500,
main button[type="submit"].bg-black { background-color: var(--yellow) !important; color: var(--speechforces-blue) !important; border-color: var(--speechforces-blue) !important; }
/* Preserve yellow for navigation identity, hover, and the current page. */
.site-nav .brand .text-yellow-500,
.site-nav button[aria-current="page"], .site-nav button:hover,
footer .hover\:text-yellow-500:hover { color: var(--yellow) !important; }
.site-nav button.bg-yellow-500, .site-nav button.bg-yellow-500:hover { color: var(--speechforces-blue) !important; }

/* The screenshot's bold, italic Inter lettering, carried through the site. */
body, button, input, select, textarea, .font-serif-italic {
  font-family: 'Inter', sans-serif !important;
  font-style: italic;
  font-weight: 700;
}
h1, h2, h3, h4, h5, h6, button { font-weight: 900; }
/* The supplied logo includes the organisation name: no duplicate wordmark. */
.site-nav > div:first-child > div { height: 112px; }
.site-nav .brand { align-self: stretch; align-items: center; }
.organisation-logo { display: block; width: 200px; height: 92px; object-fit: cover; object-position: center; }
.footer-logo { width: 220px; height: 100px; margin-bottom: 24px; }
main header.photo-hero {
  position: relative; isolation: isolate; min-height: 660px;
  background: var(--speechforces-blue) !important; overflow: hidden;
}
.hero-photos, .hero-shade { position: absolute; inset: 0; z-index: -1; }
.hero-photo { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; opacity: 0; transition: opacity 900ms ease; }
.hero-photo.is-current { opacity: 1; }
.hero-shade { background: linear-gradient(90deg, rgb(15 21 54 / 92%) 0%, rgb(15 21 54 / 75%) 48%, rgb(15 21 54 / 20%) 100%); }
.hero-inner { position: relative; padding-top: 80px; padding-bottom: 82px; }
.hero-copy { max-width: 740px; }
main .photo-hero h1 { font-size: clamp(3rem, 6.2vw, 5.5rem); line-height: 1; margin-top: 24px; }
main .photo-hero h1, main .photo-hero h1 .text-blue-700, main .photo-hero p.text-gray-700 { color: white !important; }
.photo-hero .hero-kicker { color: white; font-size: 12px; font-weight: 900; letter-spacing: .15em; }
.photo-hero p { max-width: 600px; margin-left: 0; margin-right: 0; }
.photo-hero .hero-copy > div.flex { justify-content: flex-start; }
.photo-hero .hero-watch { display: block; color: white; margin-top: 26px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; }
.photo-hero :focus-visible { outline-color: var(--yellow); }
.hero-controls { position: absolute; bottom: 24px; right: 32px; display: flex; align-items: center; gap: 18px; color: white; font-size: 12px; font-weight: 900; }
.hero-controls button { min-width: 44px; min-height: 44px; border: 1px solid rgb(255 255 255 / 65%); background: rgb(40 56 145 / 60%); color: white; padding: 8px; }
.hero-controls button:hover { background: var(--speechforces-blue); }
#hero-video-panel { margin-top: 24px; }
#hero-video-panel video { width: 100%; max-height: 400px; background: var(--speechforces-blue); }
.typewriter-line { display: flex; align-items: center; justify-content: center; min-height: 96px; background: var(--white); color: var(--speechforces-blue); padding: 24px 16px; font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 900; letter-spacing: -.035em; }
.typewriter-cursor { color: var(--speechforces-blue); margin-left: 5px; animation: cursor-blink 1s step-end infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }
@media (max-width: 639px) {
  .site-nav > div:first-child > div { height: 96px; }
  .organisation-logo { width: 180px; height: 82px; }
  .footer-logo { width: 220px; height: 100px; }
  main header.photo-hero { min-height: 650px; }
  .hero-inner { padding-top: 54px; padding-bottom: 100px; }
  .hero-copy { text-align: left; }
  .hero-shade { background: rgb(15 21 54 / 76%); }
  .hero-controls { right: 16px; gap: 12px; }
  #mobile-navigation { max-height: calc(100dvh - 96px); }
}
@media (prefers-reduced-motion: reduce) { .hero-photo, .typewriter-cursor { transition: none; animation: none; } }

/* A complete statement: only the skill changes, surrounding text stays fixed. */
.typewriter-line { min-height: 260px; padding: 56px 24px; }
.typewriter-sentence { max-width: 1160px; text-align: center; font-size: clamp(1.75rem, 4.1vw, 3.8rem); line-height: 1.2; }
.typewriter-fixed { display: inline; }
.typewriter-changing { display: inline-block; min-width: 18ch; min-height: 1.2em; text-align: left; color: var(--speechforces-blue); }
.typewriter-ending { display: block; }
@media (max-width: 639px) {
  .typewriter-line { min-height: 250px; padding: 40px 16px; }
  .typewriter-fixed, .typewriter-changing { display: block; }
  .typewriter-changing { min-width: 0; min-height: 1.3em; margin: 8px 0; text-align: center; font-size: clamp(1.5rem, 6.6vw, 2rem); }
  .typewriter-ending { font-size: 1.5rem; }
}

/* Compact navigation keeps the photo hero visible while retaining a clear logo. */
.site-nav > div:first-child { max-width: none; padding-left: 12px; padding-right: 24px; }
.site-nav > div:first-child > div { height: 80px; }
.site-nav .organisation-logo { width: 128px; height: 58px; }
#mobile-navigation { max-height: calc(100dvh - 80px); }
@media (max-width: 639px) {
  .site-nav > div:first-child { padding-left: 0; padding-right: 12px; }
  .site-nav > div:first-child > div { height: 72px; }
  .site-nav .organisation-logo { width: 120px; height: 54px; }
  #mobile-navigation { max-height: calc(100dvh - 72px); }
}

/* Add a little breathing room before the typewriter statement. */
.typewriter-line { margin-top: 40px; }

/* Keep the unmodified full-colour logo above the photograph, with clear separation. */
.site-nav, .site-nav.nav-over-photo { background: var(--white) !important; }
.site-nav .organisation-logo, .footer-logo { filter: none !important; }
.footer-logo { background: var(--white); }
.site-nav .desktop-links button, .site-nav.nav-over-photo .desktop-links button { color: var(--speechforces-blue) !important; }
.site-nav button[aria-controls] { color: var(--speechforces-blue) !important; border-color: var(--speechforces-blue) !important; }
.site-nav .desktop-links button[aria-current="page"], .site-nav .desktop-links button:hover { color: var(--speechforces-blue) !important; }
body:has(.photo-hero) main { margin-top: 16px; }
main header.photo-hero { padding-top: 0; }
.hero-photo { object-position: center top; }

/* Upright site typography, including elements carrying legacy italic utilities. */
html body, body *, body *::before, body *::after {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
}

/* Navigation layout only; existing colours, typography, cards and hero are locked. */
.site-nav .desktop-links { gap: clamp(20px, 2.3vw, 36px); }
#mobile-navigation { overscroll-behavior: contain; }