@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&family=Great+Vibes&display=swap');

:root{
  --paper:#f6efe4;
  --paper2:#fffaf2;
  --ink:#2b1a12;
  --soft:#7a6758;
  --gold:#b99157;
  --wood:#8a5f39;
  --line:rgba(43,26,18,.16);
  --dark:#17110d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Montserrat,Arial,sans-serif;line-height:1.7}
img{display:block;max-width:100%}
a{color:inherit}
.site-header{
  position:fixed;z-index:100;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 5vw;color:white;transition:.3s ease;
}
.site-header.scrolled,.page .site-header{background:rgba(255,250,242,.94);color:var(--ink);box-shadow:0 10px 40px rgba(0,0,0,.08);backdrop-filter:blur(14px)}
.brand{text-decoration:none;font-family:"Cormorant Garamond",serif;text-transform:uppercase;letter-spacing:.16em;font-weight:700;font-size:30px}
.nav{display:flex;gap:22px;align-items:center}
.nav a{text-decoration:none;text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:600}
.nav .button-link{border:1px solid currentColor;padding:10px 14px}
.mobile-note{display:none;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.hero{
  min-height:100vh;position:relative;display:grid;place-items:center;text-align:center;color:white;overflow:hidden;
  background:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.56)),var(--hero) center/cover no-repeat;
}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0,rgba(0,0,0,.28) 82%)}
.hero-inner{position:relative;z-index:2;width:min(980px,90vw);padding-top:80px}
.kicker{text-transform:uppercase;letter-spacing:.32em;color:var(--gold);font-size:13px;font-weight:700}
h1,h2,h3{font-family:"Cormorant Garamond",serif;line-height:1.02;margin:0 0 18px;font-weight:600}
.hero h1{font-size:clamp(68px,13vw,160px);text-transform:uppercase;letter-spacing:.07em}
.hero h2{font-size:clamp(30px,4.5vw,62px);font-weight:400}
.hero p{font-size:18px;max-width:760px;margin:0 auto 28px}
.btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:700;padding:14px 24px;border:1px solid var(--gold);background:transparent}
.btn.primary{background:var(--gold);color:white}
.btn.light{border-color:white;color:white}
.section{padding:95px 7vw}
.center{text-align:center;max-width:940px;margin:0 auto}
.center h2{font-size:clamp(42px,7vw,86px)}
.center p{font-size:18px;color:var(--soft)}
.divider{width:160px;margin:18px auto;border-top:1px solid var(--gold);position:relative}
.divider:after{content:"✦";position:absolute;left:50%;top:-14px;transform:translateX(-50%);background:var(--paper);padding:0 12px;color:var(--gold)}
.signature{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
.photo-frame{min-height:560px;position:relative;overflow:hidden;box-shadow:0 25px 80px rgba(0,0,0,.16)}
.photo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.8s ease}
.photo-frame:hover img{transform:scale(1.04)}
.card{background:rgba(255,250,242,.94);padding:56px;box-shadow:0 22px 90px rgba(0,0,0,.13);position:relative;z-index:2}
.signature .card{margin-left:-95px}
.card h2{font-size:clamp(40px,6vw,76px)}
.card p{color:var(--soft)}
.features{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--line);gap:1px}
.feature{background:var(--paper2);padding:35px 28px;min-height:225px}
.feature span{font-family:"Cormorant Garamond",serif;color:var(--gold);font-size:42px}
.feature h3{font-size:29px;margin-top:12px}
.feature p{color:var(--soft);font-size:14px}
.parallax{
  min-height:78vh;display:grid;place-items:center;text-align:center;color:white;
  background:linear-gradient(rgba(0,0,0,.16),rgba(0,0,0,.48)),var(--bg) center/cover fixed no-repeat;
}
.parallax h2{font-size:clamp(54px,9vw,118px);max-width:1050px}
.split{display:grid;grid-template-columns:.92fr 1.08fr;gap:58px;align-items:center}
.split.reverse{grid-template-columns:1.08fr .92fr}
.copy h2{font-size:clamp(42px,7vw,84px)}
.copy p{color:var(--soft);font-size:17px}
.stack{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stack img{width:100%;height:430px;object-fit:cover;box-shadow:0 16px 60px rgba(0,0,0,.14)}
.stack img:first-child{margin-top:55px}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:42px}
.time-card{background:var(--paper2);padding:34px;border-top:4px solid var(--gold);min-height:245px}
.time-card h3{font-size:34px}
.time-card p{color:var(--soft)}
.gallery{columns:4 245px;column-gap:16px}
.gallery img{width:100%;margin:0 0 16px;break-inside:avoid;cursor:pointer;box-shadow:0 10px 40px rgba(0,0,0,.08)}
.page-hero{
  min-height:68vh;display:grid;place-items:center;text-align:center;color:white;padding:145px 7vw 80px;
  background:linear-gradient(rgba(0,0,0,.20),rgba(0,0,0,.54)),var(--page-img) center/cover no-repeat;
}
.page-hero h1{font-size:clamp(58px,10vw,138px);letter-spacing:.04em}
.about-sheet{
  background:var(--paper2);border:1px solid var(--line);box-shadow:0 25px 90px rgba(0,0,0,.10);
  padding:62px;display:grid;grid-template-columns:1fr .92fr;gap:52px;position:relative;overflow:hidden
}
.about-sheet:before{content:"";position:absolute;inset:24px;border:1px solid rgba(185,145,87,.22);pointer-events:none}
.about-title h1{font-size:clamp(50px,7vw,96px);letter-spacing:.07em;text-transform:uppercase}
.script{font-family:"Great Vibes",cursive;font-size:88px;line-height:.9;color:#2d1409}
.about-sheet h3{font-size:26px;text-transform:uppercase;letter-spacing:.16em}
.about-sheet p{color:#3e3028}
.feature-list{columns:2;list-style:none;padding:0;margin:18px 0}
.feature-list li{margin:8px 0;color:#3e3028}
.feature-list li:before{content:"❧";color:var(--gold);margin-right:10px}
.about-collage{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.about-collage img{height:245px;width:100%;object-fit:cover}
.about-collage img:first-child{grid-column:1/3;height:360px}
.icon-panel{grid-column:1/3;border:1px solid var(--line);padding:26px;text-align:center}
.icon-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px;text-transform:uppercase;font-size:11px;letter-spacing:.12em}
.icon{padding:12px;border-left:1px solid var(--line)}
.icon:first-child{border-left:0}
.form{background:var(--paper2);padding:42px;display:grid;gap:15px;box-shadow:0 22px 80px rgba(0,0,0,.12)}
input,select,textarea{width:100%;padding:15px;border:1px solid var(--line);background:white;font:inherit;color:var(--ink)}
textarea{min-height:145px}
.footer{background:var(--dark);color:white;padding:52px 7vw;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.footer .brand{font-size:28px}
.small{font-size:13px;color:rgba(255,255,255,.72)}
@media(max-width:1000px){
  .nav{display:none}.mobile-note{display:block}
  .site-header{position:sticky;background:rgba(255,250,242,.96);color:var(--ink)}
  .signature,.split,.split.reverse,.about-sheet{grid-template-columns:1fr}
  .signature .card{margin-left:0}
  .features,.timeline{grid-template-columns:1fr 1fr}
  .about-collage img:first-child{height:280px}
  .parallax{background-attachment:scroll}
}
@media(max-width:650px){
  .section{padding:65px 6vw}
  .features,.timeline{grid-template-columns:1fr}
  .stack{grid-template-columns:1fr}
  .stack img:first-child{margin-top:0}
  .about-sheet{padding:34px}
  .icon-grid{grid-template-columns:1fr}
  .icon{border-left:0;border-top:1px solid var(--line)}
}


/* ===== Flashy Homepage Upgrade ===== */
.home-flashy .site-header {
  background:linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,0));
}

.home-flashy .hero-flash {
  min-height:100vh;
  position:relative;
  overflow:hidden;
  color:white;
  display:grid;
  align-items:center;
  padding:120px 7vw 70px;
  background:#111;
}

.hero-slider {
  position:absolute;
  inset:0;
  z-index:0;
}

.hero-slide {
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.08);
  animation:heroFade 24s infinite;
  background-position:center;
  background-size:cover;
}

.hero-slide:nth-child(1){animation-delay:0s}
.hero-slide:nth-child(2){animation-delay:6s}
.hero-slide:nth-child(3){animation-delay:12s}
.hero-slide:nth-child(4){animation-delay:18s}

@keyframes heroFade {
  0%{opacity:0;transform:scale(1.08)}
  8%{opacity:1}
  28%{opacity:1}
  36%{opacity:0;transform:scale(1)}
  100%{opacity:0;transform:scale(1.08)}
}

.hero-flash::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(circle at 78% 24%, rgba(185,145,87,.28), transparent 30%),
    linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.34), rgba(0,0,0,.18)),
    linear-gradient(0deg, rgba(0,0,0,.58), transparent 45%);
}

