/* ==========================================================================
   WEST & HIDE CO. — core stylesheet
   Palette pulled from the client's own popup photography:
   oxblood henley · indigo apron · rawhide straps · bone felt · black felt
   ========================================================================== */

:root{
  /* ink family — black felt */
  --ink:        #12100E;
  --ink-2:      #191613;
  --ink-3:      #221D18;
  --ink-4:      #2E271F;

  /* paper family — bone / raw canvas */
  --bone:       #F0E7D6;
  --bone-2:     #E4D9C4;
  --bone-3:     #D3C4A9;

  /* accents */
  --oxblood:    #8E2F27;
  --oxblood-lt: #B44236;
  --rawhide:    #C9944A;
  --rawhide-lt: #E2B471;
  --denim:      #3C4E60;
  --sage:       #7C8471;
  --turquoise:  #2E8A8C;

  --muted:      #A2937E;
  --muted-dk:   #6E6355;

  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 64px);

  --display: 'Ultra', 'Bitter', Georgia, serif;
  --label:   'Oswald', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Lora', Georgia, serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
h1,h2,h3,h4{margin:0; line-height:1.05; font-weight:400}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
::selection{background:var(--oxblood); color:var(--bone)}

/* --- type utilities -------------------------------------------------------- */
.eyebrow{
  font-family:var(--label);
  font-size:12px;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--rawhide);
  margin:0 0 20px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:''; width:34px; height:1px; background:var(--rawhide); opacity:.6; flex:none;
}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:''; width:34px; height:1px; background:var(--rawhide); opacity:.6; flex:none}

.display{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:-.005em;
  line-height:.94;
}
.h-xl{ font-size:clamp(44px, 8.5vw, 122px) }
.h-lg{ font-size:clamp(34px, 5.4vw, 68px) }
.h-md{ font-size:clamp(26px, 3.4vw, 42px) }

.hd{ /* condensed heading — the workhorse */
  font-family:var(--label);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.05;
}
.hd-lg{ font-size:clamp(30px, 4.6vw, 58px) }
.hd-md{ font-size:clamp(22px, 2.6vw, 32px) }
.hd-sm{ font-size:clamp(17px, 1.6vw, 21px); letter-spacing:.08em }

