:root{
  --ink:#040b14;
  --navy:#071321;
  --navy-2:#0b1d31;
  --navy-3:#102642;
  --gold:#d6a63c;
  --gold-2:#f1d37c;
  --gold-soft:#e8c56f;
  --cream:#f4ead8;
  --mist:#b6bdc8;
  --line:rgba(226,190,94,.22);
  --shadow:0 30px 80px rgba(0,0,0,.38);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 12% 6%, rgba(26,64,99,.24), transparent 28%),
    radial-gradient(circle at 80% 20%, rgba(88,62,18,.10), transparent 25%),
    var(--ink);
  color:var(--cream);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(255,226,151,.8) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(255,255,255,.35) 0 1px, transparent 1.1px);
  background-size:130px 130px, 220px 220px;
  background-position:0 0, 60px 40px;
  opacity:.22;
  z-index:-3;
}

.starfield{
  position:fixed;
  inset:-20vh -20vw;
  pointer-events:none;
  z-index:-2;
  opacity:.28;
  animation:drift 38s linear infinite;
}
.starfield-a{
  background-image:radial-gradient(circle, rgba(241,211,124,.85) 0 1px, transparent 1.5px);
  background-size:170px 170px;
}
.starfield-b{
  background-image:radial-gradient(circle, rgba(255,255,255,.5) 0 .8px, transparent 1.2px);
  background-size:250px 250px;
  animation-duration:58s;
  animation-direction:reverse;
}
@keyframes drift{to{transform:translate3d(80px,60px,0)}}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:2rem;
  padding:1.15rem clamp(1.25rem,4vw,4rem);
  background:rgba(4,11,20,.72);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{
  display:flex;
  align-items:center;
  gap:.65rem;
  font-family:"Cormorant Garamond",serif;
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:.03em;
}
.brand-mark{color:var(--gold-2);font-size:1.05rem}
.nav{display:flex;gap:2rem;font-size:.9rem;color:#d8dde6}
.nav a{position:relative}
.nav a:after{
  content:"";
  position:absolute;left:0;right:100%;bottom:-.45rem;height:1px;background:var(--gold);
  transition:.25s ease;
}
.nav a:hover:after{right:0}
.site-header>.btn{justify-self:end}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:999px;
  padding:.95rem 1.45rem;
  font-weight:600;
  letter-spacing:.015em;
  transition:.25s ease;
  cursor:pointer;
}
.btn-small{padding:.65rem 1.05rem;font-size:.88rem}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#10131a;
  box-shadow:0 14px 34px rgba(214,166,60,.17);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(214,166,60,.27)}
.btn-ghost{border-color:rgba(241,211,124,.35);color:var(--gold-2)}
.btn-ghost:hover{background:rgba(241,211,124,.08)}
.text-link{color:var(--gold-2);font-weight:600}
.text-link span{display:inline-block;transition:.25s}
.text-link:hover span{transform:translateX(4px)}

.hero{
  min-height:90vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:4vw;
  padding:clamp(4rem,8vw,8rem) clamp(1.25rem,5vw,6rem) 5rem;
  max-width:1600px;
  margin:0 auto;
}
.eyebrow{
  margin:0 0 1rem;
  color:var(--gold-2);
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.2em;
}
h1,h2,h3,.footer-brand{font-family:"Cormorant Garamond",serif}
h1{
  margin:0;
  font-size:clamp(4rem,7.8vw,8.2rem);
  line-height:.82;
  font-weight:600;
  letter-spacing:-.035em;
}
h1 span{
  display:inline-block;
  margin-top:.2em;
  color:var(--gold-2);
  text-shadow:0 0 40px rgba(241,211,124,.08);
}
.hero-lede{
  max-width:710px;
  margin:2rem 0 0;
  color:#c4cbd4;
  font-size:clamp(1rem,1.5vw,1.22rem);
  line-height:1.8;
}
.hero-actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:2rem}
.microcopy{color:#7f8997;font-size:.78rem;margin-top:1.3rem}
.hero-art{position:relative;max-width:720px;justify-self:end}
.hero-art img{
  position:relative;z-index:2;
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.55));
  border-radius:30px;
}
.halo{
  position:absolute;inset:10%;
  background:radial-gradient(circle,rgba(231,187,77,.18),rgba(56,91,135,.08) 40%,transparent 70%);
  filter:blur(20px);z-index:1;
}

