@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Montserrat:wght@400;500&display=swap');

:root { color-scheme: dark; --cream:#f5efe2; --gold:#c9a970; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { background:#17251d; color:var(--cream); font-family:Montserrat,system-ui,sans-serif; }
.hero {
  position:relative; min-height:100svh; overflow:hidden; isolation:isolate;
  background-image:
    linear-gradient(90deg,rgba(8,18,12,.91) 0%,rgba(8,18,12,.68) 28%,rgba(8,18,12,.18) 58%,rgba(8,18,12,.11) 100%),
    linear-gradient(0deg,rgba(7,15,10,.52),transparent 45%),
    url('assets/villa-probst-hero.webp');
  background-size:cover; background-position:center;
}
.grain { position:absolute; inset:0; z-index:-1; opacity:.12; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.content { width:min(620px,calc(100% - 48px)); padding:clamp(78px,13vh,140px) 0 110px; margin-left:clamp(24px,8vw,150px); }
.eyebrow { margin:0 0 25px; text-transform:uppercase; letter-spacing:.24em; font-size:11px; font-weight:500; }
.eyebrow span { display:inline-block; width:34px; height:1px; margin:0 13px 3px 0; background:var(--gold); }
h1 { margin:0; font:500 clamp(78px,10.5vw,155px)/.69 'Cormorant Garamond',Georgia,serif; letter-spacing:-.055em; text-shadow:0 3px 28px rgba(0,0,0,.25); }
h1 em { margin-left:.3em; color:var(--gold); font-weight:400; }
.company-form { margin:22px 0 0; padding-left:.4em; font-size:10px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:rgba(245,239,226,.84); }
.lead { margin:clamp(50px,8vh,78px) 0 0; font:400 clamp(20px,2vw,28px)/1.45 'Cormorant Garamond',Georgia,serif; letter-spacing:.02em; }
.rule { width:58px; height:1px; margin:30px 0 24px; background:var(--gold); }
.coming { margin:0; font-size:10px; line-height:1.7; letter-spacing:.19em; text-transform:uppercase; }
.footer { position:absolute; left:clamp(24px,8vw,150px); bottom:28px; margin:0; font-size:9px; letter-spacing:.16em; text-transform:uppercase; opacity:.72; }
.scroll { position:absolute; right:34px; bottom:27px; width:1px; height:58px; background:rgba(255,255,255,.28); overflow:hidden; }
.scroll span { display:block; width:1px; height:25px; background:var(--cream); animation:drift 2.4s ease-in-out infinite; }
@keyframes drift { 0%{transform:translateY(-25px)} 60%,100%{transform:translateY(58px)} }
@media (max-width:700px) {
  .hero { background-position:61% center; background-image:linear-gradient(90deg,rgba(8,18,12,.83),rgba(8,18,12,.23)),linear-gradient(0deg,rgba(7,15,10,.68),transparent 55%),url('assets/villa-probst-hero.webp'); }
  .content { padding-top:15vh; margin-left:24px; }
  h1 { font-size:clamp(70px,24vw,112px); }
  .lead { margin-top:48px; font-size:22px; }
  .footer { left:24px; }
}
@media (prefers-reduced-motion:reduce) { .scroll span { animation:none; } }