.lede{ font-size:clamp(17px,1.55vw,20px); line-height:1.8; color:#C9BCA6 }
.on-bone .lede{ color:#57493A }
.muted{ color:var(--muted) }

.serif-it{ font-family:var(--body); font-style:italic }

/* --- layout ---------------------------------------------------------------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut) }
.wrap-wide{ max-width:1560px; margin-inline:auto; padding-inline:var(--gut) }
section{ position:relative }
.pad{ padding-block:clamp(72px, 9vw, 140px) }
.pad-sm{ padding-block:clamp(52px, 6vw, 88px) }

.on-bone{
  background:var(--bone);
  color:#2A231C;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
.on-bone .eyebrow{ color:var(--oxblood) }
.on-bone .eyebrow::before,.on-bone .eyebrow.center::after{ background:var(--oxblood) }

.on-ink-2{ background:var(--ink-2) }

.rule{ height:1px; background:currentColor; opacity:.16; border:0; margin:0 }

/* --- buttons --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--label); font-weight:600; font-size:13.5px;
  letter-spacing:.16em; text-transform:uppercase;
  padding:17px 34px;
  border:1px solid transparent;
  position:relative;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px) }
.btn-primary{ background:var(--oxblood); color:var(--bone); border-color:var(--oxblood) }
.btn-primary:hover{ background:var(--oxblood-lt); border-color:var(--oxblood-lt) }
.btn-ghost{ border-color:rgba(240,231,214,.35); color:var(--bone) }
.btn-ghost:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone) }
.on-bone .btn-ghost{ border-color:rgba(42,35,28,.3); color:#2A231C }
.on-bone .btn-ghost:hover{ background:var(--ink); color:var(--bone); border-color:var(--ink) }
.btn-tan{ background:var(--rawhide); color:var(--ink); border-color:var(--rawhide) }
.btn-tan:hover{ background:var(--rawhide-lt); border-color:var(--rawhide-lt) }
.btn-sm{ padding:13px 24px; font-size:12px }
.btn-block{ width:100% }

.link-u{
  font-family:var(--label); font-size:12.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  border-bottom:1px solid currentColor; padding-bottom:4px;
  transition:opacity .25s, gap .25s; display:inline-flex; gap:8px; align-items:center;
}
.link-u:hover{ opacity:.65; gap:14px }

/* --- announcement bar ------------------------------------------------------ */
.announce{
  background:var(--oxblood); color:var(--bone);
  font-family:var(--label); font-size:11.5px; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  text-align:center; padding:10px 16px;
  position:relative; z-index:60;
}
.announce a{ border-bottom:1px solid rgba(240,231,214,.5) }

/* --- header ---------------------------------------------------------------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(18,16,14,.82);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid rgba(240,231,214,.1);
  transition:background .35s var(--ease);
}
.head-inner{
  max-width:1560px; margin-inline:auto;
  padding:0 var(--gut);
  height:78px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
}
.head-logo{ justify-self:center; display:block }
.head-logo img{ height:52px; width:auto; transition:height .35s var(--ease) }
.nav{ display:flex; align-items:center; gap:clamp(14px,1.8vw,30px) }
.nav.right{ justify-self:end }
.nav a{
  font-family:var(--label); font-size:12.5px; font-weight:400;
  letter-spacing:.15em; text-transform:uppercase; color:var(--bone);
  padding:6px 0; position:relative; transition:color .25s;
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--rawhide); transition:width .3s var(--ease);
}
.nav a:hover{ color:var(--rawhide) }
.nav a:hover::after,.nav a[aria-current="page"]::after{ width:100% }
.nav a[aria-current="page"]{ color:var(--rawhide) }

.burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center }
.burger span{ display:block; width:24px; height:1.5px; background:var(--bone); position:relative; transition:.3s var(--ease) }
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:24px; height:1.5px; background:var(--bone); transition:.3s var(--ease);
}
.burger span::before{ top:-7px } .burger span::after{ top:7px }
body.menu-open .burger span{ background:transparent }
body.menu-open .burger span::before{ top:0; transform:rotate(45deg) }
body.menu-open .burger span::after{ top:0; transform:rotate(-45deg) }

.mobile-nav{
  position:fixed; inset:0; z-index:45;
  background:var(--ink); padding:110px var(--gut) 40px;
  display:flex; flex-direction:column; gap:4px;
  transform:translateY(-100%); transition:transform .5s var(--ease);
  overflow-y:auto;
}
body.menu-open .mobile-nav{ transform:translateY(0) }
.mobile-nav a{
  font-family:var(--label); font-weight:500; font-size:26px; letter-spacing:.06em;
  text-transform:uppercase; padding:14px 0;
  border-bottom:1px solid rgba(240,231,214,.12);
}
.mobile-nav a:hover{ color:var(--rawhide) }
.mobile-nav .mn-cta{ margin-top:26px; border:0 }

/* --- hero ------------------------------------------------------------------ */
.hero{
  position:relative; min-height:min(94vh, 900px);
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0 }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 46% }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(18,16,14,.72) 0%, rgba(18,16,14,.28) 34%, rgba(18,16,14,.5) 62%, rgba(18,16,14,.96) 100%),
    radial-gradient(120% 80% at 50% 40%, transparent 35%, rgba(18,16,14,.55) 100%);
}
.hero-inner{
  position:relative; z-index:2; width:100%;
  padding-bottom:clamp(52px,7vw,96px); padding-top:120px;
  text-align:center;
}
.hero-logo{ width:min(560px, 76vw); margin:0 auto clamp(22px,3vw,34px) }
.hero-tag{
  font-family:var(--label); font-size:clamp(12px,1.35vw,15px); font-weight:400;
  letter-spacing:.34em; text-transform:uppercase; color:var(--bone);
  margin:0 0 26px;
}
.hero-sub{
  max-width:620px; margin:0 auto 34px;
  font-size:clamp(16px,1.6vw,19px); line-height:1.75; color:#D5C9B4;
}
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap }
.hero-scroll{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  font-family:var(--label); font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hero-scroll::after{
  content:''; width:1px; height:36px;
  background:linear-gradient(var(--rawhide), transparent);
  animation:drop 2.2s var(--ease) infinite;
}
@keyframes drop{ 0%{transform:scaleY(.2); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom} }

/* --- marquee --------------------------------------------------------------- */
.marquee{
  background:var(--ink-3); border-block:1px solid rgba(201,148,74,.24);
  overflow:hidden; padding:15px 0;
}
.marquee-track{ display:flex; width:max-content; animation:slide 42s linear infinite }
.marquee:hover .marquee-track{ animation-play-state:paused }
.marquee span{
  font-family:var(--label); font-size:12.5px; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase; color:var(--bone-3);
  padding-inline:26px; display:inline-flex; align-items:center; gap:26px;
}
.marquee span::after{ content:'✦'; color:var(--oxblood-lt); font-size:11px }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* --- section heading block ------------------------------------------------- */
.sec-head{ max-width:760px; margin-bottom:clamp(40px,5vw,64px) }
.sec-head.center{ margin-inline:auto; text-align:center }
.sec-head p{ margin-top:20px }

/* --- the three bars -------------------------------------------------------- */
.bars{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(240,231,214,.14) }
.bar-card{
  position:relative; background:var(--ink-2); overflow:hidden;
  display:flex; flex-direction:column; min-height:520px;
  transition:background .4s var(--ease);
}
.bar-card:hover{ background:var(--ink-3) }
.bar-media{ position:relative; aspect-ratio:4/3.1; overflow:hidden }
.bar-media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.15) contrast(1.04) brightness(1.06);
  transition:transform .9s var(--ease), filter .6s var(--ease);
}
.bar-card:hover .bar-media img{ transform:scale(1.06); filter:grayscale(0) contrast(1.04) brightness(1.12) }
.bar-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,16,14,0) 42%, rgba(25,22,19,.78) 100%);
}
.bar-num{
  position:absolute; top:18px; left:20px; z-index:2;
  font-family:var(--display); font-size:34px; color:var(--rawhide-lt);
  text-shadow:0 2px 14px rgba(18,16,14,.9), 0 0 3px rgba(18,16,14,.7);
}
.bar-body{ padding:30px clamp(22px,2.4vw,34px) 34px; display:flex; flex-direction:column; flex:1 }
.bar-body h3{ margin-bottom:14px }
.bar-body p{ font-size:15.5px; line-height:1.7; color:#B9AB94; flex:1 }
.bar-meta{
  display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 22px;
}
.chip{
  font-family:var(--label); font-size:10.5px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
  border:1px solid rgba(201,148,74,.4); color:var(--rawhide);
  padding:5px 11px; border-radius:2px;
}

/* --- split feature --------------------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(32px,5vw,80px) }
.split.rev .split-media{ order:2 }
.split-media{ position:relative }
.split-media img{ width:100%; aspect-ratio:4/5; object-fit:cover }
.split-media.wide img{ aspect-ratio:5/4 }
.split-tag{
  position:absolute; bottom:-1px; left:-1px;
  background:var(--oxblood); color:var(--bone);
  font-family:var(--label); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  padding:11px 20px;
}
.split-body h2{ margin-bottom:22px }

/* --- product grid ---------------------------------------------------------- */
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px) }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,34px) }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,34px) }

