/* ============================================================
   THE ANIMALS PAGE
   ============================================================ */
/* Animals hero — a wall of faces that fly in */
.fhero{ position:relative; min-height:90svh; display:flex; align-items:center; padding:clamp(120px,16vh,180px) 0 clamp(60px,8vh,90px); overflow:hidden; color:#fff; background:var(--bark-deep); }
.fhero__grid{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(5,1fr); grid-auto-rows:1fr; gap:8px; padding:8px; }
.fhero__tile{ overflow:hidden; border-radius:12px; will-change:transform,opacity; }
.fhero__tile img{ width:100%; height:100%; object-fit:cover; }
.fhero__veil{ position:absolute; inset:0; z-index:1; background:
  linear-gradient(100deg, rgba(20,16,10,.95) 0%, rgba(20,16,10,.8) 36%, rgba(20,16,10,.42) 62%, rgba(20,16,10,.5) 100%),
  linear-gradient(180deg, rgba(20,16,10,.5) 0%, rgba(20,16,10,.1) 26%, rgba(20,16,10,.55) 100%); }
.fhero__content{ position:relative; z-index:2; width:100%; text-shadow:0 2px 30px rgba(0,0,0,.5); }
.fhero .eyebrow{ color:var(--gold-soft); }
.fhero__title{ font-family:var(--display); font-weight:400; font-size:clamp(2.6rem,5.6vw,5rem); line-height:1.05; letter-spacing:-.02em; margin:.4rem 0 1.4rem; }
.fhero__title em{ font-style:italic; color:var(--gold-soft); }
.fhero__lead{ font-size:clamp(1.05rem,1.4vw,1.25rem); max-width:50ch; color:rgba(255,255,255,.9); line-height:1.65; margin-bottom:2rem; }
.fhero__cta{ display:flex; flex-wrap:wrap; gap:14px; }
@media (max-width:880px){ .fhero__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px){ .fhero__cta .btn{ flex:0 1 auto; } }

/* Visit-style stats (cards) reused here */
.vstats{ padding:clamp(56px,7vw,90px) 0; }
.vstats .stat{ background:transparent; border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:40px 18px 34px; transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease); }
.vstats .stat::before{ display:none; }
.vstats .stat__label{ max-width:none; white-space:nowrap; font-size:1.02rem; margin-top:14px; transition:color .4s var(--ease); }
.vstats .stat__num{ transition:color .4s var(--ease); }
.vstats .stat:hover{ background:var(--bark); border-color:transparent; transform:translateY(-6px); box-shadow:0 32px 64px -40px rgba(44,39,31,.5); }
.vstats .stat:hover .stat__num{ color:var(--gold-soft); }
.vstats .stat:hover .stat__label{ color:rgba(255,255,255,.8); }

/* Roster of animals */
.roster{ padding:var(--section) 0; background:var(--cream-2); }
.roster__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:clamp(36px,4vw,60px); }
.roster__intro{ color:var(--text-soft); max-width:40ch; font-size:1.05rem; }
.aroster{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.aroster .a-card{ width:auto; }

/* What you can do together */
.ways{ padding:var(--section) 0; background:var(--bg); text-align:center; }
.ways__title{ max-width:20ch; margin:0 auto clamp(40px,5vw,64px); }
.ways__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; text-align:left; }
.ways__item{ background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 26px; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); }
.ways__item:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -40px rgba(44,39,31,.4); border-color:transparent; }
.ways__ico{ display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:14px; background:var(--cream); color:var(--gold-deep); margin-bottom:18px; transition:background .4s var(--ease), color .4s var(--ease); }
.ways__ico svg{ width:28px; height:28px; }
.ways__item:hover .ways__ico{ background:var(--gold-deep); color:#fff; }
.ways__item h3{ font-family:var(--display); font-size:1.3rem; font-weight:440; color:var(--bark); margin-bottom:8px; }
.ways__item p{ color:var(--text-soft); font-size:.96rem; }

@media (max-width:1024px){
  .aroster{ grid-template-columns:1fr 1fr; }
  .ways__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .aroster{ grid-template-columns:1fr; }
  .ways__grid{ grid-template-columns:1fr; }
  .subhero__cta .btn{ flex:0 1 auto; }
}

/* FAQ (shared pattern) */
.faq{ padding:var(--section) 0; background:var(--bg); }
.faq__inner{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(40px,6vw,90px); align-items:start; }
.faq__head .h2{ margin-top:.4rem; }
.faq__sub{ color:var(--text-soft); font-size:1.02rem; margin-top:1.1rem; max-width:34ch; }
.faq__item{ border-top:1px solid var(--line); padding:6px 0; }
.faq__item:last-child{ border-bottom:1px solid var(--line); }
.faq__item summary{ list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative; font-family:var(--display); font-size:clamp(1.15rem,1.7vw,1.4rem); color:var(--bark); font-weight:440; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:1.6rem; color:var(--gold-deep); transition:transform .4s var(--ease); font-family:var(--sans); font-weight:300; }
.faq__item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq__item p{ color:var(--text-soft); font-size:1.02rem; line-height:1.7; padding:0 40px 22px 0; max-width:60ch; }
@media (max-width:1024px){ .faq__inner{ grid-template-columns:1fr; } }