/* Oak Tree Farm — homepage sections */

/* Hero */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:clamp(560px,44vw,780px);background:var(--forest);color:#fff}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 45%}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,28,20,.72) 0%,rgba(9,28,20,.5) 30%,rgba(9,28,20,.12) 52%,rgba(9,28,20,0) 70%),linear-gradient(180deg,rgba(9,28,20,.25) 0%,rgba(9,28,20,0) 25%,rgba(9,28,20,0) 70%,rgba(9,28,20,.3) 100%)}
.hero-inner{width:100%;padding-block:clamp(64px,6.5vw,104px) clamp(72px,7vw,112px)}
.hero-copy{max-width:600px}
.hero-kicker{display:flex;align-items:center;gap:16px;margin-bottom:clamp(14px,1.4vw,22px);font-size:clamp(11px,.95vw,13.5px);font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.hero-kicker::before{content:'';width:clamp(28px,3vw,44px);height:1px;background:var(--wheat)}
.hero-title{font-family:var(--display-caps);font-size:clamp(3.4rem,6.6vw,6.9rem);font-weight:700;line-height:.9;letter-spacing:.005em;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero-title span{display:block}
.hero-title span:last-child{color:var(--wheat)}
.hero-lead{max-width:15.5em;margin-top:clamp(14px,1.4vw,22px);font-size:clamp(20px,1.85vw,28px);font-weight:500;line-height:1.25;letter-spacing:-.005em;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.hero-badges{display:flex;gap:clamp(20px,2.6vw,40px);margin:clamp(22px,2.2vw,34px) 0 0;padding:0;list-style:none}
.hero-badges li{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:84px;font-size:clamp(10px,.8vw,11.5px);font-weight:700;letter-spacing:.14em;line-height:1.35;text-align:center;text-transform:uppercase}
.hero-badge-icon{display:grid;place-items:center;width:clamp(44px,3.6vw,52px);aspect-ratio:1;border:1.5px solid rgba(255,255,255,.9);border-radius:50%}
.hero-badge-icon svg{width:46%;height:46%;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,2.4vw,36px)}
.hero-btn-primary{min-height:clamp(52px,4vw,58px);min-width:clamp(240px,20vw,290px);padding:0 28px;background:var(--cream);color:var(--forest);border-color:var(--cream);font-size:clamp(15px,1.15vw,17px);font-weight:700}
.hero-btn-primary:hover{background:#fff;border-color:#fff}
.hero-btn-call{justify-content:flex-start;gap:14px;min-height:clamp(52px,4vw,58px);padding:0 24px 0 20px;background:rgba(15,44,34,.72);border-color:rgba(255,255,255,.75);color:#fff;font-weight:600;text-align:left;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hero-btn-call:hover{background:var(--forest);border-color:#fff}
.hero-btn-call svg{width:20px;height:20px;fill:currentColor;flex:none}
.hero-btn-call>span{display:grid;font-size:14px;line-height:1.3}
.hero-btn-call>span>span:last-child{font-size:15px}
.hero-script{position:absolute;right:clamp(16px,3vw,56px);bottom:clamp(64px,7vw,110px);display:grid;font-family:var(--script);font-size:clamp(30px,2.7vw,44px);line-height:1;color:#fff;transform:rotate(-13deg);transform-origin:right bottom;text-shadow:0 1px 10px rgba(0,0,0,.35);pointer-events:none}
.hero-script span:last-child{margin:2px 0 0 .9em}
.hero-script svg{width:3.2em;height:auto;margin:2px 0 0 1.6em;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round}

/* Stats strip */
.stats{padding-block:clamp(14px,1.6vw,24px) clamp(10px,1.2vw,18px)}
.stats-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:860px;margin:0 auto;padding:0;list-style:none}
.stats-list li{display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 16px}
.stats-list li+li{border-left:1px solid var(--line-strong)}
.stats-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;color:var(--forest)}
.stats-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.stats-icon svg.icon-fill{fill:currentColor;stroke:none}
.stats-icon-calf{width:44px}
.stats-text{display:grid;font-size:15px;line-height:1.35;color:var(--ink)}
.stats-text strong{font-weight:700}

/* Feature cards */
.feature-cards{padding-block:clamp(12px,1.4vw,20px) 0}
.feature-cards-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.feature-card{position:relative;display:block;overflow:hidden;border-radius:var(--radius-lg);background:var(--forest);box-shadow:var(--shadow);isolation:isolate}
.feature-card img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s var(--ease)}
.feature-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,28,20,0) 45%,rgba(9,28,20,.78) 100%)}
.feature-card:hover img{transform:scale(1.04)}
.feature-card-body{position:absolute;left:0;right:0;bottom:0;z-index:1;display:grid;gap:4px;padding:18px 20px;color:#fff}
.feature-card-title{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.feature-card-sub{font-size:14px;font-weight:500;color:rgba(255,255,255,.88)}
.feature-card-sub span{display:inline-block;transition:transform .2s var(--ease)}
.feature-card:hover .feature-card-sub span{transform:translateX(3px)}

@media (prefers-reduced-motion:no-preference){
  .hero-copy{animation:rise .8s var(--ease) both}
  .hero-script{animation:fade 1.2s .4s var(--ease) both}
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}

/* About */
.about{padding-block:var(--section)}
.about-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:24px 48px}
.about-inner>.kicker{padding-top:14px;align-self:start}
.about h2{max-width:14ch;font-size:clamp(2.75rem,5.4vw,4.75rem);line-height:.98}
.about-text{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,48px);max-width:820px;margin-top:clamp(24px,3vw,40px)}
.about-text p{font-size:16.5px;line-height:1.8;color:var(--muted)}

