/* Base */
:root {
  --bg: #0b0c0d;
  --surface: #111315;
  --text: #e8ecef;
  --muted: #c3ccd2;
  --accent: #5fb3ff;
  --accent-2: #8ee6a0;
  --scrim: rgba(7, 9, 10, 0.35);
  --scrim-strong: rgba(7, 9, 10, 0.55);
  --focus: #ffd166;
  --header-h: clamp(42px, 5vw, 56px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.skip-link { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { left: 1rem; top: 1rem; width: auto; height: auto; z-index: 10000; background: var(--surface); padding: .5rem .75rem; border-radius: .375rem; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(8px); background: #000; border-bottom: 1px solid rgba(255,255,255,.06); }
.site-header .wrap { max-width: none; width: 100%; margin: 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; align-items: center; padding: 0 .5rem; height: var(--header-h); }
.brand-small { display: flex; align-items: center; justify-content: flex-start; height: var(--header-h); margin-left: clamp(8px, 2vw, 20px); justify-self: start; }
.brand-small img { max-height: calc(var(--header-h) - 6px); width: auto; display: block; object-fit: contain; object-position: left center; }
.site-nav { display: flex; gap: .5rem; justify-content: center; align-items: center; justify-self: center; height: var(--header-h); }
.site-nav a { color: var(--muted); text-decoration: none; padding: .25rem .5rem; border-radius: .35rem; font-size: .95rem; height: calc(var(--header-h) - 8px); display: inline-flex; align-items: center; }
.site-nav a:hover, .site-nav a:focus, .site-nav a.active { color: var(--text); background: rgba(255,255,255,.06); outline: none; }
.site-nav a.login { color: var(--text); border: 1px solid rgba(255,255,255,.12); }
.powered { display: inline-flex; gap: .5rem; align-items: center; color: var(--muted); text-decoration: none; height: var(--header-h); margin-right: clamp(8px, 2vw, 20px); justify-self: end; }
.powered img { height: calc(var(--header-h) - 16px); width: auto; filter: grayscale(1) contrast(1.2); }
.powered span { font-size: .8rem; }

/* Sections */
.section { position: relative; min-height: 100svh; display: grid; grid-template-columns: 1fr; align-items: center; }
.section .content { position: relative; top: auto; align-self: auto; z-index: 2; max-width: 900px; margin: 0 auto; padding: 6rem 1.25rem; will-change: transform; }
.section .media { position: absolute; inset: 0; overflow: hidden; }
.section .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); will-change: transform, opacity; filter: saturate(0.95) contrast(1.08); }
.section .media .scrim { display: none; }
.section h1, .section h2, .section h3 { margin: 0 0 .75rem; line-height: 1.2; }
.section p { color: var(--muted); }
.section ul, .section ol { color: var(--muted); }
.section .aside { font-size: .95rem; color: var(--muted); opacity: .95; margin-top: 1rem; }

.section.section-image-right { grid-template-columns: 1fr; }

/* Small overlay image (for low‑res asset) */
.overlay-thumb { position: absolute; right: clamp(.75rem, 4vw, 2rem); bottom: clamp(.75rem, 4vw, 2rem); z-index: 3; margin: 0; padding: .35rem; border-radius: .5rem; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 10px 30px rgba(0,0,0,.35); backdrop-filter: blur(2px); }
.overlay-thumb img { display: block; width: clamp(220px, 30vw, 480px); height: auto; border-radius: .35rem; filter: saturate(0.96) contrast(1.02); }

/* Content shading for readability over imagery */
.content-card { background: rgba(0,0,0,.44); border: 1px solid rgba(255,255,255,.12); border-radius: .75rem; padding: clamp(1rem, 2.5vw, 1.5rem); box-shadow: 0 8px 30px rgba(0,0,0,.35); backdrop-filter: blur(2px); width: fit-content; max-width: min(900px, 100%); }
.content-card { will-change: transform; }
.content-card > *:first-child { margin-top: 0; }
.content-card > *:last-child { margin-bottom: 0; }

/* Hero */
.hero .content { text-align: left; padding: 8rem 1.25rem 6rem; }
.hero h1 { font-size: clamp(1.8rem, 2.4rem + 1.5vw, 3.8rem); }
.subhead { margin: .5rem 0 1.25rem; font-size: clamp(1rem, .95rem + .5vw, 1.25rem); color: var(--muted); max-width: 45ch; }
.cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-decoration: none; border-radius: .5rem; padding: .7rem 1rem; font-weight: 600; }
.btn.primary { background: var(--accent); color: #071018; }
.btn.primary:hover, .btn.primary:focus { filter: brightness(1.05) saturate(1.1); outline: 2px solid transparent; }
.btn.secondary { background: rgba(255,255,255,.08); color: var(--text); border: 1px solid rgba(255,255,255,.12); }
.btn.secondary:hover, .btn.secondary:focus { background: rgba(255,255,255,.12); }
.help { color: var(--muted); margin-top: .5rem; font-size: .95rem; }

/* Floating brand over hero */
.floating-brand { position: absolute; top: 1rem; left: 1rem; z-index: 3; display: block; text-decoration: none; }
.floating-brand img { width: clamp(120px, 24vw, 240px); height: auto; display: block; filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }

/* Content variations */
.section.section-compact { min-height: auto; padding: 4rem 0; }
.section.section-compact .content { padding: 2rem 1.25rem; }

/* Contact form */
.contact-form .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.contact-form label { display: grid; gap: .35rem; font-size: .95rem; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; background: rgba(255,255,255,.06); color: var(--text); border: 1px solid rgba(255,255,255,.16); border-radius: .4rem; padding: .6rem .7rem; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: transparent; }
.contact-form .full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: .75rem; margin-top: .5rem; }
.after-submit { color: var(--muted); font-size: .95rem; margin-top: .5rem; }

/* Footer */
.site-footer { border-top: 1px solid rgba(255,255,255,.08); background: #0a0c0d; }
.site-footer .wrap { max-width: 1200px; margin: 0 auto; padding: 1.25rem; color: var(--muted); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .section .media img { transform: none !important; }
}
.hero .media img { object-position: center 35%; }