:root{
  --ink:#111;
  --paper:#fbfaf7;
  --cream:#f2eadf;
  --muted:#6f675f;
  --gold:#b69b69;
  --white:#fff;
  --line:rgba(182,155,105,.35);
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Montserrat', Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 10%, rgba(182,155,105,.18), transparent 30%),
    linear-gradient(135deg, #fff 0%, var(--paper) 45%, var(--cream) 100%);
}
.page{min-height:calc(100vh - 72px);display:flex;align-items:center}
.hero{
  width:100%;
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:clamp(32px,6vw,90px);
  align-items:center;
  padding:clamp(28px,6vw,82px);
}
.content{max-width:720px}
.logo{
  width:min(380px,78vw);
  max-height:130px;
  object-fit:contain;
  object-position:left center;
  mix-blend-mode:multiply;
  margin-bottom:36px;
}
.eyebrow{
  margin:0 0 12px;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-weight:700;
  font-size:12px;
}
h1{
  font-family:var(--serif);
  font-size:clamp(58px,9vw,118px);
  line-height:.9;
  font-weight:600;
  margin:0 0 24px;
}
.lead{
  font-size:clamp(18px,2vw,23px);
  line-height:1.65;
  color:#352f2a;
  margin:0 0 34px;
}
.milestone{
  display:grid;
  grid-template-columns:repeat(2,minmax(150px,1fr));
  gap:14px;
  max-width:480px;
  margin-bottom:34px;
}
.milestone div{
  background:rgba(255,255,255,.68);
  border:1px solid var(--line);
  padding:22px;
}
.milestone strong{
  display:block;
  font-family:var(--serif);
  font-size:56px;
  line-height:1;
}
.milestone span{
  display:block;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:48px;
  padding:13px 22px;
  border:1px solid var(--ink);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:700;
  text-decoration:none;
  color:var(--ink);
  transition:.25s ease;
}
.btn.primary{background:var(--ink);color:var(--white)}
.btn.primary:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--white)}
.visual{position:relative;min-height:660px}
.photo-card{
  background:#fff;
  padding:12px;
  box-shadow:0 28px 80px rgba(24,18,12,.16);
  border:1px solid rgba(182,155,105,.2);
}
.photo-card img{display:block;width:100%;height:100%;object-fit:cover}
.photo-card.main{position:absolute;right:0;top:0;width:78%;height:78%}
.photo-card.small{position:absolute;left:0;bottom:0;width:52%;height:38%}
footer{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding:30px 22px 50px}
  .visual{min-height:500px}
  .photo-card.main{width:82%;height:72%}
  .photo-card.small{width:56%;height:38%}
}
@media (max-width:560px){
  .logo{margin-bottom:24px}
  h1{font-size:58px}
  .milestone{grid-template-columns:1fr}
  .actions .btn{width:100%}
  .visual{min-height:420px}
  .photo-card.main{width:88%;height:70%}
  .photo-card.small{width:64%;height:34%}
}