:root {
  --ink: #111312;
  --paper: #ebe8df;
  --muted: #96958d;
  --gold: #b59b6c;
  --line: rgba(235, 232, 223, 0.18);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  overflow-x: hidden;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: radial-gradient(circle at 17% 20%, rgba(181, 155, 108, 0.12), transparent 30%), #111312;
  content: "";
}

.ambient { position: fixed; z-index: -1; border-radius: 50%; filter: blur(90px); opacity: .22; pointer-events: none; }
.ambient-one { width: 23rem; height: 23rem; top: -11rem; right: 24%; background: #b59b6c; }
.ambient-two { width: 18rem; height: 18rem; bottom: -8rem; left: 42%; background: #66756c; }

.page-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 48%);
  min-height: 100svh;
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(1.8rem, 5vw, 5rem);
  gap: clamp(2rem, 7vw, 9rem);
}

.content { display: flex; flex-direction: column; justify-content: space-between; padding: .25rem 0; }
.eyebrow, .footer-line, .contact-block p, .kicker, .vertical-label { letter-spacing: .16em; text-transform: uppercase; font-size: .66rem; }
.eyebrow { display: flex; align-items: center; gap: .8rem; color: var(--muted); }
.eyebrow span { width: 2.5rem; height: 1px; background: var(--gold); }
.location { margin: .7rem 0 0 3.3rem; color: var(--gold); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }

.copy { margin: auto 0; padding: 5rem 0 3rem; max-width: 35rem; }
.kicker { color: var(--gold); margin: 0 0 1.8rem; }
h1 { font: 500 clamp(5.8rem, 11vw, 10rem)/.72 var(--serif); letter-spacing: -.055em; margin: 0; }
h1 em { color: var(--gold); font-style: italic; font-weight: 400; padding-left: clamp(2.3rem, 6vw, 5rem); }
.intro { max-width: 26rem; margin: 3.3rem 0 0; color: #b3b2aa; font-size: .92rem; line-height: 1.9; font-weight: 300; }

.contact-block { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.contact-block p { color: var(--muted); margin: 0 0 .7rem; }
.phone { color: var(--paper); font: 500 clamp(1.2rem, 2vw, 1.65rem) var(--serif); text-decoration: none; letter-spacing: .03em; transition: color .25s ease; }
.phone:hover, .phone:focus-visible { color: var(--gold); }

.footer-line { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.2rem; color: var(--muted); font-size: .55rem; }
.status { color: var(--paper); white-space: nowrap; }
.status i { display: inline-block; width: .4rem; height: .4rem; border-radius: 50%; background: var(--gold); margin: 0 .5rem .05rem 0; box-shadow: 0 0 0 4px rgba(181,155,108,.12); }

.visual { position: relative; min-height: 650px; display: flex; align-items: center; justify-content: center; }
.visual-frame { position: relative; width: min(100%, 620px); aspect-ratio: 4 / 5; border: 1px solid rgba(181,155,108,.42); background: #080a09; overflow: hidden; }
.visual-frame::before { position: absolute; inset: 1rem; border: 1px solid rgba(235,232,223,.12); content: ""; z-index: 2; pointer-events: none; }
.visual-frame img { position: absolute; width: 88%; height: 88%; object-fit: contain; inset: 6% 6% auto; z-index: 1; mix-blend-mode: screen; opacity: .94; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.visual-frame:hover img { transform: scale(1.035); }
.grain { position: absolute; inset: 0; opacity: .12; z-index: 3; 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='.45'/%3E%3C/svg%3E"); }
.orbit { position: absolute; border: 1px solid rgba(181,155,108,.34); border-radius: 50%; z-index: 0; }
.orbit-large { width: 85%; aspect-ratio: 1; left: 7%; top: 7%; }
.orbit-small { width: 54%; aspect-ratio: 1; right: -12%; bottom: -8%; border-color: rgba(235,232,223,.2); }
.corner { position: absolute; width: 3rem; height: 3rem; z-index: 4; }
.corner-top { top: 2.2rem; right: 2.2rem; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.corner-bottom { bottom: 2.2rem; left: 2.2rem; border-bottom: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.vertical-label { position: absolute; right: -2.5rem; top: 50%; transform: rotate(90deg) translateX(50%); transform-origin: center; color: var(--muted); font-size: .52rem; white-space: nowrap; }

@media (max-width: 800px) {
  .page-shell { display: flex; flex-direction: column; gap: 3rem; padding: 1.5rem; }
  .copy { padding: 5rem 0 3.5rem; }
  .visual { min-height: auto; order: -1; padding: 1rem 1rem 0; }
  .visual-frame { width: min(100%, 420px); }
  .vertical-label { display: none; }
  .footer-line { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: no-preference) {
  .visual-frame { animation: reveal .9s ease both; }
  @keyframes reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
}