.card{ display:block; position:relative; group:card }
.card-media{ position:relative; overflow:hidden; background:var(--ink-3); aspect-ratio:4/5 }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
.card:hover .card-media img{ transform:scale(1.05) }
.card-flag{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--ink); color:var(--rawhide);
  font-family:var(--label); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 10px;
}
.card-flag.sold{ background:var(--muted-dk); color:var(--bone) }
.card-body{ padding:16px 2px 0 }
.card-body h3{
  font-family:var(--label); font-weight:500; font-size:15px; letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:6px;
}
.card-price{ font-size:14.5px; color:var(--muted) }
.on-bone .card-price{ color:var(--muted-dk) }
.card-note{ font-size:13px; color:var(--muted); font-style:italic }

/* --- process steps --------------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:rgba(42,35,28,.16) }
.step{ background:var(--bone); padding:34px clamp(20px,2vw,30px) 38px }
.step-n{
  font-family:var(--display); font-size:44px; color:var(--oxblood); line-height:1; margin-bottom:16px;
  opacity:.9;
}
.step h3{ font-family:var(--label); font-weight:600; font-size:17px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px }
.step p{ font-size:15px; line-height:1.7; color:#57493A }

/* --- quote ----------------------------------------------------------------- */
.quote{ text-align:center; max-width:900px; margin-inline:auto }
.quote blockquote{
  margin:0 0 24px; font-family:var(--body); font-style:italic;
  font-size:clamp(21px,3vw,36px); line-height:1.4; color:var(--bone);
}
.quote cite{
  font-family:var(--label); font-style:normal; font-size:12px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--rawhide);
}

