:root {
  --bg: #f4efe7;
  --bg-2: #fbf7f1;
  --ink: #221d18;
  --muted: #6b6157;
  --line: rgba(34, 29, 24, 0.12);
  --gold: #af8b4d;
  --gold-deep: #8d6b33;
  --panel: rgba(255,255,255,0.56);
  --shadow: 0 20px 60px rgba(56, 41, 22, 0.08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(175,139,77,0.12), transparent 28%),
    linear-gradient(180deg, #f8f3ec 0%, #f3ede5 45%, #f8f4ee 100%);
}
a { color: inherit; text-decoration: none; }
p { line-height: 1.8; }
.shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.utility-bar {
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(10px);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.utility-inner {
  min-height: 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.utility-links { display:flex; gap:20px; flex-wrap:wrap; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248,243,236,0.84);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(34,29,24,0.08);
}
.nav-shell {
  min-height: 86px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 20px;
  align-items: center;
}
.brand { display:flex; flex-direction:column; line-height:1; }
.brand-kicker {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--muted);
}
.brand-main {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  letter-spacing: .04em;
}
.main-nav {
  display:flex;
  justify-content:center;
  gap: 26px;
  flex-wrap:wrap;
}
.main-nav a {
  position: relative;
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}
.main-nav a.active,
.main-nav a:hover { color: var(--ink); }
.main-nav a.active::after,
.main-nav a:hover::after {
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:1px; background: var(--gold);
}
.nav-cta, .button {
  display:inline-flex; align-items:center; justify-content:center;
  min-height: 48px; padding: 0 22px; border-radius: 999px; font-size: .83rem;
  text-transform: uppercase; letter-spacing: .14em; transition: .3s ease; cursor: pointer;
}
.nav-cta, .button-gold {
  background: linear-gradient(135deg, #c9a86b, #9b7639);
  color: white; box-shadow: 0 14px 32px rgba(160,120,55,.18);
}
.nav-cta:hover, .button-gold:hover { transform: translateY(-1px); }
.button-ghost {
  border: 1px solid rgba(34,29,24,.16);
  background: rgba(255,255,255,.42);
  color: var(--ink);
}
.menu-toggle, .mobile-nav { display:none; }
.hero {
  padding: 76px 0 80px;
}
.hero-grid {
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items:center;
}
.hero-copy h1, .page-hero-copy h1, .section h1, .section h2, .presentation-copy h2, .collection-copy h3, .feature-panel h2, .editorial-copy h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  line-height: .95;
  margin: 0;
}
.hero-copy h1 { font-size: clamp(4rem, 7vw, 6.8rem); max-width: 10ch; }
.lead { font-size: 1.08rem; color: var(--muted); max-width: 560px; }
.eyebrow {
  margin-bottom: 18px;
  color: var(--gold-deep);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .75rem;
}
.hero-actions { display:flex; gap: 14px; flex-wrap:wrap; margin-top: 30px; }
.hero-visual { position: relative; min-height: 560px; }
.visual-stack { position: relative; height: 100%; }
.editorial-card {
  border-radius: 34px;
  overflow: hidden;
  background: rgba(255,255,255,.54);
  border: 1px solid rgba(34,29,24,.08);
  box-shadow: var(--shadow);
}
.portrait-card { width: 76%; min-height: 560px; }
.square-card { width: 46%; min-height: 260px; }
.offset-card { position:absolute; right: 0; bottom: 28px; }
.card-art {
  min-height: 100%;
  position: relative;
  background-size: cover;
  background-position: center;
}
.card-art::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(30,24,16,.35), rgba(255,255,255,0) 45%);
}
.card-caption {
  position:absolute; left:24px; bottom:20px; z-index:1;
  color: white; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase;
}
.art-jewel { background: linear-gradient(160deg, rgba(255,255,255,.88), rgba(227,214,196,.88)), radial-gradient(circle at 30% 25%, rgba(255,255,255,.92), transparent 20%), radial-gradient(circle at 55% 55%, rgba(185,146,88,.45), transparent 28%), radial-gradient(circle at 72% 36%, rgba(99,86,145,.32), transparent 22%), linear-gradient(145deg, #4b4138, #c9b6a2); }
.art-watch { background: radial-gradient(circle at 40% 42%, rgba(255,255,255,.72), transparent 11%), radial-gradient(circle at 40% 42%, rgba(63,58,55,.9) 12%, transparent 13%), radial-gradient(circle at 40% 42%, rgba(189,149,79,.78) 20%, transparent 21%), linear-gradient(135deg, #ece2d4, #cab8a4 45%, #80674b 100%); }
.art-diamond { background: linear-gradient(135deg, #fdfaf6, #dfd3c5 42%, #a58d72), radial-gradient(circle at 65% 30%, rgba(255,255,255,.8), transparent 12%), radial-gradient(circle at 45% 50%, rgba(194,170,130,.35), transparent 20%); }
.art-timepiece { background: linear-gradient(145deg, #f4ead9, #c7b39d 35%, #8a6d47 100%), radial-gradient(circle at 45% 45%, rgba(247,243,235,.8), transparent 10%), radial-gradient(circle at 45% 45%, rgba(37,31,26,.82) 12%, transparent 13%), radial-gradient(circle at 45% 45%, rgba(175,139,77,.7) 19%, transparent 20%); }
.art-preowned { background: linear-gradient(145deg, #ece4db, #bba58d 38%, #5a4634 100%); }
.page-hero { padding: 72px 0 28px; }
.page-hero-copy { max-width: 760px; }
.page-hero-copy h1 { font-size: clamp(3rem, 5.5vw, 5.6rem); max-width: 12ch; }
.page-hero-copy p { max-width: 650px; color: var(--muted); font-size: 1.05rem; }
.section { padding: 68px 0; }
.centered { text-align:center; }
.narrow { max-width: 760px; margin-inline:auto; }
.section-header h2, .narrow h2, .narrow h1 { font-size: clamp(2.4rem, 4vw, 4rem); }
.section-header p { color: var(--muted); }
.collection-cards { display:grid; gap: 32px; }
.collection-card, .presentation-block {
  display:grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items:center;
  padding: 22px; border-radius: 36px; background: rgba(255,255,255,.5); border:1px solid rgba(34,29,24,.08); box-shadow: var(--shadow);
}
.collection-card.reverse { direction: rtl; }
.collection-card.reverse > * { direction:ltr; }
.collection-card .card-art, .presentation-block .card-art { min-height: 420px; border-radius: 26px; overflow:hidden; }
.collection-copy h3, .presentation-copy h2 { font-size: clamp(2.4rem, 3.5vw, 3.7rem); }
.collection-copy p, .presentation-copy p { color: var(--muted); max-width: 500px; }
.text-link {
  display:inline-flex; align-items:center; gap: 8px; color: var(--gold-deep); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem;
}
.text-link::after { content: '→'; }
.split-feature, .grid-two { display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.feature-panel, .feature-list, .mini-panel, .contact-panel, .contact-form-card {
  padding: 34px; border-radius: 32px; background: rgba(255,255,255,.5); border:1px solid rgba(34,29,24,.08); box-shadow: var(--shadow);
}
.feature-panel h2, .editorial-copy h2 { font-size: clamp(2.3rem, 4vw, 3.8rem); }
.feature-list { display:grid; gap: 18px; }
.feature-item { display:grid; grid-template-columns: 54px 1fr; gap: 16px; align-items:start; }
.feature-item span {
  width: 54px; height: 54px; border-radius: 50%; border:1px solid rgba(175,139,77,.4); display:grid; place-items:center; font-family:'Cormorant Garamond', serif; font-size:1.5rem; color: var(--gold-deep);
}
.feature-item p { margin:.3rem 0 0; color: var(--muted); }
.feature-item.compact { margin-bottom: 14px; }
.callout-band {
  margin: 28px 0 0; padding: 30px 0; background: linear-gradient(135deg, rgba(175,139,77,.12), rgba(255,255,255,.15)); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.callout-inner { display:flex; justify-content:space-between; gap: 24px; align-items:center; }
.callout-inner h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
.trio-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mini-panel h3 { font-family:'Cormorant Garamond', serif; font-size: 2rem; margin:0; }
.mini-panel p { color: var(--muted); }
.offset-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap: 34px; align-items:center; }
.editorial-copy p { color: var(--muted); max-width: 560px; }
.contact-grid-luxury { display:grid; grid-template-columns: .9fr 1.1fr; gap: 28px; }
.contact-panel h2, .contact-form-card h2 { font-size: 2.5rem; }
.contact-panel p { color: var(--muted); }
.contact-panel a { color: var(--ink); }
.luxury-form { margin-top: 16px; }
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom:14px; }
.form-grid.single { grid-template-columns: 1fr; }
.luxury-form input, .luxury-form select, .luxury-form textarea {
  width:100%; min-height:54px; padding: 14px 16px; border-radius: 18px; border:1px solid rgba(34,29,24,.12); background: rgba(255,255,255,.72); color: var(--ink); font: inherit;
}
.luxury-form textarea { min-height: 170px; resize: vertical; }
.form-status { margin-bottom: 16px; padding: 14px 16px; border-radius: 16px; background: rgba(175,139,77,.12); color: var(--gold-deep); }
.site-footer { margin-top: 60px; border-top:1px solid var(--line); background: rgba(255,255,255,.38); }
.footer-grid { padding: 38px 0; display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; }
.footer-brand { font-family:'Cormorant Garamond', serif; font-size:2rem; }
.footer-heading { text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; color: var(--gold-deep); margin-bottom:10px; }
.footer-copy { color: var(--muted); }
.footer-bottom { min-height: 52px; display:flex; justify-content:space-between; gap: 20px; align-items:center; border-top:1px solid var(--line); color: var(--muted); font-size:.9rem; }
.reveal { opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view { opacity:1; transform:none; }
.delay-1 { transition-delay: .12s; }
.delay-2 { transition-delay: .24s; }
@media (max-width: 980px) {
  .nav-shell { grid-template-columns: auto 1fr auto; }
  .main-nav, .nav-cta { display:none; }
  .menu-toggle { display:inline-flex; border:1px solid rgba(34,29,24,.12); border-radius:999px; padding:0 18px; min-height:44px; background: rgba(255,255,255,.52); text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; }
  .mobile-nav { display:none; padding: 0 24px 18px; }
  .mobile-nav.open { display:grid; gap:12px; }
  .hero-grid, .collection-card, .presentation-block, .split-feature, .grid-two, .offset-grid, .contact-grid-luxury, .footer-grid, .trio-grid { grid-template-columns: 1fr; }
  .portrait-card, .square-card { width:100%; }
  .offset-card { position:relative; right:auto; bottom:auto; margin-top:20px; }
  .hero-visual { min-height: auto; }
  .callout-inner, .utility-inner, .footer-bottom { flex-direction:column; align-items:flex-start; }
}
@media (max-width: 720px) {
  .shell { width: min(100% - 28px, 1180px); }
  .utility-links { gap:10px; }
  .hero-copy h1 { font-size: clamp(3rem, 13vw, 5rem); }
  .page-hero-copy h1 { font-size: clamp(2.5rem, 12vw, 4rem); }
  .form-grid { grid-template-columns: 1fr; }
  .feature-panel, .feature-list, .mini-panel, .contact-panel, .contact-form-card, .collection-card, .presentation-block { padding: 24px; }
}
