/* Rocky Farm Highlands — faithful port of the 2024 Divi site. Hand-written; pages are generated (see ~/rebuild/README.md). */
@font-face{font-family:"Rubik";src:url(/assets/fonts/rubik.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}
:root{
  --brown:#602e10; --dark:#2a1c1c; --btn:#372426; --rust:#c75636; --cream:#fff7f5; --grey:#ececec;
  --ink:#333; --muted:#6b5d58; --line:#e3d6d1;
  --head:"Rubik",ui-sans-serif,sans-serif; --body:"Figtree",ui-sans-serif,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;color:var(--ink);background:#fff;font-family:var(--body);font-size:17px;line-height:1.65;font-weight:400}
img{max-width:100%;height:auto;display:block}
a{color:var(--brown)}
a:hover{color:var(--rust)}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.2;color:var(--ink);margin-block:0 .6em}
h1{font-size:clamp(2.1rem,5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h3{font-size:1.35rem;font-weight:500}
p{margin-block:0 1em}
.wrap{width:min(1140px,100% - 40px);margin-inline:auto}
.narrow{width:min(860px,100% - 40px)}
.center{text-align:center}
.small{font-size:.9rem}.muted{color:var(--muted)}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 14px;z-index:50}
.skip:focus{left:10px}
:focus-visible{outline:3px solid var(--rust);outline-offset:2px}

.btn{display:inline-block;background:var(--btn);color:#fff;font-family:var(--head);font-weight:500;font-size:.98rem;
  text-decoration:none;padding:.7em 1.5em;border-radius:999px;border:0;cursor:pointer;line-height:1.3}
.btn:hover{background:var(--brown);color:#fff}
.btn-light{background:#fff;color:var(--dark)}
.btn-light:hover{background:var(--cream);color:var(--brown)}

/* header (sits over the hero) */
.site-head{position:absolute;inset:0 0 auto;z-index:10;color:#fff}
.site-head.solid{position:relative;background:var(--dark)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:6px}
.brand img{width:100px;height:100px;border-radius:50%;box-shadow:0 2px 12px rgba(0,0,0,.35)}
.site-head ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;column-gap:28px;row-gap:6px}
.site-head nav a{color:#fff;text-decoration:none;font-family:var(--head);font-weight:500;font-size:1rem;
  text-shadow:0 1px 6px rgba(0,0,0,.6);padding-block:6px;border-bottom:2px solid transparent}
.site-head nav a:hover,.site-head nav a[aria-current]{border-bottom-color:#fff}

/* heroes */
.hero{position:relative;display:grid;align-items:center;color:#fff;background:var(--dark);overflow:hidden;min-height:420px}
.hero-home{min-height:min(88vh,760px)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,12,8,.55),rgba(20,12,8,.35) 40%,rgba(20,12,8,.6))}
.hero-in{position:relative;z-index:1;padding-block:150px 70px}
.hero h1{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.hero-home h1{font-size:clamp(2.4rem,6vw,4rem)}
.hero-home .hero-in p{max-width:62ch;font-size:1.12rem}
.hero-sub .hero-in{text-align:center}
.hero-sub .hero-sub,.hero .hero-sub{font-family:var(--head);font-size:1.3rem;font-weight:500}
.hero .btn{background:rgba(42,28,28,.85)}
.hero .btn:hover{background:var(--brown)}

/* sections */
.sec{padding-block:clamp(56px,8vw,96px)}
.cream{background:var(--cream)}
.grey{background:var(--grey)}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:var(--muted);margin-bottom:.4em}
.lede{font-size:1.15rem}
.split{display:grid;grid-template-columns:5fr 6fr;gap:clamp(28px,5vw,64px);align-items:start}
.split + .split{margin-top:clamp(48px,7vw,80px)}
.rounded{border-radius:10px;box-shadow:0 10px 30px rgba(42,28,28,.18)}
.mission{grid-template-columns:6fr 5fr;align-items:center}
blockquote{margin:0 0 1.4em;padding-left:18px;border-left:3px solid var(--brown);font-size:1.05rem}
.mgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mgrid img{border-radius:8px;aspect-ratio:3/4;object-fit:cover;width:100%}

.svcs{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px}
.svc{background:#fff;border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.svc:nth-child(2){background:#111;color:#eee}
.svc:nth-child(2) h3{color:#fff}
.svc img{aspect-ratio:4/3;object-fit:cover;width:100%}
.svc-body{padding:24px 26px 20px}
.svc h3{text-align:center}
.book{text-align:center;font-family:var(--head);font-size:1.25rem;margin:40px 0 0}
.book a{color:var(--brown);font-weight:700;text-decoration:none}

.band{position:relative;color:#fff;overflow:hidden;background:var(--dark)}
.band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:rgba(20,12,8,.5)}
.band-in{position:relative;z-index:1;padding-block:clamp(80px,12vw,150px);max-width:none}
.band h2{color:#fff;font-size:clamp(1.9rem,4vw,2.8rem)}
.band p{font-size:1.15rem;max-width:48ch}

.cta{background:var(--dark);color:#eee;text-align:center;padding:clamp(32px,5vw,52px) clamp(20px,5vw,60px);border-radius:4px}
.cta h2{color:#fff;font-size:clamp(1.4rem,2.6vw,1.8rem);font-weight:500}
.cta p{max-width:70ch;margin-inline:auto;margin-bottom:1.4em}

/* form */
.intro{font-family:var(--head);font-weight:500;font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.35;text-align:center;margin-bottom:1.6em;color:var(--ink)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.fld{display:grid;gap:6px;min-width:0}
.fld.full{grid-column:1/-1}
.fld label,.grp legend{font-weight:600;font-size:.95rem}
.req{color:#b3261e}
.hint{font-weight:400;color:var(--muted);font-size:.88rem}
input[type=text],input[type=email],input[type=tel],textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:1px solid #9c8f8a;border-radius:22px;padding:.62em 1.05em}
textarea{border-radius:12px;resize:vertical;min-height:110px}
input:focus,textarea:focus{outline:none;border-color:var(--brown);box-shadow:0 0 0 3px rgba(96,46,16,.2)}
.grp{border:0;margin:0;padding:0}
.grp legend{padding:0;margin-bottom:8px}
.opts{display:flex;flex-wrap:wrap;gap:8px 22px}
.opt{display:inline-flex;align-items:center;gap:8px;font-size:.98rem;cursor:pointer}
.opt input{width:18px;height:18px;accent-color:var(--brown)}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.qform .btn{margin-top:18px;font-size:1.05rem}

/* gallery */
.tiktok{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;border-left:4px solid var(--brown);
  background:var(--cream);padding:22px 26px;border-radius:4px;margin-bottom:36px}
.tiktok h2{font-size:1.35rem;margin-bottom:.2em}
.tiktok p{margin:0}
.tt-ico{width:44px;height:44px;color:var(--dark)}
.masonry{list-style:none;margin:0;padding:0;column-count:4;column-gap:12px}
.masonry li{break-inside:avoid;margin-bottom:12px}
.masonry a{display:block;border-radius:4px;overflow:hidden}
.masonry img{width:100%}
@media (prefers-reduced-motion:no-preference){.masonry img{transition:transform .35s ease}.masonry a:hover img{transform:scale(1.03)}}

/* contact */
.cards{list-style:none;margin:40px 0 64px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cards li{background:#fff;text-align:center;padding:26px 16px 18px;box-shadow:0 4px 22px rgba(0,0,0,.12);border-radius:3px}
.cards h3{margin:.6em 0 .3em;font-size:1.2rem}
.cards p{margin:0;font-size:.95rem;overflow-wrap:anywhere}
.ico.ring{width:48px;height:48px;padding:11px;border:2px dotted var(--brown);border-radius:50%;color:var(--brown);margin-inline:auto}
.touch .btn{margin-top:4px}
.thanks{padding-block:40px}

/* footer */
.site-foot{position:relative;color:#fff;background:#1d1512 url(/assets/img/pasture.jpg) center/cover no-repeat;font-size:.95rem}
.site-foot::before{content:"";position:absolute;inset:0;background:rgba(18,12,10,.78)}
.site-foot>*{position:relative}
.site-foot a{color:#fff}
.site-foot a:hover{color:#f3c9a8}
.foot-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:40px;padding-block:60px 36px}
.foot-about img{width:96px;height:96px;border-radius:50%;margin-bottom:14px}
.foot-h{color:#fff;font-size:1.15rem;font-weight:500;margin-bottom:1em}
.info,.hours{list-style:none;margin:0;padding:0}
.info li{display:flex;gap:14px;margin-bottom:16px}
.info .ico{width:22px;height:22px;flex:none;fill:#fff;margin-top:3px}
.info a{text-decoration:none;overflow-wrap:anywhere}

.hours li{display:flex;gap:10px;padding-block:3px}
.hours li span:first-child{min-width:5.5em;font-weight:600}
.foot-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(199,86,54,.45);padding-block:18px}
.foot-bar p{margin:0}
.socs{display:flex;gap:10px}
.soc{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#3b5998}
.soc-instagram{background:#e4405f}.soc-tiktok{background:#fe2c55}
.soc .ico{width:18px;height:18px;fill:#fff}
.ico{fill:currentColor}

/* responsive */
@media (max-width:960px){
  .masonry{column-count:3}
  .cards{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-about{grid-column:1/-1}
}
@media (max-width:760px){
  body{font-size:16px}
  .site-head{position:relative;background:var(--dark)}
  .head-in{flex-direction:column;gap:10px;padding-block:12px}
  .brand img{width:80px;height:80px}
  .site-head ul{justify-content:center;column-gap:20px}
  .hero-in{padding-block:64px 56px}
  .hero{min-height:300px}
  .hero-home{min-height:480px}
  .split,.mission,.svcs{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .tiktok{grid-template-columns:1fr;text-align:left}
  .masonry{column-count:2;column-gap:8px}.masonry li{margin-bottom:8px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .foot-bar{justify-content:center;text-align:center}
}
@media (max-width:480px){.cards{grid-template-columns:1fr}}
.site-foot .muted{color:#e6d9d3;opacity:1}
.band::after{background:linear-gradient(90deg,rgba(20,12,8,.72),rgba(20,12,8,.35) 60%,rgba(20,12,8,.2))}
.masonry li{display:inline-block;width:100%;vertical-align:top}
.masonry picture{display:block}
