/* C & R Land Surveying, LLC - static rebuild of the Homestead site.
   Desktop (>= 1000px) reproduces the original 1280px layout; smaller screens stack. */
@font-face{font-family:"Open Sans";src:url(fonts/open-sans.woff) format("woff");font-display:swap}
@font-face{font-family:"Open Sans Semi Bold";src:url(fonts/open-sans-semibold.woff) format("woff");font-display:swap}
@font-face{font-family:"Open Sans Extra Bold";src:url(fonts/open-sans-extrabold.woff) format("woff");font-display:swap}
@font-face{font-family:"Vollkorn Italic";src:url(fonts/vollkorn-italic.woff) format("woff");font-display:swap}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#f2f1e1;font-family:"Open Sans",Arial,sans-serif;color:#54604f}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:966px;margin:0 auto}
/* header */
.site-header{background:#304927;height:119px;box-shadow:0 3px 2px rgba(0,0,0,.39);position:relative;z-index:10}
.site-header .wrap{display:flex;align-items:stretch;height:100%;padding-left:6px}
.logo{font-family:"Vollkorn Italic",Georgia,serif;font-style:normal;font-size:36px;line-height:43.2px;color:#eff1ee;white-space:nowrap;align-self:center;width:396px}
.nav{display:flex;margin:0;padding:0;list-style:none}
.nav a{display:flex;align-items:center;justify-content:center;width:141px;height:119px;font-size:16px;color:#eff1ee;border-radius:5px}
.nav a.active{background:rgba(4,7,4,.2);color:#d5d6d7}
.nav a:hover{background:rgba(4,7,4,.2)}
.menu-btn{display:none}
/* footer */
.site-footer{background:#304927;height:47px}
.site-footer .wrap{display:flex;align-items:center;justify-content:space-between;height:100%;padding-right:44px}
.site-footer p{margin:0;font-size:14px;line-height:16.8px;color:#eff1ee}
.fb{width:30px;height:30px;border-radius:50%;background:#eff1ee;display:flex;align-items:center;justify-content:center}
.fb svg{width:12px;height:12px;fill:#222720}
/* shared bits */
.banner{height:181px;background:center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.banner h1{margin:0;font:400 36px/43.2px "Open Sans Semi Bold","Open Sans",sans-serif;color:#eff1ee}
.circle{border:5px solid #eff1ee;border-radius:50%;overflow:hidden;width:269px;height:269px;flex:none}
.circle img{width:100%;height:100%;object-fit:cover}
/* home */
.hero{position:relative;height:548px;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;transition:opacity 1s}
.hero img.on{opacity:1}
.hero img.focal-crew{object-fit:cover;object-position:57% 38%}
.welcome{text-align:center;margin:15px auto 0;font:400 20px/24px "Open Sans Semi Bold","Open Sans",sans-serif;color:#3c3d3f}
.welcome h2{font:inherit;margin:0}
.dots{width:241px;height:5px;margin:8px auto 0;background:url(img/divider-dots.png) center/auto repeat-x;image-rendering:pixelated;image-rendering:crisp-edges}
.circles{display:flex;justify-content:center;gap:45px;margin:21px auto 0;padding-bottom:67px}
/* about */
.about-body{height:433px;display:flex;align-items:flex-start;padding:88px 0 0 215px}
.about-body .circle{width:265px;height:264px}
.about-text{margin:11px 0 0 31px;width:532px;font-size:18px;line-height:27px;color:#85957e}
.about-text p{margin:0}
.aerial{height:249px;background:url(img/about-aerial.jpg) center/cover no-repeat}
/* crew photo is square: crop with focal point on the crew member + instrument; light scrim keeps the title readable */
.bg-crew{background-image:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28)),url(img/hero-crew.jpg);background-position:center,57% 38%}
.bg-crew h1{text-shadow:0 1px 3px rgba(0,0,0,.55)}
.bg-services{background-image:url(img/services-banner.jpg)}
/* services */
.svc{display:flex;padding:45px 0 33px 160px}
.svc-left{width:298px;flex:none}
.label-circle{position:relative}
.label-circle span{position:absolute;left:44px;top:105px;width:175px;height:57px;border-radius:12px;background:rgba(60,61,63,.75);color:#eff1ee;font:400 20px/57px "Open Sans Semi Bold","Open Sans",sans-serif;text-align:center}
.svc-right{width:661px}
.svc-intro{margin:15px 0 0;font-size:18px;line-height:27px;text-align:justify;color:#54604f}
.svc-cols{display:flex;margin-top:26px}
.list{font-size:18px;line-height:21.6px;color:#54604f;width:326px;flex:none}
.list p{margin:0}
.list p+p{margin-top:21.6px;padding-left:18px}
.btn-quote{display:inline-block;margin:2px 0 0 17px;width:218px;height:48px;border-radius:50px;background:#73b584;color:#eff1ee;font-size:18px;line-height:48px;text-align:center}
.btn-quote:hover{background:#5fa071}
.svc-cols .circle{margin-top:71px;width:268px;height:267px}
/* contact */
.contact{display:flex;padding:37px 0 0 160px;min-height:750px}
.contact h3{margin:0;font:400 16px/19.2px "Open Sans Semi Bold","Open Sans",sans-serif;color:#3c3d3f;text-transform:uppercase}
.form-col{width:575px}
.field{margin-top:25px}
.field+.field{margin-top:20px}
.field label{display:block;font-size:14px;line-height:16.8px;color:#85957e;text-transform:uppercase}
.field .box{margin-top:4px;border:1px solid #d2cf98;height:59px;padding:4px}
.field .box.tall{height:166px}
.field input,.field textarea{width:100%;height:100%;border:0;background:transparent;font:13px "Open Sans",sans-serif;color:#54604f;padding:0 8px;resize:none;outline:none}
.field textarea{padding-top:8px}
.form-col .submit{display:block;margin:110px 0 0 auto;width:130px;height:51px;border:0;background:#3c3d3f;color:#eff1ee;font:16px "Open Sans",sans-serif;cursor:pointer}
.info-col{margin-left:42px;width:344px}
.info{margin:18px 0 0 4px;font-size:18px;line-height:21.6px;color:#85957e}
.info p{margin:0}
.info .g{margin-top:21.6px}.info .g2{margin-top:16px}.info .g3{margin-top:33px}.info .g4{margin-top:17px}
.info a:hover{text-decoration:underline}
.map{display:block;width:100%;height:292px;border:0}
.map-wrap{padding-bottom:20px}
/* survey form */
.sf{display:flex;padding:28px 0 66px 160px}
.sf-left{width:287px;flex:none;padding-top:16px}
.sf-left .list{margin:46px 0 0 15px;width:auto}
.sf-left .list p+p{margin-left:-1px}
.sf-right h2{margin:0;font:400 28px/33.6px "Open Sans Semi Bold","Open Sans",sans-serif;color:#3c3d3f}
.sf-panel{margin:11px 0 0 15px;width:596px;padding:10px 10px 10px}
.sf-panel .row{height:75px}
.sf-panel label{display:block;height:30px;padding-top:7px;font:400 14px/16.8px "Open Sans Extra Bold","Open Sans",sans-serif;color:#6d6f73}
.sf-panel .box{border:1px solid #6d6f73;height:34px;padding:3px 8px}
.sf-panel input,.sf-panel textarea{width:100%;height:100%;border:0;background:transparent;font:14px "Open Sans",sans-serif;color:#6d6f73;outline:none;resize:none;padding:0}
.sf-panel .submit{display:block;margin:103px 0 0 auto;width:117px;height:33px;border:0;background:#304927;color:#eff1ee;font:16px "Open Sans",sans-serif;cursor:pointer}

/* ---------- tablet & phone ---------- */
@media (max-width:999px){
  .aerial{background-image:url(img/about-aerial-1400.jpg)}
  .bg-services{background-image:url(img/services-banner-1200.jpg)}
  .wrap{width:auto;padding:0 20px}
  .site-header{height:auto}
  .site-header .wrap{flex-wrap:wrap;height:auto;padding:0 12px 0 20px;align-items:center}
  .logo{width:auto;flex:1;font-size:28px;line-height:1.2;padding:16px 0;white-space:normal}
  .menu-btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:none;border:0;cursor:pointer;padding:0}
  .menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:26px;height:3px;background:#eff1ee;border-radius:2px;position:relative;content:""}
  .menu-btn span::before{position:absolute;top:-8px}.menu-btn span::after{position:absolute;top:8px}
  .nav{display:none;width:100%;flex-direction:column;padding-bottom:10px}
  .nav.open{display:flex}
  .nav a{width:100%;height:auto;padding:14px 8px;font-size:18px;justify-content:flex-start}
  .site-footer{height:auto}
  .site-footer .wrap{padding:12px 20px;gap:12px}
  .hero{height:42.8vw;min-height:200px}
  .hero img{object-fit:cover}
  .hero img.focal-crew{object-position:57% 38%}
  .circles{flex-wrap:wrap;gap:24px;padding:0 20px 48px}
  .banner{height:140px}.banner h1{font-size:30px}
  .about-body,.svc,.contact,.sf{height:auto;flex-direction:column;align-items:center;padding:32px 20px 40px}
  .about-text,.svc-right,.form-col,.info-col,.sf-right,.sf-panel{width:100%;max-width:600px;margin-left:0}
  .about-text{margin-top:28px}
  .svc-left,.sf-left{width:auto}
  .svc-cols{flex-direction:column;align-items:center}
  .list{width:100%}
  .svc-cols .circle{margin-top:32px}
  .btn-quote{margin:28px 0 0}
  .info-col{margin-top:40px}
  .form-col .submit{margin-top:24px}
  .sf-left .list{margin-left:0}
  .sf-right{margin-top:32px}
  .sf-panel{margin-left:0;padding:10px 0}
  .sf-panel .submit{margin-top:32px}
  .contact{min-height:0}
}
@media (max-width:600px){
  .logo{font-size:24px}
  .circle,.about-body .circle,.svc-cols .circle{width:240px;height:240px}
  .label-circle span{left:32px;top:92px}
  .about-text,.svc-intro,.list,.info{font-size:17px}
  .svc-intro{text-align:left}
  .site-footer p{font-size:13px}
  .field input,.field textarea,.sf-panel input,.sf-panel textarea{font-size:16px} /* prevents iOS zoom on focus */
  .sf-panel label{height:auto;padding:12px 0 6px}
  .sf-panel .row{height:auto}
  .sf-panel .box{height:44px}
  .map{height:260px}
}