/* --- FAQ ------------------------------------------------------------------- */
.faq{ max-width:880px; margin-inline:auto; border-top:1px solid rgba(240,231,214,.16) }
.on-bone .faq{ border-color:rgba(42,35,28,.18) }
.faq-item{ border-bottom:1px solid rgba(240,231,214,.16) }
.on-bone .faq-item{ border-color:rgba(42,35,28,.18) }
.faq-q{
  width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:24px 0;
  font-family:var(--label); font-weight:500; font-size:clamp(15px,1.7vw,19px);
  letter-spacing:.04em; text-transform:uppercase;
  transition:color .25s;
}
.faq-q:hover{ color:var(--rawhide) }
.faq-icon{ flex:none; width:16px; height:16px; position:relative }
.faq-icon::before,.faq-icon::after{
  content:''; position:absolute; background:currentColor; transition:transform .35s var(--ease);
}
.faq-icon::before{ top:7.5px; left:0; width:16px; height:1.5px }
.faq-icon::after{ left:7.5px; top:0; width:1.5px; height:16px }
.faq-item.open .faq-icon::after{ transform:rotate(90deg) }
.faq-item.open .faq-q{ color:var(--rawhide) }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease) }
.faq-a > div{ padding:0 0 26px; max-width:70ch; font-size:16px; color:#B9AB94 }
.on-bone .faq-a > div{ color:#57493A }

/* --- forms ----------------------------------------------------------------- */
.form-shell{
  background:var(--ink-2); border:1px solid rgba(240,231,214,.14);
  padding:clamp(26px,3.6vw,50px);
}
.on-bone .form-shell{ background:#fff; border-color:rgba(42,35,28,.16) }
.fieldset{ border:0; padding:0; margin:0 0 34px }
.fieldset:last-of-type{ margin-bottom:26px }
.legend{
  font-family:var(--label); font-size:12px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--rawhide);
  padding-bottom:12px; margin-bottom:24px; width:100%;
  border-bottom:1px solid rgba(201,148,74,.3);
}
.on-bone .legend{ color:var(--oxblood); border-color:rgba(142,47,39,.28) }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; margin-bottom:18px }
.f-row.one{ grid-template-columns:1fr }
.f-row.three{ grid-template-columns:repeat(3,1fr) }
.field{ display:flex; flex-direction:column; gap:8px }
.field label,.f-lab{
  font-family:var(--label); font-size:11.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-3);
}
.on-bone .field label,.on-bone .f-lab{ color:#6E6355 }
.field .req{ color:var(--oxblood-lt) }
.on-bone .field .req{ color:var(--oxblood) }
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:16px; color:var(--bone);
  background:rgba(240,231,214,.05);
  border:1px solid rgba(240,231,214,.2);
  padding:13px 14px; border-radius:0; width:100%;
  transition:border-color .25s, background .25s;
  -webkit-appearance:none; appearance:none;
}
.on-bone .field input,.on-bone .field select,.on-bone .field textarea{
  color:#2A231C; background:#FBF7EF; border-color:rgba(42,35,28,.22);
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9944A' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
.field textarea{ min-height:130px; resize:vertical; line-height:1.65 }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--rawhide); background:rgba(240,231,214,.09);
}
.on-bone .field input:focus,.on-bone .field select:focus,.on-bone .field textarea:focus{ background:#fff }
.field input::placeholder,.field textarea::placeholder{ color:rgba(240,231,214,.32) }
.on-bone .field input::placeholder,.on-bone .field textarea::placeholder{ color:rgba(42,35,28,.35) }
.hint{ font-size:13px; color:var(--muted); font-style:italic }

/* option tiles (radio / checkbox) */
.opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.opts.two{ grid-template-columns:repeat(2,1fr) }
.opts.four{ grid-template-columns:repeat(4,1fr) }
.opt{ position:relative }
.opt input{ position:absolute; opacity:0; inset:0; cursor:pointer }
.opt span{
  display:flex; flex-direction:column; gap:4px;
  border:1px solid rgba(240,231,214,.22); padding:14px 16px;
  font-family:var(--label); font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  transition:.25s var(--ease); min-height:100%; cursor:pointer;
}
.on-bone .opt span{ border-color:rgba(42,35,28,.22); background:#FBF7EF }
.opt small{
  font-family:var(--body); font-size:12.5px; font-weight:400; letter-spacing:0;
  text-transform:none; color:var(--muted); line-height:1.5;
}
.opt input:checked + span{ border-color:var(--rawhide); background:rgba(201,148,74,.14); color:var(--rawhide-lt) }
.on-bone .opt input:checked + span{ background:rgba(142,47,39,.08); border-color:var(--oxblood); color:var(--oxblood) }
.opt input:focus-visible + span{ outline:2px solid var(--rawhide); outline-offset:2px }
.opt span:hover{ border-color:rgba(201,148,74,.6) }

.form-foot{ display:flex; flex-direction:column; gap:14px; align-items:flex-start }
.form-note{ font-size:13.5px; color:var(--muted); font-style:italic }

.form-aside{
  background:var(--ink-3); border-left:2px solid var(--oxblood);
  padding:26px 28px; font-size:15px; line-height:1.7; color:#B9AB94;
}
.on-bone .form-aside{ background:var(--bone-2); color:#57493A }
.form-aside h4{
  font-family:var(--label); font-weight:600; font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--rawhide); margin-bottom:12px;
}
.on-bone .form-aside h4{ color:var(--oxblood) }
.form-aside ul{ margin:0; padding-left:18px }
.form-aside li{ margin-bottom:7px }

/* --- page hero (interior) --------------------------------------------------- */
.page-hero{
  position:relative; padding-block:clamp(90px,11vw,150px);
  border-bottom:1px solid rgba(240,231,214,.12); overflow:hidden;
}
.page-hero-media{ position:absolute; inset:0; z-index:0 }
.page-hero-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 38% }
.page-hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,16,14,.82), rgba(18,16,14,.9));
}
.page-hero .wrap{ position:relative; z-index:2 }
.page-hero h1{ margin-bottom:20px }
.page-hero .lede{ max-width:640px }
.crumb{
  font-family:var(--label); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-bottom:22px;
}
.crumb a:hover{ color:var(--rawhide) }

