/* Big Dream Ranch — archive of the published Wix site
   Visual target: the live Wix site. Fonts are free, self-hosted stand-ins
   for the original licensed fonts (see fonts/ for licenses):
     Avenir Light / Heavy      -> Nunito Sans 300 / 700
     Brandon Grotesque (nav)   -> Jost 300 / 400
     Wide bold caps headings   -> Montserrat 700                       */

@font-face{font-family:'Nunito Sans';font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/nunito-sans-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/nunito-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/nunito-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-weight:300;font-style:italic;font-display:swap;src:url(../fonts/nunito-sans-latin-300-italic.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/nunito-sans-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Jost';font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/jost-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/jost-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/montserrat-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/montserrat-latin-700-normal.woff2) format('woff2')}

:root{
  --brown:#2e1f16;      /* header / footer / dark band (sampled from live site) */
  --orange:#e76733;     /* section headings, active nav (sampled from live site) */
  --white:#fff;
  --text-dark:#1e1e1e;
  --f-body:'Nunito Sans','Avenir Next','Avenir',Helvetica,Arial,sans-serif;
  --f-nav:'Jost','Brandon Grotesque','Century Gothic',Helvetica,Arial,sans-serif;
  --f-head:'Montserrat','Century Gothic',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text-dark);font-family:var(--f-body);font-weight:300;font-size:16px;line-height:1.4}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- header / top navigation ---------- */
.site-header{background:var(--brown);color:#fff;height:116px;position:sticky;top:0;z-index:20}
.header-inner{padding:0 7.4%;position:relative;height:100%}
.wordmark{position:absolute;top:21px;left:77px;font-family:var(--f-nav);font-weight:300;font-size:26px;letter-spacing:.115em;line-height:1;color:#fff;text-decoration:none;text-transform:uppercase;white-space:nowrap}
.nav{position:absolute;left:max(47px,calc(50% - 443px));top:60px;margin:0;padding:0;list-style:none;display:flex}
.nav>li{position:relative}
.nav>li>a{display:block;font:300 14px/1 var(--f-nav);letter-spacing:.04em;text-transform:uppercase;color:#e4dedb;text-decoration:none;background:none;border:0;cursor:pointer;padding:21px 8px 0;margin-right:21px;height:56px;position:relative}
.nav>li>a:hover,.nav>li:focus-within>a{color:var(--orange)}
.nav>li.current>a{color:var(--orange)}
.nav>li.current>a::before{content:"";position:absolute;left:0;right:0;top:3px;height:4px;background:#000}
.nav .sub{display:none;position:absolute;left:0;top:56px;min-width:100%;margin:0;padding:6px 0;list-style:none;background:var(--brown);box-shadow:0 6px 14px rgba(0,0,0,.25);white-space:nowrap}
.nav>li:hover>.sub,.nav>li:focus-within>.sub,.nav>li.open>.sub{display:block}
.nav .sub a{display:block;padding:9px 22px 9px 14px;font:300 14px/1.2 var(--f-nav);letter-spacing:.04em;text-transform:uppercase;color:#e4dedb;text-decoration:none}
.nav .sub a:hover{color:var(--orange)}
.menu-toggle{display:none}

/* ---------- home hero ---------- */
.hero{position:relative;height:543px;background:#6aa8d8 url(../images/home/hero.jpg) center center/cover no-repeat;color:#fff;overflow:hidden}
.hero-text{position:absolute;left:50%;top:0;width:980px;margin-left:-490px;height:100%}
.hero h1{position:absolute;top:148px;left:82px;margin:0;font:700 31px/1.2 var(--f-body);letter-spacing:.005em;text-shadow:0 0 12px rgba(0,0,0,.18)}
.hero .sold{position:absolute;top:203px;left:82px;margin:0;font:700 16px/1.2 var(--f-body);text-shadow:0 0 8px rgba(0,0,0,.25)}
.hero .where{position:absolute;top:242px;left:82px;margin:0;font:700 22px/1.2 var(--f-body);text-shadow:0 0 10px rgba(0,0,0,.25)}
.chevron{position:absolute;left:96px;top:432px;width:44px;height:28px;display:block}
.chevron svg{display:block;width:100%;height:100%}

/* ---------- dark intro band ---------- */
.intro{background:var(--brown);color:#fff;padding:41px 0 34px}
.intro-inner{width:980px;margin:0 auto;display:flex;gap:52px;padding-left:82px}
.intro .col-a{width:424px;flex:none}
.intro .col-b{width:361px;flex:none}
.intro p{margin:0 0 22.5px;font-size:15.8px;line-height:22.5px;letter-spacing:-.012em}
.intro p.sp{margin:0}
.intro ul{list-style:none;margin:0;padding:0}
.intro li{font-size:15.8px;line-height:22.5px;margin:0 0 9.5px;white-space:nowrap}

/* ---------- photo grid ---------- */
.photo-grid{width:980px;margin:32px auto 0;display:grid;grid-template-columns:repeat(3,320px);gap:10px}
.photo-grid a,.photo-grid span{display:block;width:320px;height:180px;overflow:hidden;background:#ddd}
.photo-grid img{width:100%;height:100%;object-fit:cover}
.photo-grid .g2 img{object-position:20% 15%}

/* ---------- icon row ---------- */
.facts{width:873px;margin:34px auto 0;display:grid;grid-template-columns:repeat(3,291px);column-gap:0;row-gap:0;padding-bottom:30px}
.fact{padding:0 16px;text-align:center;min-height:256px}
.fact img{width:52px;height:52px;margin:0 auto 12px;object-fit:contain}
.fact h2{margin:0 0 9px;font:700 13px/1.2 var(--f-head);letter-spacing:.32em;text-transform:uppercase;color:#000;padding-left:.32em}
.fact p{margin:0;font-size:13.5px;line-height:1.55;font-weight:300;color:#333}

/* ---------- footer ---------- */
.site-footer{background:var(--brown);color:#fff;height:73px;padding:47px 0 0;font-size:13px;line-height:18px}
.footer-inner{width:980px;margin:0 auto;padding-left:46px}
.site-footer em{margin-left:8px;font-weight:300}

/* ---------- mid widths (721-1020px): the live site keeps its two-column desktop layout, edge to edge ---------- */
@media (min-width:721px) and (max-width:1020px){
  .hero-text{left:0;margin-left:0;width:100%}
  .hero h1,.hero .sold,.hero .where{left:46px}
  .chevron{left:60px}
  .intro-inner{width:auto;padding:0 46px;gap:34px}
  .intro .col-a{width:auto;flex:1 1 52%}
  .intro .col-b{width:auto;flex:1 1 48%}
  .intro li{white-space:normal}
  .photo-grid{width:auto;margin:32px 0 0;grid-template-columns:repeat(3,1fr);gap:8px}
  .photo-grid a,.photo-grid span{width:auto;height:auto;aspect-ratio:16/9}
  .facts{width:auto;margin:34px 46px 0;grid-template-columns:repeat(3,1fr)}
  .footer-inner{width:auto;margin-left:0;padding:0 46px}
}
/* ---------- dropdown menus (matched to live-site screenshot) ---------- */
.nav>li:hover>a::before,.nav>li:focus-within>a::before{content:"";position:absolute;left:0;right:0;top:3px;height:4px;background:#000}
.nav>li.has-sub:hover>a,.nav>li.has-sub:focus-within>a{color:var(--orange)}
.nav .sub{top:56px;left:-10px;min-width:192px;padding:0}
.nav .sub a{padding:0 26px 0 23px;height:46px;line-height:46px;font:300 13.5px/46px var(--f-nav);letter-spacing:.02em;text-transform:none;color:#bdb7b3}
.nav .sub a:hover{color:var(--orange)}
.nav .sub li.current>a{color:var(--orange);position:relative}
.nav .sub li.current>a::before{content:"";position:absolute;left:14px;right:14px;top:0;height:4px;background:#000}
.nav>li:last-child>.sub{left:-18px;min-width:142px}
.chev,.menu-close,.to-top{display:none}

/* ---------- phones (matched to iPhone screenshots of the live site) ---------- */
@media (max-width:720px){
  html{font-size:16px}
  .site-header{height:94px;min-height:0}
  .header-inner{padding:0;height:94px}
  .wordmark{position:absolute;left:25px;top:20px;width:68%;white-space:normal;font-size:34px;line-height:1.12;letter-spacing:.13em;padding:0}
  .menu-toggle{display:block;position:absolute;right:30px;top:29px;width:28px;height:24px;border:0;padding:0;background:none;font-size:0}
  .menu-toggle::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#fff;box-shadow:0 10px 0 #fff,0 20px 0 #fff}
  .nav{display:none;position:fixed;inset:0;z-index:100;background:#312318;flex-direction:column;align-items:center;justify-content:center;padding:70px 0 40px;overflow:auto;left:0;top:0}
  .nav.open{display:flex}
  .nav>li{width:100%;text-align:center;position:relative}
  .nav>li>a{display:inline-block;height:auto;padding:17px 0;margin:0;font:300 28px/1 var(--f-nav);letter-spacing:.02em;color:#fff}
  .nav>li.current>a{color:#d77742}
  .nav>li.current>a::before,.nav>li:hover>a::before,.nav>li:focus-within>a::before{display:none}
  .nav>li>a:hover{color:#d77742}
  .chev{display:block;position:absolute;right:16%;top:14px;width:36px;height:36px;border:0;background:none;cursor:pointer}
  .chev::after{content:"";position:absolute;left:10px;top:9px;width:11px;height:11px;border-right:2px solid #5d4c42;border-bottom:2px solid #5d4c42;transform:rotate(45deg)}
  .nav>li.open>.chev::after{transform:rotate(-135deg);top:15px}
  .nav .sub,.nav>li:hover>.sub,.nav>li:focus-within>.sub{display:none;position:static;box-shadow:none;background:none;padding:0 0 10px;min-width:0}
  .nav>li.open>.sub{display:block}
  .nav .sub a{height:auto;line-height:1.3;padding:10px 0;font-size:17px;text-align:center;color:#cfc8c4}
  .menu-close{display:block;position:fixed;top:36px;right:30px;width:34px;height:34px;border:0;background:none;z-index:101;cursor:pointer}
  .menu-close[hidden]{display:none}
  .menu-close::before,.menu-close::after{content:"";position:absolute;left:2px;right:2px;top:15px;height:4px;background:#fff;transform:rotate(45deg)}
  .menu-close::after{transform:rotate(-45deg)}
  .hero{height:263px;min-height:0}
  .hero-text{left:0;margin-left:0;width:100%}
  .hero h1{left:25px;top:30px;font-size:29px}
  .hero .sold{left:25px;top:68px;font-size:14px}
  .hero .where{left:25px;top:97px;font-size:19px}
  .chevron{left:24px;top:200px;width:27px;height:17px}
  .intro{padding:24px 0 22px}
  .intro-inner{width:auto;padding:0 25px;display:block}
  .intro .col-a,.intro .col-b{width:auto}
  .intro p{font-size:20px;line-height:27px;margin-bottom:27px;letter-spacing:0}
  .intro p.sp{margin-bottom:0}
  .intro ul{margin-top:27px}
  .intro li{font-size:20px;line-height:40px;margin:0;white-space:normal}
  .photo-grid{width:auto;margin:50px 25px 0;grid-template-columns:1fr;gap:10px}
  .photo-grid span{width:auto;height:auto;aspect-ratio:16/9}
  .facts{width:auto;margin:40px 25px 0;grid-template-columns:1fr}
  .fact{min-height:0;padding:0 0 30px}
  .fact p{font-size:16px}
  .footer-inner{width:auto;padding:0 25px}
  .site-footer{height:auto;padding:30px 0 26px}
  .to-top{display:block;position:fixed;right:16px;bottom:120px;width:60px;height:60px;border-radius:50%;background:var(--brown);border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.3);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}
  .to-top.show{opacity:1;pointer-events:auto}
  .to-top::before{content:"";position:absolute;left:19px;top:24px;width:14px;height:14px;border-left:4px solid #fff;border-top:4px solid #fff;transform:rotate(45deg)}
}

/* ---------- interior pages ---------- */
.interior{background:#fff}
.sec{padding:46px 0 0}
.sec:last-child{padding-bottom:7px}
.wrap{width:888px;margin:0 auto}
.sec-label,.sec-sub{margin:0;font:700 19.5px/1.3 var(--f-head);letter-spacing:.2em;text-transform:uppercase}
.sec-label{color:var(--orange)}
.sec-sub{color:#111;margin-top:3px}
.cols{display:flex;gap:36px;margin-top:20px}
.c1{width:475px;flex:none}.c2{width:377px;flex:none}
.cols p{margin:0;font-size:15.5px;line-height:20.5px;letter-spacing:.015em;color:#000}
.cols ul{margin:0;padding-left:26px;font-size:15.5px;line-height:20.5px;letter-spacing:.015em;color:#000}
.cols li{padding-left:2px}
.gal{margin-top:49px;display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:10px;align-items:flex-start}
.grp>.ph{width:100%}
.grp{display:flex;flex-direction:column;gap:10px;flex-basis:0;min-width:0}
.ph{display:block;min-width:0;cursor:zoom-in}
.ph img{width:100%;height:auto}
.row.pair{align-items:flex-start}
.lb{position:fixed;inset:0;background:#fff;z-index:200;display:none;align-items:center;justify-content:center}
.lb.on{display:flex}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;max-width:88vw}
.lb img{max-width:88vw;max-height:calc(100vh - 230px);object-fit:contain;display:block}
.lb figcaption{margin-top:48px;min-height:30px;font:300 24px/1.3 var(--f-body);color:#222;text-align:center}
.lb button{position:absolute;background:none;border:0;cursor:pointer;padding:14px;line-height:0}
.lb .fs{top:28px;left:22px}.lb .x{top:24px;right:20px}.lb .p{left:14px;top:50%;transform:translateY(-50%)}.lb .n{right:14px;top:50%;transform:translateY(-50%)}
@media (max-width:600px){.lb figcaption{font-size:18px;margin-top:24px}.lb img{max-width:94vw;max-height:calc(100vh - 190px)}.lb .fs{display:none}}
@media (max-width:1020px){.wrap{width:auto}.cols{gap:36px}.c1,.c2{width:auto;flex:1}}
@media (max-width:600px){
  .sec{padding-top:36px}.wrap{padding:0 25px}
  .sec-label,.sec-sub{font-size:17px}
  .cols{flex-direction:column;gap:14px}.cols p,.cols ul{font-size:17px;line-height:24px}
  .gal{margin-top:28px}
  .row{flex-direction:column;width:100%!important}.grp{flex-grow:0!important;width:100%}
}

.crop-wrap{overflow:hidden}.crop-wrap img.crop{width:100%;height:100%;object-fit:cover}
.row.top .grp{flex-grow:0}
.grp.fixed{flex-shrink:0}
@media (max-width:1020px){.wrap{padding:0 46px}}
.cols p+p,.cols p+ul{margin-top:20.5px}
.fire .c1{width:468px}.fire .c2{width:389px}.fire .cols{gap:28px}
.fire .cols ul{padding-left:27px}
.fire .cols p,.fire .cols ul{font-size:14.7px;letter-spacing:.01em}
.cols b{font-weight:700}

.wide .c1{width:470px}.wide .c2{width:388px}.wide .cols{gap:30px}
.wide .cols ul{padding-left:27px}
.wide .cols p,.wide .cols ul{font-size:14.7px;letter-spacing:.01em}
.cols i{font-style:italic}

/* 601-720px: phone-style header/menu, but the page body keeps its two-column desktop layout */
@media (min-width:601px) and (max-width:720px){
  .hero h1{left:46px}.hero .sold{left:46px}.hero .where{left:46px}
  .intro-inner{display:flex;padding:0 46px;gap:34px}
  .intro .col-a{flex:1 1 52%}.intro .col-b{flex:1 1 48%}
  .intro p,.intro li{font-size:15.8px;line-height:22.5px}
  .intro p{margin-bottom:22.5px}.intro p.sp{margin-bottom:0}
  .intro ul{margin-top:0}.intro li{margin:0 0 9.5px}
  .photo-grid{margin:32px 0 0;grid-template-columns:repeat(3,1fr);gap:8px}
  .facts{margin:34px 46px 0;grid-template-columns:repeat(3,1fr)}
  .fact{padding:0 10px}.fact p{font-size:13.5px}
  .footer-inner{padding:0 46px}
}

.ph.has-cap{position:relative}
.ph .cap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(20,14,10,.55);color:#fff;opacity:0;transition:opacity .25s;padding:12px;pointer-events:none}
.ph:hover .cap,.ph:focus .cap{opacity:1}
.ph .cap b{font:300 26px/1.2 var(--f-nav);letter-spacing:.04em;font-style:normal}
.ph .cap i{font:300 15px/1.4 var(--f-body);font-style:normal;margin-top:8px}
.sec{scroll-margin-top:116px}
@media (max-width:720px){.sec{scroll-margin-top:94px}}
/* keep the "wide"/"fire" column widths from overriding the responsive rules on smaller screens */
@media (max-width:1020px){.wide .c1,.wide .c2,.fire .c1,.fire .c2{width:auto;flex:1}}
@media (max-width:600px){.wide .c1,.wide .c2,.fire .c1,.fire .c2{flex:none;width:auto}.wide .cols,.fire .cols{gap:14px}.wide .cols p,.wide .cols ul,.fire .cols p,.fire .cols ul{font-size:17px;line-height:24px;letter-spacing:.015em}}
.grp.fixed{flex-shrink:1!important;min-width:0}
@media (max-width:600px){.lb img{max-width:86vw}.lb button{padding:8px}.lb .p{left:2px}.lb .n{right:2px}.lb .x{top:14px;right:10px}}

.lb figcaption .ds{display:block;margin-top:8px;font-size:.62em;color:#555}
