:root {
  --ink: #111111;
  --lime: #d2db00;
  --paper: #f6f3ed;
  --paper-2: #ece9e1;
  --stone: #d9d7cf;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 48% 45%, rgba(255,255,255,.98) 0 19%, rgba(255,255,255,.58) 36%, rgba(246,243,237,.08) 58%),
    linear-gradient(120deg, #f8f6f1 0%, #f3f0e8 46%, #e4e3dc 100%);
}

/* Abstract architectural backdrop – pure CSS, no stock imagery */
.ambient { position: absolute; inset: auto; pointer-events: none; z-index: -5; }
.ambient-left {
  width: 44vw; height: 115vh; left: -21vw; top: -8vh;
  background: radial-gradient(ellipse at 80% 48%, rgba(178,185,161,.28), rgba(126,137,106,.10) 45%, transparent 72%);
  filter: blur(18px);
}
.ambient-right {
  width: 50vw; height: 110vh; right: -17vw; top: -12vh;
  background: radial-gradient(ellipse at 20% 38%, rgba(188,188,176,.52), rgba(226,224,214,.32) 45%, transparent 73%);
  filter: blur(7px);
}

.ribbed {
  position: absolute; z-index: -4;
  left: -2vw; top: -8vh; width: 24vw; height: 108vh;
  opacity: .42;
  background: repeating-linear-gradient(90deg, rgba(95,98,89,.15) 0 1px, rgba(255,255,255,.18) 1px 7px);
  transform: skewX(-2deg);
  mask-image: linear-gradient(to right, #000 0 65%, transparent 100%);
}

.arc {
  position: absolute; z-index: -3;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.84);
  box-shadow: 0 0 0 1px rgba(210,219,0,.17) inset, -30px 30px 70px rgba(77,77,69,.08);
}
.arc-one {
  width: 78vw; height: 126vh; right: -32vw; top: -45vh;
  background: linear-gradient(145deg, rgba(232,231,223,.7), rgba(202,202,192,.28));
}
.arc-one::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  border-left: 2px solid rgba(210,219,0,.62);
  transform: rotate(7deg);
}
.arc-two {
  width: 76vw; height: 40vh; left: -27vw; bottom: -24vh;
  background: linear-gradient(8deg, rgba(195,198,185,.45), rgba(245,243,236,.22));
  box-shadow: 0 -18px 48px rgba(77,79,71,.10);
}

.wave {
  position: absolute; z-index: -2;
  left: 17vw; right: 17vw; bottom: 20vh; height: 28vh;
  opacity: .22;
  background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 10px, rgba(255,255,255,.95) 11px 12px, transparent 13px 18px);
  transform: perspective(700px) rotateX(58deg) rotateZ(-2deg);
  filter: drop-shadow(0 0 12px rgba(210,219,0,.10));
  mask-image: radial-gradient(ellipse at center, #000 0 54%, transparent 74%);
}

.leaf-shadow {
  position: absolute; z-index: -1; opacity: .11; filter: blur(4px);
  width: 28vw; height: 56vh;
  background:
    radial-gradient(ellipse at 22% 20%, #314022 0 5%, transparent 6%),
    radial-gradient(ellipse at 40% 31%, #314022 0 5%, transparent 6%),
    radial-gradient(ellipse at 58% 43%, #314022 0 5%, transparent 6%),
    radial-gradient(ellipse at 72% 55%, #314022 0 4%, transparent 5%),
    linear-gradient(68deg, transparent 48%, #314022 49% 51%, transparent 52%);
}
.leaf-a { left: -5vw; top: -7vh; transform: rotate(11deg); }
.leaf-b { right: 14vw; top: 2vh; transform: rotate(145deg) scale(.7); opacity: .07; }

.content {
  width: min(660px, 88vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(-1.5vh);
}
.logo {
  display: block;
  width: clamp(210px, 28vw, 390px);
  height: auto;
  object-fit: contain;
}
.divider { width: 74px; height: 1px; background: rgba(17,17,17,.48); margin: 34px 0 27px; }
h1 {
  margin: 0;
  font-size: clamp(20px, 2.0vw, 31px);
  line-height: 1.28;
  font-weight: 400;
  letter-spacing: -.025em;
}
.contact-button {
  margin-top: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-width: 205px;
  height: 58px;
  border: 1px solid var(--lime);
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .20em;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255,255,255,.26);
  backdrop-filter: blur(8px);
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.contact-button:hover { background: rgba(210,219,0,.12); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(55,58,47,.08); }
.mail-icon { width: 22px; height: 16px; border: 1.5px solid var(--ink); position: relative; }
.mail-icon::before, .mail-icon::after { content:""; position:absolute; top:2px; width:13px; height:1.5px; background:var(--ink); }
.mail-icon::before { left:1px; transform:rotate(31deg); transform-origin:left center; }
.mail-icon::after { right:1px; transform:rotate(-31deg); transform-origin:right center; }

.imprint-link {
  position: absolute;
  bottom: clamp(24px, 6vh, 58px);
  left: 50%; transform: translateX(-50%);
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
  padding: 8px 18px;
  text-transform: uppercase;
  letter-spacing: .20em;
  font-size: 12px;
}
.chevron { display: block; width: 16px; height: 16px; margin: 10px auto 0; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); }

.modal { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal.is-open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(20,22,18,.38); backdrop-filter: blur(7px); }
.modal-card {
  position: relative; z-index: 1;
  width: min(540px, 100%);
  max-height: min(720px, 90vh);
  overflow: auto;
  background: rgba(250,249,245,.97);
  border: 1px solid rgba(17,17,17,.12);
  box-shadow: 0 30px 90px rgba(18,20,16,.20);
  padding: clamp(32px, 6vw, 54px);
}
.modal-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--lime); }
.modal-card h2 { margin:0 0 30px; font-size:27px; font-weight:500; }
.modal-card p { margin:0 0 22px; line-height:1.7; font-size:15px; }
.modal-card p:last-child { margin-bottom:0; }
.modal-card a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
.modal-close { position:absolute; right:18px; top:14px; border:0; background:transparent; font-size:29px; line-height:1; cursor:pointer; font-weight:300; }

@media (max-width: 700px) {
  .content { transform: translateY(-3vh); }
  .logo { width: min(255px, 72vw); }
  .divider { margin: 26px 0 22px; width: 58px; }
  h1 { font-size: 20px; max-width: 340px; }
  .contact-button { margin-top: 32px; min-width: 190px; height: 54px; }
  .ribbed { width: 33vw; opacity: .28; }
  .arc-one { width: 105vw; right: -62vw; }
  .wave { left: 4vw; right: 4vw; bottom: 18vh; opacity: .15; }
  .leaf-shadow { width: 45vw; opacity: .075; }
  .imprint-link { bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}