:root {
  --ink: #111;
  --muted: #444;
  --paper: #fff;
  --soft: #efefef;
  --accent: #f2e30b;
  --navy: #071a3a;
  --cyan: #8fe3f9;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Jost", Arial, sans-serif; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }

.logo { position: absolute; top: 20px; left: 28px; z-index: 10; }
.logo img { width: 140px; height: auto; }

.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  background: #0b2530 url("/img/bg1.jpg") center / cover no-repeat;
  color: #fff;
}
.hero-in { padding: 120px 16px 80px; margin-left: 10%; max-width: 640px; }
.hero h1 { font-weight: 500; font-size: clamp(32px, 4.2vw, 50px); line-height: 1.17; margin: 0 0 40px; letter-spacing: .01em; }
.btn { display: inline-block; background: var(--accent); color: #000; text-decoration: none; font-weight: 500; font-size: 15px; padding: 20px 60px; transition: filter .2s; }
.btn:hover { filter: brightness(.93); }

.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 66vh; background: var(--soft); }
.split-text { padding: 12% 10%; display: flex; flex-direction: column; justify-content: center; }
.split h2 { font-weight: 400; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.12; margin: 0 0 28px; }
.split p { font-weight: 300; font-size: 19px; line-height: 1.6; color: var(--muted); margin: 0; }
.split-img { background-size: cover; background-position: center; min-height: 360px; }
.split-rev .split-text { order: 2; }
.split-rev .split-img { order: 1; }

.visit { text-align: center; padding: 130px 16px; }
.visit h3 { font-weight: 500; font-size: 26px; margin: 0 0 40px; }
.visit .addr { font-weight: 300; font-size: clamp(26px, 3vw, 40px); line-height: 1.45; margin: 0; }
.visit .addr span { font-size: .6em; color: var(--muted); }
.visit .mail { margin: 24px 0 0; font-size: 19px; font-weight: 300; }

.contact { background: var(--navy) url("/img/1.jpg") center / cover no-repeat; color: #fff; padding: 90px 16px 120px; text-align: center; }
.contact h2 { font-weight: 500; font-size: clamp(30px, 3vw, 42px); margin: 0 0 40px; }
form { max-width: 560px; margin: 0 auto; display: grid; gap: 20px; text-align: left; }
input, textarea { width: 100%; font: inherit; font-size: 16px; padding: 16px 20px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, .88); color: #000; }
textarea { resize: vertical; min-height: 100px; }
input:focus, textarea:focus { outline: 2px solid var(--cyan); background: #fff; }
button { font: inherit; font-weight: 600; font-size: 16px; padding: 18px; border: 0; border-radius: 30px; background: var(--accent); color: #000; cursor: pointer; transition: filter .2s; }
button:hover { filter: brightness(.93); }
button:disabled { opacity: .6; cursor: wait; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.note { font-size: 13px; color: rgba(255, 255, 255, .7); margin: 0; text-align: center; }
.msg { min-height: 1.4em; margin: 0; text-align: center; font-size: 16px; }
.msg.ok { color: #9ff0b8; }
.msg.err { color: #ffb3a7; }

footer { background: #05122a; color: rgba(255, 255, 255, .75); text-align: center; padding: 40px 16px; font-size: 14px; line-height: 1.7; }
footer p { margin: 0; }
footer b { color: #fff; font-weight: 500; }

.doc { max-width: 760px; margin: 0 auto; padding: 140px 16px 80px; line-height: 1.65; font-size: 17px; }
.doc h1 { font-weight: 500; font-size: 38px; margin: 0 0 8px; }
.doc h2 { font-weight: 500; font-size: 22px; margin: 32px 0 8px; }
.doc .muted { color: var(--muted); }
.doc .logo-dark img { filter: none; }

@media (max-width: 800px) {
  .logo { position: absolute; top: 16px; left: 16px; }
  .logo img { width: 104px; }
  .hero-in { margin-left: 0; }
  .split { grid-template-columns: 1fr; }
  .split-text { order: 1 !important; padding: 56px 16px; }
  .split-img { order: 2 !important; min-height: 300px; }
  .split p { font-size: 17px; }
  .visit { padding: 80px 16px; }
  .btn { padding: 18px 44px; }
}