/* --- newsletter ------------------------------------------------------------- */
.news{ text-align:center; max-width:620px; margin-inline:auto }
.news form{ display:flex; gap:10px; margin-top:26px }
.news input{
  flex:1; font-family:var(--body); font-size:16px; padding:15px 16px;
  background:transparent; border:1px solid rgba(240,231,214,.3); color:var(--bone);
}
.news input:focus{ outline:none; border-color:var(--rawhide) }
.news input::placeholder{ color:rgba(240,231,214,.35) }

/* --- footer ----------------------------------------------------------------- */
.site-foot{ background:var(--ink); border-top:1px solid rgba(240,231,214,.14); padding-top:clamp(56px,7vw,88px) }
.foot-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(28px,4vw,56px);
  padding-bottom:clamp(44px,5vw,64px);
}
.foot-logo img{ width:210px; margin-bottom:22px }
.foot-grid p{ font-size:15px; color:var(--muted); max-width:34ch }
.foot-col h4{
  font-family:var(--label); font-size:11.5px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--rawhide); margin-bottom:18px;
}
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px }
.foot-col a{ font-size:15px; color:#C0B29B; transition:color .25s }
.foot-col a:hover{ color:var(--bone) }
.foot-bar{
  border-top:1px solid rgba(240,231,214,.12); padding-block:22px;
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
  font-family:var(--label); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-dk);
}
.foot-bar a:hover{ color:var(--rawhide) }
.socials{ display:flex; gap:14px; align-items:center }
.socials a{ display:flex; align-items:center; gap:7px; color:var(--muted) }
.socials a:hover{ color:var(--rawhide) }
.socials svg{ width:16px; height:16px; fill:currentColor }

/* --- misc ------------------------------------------------------------------- */
.tag-strip{
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center;
  font-family:var(--label); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.tag-strip span{ display:inline-flex; align-items:center; gap:26px }
.tag-strip span:not(:last-child)::after{ content:'✦'; color:var(--oxblood-lt); font-size:9px }

.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(240,231,214,.14) }
.stat{ background:var(--ink-2); padding:34px 26px; text-align:center }
.stat b{ display:block; font-family:var(--display); font-size:clamp(30px,4vw,50px); color:var(--rawhide); line-height:1; margin-bottom:10px }
.stat span{ font-family:var(--label); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted) }

