/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 09 2025 | 15:33:49 */
  /* ==== TWEAK KNOBS (safe to change) ===================== */
  :root{
    --hero: url('https://weatherby.com/wp-content/uploads/2025/08/WBY_Legacy_LandingHeader-2560x1218-1.jpg'); /* hero image */
    --hero-height: 70vh;           /* hero height desktop */
    --hero-mobile: 56vh;           /* hero height mobile */
    --overlay: .35;                /* darken overlay 0–.6 */
--blur: 1.5px;     /* 0–3px: subtle blur */
    --fade-height: 34%;            /* gradient fade height */
    --wash: 0;                     /* color wash opacity 0–.3 */
    --wash-color: 41, 37, 36;      /* rgb for wash (warm gray) */
    --page-bg: #f7f3e8;            /* page background */
    --card-bg: #fff;               /* card background */
    --card-radius: 0px;
    --card-shadow: 0 18px 40px rgba(0,0,0,.14);
    --gold: #C7A459;               /* Weatherby gold-ish */
    --gold-border: 2px;            /* set to 0 for none */
    --maxw: 1080px;                /* page content width */
    --title-color: #fff;
    --title-size: clamp(2rem, 5vw, 5rem);
    --h2-size: clamp(1.5rem, 2.5vw, 2.25rem);
    --body-size: clamp(1rem, 1.1vw, 1.08rem);
    --line: 1.65;
    --overlap: 4.5rem;             /* how far card overlaps hero */
  --legacy-bg: url('https://weatherby.com/wp-content/uploads/2025/08/WBY_Legacy_mtnbkg-2535x817-1.jpg');
  --legacy-overlay: 0.06;    /* 0–.2 soft tint over image */
  --legacy-tint: 247,243,232;/* RGB of your cream page bg for a gentle wash */
  --legacy-pad: clamp(24px, 4vw, 56px);
  --page-bg: #f7f3e8;
  --gutter: clamp(16px, 4vw, 48px);  /* page side padding */
  --maxw: 1160px;                    /* your site’s wrap width */
  /* ↓ slightly narrower cards */
  --card-w: min(500px, 72vw);

  /* ↓ more breathing room at the edges */
  --peek: 10vw;

  /* ↓ larger gap between cards */
  --card-gap: clamp(18px, 2vw, 28px);
  --radius: 22px;
  --leg-navpill-bg: rgba(199,164,89,.85);
  --leg-navpill-bg-hover: rgba(199,164,89,.55);
  --leg-navpill-border: rgba(199,164,89,.25);
  --leg-navpill-shadow: 0 12px 36px rgba(0,0,0,.25);
}

  /* ==== HERO ============================================ */

/* Image layer (so we can blur it) */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-url);
  background-size: cover;
  background-position: center;
  /*filter: blur(var(--blur));*/
backdrop-filter: blur(2px);
  transform: scale(1.02); /* prevents edge clipping from blur */
  z-index: 0;
}

