/* ==========================================================================
   Gaurav Rampal — International Bloodstock Specialist
   Design tokens
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --green-deep:   #161f11;
  --green:        #4c6444;
  --green-soft:   #8a9c78;
  --green-mist:   #e7ece0;
  --gold:         #c19a4e;
  --gold-light:   #e8cf94;
  --stone:        #cdc4b0;
  --brown:        #6b4a35;
  --black:        #14150f;
  --cream:        #f6f2e7;
  --paper:        #fbf9f3;
  --clay:         #b35642;

  --display: 'Cormorant Garamond', serif;
  --body: 'Jost', sans-serif;

  --container: 1240px;
  --edge: clamp(24px, 5vw, 72px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--body);
  color:var(--black);
  background:var(--paper);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--edge);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ---------- Rail divider — the signature motif ----------
   Echoes both the paddock fence rails in the photography and
   the small gold diamond beneath the wordmark in the logo. */
.rail{
  display:flex;
  align-items:center;
  gap:18px;
  width:100%;
  max-width:340px;
}
.rail.center{ margin-inline:auto; }
.rail::before,
.rail::after{
  content:"";
  flex:1;
  height:1px;
  background:currentColor;
  opacity:0.45;
}
.rail__mark{
  width:7px; height:7px;
  border:1px solid currentColor;
  transform:rotate(45deg);
  flex:none;
}

.eyebrow{
  font-family:var(--body);
  font-size:0.72rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  margin:0;
  letter-spacing:0.01em;
}

h2{ font-size:clamp(2.1rem, 4vw, 3.1rem); }
h3{ font-size:clamp(1.35rem, 2.4vw, 1.7rem); }

p{ margin:0; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 34px;
  font-family:var(--body);
  font-size:0.78rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:500;
  border:1px solid var(--gold);
  color:var(--gold-light);
  background:transparent;
  cursor:pointer;
  transition:background 0.35s ease, color 0.35s ease, border-color .35s ease;
}
.btn:hover{ background:var(--gold); color:var(--green-deep); }
.btn--solid{ background:var(--gold); color:var(--green-deep); }
.btn--solid:hover{ background:var(--gold-light); border-color:var(--gold-light); }
.btn--dark{ border-color:var(--green); color:var(--green); }
.btn--dark:hover{ background:var(--green); color:var(--cream); }

.section{ padding:clamp(64px,10vw,128px) 0; }
.section--tight{ padding:clamp(48px,7vw,88px) 0; }
.section-head{
  max-width:640px;
  margin-bottom:clamp(36px,6vw,64px);
}
.section-head .eyebrow{ margin-bottom:14px; display:block; }
.section-head p.lede{
  margin-top:18px;
  font-size:1.05rem;
  color:#3c4436;
  max-width:56ch;
}

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0;
  z-index:200;
  padding:22px var(--edge);
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
.site-header.is-scrolled{
  background:rgba(22,31,17,0.94);
  padding:14px var(--edge);
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
  backdrop-filter:blur(6px);
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display);
  color:var(--gold-light);
}
.brand__mark{
  font-size:1.7rem;
  border:1px solid var(--gold);
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
}
.brand__name{
  font-size:1.05rem;
  letter-spacing:0.08em;
  line-height:1.1;
}
.brand__name small{
  display:block;
  font-family:var(--body);
  font-size:0.58rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--stone);
  margin-top:4px;
  font-weight:400;
}

nav.main-nav{ display:flex; align-items:center; gap:38px; }
nav.main-nav a{
  font-size:0.74rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--cream);
  position:relative;
  padding-bottom:4px;
}
nav.main-nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0%; height:1px;
  background:var(--gold);
  transition:width .3s ease;
}
nav.main-nav a:hover::after{ width:100%; }