.hero-flash-inner {
  position:relative;
  z-index:2;
  width:min(840px,92vw);
}

.hero-flash h1 {
  font-size:clamp(72px,13vw,170px);
  letter-spacing:.075em;
  text-transform:uppercase;
  text-shadow:0 18px 55px rgba(0,0,0,.55);
}

.hero-flash h2 {
  font-size:clamp(32px,5vw,76px);
  font-weight:400;
}

.hero-flash p {
  max-width:720px;
  font-size:19px;
  color:rgba(255,255,255,.92);
}

.hero-badge {
  position:absolute;
  z-index:3;
  right:7vw;
  bottom:70px;
  width:230px;
  height:230px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  box-shadow:0 30px 100px rgba(0,0,0,.35);
}

.hero-badge span {
  font-family:"Cormorant Garamond",serif;
  font-size:34px;
  line-height:1;
}

.hero-badge small {
  display:block;
  margin-top:10px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:10px;
}

.flash-strip {
  position:relative;
  z-index:4;
  margin-top:-70px;
  padding:0 7vw;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.flash-tile {
  min-height:260px;
  position:relative;
  overflow:hidden;
  color:white;
  box-shadow:0 25px 80px rgba(0,0,0,.22);
}

.flash-tile img {
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
  transition:.75s ease;
}

.flash-tile:hover img {
  transform:scale(1.08);
}

.flash-tile::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(transparent,rgba(0,0,0,.72));
}

