:root {
  --navy: #071a24;
  --navy-soft: #0d2733;
  --ivory: #f3efe5;
  --paper: #faf8f2;
  --gold: #bda36a;
  --ink: #12232b;
  --muted: #718087;
  --line: rgba(243, 239, 229, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }

.site-header {
  position: absolute; z-index: 10; top: 0; left: 0; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 30px clamp(24px, 5vw, 76px); color: var(--ivory);
}
.brand { display: flex; align-items: center; gap: 16px; }
.brand-mark {
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid rgba(189,163,106,.75); color: var(--gold);
  font: 18px "Libre Caslon Display", Georgia, serif; letter-spacing: -1px;
}
.brand-copy { display: flex; flex-direction: column; gap: 4px; }
.brand-copy strong { font: 20px "Libre Caslon Display", Georgia, serif; letter-spacing: .1px; }
.brand-copy small { color: rgba(243,239,229,.55); font-size: 9px; letter-spacing: 2.8px; text-transform: uppercase; }
.header-contact { padding-bottom: 7px; border-bottom: 1px solid rgba(243,239,229,.35); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.header-contact span, .button span { margin-left: 12px; color: var(--gold); }

.hero {
  position: relative; overflow: hidden; min-height: 760px; height: 100vh;
  display: grid; grid-template-columns: minmax(0,1.5fr) minmax(320px,.5fr); align-items: center;
  gap: clamp(50px, 8vw, 130px); padding: 120px clamp(24px, 8vw, 130px) 80px; color: var(--ivory); background: var(--navy);
}
.hero-grid { position: absolute; inset: 0; opacity: .1; background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size: 90px 90px; mask-image: linear-gradient(to right, black, transparent 70%); }
.hero-glow { position: absolute; width: 650px; height: 650px; left: 38%; top: 15%; border-radius: 50%; background: radial-gradient(circle,rgba(65,107,115,.22),transparent 68%); }
.hero-content, .heritage-card { position: relative; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; color: var(--gold); font-size: 10px; font-weight: 600; letter-spacing: 2.7px; text-transform: uppercase; }
.eyebrow span { width: 32px; height: 1px; background: currentColor; }
h1, h2 { margin: 0; font-family: "Libre Caslon Display", Georgia, serif; font-weight: 400; }
h1 { max-width: 800px; font-size: clamp(58px, 7.2vw, 112px); line-height: .95; letter-spacing: -3px; }
h1 em, h2 em { color: var(--gold); font-weight: 400; }
.intro { max-width: 600px; margin: 36px 0 0 3px; color: rgba(243,239,229,.67); font-size: 16px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 35px; margin-top: 42px; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 17px 23px; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; transition: .25s ease; }
.button-primary { color: var(--navy); background: var(--ivory); }
.button-primary:hover { transform: translateY(-2px); background: #fff; }
.text-link { padding: 12px 0; color: rgba(243,239,229,.75); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; border-bottom: 1px solid rgba(243,239,229,.22); }
.text-link span { margin-left: 8px; color: var(--gold); }
.heritage-card { align-self: end; margin-bottom: 70px; padding: 35px; border: 1px solid rgba(189,163,106,.38); background: rgba(13,39,51,.55); backdrop-filter: blur(10px); }
.card-number { display: block; margin-bottom: 65px; color: rgba(189,163,106,.55); font: 12px "DM Sans", sans-serif; letter-spacing: 2px; }
.heritage-card p { margin: 0 0 15px; color: rgba(243,239,229,.45); font-size: 9px; letter-spacing: 2.2px; text-transform: uppercase; }
.heritage-card h2 { font-size: 25px; line-height: 1.35; }
.heritage-card h2 span { color: var(--gold); }
.card-rule { height: 1px; margin: 28px 0 17px; background: var(--line); }
.heritage-card small { color: rgba(243,239,229,.4); font-size: 9px; letter-spacing: 1.7px; text-transform: uppercase; }
.scroll-cue { position: absolute; bottom: 32px; left: clamp(24px, 5vw, 76px); display: flex; align-items: center; gap: 13px; color: rgba(243,239,229,.35); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; }
.scroll-cue span { display: block; width: 35px; height: 1px; background: var(--gold); }

.statement { padding: 120px clamp(24px, 8vw, 130px); background: var(--ivory); }
.section-label { margin: 0 0 38px; color: var(--muted); font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; }
.statement-copy { max-width: 940px; }
.statement-copy p { margin: 0; font: clamp(37px,5vw,68px)/1.17 "Libre Caslon Display",Georgia,serif; letter-spacing: -1.8px; }
.statement-copy em { color: var(--gold); }
.principles { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; margin-top: 90px; }
.principles div { display: flex; align-items: baseline; gap: 20px; padding-top: 20px; border-top: 1px solid rgba(18,35,43,.18); }
.principles span { color: var(--gold); font-size: 9px; }
.principles strong { font: 18px "Libre Caslon Display",Georgia,serif; }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 120px clamp(24px, 8vw, 130px); color: var(--ivory); background: var(--navy-soft); }
.eyebrow.dark { margin-bottom: 35px; }
.contact h2 { font-size: clamp(48px,6vw,78px); line-height: 1.03; letter-spacing: -2px; }
.contact-details { display: grid; grid-template-columns: 1.4fr 1fr; gap: 45px; align-content: center; }
.contact-group { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.contact-group p { margin: 0 0 17px; color: var(--gold); font-size: 9px; letter-spacing: 2.2px; text-transform: uppercase; }
.contact-group a { color: rgba(243,239,229,.72); font-size: 14px; border-bottom: 1px solid transparent; transition: .2s; }
.contact-group a:hover { color: white; border-color: var(--gold); }

footer { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 32px clamp(24px, 5vw, 76px); color: var(--ivory); background: #051219; border-top: 1px solid rgba(243,239,229,.08); }
.reconstruction { display: flex; align-items: center; gap: 15px; }
.pulse { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(189,163,106,.5); animation: pulse 2s infinite; }
.reconstruction strong { font: 15px "Libre Caslon Display",Georgia,serif; }
.reconstruction p { margin: 4px 0 0; color: rgba(243,239,229,.42); font-size: 10px; letter-spacing: .3px; }
.copyright { color: rgba(243,239,229,.32); font-size: 9px; letter-spacing: .8px; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(189,163,106,0); } 100% { box-shadow: 0 0 0 0 rgba(189,163,106,0); } }

@media (max-width: 900px) {
  .hero { height: auto; min-height: 900px; grid-template-columns: 1fr; gap: 55px; padding-top: 165px; }
  .heritage-card { align-self: auto; margin: 0; max-width: 480px; }
  .card-number { margin-bottom: 35px; }
  .contact { grid-template-columns: 1fr; }
  .contact-details { margin-top: 10px; }
}
@media (max-width: 620px) {
  .site-header { padding-top: 22px; }
  .brand-copy strong { font-size: 15px; }
  .brand-copy small, .header-contact { display: none; }
  .hero { min-height: auto; padding-bottom: 95px; }
  h1 { font-size: clamp(50px,15vw,70px); letter-spacing: -2px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 17px; }
  .statement { padding-top: 85px; padding-bottom: 85px; }
  .principles { grid-template-columns: 1fr; margin-top: 60px; }
  .contact { padding-top: 85px; padding-bottom: 85px; }
  .contact-details { grid-template-columns: 1fr; }
  footer { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .pulse { animation: none; } }