/* Layout corrections; colors and desktop styling remain in the original sheet. */
html { scroll-behavior: smooth; }
.opacity-0 { opacity: 1 !important; }
[hidden] { display: none !important; }
.brand { min-width: 0; flex-shrink: 0; }
.brand-logo { width: 75px; height: 75px; flex-shrink: 0; }
.header-row { gap: 24px; }
#desktop-nav-links { gap: 24px; }
#desktop-nav-links a { white-space: nowrap; }
a, button, input, textarea { touch-action: manipulation; }
button, input:not([type=hidden]), textarea { min-height: 44px; }
#desktop-nav-links a,
.section-nav a,
.section-nav span,
footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #00aaff; outline-offset: 3px; }
#mobile-menu-button { display: none; flex: 0 0 44px; width: 44px; height: 44px; align-items: center; justify-content: center; }
#mobile-menu { margin-top: 12px; padding: 20px; border-radius: 32px; background: rgba(8,25,60,.96); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 8px 32px rgba(0,0,0,.25); max-height: calc(100dvh - 116px); overflow-y: auto; }
#mobile-menu > div { display: flex; flex-direction: column; gap: 8px; }
#mobile-menu a { display: flex; align-items: center; min-height: 44px; color: white; font-size: 20px; font-weight: 500; }
#mobile-menu a:last-child { justify-content: center; padding: 12px 16px; border-radius: 999px; background: linear-gradient(135deg,#0057d8,#00aaff); font-weight: 700; }
.hero-image { position: absolute; inset: 0; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-content { padding-top: 145px; }
.hero-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.hero-stats > div { min-width: 0; }
.hero-stats .whitespace-nowrap { white-space: normal; }
.grid > *, form { min-width: 0; }
h1, h2, h3, p, a, #form-success { overflow-wrap: break-word; }
#contact-form input, #contact-form textarea { font-size: 16px; }
/* Normal Turnstile is 300px wide; compact rendering is 150px wide. */
#contact-turnstile { min-height: 150px; }
@media (max-width: 1279px) {
  #desktop-nav-links { display: none; }
  #mobile-menu-button { display: flex; }
  .hero-content { padding-top: 160px; }
}
@media (min-width: 1280px) {
  #mobile-menu { display: none; }
}
@media (max-width: 767px) {
  #site-header { padding-block: 16px; }
  #site-header > div { padding-inline: 16px; }
  .header-row { padding: 0; gap: 8px; }
  .brand { gap: 8px; }
  .brand-logo { width: 40px; height: 40px; }
  .brand .text-4xl { font-size: clamp(22px,6.5vw,32px); }
  .brand .text-xs { font-size: clamp(7px,2vw,10px); }
  .hero-content { padding-top: 120px; padding-bottom: 56px; }
  .hero h1 { font-size: clamp(36px,9.6vw,48px); }
  .hero-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-stats > div { padding: 16px; }
  .hero-stats .text-2xl { font-size: 21px; }
  .hero a.bg-white { padding-inline: 22px; }
  main section[id]:not(#contact) { padding-block: 60px !important; }
  main section[id] h2 { font-size: 32px !important; }
  .section-nav { gap: 4px 20px !important; justify-content: flex-start !important; }
  .contact-panel { padding: 24px 16px; }
  #contact-form { padding: 16px; }
  #contact { padding-block: 64px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .contact-panel { padding: 32px; }
  #contact .lg\:grid-cols-2 { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}