:root {
  --ink: #102433;
  --paper: #eef3f7;
  --card: #ffffff;
  --line: #c5d4e0;
  --steel: #3d7ea6;
  --max: #168afd;
  --mute: rgba(16, 36, 51, 0.62);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Manrope", system-ui, sans-serif; color: var(--ink); background: var(--paper); line-height: 1.5; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.top {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  width: 100%; max-width: 100%;
  padding: 0.9rem 1.4rem; background: var(--ink); color: #e7f0f6;
}
.brand { font-weight: 700; letter-spacing: 0.04em; }
.top a.phone { font-weight: 700; color: #fff; margin-left: auto; white-space: nowrap; }

.hero {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  background: #fff; align-items: stretch;
}
.hero-copy {
  padding: clamp(2rem, 5vw, 4rem) clamp(1.3rem, 4vw, 3rem);
  display: flex; flex-direction: column; justify-content: center; gap: 0.9rem;
}
.kicker { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); font-weight: 700; }
.hero h1 { font-family: "Fraunces", serif; font-weight: 560; font-size: clamp(3rem, 6vw, 5.2rem); line-height: 0.95; }
.lead { font-size: 1.35rem; max-width: 28rem; font-weight: 700; }
.sub { max-width: 32rem; color: var(--mute); }
.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.4rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--max); color: #fff; font-weight: 700;
  padding: 0.9rem 1.3rem; border-radius: 8px;
}
.ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.9rem 1.1rem; font-weight: 700;
}
.hero-photo { height: min(78vh, 640px); min-height: 320px; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.strips { display: grid; }
.strip {
  display: grid; grid-template-columns: 4.5rem 1fr;
  gap: 1rem; align-items: center;
  padding: 1.15rem 1.4rem; border-bottom: 1px solid var(--line); background: #fff;
}
.strip b { font-family: "Fraunces", serif; font-size: 1.6rem; color: var(--steel); }
.strip h2 { font-size: 1.05rem; font-weight: 700; }
.strip p { color: var(--mute); font-size: 0.92rem; }

.shots { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 0.6rem; padding: 0.6rem; background: var(--ink); }
.shot { position: relative; overflow: hidden; background: #0c1a24; }
.shot img { width: 100%; height: 320px; object-fit: cover; }
.shot span {
  position: absolute; left: 0.8rem; bottom: 0.8rem;
  background: rgba(16, 36, 51, 0.86); color: #fff;
  padding: 0.4rem 0.7rem; font-size: 0.88rem; font-weight: 700;
}

.steps { padding: 2.6rem 1.4rem; max-width: 820px; }
.steps h2 { font-family: "Fraunces", serif; font-weight: 560; font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1rem; }
.step {
  padding: 0.85rem 0 0.85rem 1rem; border-left: 2px solid var(--line); margin-left: 0.4rem;
}
.step strong { display: block; }
.step span { color: var(--mute); font-size: 0.92rem; }
.step.is-on { border-left-color: var(--steel); }

.contact {
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 1.5rem;
  padding: 2.4rem 1.4rem; background: var(--ink); color: #d5e2ec;
}
.contact h2 { font-family: "Fraunces", serif; color: #fff; font-weight: 560; font-size: 2.2rem; margin-bottom: 0.8rem; }
.reqs { display: grid; gap: 0.45rem; margin-bottom: 1rem; }
.reqs p { display: grid; grid-template-columns: 8rem 1fr; gap: 0.6rem; font-size: 0.95rem; }
.reqs span { color: #8fb0c6; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.contact a.policy { color: var(--max); font-weight: 700; }
.side { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; justify-content: center; }
.side .phone { font-size: 1.35rem; font-weight: 800; color: #fff; }

.reveal { transition: 0.45s ease var(--d, 0s); }
.reveal.in { transform: none; }

@media (max-width: 860px) {
  .hero, .shots, .contact { grid-template-columns: 1fr; }
  .hero-photo { height: 52vh; min-height: 260px; }
  .top { padding: 0.75rem 0.9rem; }
  .brand { font-size: 0.95rem; }
  .top a.phone { font-size: 0.78rem; }
  .reqs p { grid-template-columns: 1fr; gap: 0.15rem; }
}