.cta-band{ position:relative; overflow:hidden; text-align:center }
.cta-band-media{ position:absolute; inset:0; z-index:0 }
.cta-band-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 30% }
.cta-band-media::after{ content:''; position:absolute; inset:0; background:rgba(18,16,14,.78) }
.cta-band .wrap{ position:relative; z-index:2 }
.cta-band h2{ margin-bottom:22px }
.cta-band .lede{ max-width:560px; margin:0 auto 34px }

/* --- reveal animation -------------------------------------------------------- */
.rv{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease) }
.rv.in{ opacity:1; transform:none }
.rv-d1{ transition-delay:.09s } .rv-d2{ transition-delay:.18s } .rv-d3{ transition-delay:.27s }

/* --- responsive -------------------------------------------------------------- */
@media (max-width:1080px){
  .grid-4{ grid-template-columns:repeat(2,1fr) }
  .steps{ grid-template-columns:repeat(2,1fr) }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-logo{ grid-column:1 / -1 }
}
@media (max-width:900px){
  .nav{ display:none }
  /* nav is removed from the grid, so pin the remaining items to keep the logo centred */
  .burger{ display:flex; grid-column:3; justify-self:end }
  .head-inner{ grid-template-columns:1fr auto 1fr; height:68px }
  .head-logo{ grid-column:2 }
  .head-logo img{ height:42px }
  .hero-scroll{ display:none }
  .hero-inner{ padding-top:80px }
  .bars{ grid-template-columns:1fr }
  .bar-card{ min-height:0 }
  .split{ grid-template-columns:1fr; gap:28px }
  .split.rev .split-media{ order:0 }
  .split-media img,.split-media.wide img{ aspect-ratio:4/3 }
  .grid-3{ grid-template-columns:repeat(2,1fr) }
  .stat-row{ grid-template-columns:1fr }
  .opts,.opts.four{ grid-template-columns:repeat(2,1fr) }
  .f-row,.f-row.three{ grid-template-columns:1fr }
}
@media (max-width:640px){
  body{ font-size:16px }
  .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr 1fr; gap:14px }
  .steps{ grid-template-columns:1fr }
  .foot-grid{ grid-template-columns:1fr }
  .news form{ flex-direction:column }
  .opts,.opts.two,.opts.four{ grid-template-columns:1fr }
  .hero{ min-height:88vh }
  .btn{ padding:15px 26px; font-size:12.5px }
  .foot-bar{ justify-content:center; text-align:center }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .rv{ opacity:1; transform:none }
  html{ scroll-behavior:auto }
}

/* --- hero brand line -------------------------------------------------------- */
.hero-line{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(20px,2.9vw,40px); line-height:1.06; letter-spacing:.004em;
  color:var(--bone); margin:0 0 20px;
  text-shadow:0 2px 34px rgba(18,16,14,.65);
}
.hero-line .hi{ color:var(--rawhide-lt) }