/* Photographs */
.photographs{padding-bottom:var(--section)}
.photographs .section-head{padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line-strong)}
.photo-spread{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);gap:clamp(16px,2.5vw,32px);align-items:start}
.photo-spread img{width:100%;object-fit:cover;border-radius:var(--radius-lg)}
.spread-a img{aspect-ratio:3/4}
.spread-b{margin-top:14%}
.spread-b img{aspect-ratio:4/3}
.spread-c{margin-top:34%}
.spread-c img{aspect-ratio:3/4}
.spread-caption{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line-strong)}
.spread-caption span{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.spread-caption p{font-size:15px;color:var(--muted);text-align:right}

/* Herd preview */
.herd{padding-block:var(--section);background:var(--sand) url('/images/paper-grain.png');border-block:1px solid var(--line)}
.herd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.herd-tile{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.herd-tile:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px)}
.herd-tile-media{display:block;overflow:hidden;background:var(--sand)}
.herd-tile-media img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s var(--ease)}
.herd-tile:hover .herd-tile-media img{transform:scale(1.04)}
.herd-tile-body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.herd-tile-name{font-family:var(--display);font-size:24px;font-weight:600;line-height:1.05}
.herd-tile-meta{margin-top:6px;font-size:13px;color:var(--muted)}
.herd-tile-price{margin-top:auto;padding-top:12px;font-family:var(--display);font-size:22px;font-weight:700;color:var(--clay)}
.herd-cta{display:flex;justify-content:center;margin-top:clamp(28px,4vw,48px)}