.statement{
  max-width:1050px;
  margin:0 auto;
  padding:8rem 1.5rem 9rem;
  text-align:center;
}
.statement>p:first-child{
  color:var(--gold-2);text-transform:uppercase;font-size:.78rem;letter-spacing:.22em;font-weight:700
}
.statement h2{
  margin:.35rem 0 1.3rem;
  font-size:clamp(3rem,6vw,6rem);
  line-height:.95;
  font-weight:600;
}
.statement h2 em{color:var(--gold-2);font-weight:500}
.statement-copy{max-width:760px;margin:auto;color:#aeb7c3;font-size:1.08rem;line-height:1.85}

.portraits{
  padding:7rem clamp(1.25rem,5vw,5.5rem);
  background:linear-gradient(180deg,rgba(10,26,45,.82),rgba(4,11,20,.96));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section-heading{max-width:900px;margin:0 auto 3rem;text-align:center}
.section-heading h2{
  margin:.3rem 0 1rem;
  font-size:clamp(2.8rem,5vw,5rem);
  line-height:1;
}
.section-heading>p:last-child{color:#aeb7c3;line-height:1.75}
.portrait-visual{
  max-width:1380px;margin:0 auto 3.2rem;
  border:1px solid rgba(226,190,94,.22);
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.cards{
  max-width:1380px;margin:auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
}
.card{
  position:relative;
  min-height:430px;
  padding:2.2rem;
  border:1px solid rgba(226,190,94,.18);
  background:linear-gradient(180deg,rgba(15,34,56,.82),rgba(7,19,33,.8));
  border-radius:24px;
  overflow:hidden;
  transition:.3s ease;
}
.card:before{
  content:"";position:absolute;inset:auto -20% -45% auto;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(214,166,60,.12),transparent 67%);
}
.card:hover{transform:translateY(-6px);border-color:rgba(241,211,124,.4)}
.card-number{color:var(--gold-2);font-size:.72rem;letter-spacing:.18em}
.card h3{font-size:2rem;margin:.7rem 0 1rem}
.card p,.card li{color:#adb7c4;line-height:1.7}
.card ul{padding-left:1.2rem;margin:1.4rem 0 2rem}
.card-link{position:absolute;left:2.2rem;bottom:2rem;color:var(--gold-2);font-weight:600}

.process{padding:8rem clamp(1.25rem,5vw,5.5rem)}
.steps{
  max-width:1380px;margin:auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.step{padding:2rem 2rem 0 0}
.step span{color:var(--gold-2);font-size:.74rem;letter-spacing:.18em}
.step h3{font-size:1.8rem;margin:.8rem 0}
.step p{color:#9fa9b6;line-height:1.75}

.keepsakes{padding:3rem clamp(1.25rem,5vw,5.5rem) 8rem}
.keepsake-panel{
  max-width:1380px;margin:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;
  padding:clamp(2rem,5vw,5rem);
  background:
    linear-gradient(135deg,rgba(23,48,79,.92),rgba(8,19,33,.96)),
    radial-gradient(circle at 80% 20%,rgba(214,166,60,.13),transparent 35%);
  border:1px solid rgba(226,190,94,.24);
  border-radius:30px;
  box-shadow:var(--shadow);
}
.keepsake-panel h2{font-size:clamp(3rem,5vw,5rem);line-height:.96;margin:.3rem 0 1.2rem}
.keepsake-panel>div>p:last-child{color:#b5bec9;line-height:1.85}
.keepsake-options{display:grid;gap:1rem;align-content:center}
.option{
  padding:1.7rem 1.8rem;
  border:1px solid rgba(226,190,94,.18);
  background:rgba(4,11,20,.36);
  border-radius:20px;
}
.option-tag{
  display:inline-block;padding:.35rem .65rem;border-radius:999px;
  background:rgba(214,166,60,.1);color:var(--gold-2);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em
}
.option h3{font-size:1.7rem;margin:.7rem 0 .5rem}
.option p{margin:0;color:#9fa9b6;line-height:1.6}

.about{
  padding:8rem clamp(1.25rem,5vw,5.5rem);
  background:#09131f;
  border-top:1px solid rgba(255,255,255,.05);
}
.about-grid{max-width:1380px;margin:auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:5rem}
.about-title h2{font-size:clamp(3rem,5vw,5rem);line-height:.96;margin:.3rem 0}
.about-copy>p{color:#b5bec9;font-size:1.05rem;line-height:1.9;margin-top:0}
.standards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem}
.standards>div{padding-top:1rem;border-top:1px solid var(--line)}
.standards strong{display:block;font-family:"Cormorant Garamond",serif;font-size:1.55rem;color:var(--cream)}
.standards span{display:block;color:#8f9aa7;font-size:.84rem;margin-top:.35rem}

.begin{
  padding:8rem 1.25rem;
  background:
    radial-gradient(circle at 50% 10%,rgba(241,211,124,.12),transparent 30%),
    linear-gradient(180deg,#09131f,#030912);
}
.begin-inner{max-width:900px;margin:auto;text-align:center}
.begin h2{font-size:clamp(3rem,6vw,5.5rem);line-height:.96;margin:.35rem 0 1.2rem}
.begin-inner>p:not(.eyebrow):not(.form-note){color:#b0bac6;line-height:1.8;max-width:720px;margin:0 auto 2rem}
.interest-form{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  max-width:780px;margin:2.5rem auto 0;text-align:left;
}
.interest-form label{display:grid;gap:.45rem;color:#cdd3db;font-size:.8rem}
.interest-form label:nth-child(3){grid-column:1/-1}
input,select{
  width:100%;
  border:1px solid rgba(226,190,94,.18);
  background:#0b1828;color:var(--cream);
  border-radius:12px;padding:1rem 1rem;
  font:inherit;outline:none;
}
input:focus,select:focus{border-color:rgba(241,211,124,.58);box-shadow:0 0 0 3px rgba(214,166,60,.08)}
.interest-form button{grid-column:1/-1;justify-self:center;margin-top:.5rem}
.form-note{font-size:.75rem;color:#7f8997;margin-top:1rem}

.footer{
  padding:3.5rem clamp(1.25rem,5vw,5.5rem);
  display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;
  border-top:1px solid rgba(255,255,255,.06);
  background:#02070d;
}
.footer-brand{font-size:1.8rem;color:var(--gold-2)}
.footer>div>p{color:#808b99;max-width:530px;line-height:1.7}
.footer-links{display:flex;gap:1.2rem;flex-wrap:wrap;align-content:start;justify-content:flex-end;color:#bfc6cf;font-size:.88rem}
.footer-legal{grid-column:1/-1;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.05);display:grid;grid-template-columns:auto 1fr;gap:2rem}
.footer-legal p{font-size:.72rem;color:#687482;margin:0;line-height:1.6}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}
.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}

@media (max-width:1000px){
  .site-header{grid-template-columns:1fr auto}
  .nav{display:none}
  .hero{grid-template-columns:1fr;padding-top:5rem}
  .hero-art{justify-self:center;max-width:650px}
  .cards{grid-template-columns:1fr}
  .card{min-height:320px}
  .steps{grid-template-columns:1fr 1fr}
  .keepsake-panel,.about-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .site-header{padding:.9rem 1rem}
  .brand-text{font-size:1rem}
  h1{font-size:clamp(3.7rem,18vw,6rem)}
  .hero{min-height:auto;padding:4rem 1.15rem 3.5rem}
  .hero-copy{text-align:center}
  .hero-actions{justify-content:center}
  .hero-art{margin-top:.5rem}
  .statement{padding:5rem 1.15rem}
  .portraits,.process,.about{padding:5rem 1.15rem}
  .keepsakes{padding:2rem 1.15rem 5rem}
  .steps{grid-template-columns:1fr}
  .step{padding-right:0}
  .standards{grid-template-columns:1fr}
  .interest-form{grid-template-columns:1fr}
  .interest-form label:nth-child(3){grid-column:auto}
  .interest-form button{grid-column:auto}
  .footer{grid-template-columns:1fr;padding:2.5rem 1.15rem}
  .footer-links{justify-content:flex-start}
  .footer-legal{grid-template-columns:1fr}
}