/* --- founder story ---------------------------------------------------------- */
.story{ max-width:70ch; margin-inline:auto }
.story .lead-in{
  font-family:var(--body); font-style:italic;
  font-size:clamp(20px,2.2vw,28px); line-height:1.5;
  color:var(--bone); margin-bottom:30px;
}
.on-bone .story .lead-in{ color:#2A231C }
.story p{ font-size:clamp(16.5px,1.5vw,19px); line-height:1.85; color:#C4B7A1 }
.on-bone .story p{ color:#4C4032 }
.story-sig{
  margin-top:36px; padding-top:22px;
  border-top:1px solid rgba(240,231,214,.18);
  font-family:var(--label); font-size:12px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--rawhide);
}
.on-bone .story-sig{ border-color:rgba(42,35,28,.2); color:var(--oxblood) }
.story-mark{
  font-family:var(--display); font-size:64px; line-height:.6;
  color:var(--oxblood-lt); opacity:.85; display:block; margin-bottom:14px;
}

/* --- manifesto -------------------------------------------------------------- */
.manifesto{ text-align:center }
.manifesto b{
  display:block; font-family:var(--display); text-transform:uppercase; font-weight:400;
  font-size:clamp(32px,6vw,78px); line-height:1.02; color:var(--bone);
}
.on-bone .manifesto b{ color:#2A231C }
.manifesto b + b{ margin-top:4px }
.manifesto b.hi{ color:var(--rawhide-lt) }
.on-bone .manifesto b.hi{ color:var(--oxblood) }
.manifesto-note{
  margin-top:30px; font-family:var(--label); font-size:12.5px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
}

@media (max-width:640px){
  .story-mark{ font-size:48px }
}

/* --- closing brand line under a story block --------------------------------- */
.story-close{
  margin-top:38px; padding-top:26px;
  border-top:1px solid rgba(240,231,214,.18);
  font-family:var(--body); font-style:italic;
  font-size:clamp(17px,1.7vw,21px); line-height:1.6;
  color:var(--rawhide-lt); text-align:center;
}
.on-bone .story-close{ border-color:rgba(42,35,28,.2); color:var(--oxblood) }

/* --- events calendar --------------------------------------------------------- */
.ev-list{ border-top:1px solid rgba(240,231,214,.16) }
.on-bone .ev-list{ border-color:rgba(42,35,28,.18) }
.ev{
  display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:clamp(18px,3vw,42px);
  padding:26px 0; border-bottom:1px solid rgba(240,231,214,.16);
  transition:background .3s var(--ease);
}
.on-bone .ev{ border-color:rgba(42,35,28,.18) }
.ev:hover{ background:rgba(201,148,74,.05) }
.ev-date{
  font-family:var(--label); font-weight:600; text-transform:uppercase; line-height:1.1;
}
.ev-date b{ display:block; font-family:var(--display); font-size:34px; color:var(--rawhide); line-height:1 }
.on-bone .ev-date b{ color:var(--oxblood) }
.ev-date span{ font-size:12px; letter-spacing:.2em; color:var(--muted) }
.ev-main h3{
  font-family:var(--label); font-weight:600; font-size:clamp(18px,2vw,24px);
  text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px;
}
.ev-main p{ font-size:15px; color:var(--muted); margin:0 }
.on-bone .ev-main p{ color:var(--muted-dk) }
.ev-tag{
  font-family:var(--label); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid rgba(201,148,74,.45); color:var(--rawhide); padding:6px 12px; white-space:nowrap;
}
.on-bone .ev-tag{ border-color:rgba(142,47,39,.4); color:var(--oxblood) }
.ev-tag.past{ border-color:rgba(240,231,214,.22); color:var(--muted) }
.ev-empty{
  border:1px dashed rgba(201,148,74,.4); padding:clamp(28px,4vw,48px); text-align:center;
  font-style:italic; color:var(--muted);
}
@media (max-width:760px){
  .ev{ grid-template-columns:1fr; gap:12px; padding:22px 0 }
  .ev-date{ display:flex; align-items:baseline; gap:10px }
  .ev-date b{ font-size:26px }
  .ev-tag{ justify-self:start }
}

/* --- write-in "other" fields ------------------------------------------------- */
.write-in{
  display:none; margin-top:14px;
  border-left:2px solid var(--rawhide); padding-left:16px;
}
.write-in.show{ display:block; animation:wiIn .3s var(--ease) }
@keyframes wiIn{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
.write-in label{
  display:block; margin-bottom:8px;
  font-family:var(--label); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--rawhide);
}
.on-bone .write-in{ border-color:var(--oxblood) }
.on-bone .write-in label{ color:var(--oxblood) }

/* --- file upload ------------------------------------------------------------- */
.upload{
  border:1px dashed rgba(201,148,74,.5); background:rgba(201,148,74,.04);
  padding:clamp(22px,3vw,34px); text-align:center; cursor:pointer; display:block;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.upload:hover{ border-color:var(--rawhide); background:rgba(201,148,74,.09) }
.upload input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden }
.upload svg{ width:30px; height:30px; margin:0 auto 12px; fill:none; stroke:var(--rawhide); stroke-width:1.5 }
.upload b{
  display:block; font-family:var(--label); font-weight:600; font-size:14px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--bone); margin-bottom:6px;
}
.on-bone .upload b{ color:#2A231C }
.upload span{ font-size:13.5px; color:var(--muted); font-style:italic }
.upload:focus-within{ outline:2px solid var(--rawhide); outline-offset:3px }
.upload.has-file{ border-style:solid; border-color:var(--rawhide); background:rgba(201,148,74,.1) }
.upload.has-file b::before{ content:'✓ '; color:var(--rawhide) }