@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');
:root{
    --navy:#102b46;
    --navy2:#183d5c;
    --gold:#d9ad57;
    --cream:#f7f5ef;
    --ink:#172b3a;
    --muted:#65727b;
    --line:#e3e5e4;
    --white:#fff;
    --shadow:0 18px 50px rgba(16,43,70,.12)
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;color:var(--ink);
    background:#fff;
    font-family:"DM Sans",Arial,sans-serif;line-height:1.65
}
img{
    display:block;
    width:100%;
    object-fit:cover
}
a{
    color:inherit;text-decoration:none
}
.site-header{
    min-height:78px;
    padding:0 clamp(20px,5vw,76px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    background:#fff;
    border-bottom:1px solid #edf0f0;
    position:relative;
    z-index:10
}
.brand{
    font-weight:700;
    letter-spacing:-.6px;
    font-size:1.25rem;
    display:inline-flex;
    align-items:center;
    gap:7px;
    white-space:nowrap
}
.brand-mark{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:9px;
    background:var(--navy);
    color:var(--gold);
    font-family:"Playfair Display",serif;
    font-size:1.2rem
}
.brand-dot{
    color:#b88b37;
    margin-left:-7px
}
.main-nav{
    display:flex;
    align-items:center;
    gap:clamp(12px,1.8vw,27px)
}
.main-nav a{
    font-size:.83rem;
    color:#465663;
    font-weight:600;
    padding:28px 0 24px;
    border-bottom:3px solid transparent;
    white-space:nowrap
}
.main-nav a:hover,.main-nav a.active{
    color:var(--navy);
    border-color:var(--gold)
}
.menu-toggle{
    display:none;
    border:0;
    background:var(--navy);
    color:white;
    border-radius:8px;
    padding:8px 12px;
    font-size:1.2rem
}
.hero,.page-hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:var(--navy);
    color:white
}
.hero{
    min-height:600px;
    display:flex;
    align-items:center;
    padding:72px clamp(22px,9vw,140px)
}
.hero-image,.page-hero>img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:-2
}
.hero-image{
    object-position:center 46%
}
.hero-shade,.page-hero-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(7,24,41,.88) 0%,rgba(7,24,41,.58) 48%,rgba(7,24,41,.10) 100%);
    z-index:-1
}
.hero-content{
    max-width:660px
}
.eyebrow{
    margin:0 0 13px;
    color:#b88b37;
    font-size:.73rem;
    font-weight:700;
    letter-spacing:2px
}
.hero h1,.page-hero h1{
    font-family:"Playfair Display",Georgia,serif;line-height:1.05;
    letter-spacing:-1.5px;
    font-size:clamp(3.1rem,6.4vw,5.7rem);
    margin:0 0 22px
}
.hero h1 span{
    color:#f0cc7f
}
.hero-content>p:not(.eyebrow),.page-hero-content>p:not(.eyebrow){
    font-size:1.05rem;
    max-width:510px;
    color:#eef1f3;
    margin:0 0 30px
}
.button{
    display:inline-flex;
    gap:18px;
    align-items:center;
    justify-content:center;
    padding:13px 20px;
    border-radius:6px;
    font-size:.9rem;
    font-weight:700;
    transition:transform .2s,background .2s
}
.button:hover{
    transform:translateY(-2px)
}
.button-gold{
    background:var(--gold);
    color:var(--navy)
}
.button-dark{
    background:var(--navy);
    color:#fff
}
.hero-stamp{
    position:absolute;
    right:clamp(24px,8vw,120px);
    bottom:48px;
    border:1px solid rgba(255,255,255,.6);
    border-radius:50%;
    width:105px;
    height:105px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    transform:rotate(9deg);
    background:rgba(13,37,59,.25)
}
.hero-stamp span{
    font-family:"Playfair Display",serif;
    font-size:2rem;
    line-height:1
}
.hero-stamp small{
    font-size:.75rem;
    letter-spacing:1px
}
.section-wrap{
    width:min(1160px,calc(100% - 44px));
    margin-inline:auto
}
.intro{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:end;
    padding-top:82px;
    padding-bottom:44px
}
.section-heading h2,.living-copy h2,.cta h2,.facts-inner h2,.bottom-callout h2{
    font-family:"Playfair Display",Georgia,serif;color:var(--navy);
    font-size:clamp(2rem,3.5vw,3rem);
    line-height:1.14;
    margin:0
}
.intro-copy{
    margin:0;
    color:var(--muted);
    font-size:1rem
}
.feature-grid{
    display:grid;
    grid-template-columns:1.25fr 1fr 1fr;
    grid-template-rows:330px;
    gap:18px;padding-bottom:88px
}
.feature-card{
    position:relative;
    display:block;
    overflow:hidden;
    border-radius:10px;
    background:var(--navy);
    color:#fff;
    min-height:270px
}
.feature-card img{
    height:100%;
    position:absolute;
    inset:0;
    transition:transform .5s
}
.feature-card:hover img{
    transform:scale(1.05)
}
.card-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,rgba(7,24,41,.86),rgba(7,24,41,0) 70%)
}
.feature-label{
    position:absolute;
    left:23px;
    bottom:91px;
    font-size:.68rem;
    letter-spacing:1.7px;
    color:#f1cc7a;
    font-weight:700
}
.feature-title{
    position:absolute;
    left:23px;
    right:18px;
    bottom:22px;
    font-family:"Playfair Display",Georgia,serif;font-size:1.42rem;line-height:1.2
}
.feature-title b{
    float:right;font-family:Arial;
    font-size:1rem
}
.quick-facts{
    background:var(--cream);
    padding:60px 0
}
.facts-inner{
    display:grid;
    grid-template-columns:1.25fr repeat(4,1fr);
    gap:25px;
    align-items:start
}
.facts-inner h2{
    font-size:2rem
}
.facts-inner>div>p:last-child{
    font-size:.88rem;
    color:var(--muted)
}
.fact{
    border-left:1px solid #d7d7d0;
    padding-left:18px
}
.fact-icon{
    font-size:1.3rem;
    color:#b88b37;
    font-weight:700
}
.fact h3{
    font-size:.95rem;
    margin:7px 0 2px;
    color:var(--navy)
}
.fact p{
    font-size:.82rem;
    color:var(--muted);
    margin:0
}
.living{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
    padding-top:90px;
    padding-bottom:90px
}
.living-image{
    height:400px;
    overflow:hidden;
    border-radius:10px
}
.living-image img{
    height:100%
}
.living-copy>p:not(.eyebrow){
    color:var(--muted);
    margin:20px 0
}
.text-link{
    font-weight:700;
    font-size:.9rem;
    color:var(--navy);
    display:inline-flex;
    gap:10px;
    align-items:center
}
.text-link span{
    color:#b88b37
}
.cta{
    padding:38px 42px;
    background:#f6f2e8;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-bottom:80px
}
.cta h2{
    font-size:2rem;
    max-width:650px
}
.site-footer{
    padding:35px 22px 30px;
    text-align:center;
    background:var(--navy);
    color:#e7edf1
}
.brand-footer{
    color:white;
    justify-content:center
}
.site-footer p{
    margin:12px 0 0;
    font-size:.85rem
}
.footer-small{
    color:#aebdc8!important;
    font-size:.75rem!important
}
.page-hero{
    min-height:390px;
    display:flex;
    align-items:center;
    padding:70px clamp(22px,9vw,140px)
}
.page-hero>img{
    object-position:center 48%
}
.page-hero-shade{
    background:linear-gradient(90deg,rgba(7,24,41,.88),rgba(7,24,41,.35))
}
.page-hero-content{
    max-width:760px
}
.page-hero h1{
    font-size:clamp(2.9rem,5vw,4.5rem)
}
.page-hero-content>p:not(.eyebrow){
    max-width:600px
}
.content-section{
    padding-top:75px;
    padding-bottom:80px
}
.section-heading{
    max-width:760px;
    margin-bottom:32px
}
.section-lead{
    color:var(--muted);
    margin:15px 0 0
}
.content-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px
}
.info-card{
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    background:white;
    box-shadow:0 6px 20px rgba(16,43,70,.04)
}
.info-card>img{
    height:255px
}
.info-card-body{
    padding:22px 24px 25px
}
.tag{
    display:inline-block;
    text-transform:uppercase;
    letter-spacing:1.3px;
    font-size:.68rem;
    font-weight:700;
    color:#9b7226
}
.info-card h3,.market-card h3,.practical-card h3{font-family:"Playfair Display",Georgia,serif;
    color:var(--navy);
    font-size:1.45rem;margin:7px 0 8px;
    line-height:1.2
}
.info-card p,.market-card p,.practical-card p{
    color:var(--muted);
    font-size:.91rem;
    margin:0
}
.quote-band{
    padding:66px 0;
    background:var(--cream)
}
.quote-band .section-wrap{
    max-width:820px
}
.quote-band h2{
    font-family:"Playfair Display",Georgia,serif;font-size:clamp(2rem,4vw,3rem);
    line-height:1.15;
    color:var(--navy);
    margin:0 0 18px
}
.quote-band p:last-child{
    color:var(--muted);
    max-width:720px
}.bottom-callout{
    padding-top:50px;
    padding-bottom:65px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px
}
.bottom-callout h2{
    font-size:2rem
}.tip-strip{
    display:flex;
    align-items:center;
    gap:22px;
    padding:23px 26px;
    border:1px solid #e9e1d1;
    background:#fbf8f1;
    border-radius:10px;
    margin-bottom:75px
}
.tip-icon{
    color:#b88b37;
    font-size:2rem
}
.tip-strip h3{
    margin:0;
    color:var(--navy)
}
.tip-strip p{
    margin:5px 0 0;
    color:var(--muted);
    font-size:.9rem
}
.tip-strip .text-link{
    white-space:nowrap;
    margin-left:auto
}
.market-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px
}
.market-card{
    display:grid;
    grid-template-columns:42% 1fr;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    min-height:250px
}
.market-card img{
    height:100%;
    min-height:250px
}
.market-card>div{
    padding:20px
}
.market-card a{
    display:inline-block;
    margin-top:13px;
    color:#8b641c;
    font-size:.85rem;
    font-weight:700
}
.practical-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px
}
.practical-card{
    padding:23px;
    border-radius:10px;
    background:var(--cream)
}
.practical-icon{
    font-size:1.4rem;
    color:#b88b37
}
.practical-card h3{
    font-size:1.25rem
}
.notice{
    background:#f7f5ef;
    border-left:4px solid var(--gold);
    padding:18px 22px;
    margin-bottom:70px;
    color:#5e6b72;
    font-size:.9rem
}
.notice strong{
    color:var(--navy)
}
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.gallery-grid figure{
    margin:0;
    border-radius:9px;
    overflow:hidden;
    background:var(--cream)
}
.gallery-grid img{
    height:240px;
    transition:transform .3s
}
.gallery-grid figure:hover img{
    transform:scale(1.03)
}
.gallery-grid figcaption{
    padding:12px 15px;
    font-weight:600;
    font-size:.86rem;
    color:var(--navy)
}
.image-credit{
    color:var(--muted);
    font-size:.8rem;
    margin-top:25px
}
@media(max-width:1050px){
    
}
@media(max-width:760px){
    .site-header{
        min-height:68px;
        padding:0 20px
    }
    .menu-toggle{
        display:block
    }
    .main-nav{
        display:none;
        position:absolute;
        left:0;
        right:0;
        top:68px;
        padding:10px 22px 18px;
        background:white;
        box-shadow:var(--shadow);
        align-items:stretch;
        flex-direction:column;
        gap:0
    }
    .main-nav.is-open{
        display:flex
    }
    .main-nav a{
        padding:10px 0;
        border-bottom:1px solid #edf0f0
    }
    .main-nav a.active{
        border-bottom-color:var(--gold)
    }
    .hero{
        min-height:570px;
        padding:60px 25px
    }
    .hero-shade{
        background:linear-gradient(90deg,rgba(7,24,41,.88),rgba(7,24,41,.45))
    }
    .hero h1{
        font-size:3.2rem
    }
    .hero-stamp{
        width:76px;
        height:76px;
        right:22px;
        bottom:20px
    }
    .hero-stamp span{
        font-size:1.5rem
    }
    .intro{
        grid-template-columns:1fr;
        gap:20px;
        padding-top:55px
    }
    .feature-grid{
        grid-template-columns:1fr;
        grid-template-rows:repeat(3,260px);
        padding-bottom:55px
    }
    .quick-facts{
        padding:45px 0
    }
    .facts-inner{
        grid-template-columns:1fr 1fr;
        gap:20px
    }
    .facts-inner>div{
        grid-column:1/-1
    }
    .fact{
        padding-left:12px
    }
    .living{
        grid-template-columns:1fr;
        gap:28px;
        padding-top:55px;
        padding-bottom:55px
    }
    .living-image{
        height:280px
    }
    .cta{
        padding:28px;
        align-items:flex-start;
        flex-direction:column;
        margin-bottom:55px
    }
    .cta h2{
        font-size:1.8rem
    }
    .page-hero{
        min-height:350px;
        padding:55px 24px
    }
    .page-hero h1{
        font-size:3rem
    }
    .content-section{
        padding-top:55px;
        padding-bottom:55px
    }
    .content-grid,.market-grid,.practical-grid{
        grid-template-columns:1fr
    }
    .info-card>img{
        height:230px
    }
    .market-card{
        grid-template-columns:38% 1fr
    }
    .market-card img{
        height:100%;
        min-height:250px
    }
    .tip-strip{
        align-items:flex-start;
        flex-wrap:wrap
    }
    .tip-strip .text-link{
        margin-left:0
    }
    .bottom-callout{
        align-items:flex-start;
        flex-direction:column
    }
    .gallery-grid{
        grid-template-columns:1fr 1fr
    }
    .gallery-grid img{
        height:180px
    }
    }
@media(max-width:450px){
    .market-card{grid-template-columns:1fr
    }
    .market-card img{
        height:180px;
        min-height:180px
    }
    .gallery-grid{
        grid-template-columns:1fr
    }
    .gallery-grid img{
        height:230px
    }
    .hero h1{
        font-size:2.8rem
    }
    .hero-content>p:not(.eyebrow){
        font-size:.95rem
    }
}