/* Home contact */
.home-contact{padding-block:var(--section)}
.home-contact-inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.home-contact h2{font-size:clamp(3rem,6.4vw,5.5rem);line-height:.95}
.home-contact-lead{margin-top:18px;font-size:17px;color:var(--muted)}
.contact-card{padding:clamp(24px,3vw,40px);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.contact-card-name{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.contact-card-phone{display:block;margin-top:6px;font-family:var(--display);font-size:clamp(34px,4vw,46px);font-weight:600;line-height:1.1}
.contact-card-email{display:inline-block;margin-top:6px;padding-block:6px;font-size:16px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;overflow-wrap:anywhere}
.contact-card-phone:hover,.contact-card-email:hover{color:var(--clay)}
.contact-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}

/* Responsive */
@media (max-width:1100px){
  .herd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-bg img{object-position:68% 45%}
}
@media (max-width:900px){
  .about-inner{grid-template-columns:1fr}
  .about-inner>.kicker{padding-top:0;margin-bottom:0}
  .home-contact-inner{grid-template-columns:1fr}
  .stats-list li{gap:12px;padding-inline:10px}
  .feature-card-body{padding:14px 16px}
  .feature-card-title{font-size:12px;letter-spacing:.12em}
  .feature-card-sub{font-size:13px}
}
@media (max-width:760px){
  .hero{align-items:flex-start;min-height:0}
  .hero-bg img{object-position:50% 100%}
  .hero::before{background:linear-gradient(180deg,rgba(9,28,20,.62) 0%,rgba(9,28,20,.38) 34%,rgba(9,28,20,.05) 58%,rgba(9,28,20,.1) 78%,rgba(9,28,20,.5) 100%)}
  .hero-inner{padding-block:clamp(40px,9vw,64px) clamp(52px,11vw,80px)}
  .hero-title{font-size:clamp(3.1rem,15.5vw,5.5rem)}
  .hero-lead{max-width:14em;font-size:clamp(19px,5vw,26px)}
  .hero-badges{gap:clamp(12px,5vw,32px);margin-top:24px}
  .hero-badges li{min-width:0;gap:8px;font-size:10px;letter-spacing:.12em}
  .hero-badge-icon{width:44px}
  .hero-copy{max-width:none}
  .hero-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-top:clamp(150px,52vw,300px)}
  .hero-btn-primary,.hero-btn-call{min-width:0;min-height:54px;padding-inline:14px;white-space:nowrap}
  .hero-btn-primary{gap:8px;font-size:14.5px}
  .hero-btn-call{gap:10px;padding-inline:12px 14px}
  .hero-btn-call svg{width:18px;height:18px}
  .hero-btn-call>span{font-size:13px}
  .hero-btn-call>span>span:last-child{font-size:13.5px}
  .hero-script{bottom:clamp(128px,31vw,170px);font-size:clamp(24px,6.6vw,34px)}
  .photo-spread{grid-template-columns:1fr 1fr;grid-template-areas:"b b" "a c";gap:16px}
  .spread-a{grid-area:a}
  .spread-b{grid-area:b;margin-top:0}
  .spread-c{grid-area:c;margin-top:0}
  .spread-caption{margin-bottom:8px}
}
@media (max-width:600px){
  .stats-list li{flex-direction:column;gap:6px;padding:6px 6px;text-align:center}
  .stats-icon{width:30px;height:30px}
  .stats-icon-calf{width:38px}
  .stats-text{font-size:13.5px}
  .feature-cards-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(220px,72%);gap:12px;padding-block:4px 10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .feature-cards-grid::-webkit-scrollbar{display:none}
  .feature-card{scroll-snap-align:start;box-shadow:none}
  .feature-card img{aspect-ratio:4/3}
  .about-text{grid-template-columns:1fr;gap:16px}
  .spread-caption{flex-direction:column;gap:6px}
  .spread-caption p{text-align:left}
  .herd-tile-body{padding:12px 14px 14px}
  .herd-tile-name{font-size:20px}
  .herd-tile-meta{font-size:12.5px}
  .herd-tile-price{font-size:20px}
  .herd-cta .btn{width:100%}
}
@media (max-width:374px){
  .hero-script{display:none}
  .hero-actions{grid-template-columns:1fr}
  .hero-actions{margin-top:clamp(120px,44vw,200px)}
  .contact-card-actions{grid-template-columns:1fr}
}