.flash-tile div {
  position:absolute;
  z-index:2;
  left:24px;
  right:24px;
  bottom:22px;
}

.flash-tile h3 {
  font-size:31px;
  margin:0 0 4px;
}

.flash-tile p {
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:13px;
}

.luxury-intro {
  position:relative;
  overflow:hidden;
}

.luxury-intro::before {
  content:"Rio Vista";
  position:absolute;
  right:-3vw;
  top:20px;
  font-family:"Great Vibes",cursive;
  font-size:190px;
  color:rgba(185,145,87,.12);
  transform:rotate(-5deg);
}

.showcase {
  display:grid;
  grid-template-columns:1fr 1.15fr 1fr;
  gap:22px;
  align-items:center;
}

.showcase img {
  width:100%;
  object-fit:cover;
  box-shadow:0 25px 90px rgba(0,0,0,.16);
}

.showcase .tall {
  height:690px;
}

.showcase .mid {
  height:520px;
}

.showcase-card {
  background:var(--paper2);
  padding:45px;
  margin:28px 0;
  box-shadow:0 20px 70px rgba(0,0,0,.10);
  text-align:center;
}

.showcase-card h2 {
  font-size:clamp(44px,6vw,82px);
}

.dark-feature {
  background:var(--dark);
  color:white;
  position:relative;
  overflow:hidden;
}

.dark-feature::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 20%,rgba(185,145,87,.18),transparent 35%);
}

.dark-grid {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:60px;
  align-items:center;
}

.dark-grid h2 {
  font-size:clamp(52px,8vw,104px);
}

.dark-grid p {
  color:rgba(255,255,255,.76);
  font-size:18px;
}

.dark-photo {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.dark-photo img {
  height:520px;
  width:100%;
  object-fit:cover;
}

.dark-photo img:nth-child(2) {
  margin-top:70px;
}

.moments-marquee {
  overflow:hidden;
  padding:24px 0;
  background:#2b1a12;
  color:var(--gold);
  white-space:nowrap;
  text-transform:uppercase;
  letter-spacing:.25em;
  font-size:13px;
  font-weight:700;
}

.moments-marquee div {
  display:inline-block;
  padding-left:100%;
  animation:marquee 28s linear infinite;
}

@keyframes marquee {
  from {transform:translateX(0)}
  to {transform:translateX(-100%)}
}

.home-cta {
  min-height:82vh;
  display:grid;
  place-items:center;
  text-align:center;
  color:white;
  background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.62)), url('assets/images/rio-vista-01.jpeg') center/cover fixed;
  padding:90px 7vw;
}

.home-cta h2 {
  font-size:clamp(58px,10vw,130px);
}

@media(max-width:1000px){
  .hero-badge{display:none}
  .flash-strip{grid-template-columns:1fr 1fr;margin-top:0;padding-top:22px}
  .showcase,.dark-grid{grid-template-columns:1fr}
  .showcase .tall,.showcase .mid,.dark-photo img{height:390px}
}

@media(max-width:620px){
  .flash-strip{grid-template-columns:1fr}
  .dark-photo{grid-template-columns:1fr}
  .dark-photo img:nth-child(2){margin-top:0}
  .home-cta{background-attachment:scroll}
}