@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Montserrat:wght@300;400;500;600;700&display=swap');
:root{--black:#0b0907;--ink:#17110d;--cream:#f4ede1;--sand:#d9c5a3;--gold:#c99a45;--rust:#7b2e1f;--line:rgba(201,154,69,.35)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--cream);font-family:Montserrat,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit}.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:200;background:#fff;color:#000;padding:10px}
header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px 4vw;background:linear-gradient(#070605e8,transparent);transition:.3s}
header.scrolled{background:#0b0907eb;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{font-family:Cinzel;letter-spacing:3px;font-weight:700;font-size:18px}nav{display:flex;gap:22px;font-size:12px;letter-spacing:1.5px}nav a:hover{color:var(--gold)}
.top-social{display:flex;gap:8px;align-items:center}
.icon{min-height:42px;padding:0 14px;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;gap:7px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.6px;background:rgba(11,9,7,.92);box-shadow:0 6px 18px rgba(0,0,0,.3);transition:.25s}
.icon strong{font-size:14px;color:var(--gold)}
.icon:hover{background:var(--gold);color:#111;transform:translateY(-2px)}
.icon:hover strong{color:#111}
.hero{min-height:100svh;position:relative;display:flex;align-items:flex-end;background-image:url('../images/hero-1200.webp');background-position:center 20%;background-size:cover}
@media(min-width:1000px){.hero{background-image:url('../images/hero-1800.webp');background-position:center 18%}}
@media(max-width:700px){.hero{background-image:url('../images/hero-720.webp')}}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#060504e8 0%,#06050480 43%,#06050418 75%),linear-gradient(0deg,#0b0907 0%,transparent 33%)}
.hero-content{position:relative;z-index:2;padding:150px 6vw 90px;max-width:920px}.kicker{color:var(--gold);letter-spacing:6px;font-size:12px;font-weight:700;text-transform:uppercase}
h1,h2,h3{font-family:Cinzel,serif}h1{font-size:clamp(54px,8vw,116px);line-height:.86;margin:18px 0 22px;text-shadow:0 5px 30px #0008}h2{font-size:clamp(36px,5vw,68px);line-height:1.02;margin:12px 0 20px}h3{font-size:25px;margin:12px 0}
.lead{font-family:Cinzel;font-size:clamp(18px,2vw,27px);letter-spacing:1px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-block;padding:15px 22px;border:1px solid var(--gold);font-weight:700;font-size:13px;letter-spacing:.7px;background:var(--gold);color:#17110d;transition:.25s}.btn:hover{transform:translateY(-2px)}.btn.ghost{background:#09080670;color:var(--cream)}
.social-rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:40;display:grid;gap:10px}.social-rail a{width:46px;height:46px;border-radius:50%;background:#0b0907d9;border:1px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:800}.social-rail a:hover{background:var(--gold);color:#111}
.ornament{height:54px;display:flex;align-items:center;gap:18px;justify-content:center;background:var(--cream);color:var(--rust)}.ornament:before,.ornament:after{content:"";width:120px;height:1px;background:var(--rust)}.diamond{width:10px;height:10px;border:1px solid var(--rust);transform:rotate(45deg)}
section{padding:100px 6vw}.intro{background:var(--cream);color:#21160f;text-align:center}.intro p{max-width:820px;margin:0 auto;line-height:1.9;font-size:17px}
.feature{min-height:82vh;position:relative;display:grid;align-items:end;background:url('../images/rancho-3.webp') center/cover no-repeat}.feature:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0b0907e8 0%,#0b09072a 62%),linear-gradient(90deg,#0b09077d,transparent)}.feature-inner{position:relative;z-index:2;max-width:760px;padding-bottom:20px}.feature p{font-size:17px;line-height:1.8}
.services{background:#120f0c}.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:40px}.section-head p{max-width:520px;color:#c9bcaa;line-height:1.7}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.card{position:relative;min-height:380px;overflow:hidden;border:1px solid var(--line);display:flex;align-items:end;padding:26px;background:#1d1712;background-size:cover;background-position:center}.card:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#080604f2,#08060405 70%);z-index:1}.bg1{background-image:url('../images/rancho-3.webp')}.bg2{background-image:url('../images/rancho-7.webp')}.bg3{background-image:url('../images/rancho-8.webp')}.bg4{background-image:url('../images/rancho-4.webp')}.card-content{position:relative;z-index:2}.num{color:var(--gold);font-family:Cinzel;font-size:13px;letter-spacing:2px}.card p{color:#ddd0be;line-height:1.55;font-size:14px}
.photo-story{background:var(--cream);color:#21160f}.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}.photo-stack{display:grid;grid-template-columns:1fr 1fr;gap:12px}.photo-stack img{width:100%;height:100%;min-height:620px;object-fit:cover}.story{display:flex;flex-direction:column;justify-content:center;padding:50px}.story p{line-height:1.9}.story .btn{align-self:flex-start}
.gallery-section{background:#0e0c0a}.gallery-grid{columns:3 280px;column-gap:12px}.gitem{display:block;width:100%;padding:0;margin:0 0 12px;border:0;background:none;break-inside:avoid;cursor:pointer;overflow:hidden}.gitem img{width:100%;display:block;transition:.5s}.gitem:hover img{transform:scale(1.035);filter:brightness(1.05)}
.booking{text-align:center;background:#0b0907}.booking-inner{max-width:850px;margin:auto}.booking p{line-height:1.8;color:#ddd0be}.contact-strip{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}.contact-strip a{padding:14px 18px;border:1px solid var(--line);min-width:150px}.contact-strip a:hover{border-color:var(--gold);color:var(--gold)}
.contact-form{max-width:760px;margin:42px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}.contact-form .full{grid-column:1/-1}.contact-form label{display:block;font-size:12px;letter-spacing:1px;margin-bottom:6px;color:#d4c4af}.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:14px;border:1px solid var(--line);background:#120f0c;color:#fff;border-radius:0}.contact-form textarea{min-height:130px;resize:vertical}.form-note{grid-column:1/-1;color:#a9947c;font-size:12px;line-height:1.6}
footer{padding:32px 5vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:#9c8c78;font-size:12px}.mobile-cta{display:none}
.lightbox{position:fixed;inset:0;background:#000e;z-index:100;display:none;place-items:center;padding:30px}.lightbox.open{display:grid}.lightbox img{max-width:94vw;max-height:90vh;object-fit:contain}.close{position:absolute;right:22px;top:18px;background:none;border:0;color:white;font-size:36px;cursor:pointer}
.reveal{opacity:0;transform:translateY(22px);transition:.7s ease}.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
@media(max-width:980px){nav{display:none}.cards{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}.photo-stack img{min-height:440px}.social-rail{display:none}}
@media(max-width:620px){

    header{
        padding:14px 18px;
    }

    .logo{
        font-size:14px;
    }

    .top-social{
        gap:5px;
    }

    .icon{
        min-height:36px;
        padding:0 10px;
        font-size:0;
    }

    .icon strong{
        font-size:12px;
    }

    .hero{
        background-position:60% center;
    }

    .hero-content{
        padding:120px 22px 86px;
    }

    section{
        padding:72px 22px;
    }

    /* SECTION HEADINGS */
    .section-head{
        display:block;
    }

    .section-head p{
        max-width:100%;
        margin-top:20px;
        font-size:16px;
        line-height:1.7;
    }

    .section-head h2{
        font-size:42px;
        line-height:1;
        margin-bottom:10px;
    }

    h1{
        font-size:52px;
    }

    /* SERVICE CARDS */
    .cards{
        grid-template-columns:1fr;
    }

    .card{
        min-height:420px;
    }

    /* PHOTO STORY / QUINCEAÑERA SECTION */
    .photo-story{
        padding:0;
        background:var(--cream);
    }

    .photo-story .split{
        display:block;
    }

    .photo-story .photo-stack{
        display:block;
        width:100%;
    }

    .photo-story .photo-stack img{
        width:100%;
        height:auto;
        min-height:0;
        display:block;
        object-fit:cover;
    }

    /* Hide second photo on mobile */
    .photo-story .photo-stack img:nth-child(2){
        display:none;
    }

    .photo-story .story{
        background:var(--cream);
        color:#21160f;
        padding:34px 22px 44px;
    }

    .photo-story .story .kicker{
        color:var(--gold);
        line-height:1.5;
    }

    .photo-story .story h2{
        font-size:42px;
        line-height:1.02;
        margin-top:14px;
        margin-bottom:24px;
    }

    .photo-story .story p{
        font-size:17px;
        line-height:1.75;
        color:#2b2119;
        margin-bottom:22px;
    }

    .photo-story .story .btn{
        margin-top:8px;
    }

    /* GALLERY */
    .gallery-grid{
        columns:2 150px;
    }

    /* CONTACT FORM */
    .contact-form{
        grid-template-columns:1fr;
    }

    .contact-form .full{
        grid-column:auto;
    }

    /* FOOTER */
    footer{
        padding-bottom:88px;
        display:block;
    }

    /* MOBILE BOTTOM BUTTONS */
    .mobile-cta{
        display:grid;
        grid-template-columns:1fr 1fr;
        position:fixed;
        z-index:60;
        bottom:0;
        left:0;
        right:0;
        background:#0b0907;
        border-top:1px solid var(--line);
    }

    .mobile-cta a{
        padding:15px;
        text-align:center;
        font-size:12px;
        font-weight:800;
    }

    .mobile-cta a:first-child{
        background:var(--gold);
        color:#111;
    }
}