.nav-toggle{
  display:none;
  width:26px; height:20px;
  position:relative;
  background:none; border:none; cursor:pointer;
  z-index:210;
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:1px; background:var(--gold-light);
  transition:transform .3s ease, opacity .3s ease, top .3s ease;
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:9px; }
.nav-toggle span:nth-child(3){ top:18px; }
.nav-open .nav-toggle span:nth-child(1){ top:9px; transform:rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.nav-open .nav-toggle span:nth-child(3){ top:9px; transform:rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  color:var(--cream);
  overflow:hidden;
}
.hero__media{
  position:absolute; inset:0;
  background-image:url('images/hero-fence.jpg');
  background-size:cover;
  background-position:58% 30%;
  transform:scale(1.06);
  animation:heroZoom 16s ease-out forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,20,10,0.55) 0%, rgba(15,20,10,0.15) 30%, rgba(12,17,9,0.55) 68%, rgba(10,14,8,0.94) 100%),
    linear-gradient(90deg, rgba(10,14,8,0.55) 0%, rgba(10,14,8,0.05) 45%);
}
.hero__content{
  position:relative;
  z-index:2;
  width:100%;
  padding:0 var(--edge) clamp(56px,9vw,110px);
}
.hero__eyebrow{
  color:var(--gold-light);
  font-size:0.78rem;
  letter-spacing:0.34em;
  text-transform:uppercase;
  margin-bottom:22px;
  display:inline-block;
}
.hero h1{
  font-size:clamp(2.9rem, 8vw, 6.4rem);
  line-height:0.98;
  color:var(--paper);
  max-width:14ch;
}
.hero h1 em{
  font-style:italic;
  color:var(--gold-light);
}
.hero__sub{
  margin-top:22px;
  max-width:52ch;
  font-size:clamp(1rem,1.6vw,1.2rem);
  color:var(--stone);
  font-weight:300;
}
.hero__actions{
  margin-top:40px;
  display:flex; gap:20px; flex-wrap:wrap; align-items:center;
}
.hero__scroll{
  position:absolute; right:var(--edge); bottom:40px;
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:var(--stone);
  font-size:0.68rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
}
.hero__scroll::after{
  content:"";
  width:1px; height:56px;
  background:linear-gradient(var(--gold), transparent);
}

/* ==========================================================================
   About / Profile
   ========================================================================== */
.about{ background:var(--paper); }
.about__grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:clamp(32px,6vw,80px);
  align-items:center;
}
.about__frame{
  position:relative;
}
.about__frame img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 20%;
}
.about__frame::before{
  content:"";
  position:absolute;
  top:18px; left:18px; right:-18px; bottom:-18px;
  border:1px solid var(--green);
  z-index:-1;
}
.about__caption{
  margin-top:18px;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--brown);
}
.about__body p{ margin-bottom:1.15em; color:#33392c; font-size:1.02rem; }
.about__body p:last-child{ margin-bottom:0; }

.pull{
  margin:2.2em 0;
  padding-left:26px;
  border-left:2px solid var(--gold);
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.2rem,2vw,1.5rem);
  color:var(--green);
  line-height:1.4;
}

/* ==========================================================================
   Services
   ========================================================================== */
.services{ background:var(--cream); }
.services__list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid rgba(76,100,68,0.3);
}
.service{
  padding:34px clamp(0px,3vw,36px) 34px 0;
  border-bottom:1px solid rgba(76,100,68,0.3);
  position:relative;
}
.service:nth-child(odd){ padding-right:clamp(20px,4vw,48px); border-right:1px solid rgba(76,100,68,0.3); }
.service:nth-child(even){ padding-left:clamp(20px,4vw,48px); }
.service--feature{
  grid-column:1 / -1;
  padding:38px 0;
  border-right:none !important;
  background:linear-gradient(90deg, rgba(193,154,78,0.09), transparent);
  padding-left:24px;
  padding-right:24px;
}
.service__tag{
  display:inline-block;
  font-size:0.66rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--clay);
  border:1px solid var(--clay);
  padding:3px 10px;
  margin-bottom:14px;
}
.service h3{ color:var(--green-deep); margin-bottom:12px; }
.service p{ color:#4a4f40; font-size:0.96rem; }

/* ==========================================================================
   Horseman Way
   ========================================================================== */
.hway{
  background:var(--green-deep);
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
.hway__grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:clamp(30px,6vw,70px);
  align-items:center;
}
.hway img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:20% 25%;
}
.hway .eyebrow{ color:var(--gold-light); }
.hway h2{ color:var(--paper); margin:14px 0 22px; }
.hway p{ color:var(--stone); font-size:1.02rem; margin-bottom:1.1em; }
.hway__values{
  display:flex; flex-wrap:wrap; gap:12px 28px;
  margin-top:26px;
  padding-top:24px;
  border-top:1px solid rgba(201,163,79,0.25);
}
.hway__values span{
  font-family:var(--display);
  font-style:italic;
  color:var(--gold-light);
  font-size:1.05rem;
}