/* Full-page dark overlay (uniform) */
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,var(--overlay));
  z-index: 1;
}
.hero {
  position: relative;
  height: 80vh;
  background: 
    linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.0) 50%),
    url('https://weatherby.com/wp-content/uploads/2025/08/WBY_Legacy_LandingHeader-2560x1218-1.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
  .hero h1{
    margin:0;
    font-size:var(--title-size);
    letter-spacing:-.25rem;
    text-transform:uppercase;
    font-weight:800;
    text-shadow: 0 6px 20px rgba(0,0,0,.35);
	  color:white;
position:relative;
	  z-index:2;
  }

  /* ==== RESPONSIVE HERO ====================================== */
  @media (max-width: 680px){
	  .hero {
		height:40vh;  
	  } 
	  .hero h1 {
		  letter-spacing:-.02rem;
	  }
  }

/* ==== FLOATING CARD =================================== */ 
.intro{ position:relative; z-index:2; margin-top:calc(-2 * var(--overlap)); } 
.intro-card{ max-width: min(940px, 92vw); margin:0 auto; background:var(--card-bg); border-radius:var(--card-radius); box-shadow:var(--card-shadow); padding: clamp(18px, 4vw, 36px); /*border: var(--gold-border) solid var(--gold);*/ } 
.intro-card h2{ font-size:var(--h2-size); line-height:1.15; margin:0 0 .6rem; font-weight:900; } 
.intro-card p{ font-size:var(--body-size); line-height:var(--line); margin:.8rem 0; color:#222; } 
.sig{ margin-top:1rem; font-style:italic; font-weight:600; color:#333; } /* Two-column split for the intro card (unchanged except align-items) */
.intro-card.intro-split{
  display:grid;
  grid-template-columns: minmax(240px, 1.1fr) 2fr;
  gap: clamp(18px, 3vw, 48px);
  align-items: stretch;          /* was start */
}

/* NEW: make the left column a flex box and center its stack vertically */
.intro-left{
  display:flex;
  flex-direction: column;
  justify-content: center;       /* vertical centering */
  min-height: 100%;              /* fill grid row height */
}

/* (optional) keep the right column top-aligned explicitly */
.intro-right{
  display:flex;
  flex-direction: column;
  justify-content: flex-start;   /* top align body copy */
}

/* Left column (headline stack) — your styles kept */
.intro-left .eyebrow{
  display:block;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.78rem;
  color:#6b6b6b;
  margin-bottom:.4rem;
}
.intro-left h2{
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 .7rem;
  font-weight: 900;
  text-transform:uppercase;
  letter-spacing:-.1rem;
}
.intro-left .gold-rule{
  display:block;
  width: 64px;
  height: 3px;
  background: #C7A459; /* Weatherby gold */
  border-radius: 2px;
  margin-top: .25rem;
}

/* Right column (body) — your styles kept */
.intro-right p{
  font-size: clamp(1rem, 1.05vw, 1.08rem);
  line-height: 1.65;
  margin: .8rem 0;
  color:#222;
}
.intro-right .sig{
  margin-top: 1rem;
  font-style: italic;
  font-weight: 600;
  color:#333;
}

/* Mobile: stack columns (unchanged) */
@media (max-width: 900px){
  .intro-card.intro-split{
    grid-template-columns: 1fr;
  }
  .intro-left{
    justify-content: flex-start; /* no vertical centering when stacked */
    margin-bottom: .25rem;
  }
  .intro-left .gold-rule{ margin-bottom:.25rem; }
}

  /* ==== MISSION CALLOUT ================================= */
  .mission{
    margin: clamp(36px, 6vw, 64px) auto;
  }
  .mission .box{
    max-width: 900px;
    margin: 0 auto;
    text-align:center;
    padding: 22px 10px;
    border-top:1px solid rgba(0,0,0,.15);
    border-bottom:1px solid rgba(0,0,0,.15);
  }
  .mission h3{
    margin:0 0 .35rem;
    font-size:.9rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#666;
  }
  .mission p{
    margin:0;
    font-size: clamp(.96rem, 1vw, 1.05rem);
    color:#444;
    line-height:1.6;
  }

  /* ==== RESPONSIVE ====================================== */
  @media (max-width: 900px){
    :root{ --overlap: 3rem; }
  }
  @media (max-width: 680px){
    :root{ --hero-height: var(--hero-mobile); --overlap: 2rem; }
    .intro-card{ padding: 18px; }
  }

.legacy-band{
  position: relative;
  /* full-bleed background */
  background:
    linear-gradient(to bottom, rgba(var(--legacy-tint), var(--legacy-overlay)), rgba(var(--legacy-tint), var(--legacy-overlay))),
    var(--legacy-bg) center/cover no-repeat;
  padding-top: var(--legacy-pad);
  padding-bottom: var(--legacy-pad);
	border-bottom:solid var(--gold) var(--gold-border);
}

/* keep your floating card overlap working inside the wrapper */
.legacy-band .intro{
  position: relative;
  z-index: 2;
  margin-top: calc(-2 * var(--overlap)); /* you already have --overlap set */
}

/* optional: a subtle inner fade so card shadow reads nicely */
.legacy-band::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0) 18%, rgba(0,0,0,0) 82%, rgba(0,0,0,0.03));
  pointer-events:none;
}

/* ensure the mission stays readable on the illustrated bg */
.legacy-band .mission .box{
  /*background: rgba(255,255,255,0.78);        /* soft veil over sketch */
  backdrop-filter: blur(1px);                /* optional, modern browsers */
  -webkit-backdrop-filter: blur(1px);
  /*border-radius: 10px;*/
  padding: clamp(18px, 3vw, 28px);
  max-width: 900px;
  margin: clamp(28px, 5vw, 48px) auto 0;
 /* border: 1px solid rgba(0,0,0,.08);*/
}

