/* Page layout for the Levante Studios site. Component look lives in components.css. */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
}

h1,
h2,
h3 { text-wrap: balance; }

a:not(.lv-btn) { color: var(--accent); }
a:not(.lv-btn):hover { color: var(--accent-hover); }

a.lv-lockup,
a.lv-lockup:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.lv-skip {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 2;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}

.lv-skip:focus {
  transform: none;
  color: var(--on-accent);
}

.lv-wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* Navy bands keep the inverse button (white on navy) and retint text to the dark palette. */
.lv-band {
  background: var(--surface-inverse);
  color: var(--ink-inverse);
  color-scheme: dark;
  --ink: #ffffff;
  --ink-muted: #c9d6ec;
  --ink-label: #7fa3d9;
  --surface-raised: #111d33;
  --surface-field: #0b1426;
  --border: #2a3a57;
  --hairline: #2a3a57;
  --accent-hover: #3c72ff;
  --accent-text: #8aa8ff;
}

.lv-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px var(--space-6);
  padding-block: var(--space-5);
}

.lv-nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
  font-size: 15px;
}

.lv-nav-links a:not(.lv-btn),
.lv-footer-links a {
  color: var(--ink-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}

.lv-nav-links a:not(.lv-btn):hover,
.lv-footer-links a:hover { color: var(--ink); }

.lv-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  padding-block: var(--space-9) var(--space-10);
}

.lv-hero-copy {
  flex: 1 1 520px;
  max-width: 640px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.lv-display {
  margin: 0;
  font-weight: 500;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.lv-lead {
  margin: 0;
  max-width: 600px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.lv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: var(--space-2);
}

.lv-hero-mark {
  position: relative;
  flex: 1 1 42%;
  min-width: min(100%, 280px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.lv-hero-mark img {
  width: min(100%, 440px);
  height: auto;
}

@media (min-width: 960px) {
  .lv-hero-mark {
    align-self: stretch;
    container-type: size;
  }

  .lv-hero-mark img {
    width: min(100cqw, 100cqh);
    height: min(100cqw, 100cqh);
    max-width: none;
  }
}

.lv-mast { position: relative; isolation: isolate; }

.lv-mast-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.lv-mast .lv-wrap { position: relative; z-index: 1; }

.lv-mast--live .lv-hero-mark-still { visibility: hidden; }

.lv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lv-section { padding-block: var(--space-10); }

.lv-section-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.lv-section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-5);
}

.lv-section-aside {
  margin: 0;
  max-width: 420px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.lv-contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding-block: var(--space-10);
}

.lv-contact-copy {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.lv-contact-title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.lv-contact-copy .lv-lead { max-width: 460px; }

.lv-band a.lv-contact-mail,
.lv-band a.lv-contact-mail:hover {
  color: var(--ink);
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}

.lv-band a.lv-contact-mail:hover { color: var(--ink-muted); }

.lv-form {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
}

.lv-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.lv-form-row .lv-field { flex: 1 1 180px; min-width: 0; }

.lv-form .lv-input { width: 100%; }

.lv-form .lv-btn { align-self: flex-start; }

.lv-form-status {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.lv-form-status:empty { display: none; }

.lv-footer { border-top: 1px solid var(--border); }

.lv-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-block: 40px;
  font-size: 14px;
  color: var(--ink-label);
}

.lv-footer p { margin: 0; }

.lv-lockup--footer { gap: 12px; }
.lv-lockup--footer img { width: 28px; height: 28px; }
.lv-lockup--footer .lv-lockup-name { font-size: 14px; letter-spacing: 4px; }
.lv-lockup--footer .lv-lockup-sub { font-size: 10px; letter-spacing: 3px; }

.lv-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

.lv-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-10);
}

.lv-page h1 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.lv-prose {
  max-width: var(--measure);
  font-size: 17px;
  line-height: 1.6;
}

.lv-prose p { margin: 0 0 var(--space-4); }

@media (max-width: 720px) {
  .lv-wrap { padding-inline: var(--space-4); }
  .lv-nav-links { gap: var(--space-2) var(--space-4); }
  .lv-hero { padding-block: var(--space-8) var(--space-9); }
  .lv-section,
  .lv-contact,
  .lv-page { padding-block: var(--space-8); }
  .lv-form { padding: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lv-btn { transition: none; }
  .lv-mast-canvas { display: none; }
}