/* ==========================================================================
   Associates
   ========================================================================== */
.associates{ background:var(--paper); }
.associates__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,6vw,80px);
  align-items:start;
}
.associates__body p{ color:#33392c; font-size:1.02rem; margin-bottom:1.1em; }
.region-list{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 24px;
}
.region-list li{
  font-family:var(--display);
  font-size:1.2rem;
  color:var(--green);
  padding-bottom:10px;
  border-bottom:1px solid rgba(76,100,68,0.35);
}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery{ background:var(--cream); }
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:170px;
  gap:10px;
}
.gallery__grid figure{ margin:0; overflow:hidden; position:relative; }
.gallery__grid img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.gallery__grid figure:hover img{ transform:scale(1.06); }
.g-1{ grid-column:span 2; grid-row:span 2; }
.g-2{ grid-column:span 2; grid-row:span 1; }
.g-3{ grid-column:span 2; grid-row:span 1; }
.g-4{ grid-column:span 2; grid-row:span 2; }
.g-5{ grid-column:span 2; grid-row:span 1; }
.g-6{ grid-column:span 2; grid-row:span 1; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{
  background:var(--green-deep);
  color:var(--cream);
}
.contact__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:24px;
  margin-bottom:clamp(40px,6vw,64px);
}
.contact__top h2{ color:var(--paper); max-width:14ch; }
.contact__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,5vw,48px);
}
.contact__card{
  border-top:1px solid rgba(201,163,79,0.35);
  padding-top:22px;
}
.contact__card .eyebrow{ margin-bottom:14px; display:block; }
.contact__card address,
.contact__card p{
  font-style:normal;
  color:var(--stone);
  font-size:0.96rem;
  line-height:1.7;
}
.contact__card a{
  color:var(--gold-light);
  border-bottom:1px solid rgba(232,207,148,0.35);
  transition:border-color .3s ease, color .3s ease;
}
.contact__card a:hover{ border-color:var(--gold-light); color:var(--paper); }
.socials{
  display:flex; gap:16px; margin-top:20px;
}
.socials a{
  width:38px; height:38px;
  border:1px solid var(--gold);
  color:var(--gold-light);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, color .3s ease;
}
.socials a:hover{ background:var(--gold); color:var(--green-deep); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background:#0e150a;
  color:var(--stone);
  padding:28px var(--edge);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  font-size:0.78rem;
  letter-spacing:0.05em;
}
.site-footer a:hover{ color:var(--gold-light); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  nav.main-nav{
    position:fixed; inset:0;
    background:var(--green-deep);
    flex-direction:column;
    justify-content:center;
    gap:32px;
    transform:translateY(-100%);
    transition:transform .45s ease;
  }
  .nav-open nav.main-nav{ transform:translateY(0); }
  nav.main-nav a{ font-size:1rem; }
  .nav-toggle{ display:block; }

  .about__grid,
  .hway__grid,
  .associates__grid{ grid-template-columns:1fr; }
  .about__frame{ max-width:420px; margin:0 auto; }
  .about__frame::before{ display:none; }

  .services__list{ grid-template-columns:1fr; }
  .service:nth-child(odd){ border-right:none; padding-right:0; }
  .service:nth-child(even){ padding-left:0; }

  .gallery__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:200px; }
  .g-1,.g-2,.g-3,.g-4,.g-5,.g-6{ grid-column:span 1; grid-row:span 1; }

  .contact__grid{ grid-template-columns:1fr; }
  .region-list{ grid-template-columns:1fr; }
}