/* ==== VALUES ==================================== */
.values{ background: var(--page-bg); padding: clamp(28px,6vw,64px) 0; }
.values-head{ text-align:left; }
.values-head h2{ margin:0 0 .35rem; font-weight:900; font-size:clamp(1.6rem,3.2vw,2.2rem); }
.values-sub{ margin:0; color:#555; }

/* the magic rail: aligns to left gutter, overflows to the right */
/* align header with the rail’s left edge */
.values-head{
  --left-pad: max((100vw - var(--maxw))/2, var(--gutter));
  padding-left: var(--left-pad);
  padding-right: var(--gutter);
  margin-bottom: clamp(12px, 2.2vw, 18px);
}
.values-head h2{
  margin:0 0 .25rem;
  font-weight:900;
  font-size:clamp(1.6rem,3.2vw,4rem);
  text-transform:uppercase;
}
.values-sub{ 
	margin:0; 
	color:#555; 
	font-size: clamp(.96rem, 1vw, 1.05rem);
}

/* rail aligns to same left pad and overflows right */
.values-rail{
  --left-pad: max((100vw - var(--maxw))/2, var(--gutter));
  padding-left: var(--left-pad);

  display:grid;
  grid-auto-flow: column;
  gap: var(--card-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--left-pad);

  /* REMOVED the mask fade */
}

/* cards (smaller) */
.v-card{
  scroll-snap-align: start;
  background:#fff;
  border:1px solid #e9e6e0;
  border-radius: var(--radius);
  box-shadow: 0 16px 46px rgba(0,0,0,.07);
  overflow:hidden;
  width: calc(var(--card-w) + var(--peek));
  transition: box-shadow .25s, transform .25s;
}
.v-card:hover{ box-shadow: 0 24px 58px rgba(0,0,0,.10); transform: translateY(-2px); }

.v-card img{
  width:100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display:block;
}

.v-body{ padding: clamp(14px, 2vw, 20px); }
.v-eyebrow{
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  color:#777;
  display:block;
  margin-bottom: .3rem;
}
.v-body h3{
  margin: .1rem 0 .45rem;
  font-size: clamp(1.02rem, 2vw, 1.22rem);
  line-height: 1.2;
}
.v-body p{ margin:0; color:#333; line-height:1.6; font-size: .97rem; }

/* arrows aligned to the rail start */
.values-nav{
  --left-pad: max((100vw - var(--maxw))/2, var(--gutter));
  display:flex; gap:.5rem; justify-content:flex-start;
  padding-left: var(--left-pad);
  margin-top: .5rem;
}
/*.v-btn{
  appearance:none; border:1px solid #dfdbd4; background:#fff; color:#222;
  padding:.5rem .75rem; border-radius:12px; font-size:1.05rem; cursor:pointer;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}
.v-btn:hover{ border-color:#d5d0c8; box-shadow: 0 16px 42px rgba(0,0,0,.08); }*/
.v-btn{
  appearance:none; border:1px solid #dfdbd4; background:#fff; color:#222;
  padding:.5rem .75rem; border-radius:12px; font-size:1.05rem; cursor:pointer;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}
.v-btn:hover{ border-color:#d5d0c8; box-shadow: 0 16px 42px rgba(0,0,0,.08); }
.v-btn {
  all: unset;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;

  /* glassy pill */
  background: var(--leg-navpill-bg);
  color: #fff;
  border: 1px solid var(--leg-navpill-border);
  box-shadow: 0 12px 36px rgba(0,0,0,.25);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.v-btn:hover{
  background: var(--leg-navpill-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 16px 44px rgba(0,0,0,.28);
}

/* Apply to highlights arrows, gallery arrows, and video nav */
.v-btn{
  border: 1px solid var(--leg-navpill-border) !important;
  background: var(--leg-navpill-bg) !important;
  color: #fff !important;
  box-shadow: var(--leg-navpill-shadow) !important;
  backdrop-filter: saturate(140%) blur(6px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(6px) !important;
}
.v-btn:hover{
  background: var(--leg-navpill-bg-hover) !important;
}

/* Ensure circular shape on small buttons */
.v-btn{ width:42px; height:42px; border-radius:999px; }

/* Keep scroll working, hide the bar */
.values-rail{
  overflow-x: auto;                 /* DO keep this */
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;         /* old Edge/IE */
  scrollbar-width: none;            /* Firefox */
}
.values-rail::-webkit-scrollbar{
  height: 0 !important;             /* Chrome/Safari/Edge */
}
.values-rail::-webkit-scrollbar-thumb{ background: transparent; }
.values-rail::-webkit-scrollbar-track{ background: transparent; }

/* If macOS overlay bars still peek on hover, add this tiny cloak */
.values-rail{ padding-bottom: 60px; margin-bottom: -1px; }


/* responsive tweaks */
@media (max-width: 900px){
  :root{ --peek: 10vw; }
}
@media (max-width: 640px){
  :root{ --card-w: 84vw; --peek: 8vw; --radius: 18px; }
  .values-nav{ justify-content:center; padding-left: 0; }
}

/* --- Revealable cards (cleaned) --- */
.v-card--reveal{ position:relative; overflow:hidden; }

/* Frosted + gradient overlay */
.v-more{
  position:absolute; inset:0;
  display:grid; align-items:end;
  color:#fff;

  /* frosted glass tint */
  background: rgba(20,20,20,.18);
  backdrop-filter: blur(10px) saturate(.95);
  -webkit-backdrop-filter: blur(10px) saturate(.95);

  /* start hidden, slide up */
  transform: translateY(100%);
  transition: transform .35s ease;
  will-change: transform;
  pointer-events: none;
  box-shadow: inset 0 40px 60px rgba(0,0,0,.18);
}
.v-more::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg,
              rgba(0,0,0,0) 35%,
              rgba(0,0,0,.45) 62%,
              rgba(0,0,0,.78) 100%);
  pointer-events:none;
}

.v-more-inner{ position:relative; padding: clamp(14px,2.2vw,18px); }
.v-more h4{ margin:0 0 .35rem; font-weight:900; letter-spacing:.01em;
            font-size: clamp(1.2rem, 2vw, 1.8rem); color:#fff; }
.v-more p{ margin:0 0 .6rem; line-height:1.6; opacity:.95; }
.v-meta{ margin:0; padding:0; list-style:none; display:grid; gap:.4rem; }
.v-meta a{ color:#e9d7a6; font-weight:800; text-decoration:none; }
.v-meta a:hover{ text-decoration:underline; }

/* Toggle button (in the card body) */
.v-moreToggle{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:.6rem; padding:.45rem .7rem;
  border:1px solid #e7e3dc; border-radius:10px;
  background:#fff; color:#1d1a14; font-weight:800; font-size:.92rem;
  cursor:pointer; box-shadow:0 10px 26px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.v-moreToggle:hover{ transform:translateY(-1px); box-shadow:0 14px 34px rgba(0,0,0,.08); }
.v-moreToggle:focus-visible{ outline:2px solid #c7a459; outline-offset:2px; }
.v-card.is-open .v-moreToggle .chev{ transform: rotate(180deg); transition: transform .2s ease; }

/* Desktop hover reveal (kept) */
.values:not(.no-hover) .v-card--reveal:hover .v-more,
.values:not(.no-hover) .v-card--reveal:focus-within .v-more{
  transform: translateY(0);
  pointer-events:auto;
}

/* Open state (mobile / button) */
.v-card--reveal.is-open .v-more{
  transform: translateY(0);
  pointer-events:auto;
}

/* Lift when revealed */
.v-card--reveal:hover,
.v-card--reveal.is-open{
  transform: translateY(-2px);
  box-shadow: 0 24px 58px rgba(0,0,0,.10);
}

/* Close button inside overlay */
.v-more-close{
  position:absolute; top:10px; right:10px;
  border:0; border-radius:8px;
  background: rgba(0,0,0,.35);
  color:#fff; font-size:1.15rem; line-height:1;
  padding:.25rem .55rem; cursor:pointer;
}
.v-more-close:hover{ background: rgba(0,0,0,.55); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .v-more, .v-card--reveal, .v-moreToggle{ transition:none !important; }
}

/* ===== CONSERVATION =============================== */
.impact{padding:clamp(28px,6vw,84px) 0;background:var(--page-bg);}
.impact-wrap{display:grid;grid-template-columns:minmax(280px,520px) 1fr;gap:clamp(16px,3vw,32px);align-items:start;}
.impact-media img{width:100%;border-radius:18px;object-fit:cover;aspect-ratio:3/4;box-shadow:0 20px 60px rgba(0,0,0,.08);}
.impact-body .lede{color:#555;max-width:48ch;}
.impact-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:18px 0 24px;padding:0;list-style:none;}
.impact-stats strong{display:block;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1;font-weight:900;}
.impact-stats span{color:#666;font-size:.92rem;}
.btn{display:inline-block;padding:.65rem 1rem;border:1px solid #dfdbd4;border-radius:10px;background:#fff;box-shadow:0 10px 26px rgba(0,0,0,.06);}
@media(max-width:980px){.impact-wrap{grid-template-columns:1fr;}.impact-media img{aspect-ratio:16/9;}}

/* ===== Partners: cap & center like the timeline ===== */
.partners-marquee{
  /* separator strip color: tweak here */
  --strip-bg: #d8d3c9;

  /* theme tokens (unchanged) */
  --card-bg: #fff;
  --card-fg: #1d1a14;
  --ring: #c7a459;

  /*background: var(--strip-bg);*/
background: transparent;
  color: var(--card-fg);

  /* match section.history padding */
  padding: clamp(32px, 7vh, 88px) clamp(20px, 4vw, 64px);

  /* let the inner grid own the width + overflow */
  overflow: visible;
}

/* Cap & center exactly like .history-grid */
.partners-grid{
  max-width: 1360px;                 /* same cap as timeline */
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(180px, 320px) 1fr; /* left | right like timeline */
  gap: clamp(20px, 4vw, 60px);
  align-items: start;
}

/* Left column heading spacing compact, like timeline’s vibe */
.pm-header{ margin: 0; max-width: 42ch; }
.pm-header h2{
  margin: 0 0 .5rem;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.05;
}
.pm-header p{ margin: 0 0 .75rem; opacity: .85; }
.pm-all{ color: var(--ring); font-weight: 800; text-decoration: none; }
.pm-all:hover{ text-decoration: underline; }

/* Right column (the marquee wall) */
.pm-wall{
  position: relative;
  display: grid;
  gap: 10px;                /* tighter vertical rhythm */
  overflow: hidden;         /* clip the rows only, not the whole section */
}

/* Edge fades blend with the strip */
.pm-wall::before,
.pm-wall::after{
  content:"";
  position:absolute; inset-block:0; width:28px; pointer-events:none; z-index:1;
}
.pm-wall::before{ inset-inline-start:0; background: linear-gradient(to right, #f6f2e7, transparent); }
.pm-wall::after { inset-inline-end:0;   background: linear-gradient(to left , #f6f2e7, transparent); }

/* ===== Rows & cards: condensed defaults (optional; keep if you like) ===== */
.pm-row{
  --gap: 10px;
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--gap);
  width: max-content;
  will-change: transform;
  animation: pm-marquee-ltr linear infinite;
  animation-duration: var(--dur, 40s);  /* slower feel */
}
.pm-row[data-direction="rtl"]{ animation-name: pm-marquee-rtl; }
.pm-wall:hover .pm-row{ animation-play-state: paused; }

.pm-card{
  display:flex; align-items:center; gap:10px;
  padding:12px 25px;
  min-width:200px; border-radius:10px;
  background:var(--card-bg); color:var(--card-fg);
  text-decoration:none; box-shadow:0 6px 16px rgba(0,0,0,.10);
  transition: transform .25s ease, box-shadow .25s ease;
will-change: transform;
}
.pm-card:hover,
.pm-card:focus-visible{ transform: translateY(-4px); box-shadow: 0 14px 40x rgba(0,0,0,.14); }

.pm-logo{ width:60px; height:60px; display:grid; place-items:center; }
.pm-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.pm-name{ font-weight:500; letter-spacing:.02em; font-size:.8rem; }

/* Animations (unchanged) */
@keyframes pm-marquee-ltr { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes pm-marquee-rtl { from { transform: translateX(-50%) } to { transform: translateX(0) } }

/* Stack like timeline at tablet sizes */
@media (max-width: 980px){
  .partners-grid{ grid-template-columns: 1fr; }
  .pm-wall::before, .pm-wall::after{ width:20px; }
}