/* The Ark Wildlife - static rebuild.
   Design tokens lifted verbatim from the original Replit build's index.css :root. */

:root{
  --background:hsl(210,20%,98%);
  --foreground:hsl(222.2,84%,4.9%);
  --card:hsl(0,0%,100%);
  --primary:hsl(154,66%,20%);
  --primary-foreground:hsl(210,40%,98%);
  --secondary:hsl(199,68%,43%);
  --accent:hsl(30,100%,48%);
  --muted:hsl(210,40%,96%);
  --muted-foreground:hsl(215.4,16.3%,46.9%);
  --border:hsl(214.3,31.8%,91.4%);
  --alt:hsl(210,40%,96.1%);
  --radius:.5rem;
  --shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.5;color:var(--foreground);background:var(--background);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,figure,fieldset{margin:0;padding:0}
ul{list-style:none}

.skip{position:absolute;left:-9999px;top:0;background:var(--primary);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}

.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.wrap-narrow{max-width:896px;margin:0 auto;padding:0 32px}

.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--border)}
.hdr{height:64px;display:flex;align-items:center;gap:32px}
.brand img{width:105px;height:48px;object-fit:contain}
.mainnav{display:flex;gap:32px;margin-left:8px}
.mainnav a{font-weight:500;color:var(--foreground);transition:color .15s}
.mainnav a:hover,.mainnav a.active{color:var(--primary)}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.emergency{text-align:right;line-height:1.2}
.emergency-label{display:block;font-size:12px;color:var(--muted-foreground)}
.emergency-num{display:block;font-size:14px;font-weight:700;color:var(--accent)}
.burger{display:none;background:none;border:0;padding:8px;font-size:22px;color:var(--foreground);cursor:pointer}

.mobilenav{display:none;flex-direction:column;border-top:1px solid var(--border);background:#fff;padding:8px 0}
.mobilenav a{padding:12px 32px;font-weight:500}
.mobilenav a:hover{background:var(--muted);color:var(--primary)}
.mobilenav-call{color:var(--accent);font-weight:700}
.mobilenav.open{display:flex}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px;border-radius:var(--radius);border:1px solid transparent;
  font-size:15px;font-weight:500;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
  font-family:inherit;
}
.btn .i{width:16px;height:16px}
.btn-sm{height:36px;padding:0 14px;font-size:14px}
.btn-primary{background:var(--primary);color:var(--primary-foreground)}
.btn-primary:hover{background:hsl(154,66%,16%)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:hsl(30,100%,42%)}
.btn-outline{background:#fff;border-color:var(--border);color:var(--foreground)}
.btn-outline:hover{background:var(--muted)}
.btn-block{width:100%;height:48px}

/* ---------- sections ---------- */
section{padding:80px 0;background:#fff}
section.alt{background:var(--alt)}
#home{padding:64px 0 0;background:transparent}
#quote{background:transparent}
.sec-head{text-align:center;margin:0 auto 64px}
.sec-head p{max-width:768px;margin:0 auto}
.sec-head h2{font-size:36px;line-height:40px;font-weight:700;margin-bottom:16px}
.sec-head p{font-size:20px;line-height:28px;color:var(--muted-foreground)}

.grid{display:grid;gap:32px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:80px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--primary);margin-bottom:16px}
.eyebrow .i{width:16px;height:16px}
h1{font-size:60px;line-height:60px;font-weight:700;letter-spacing:-.02em;margin-bottom:24px}
.g{color:var(--primary)}
.lead{font-size:20px;line-height:1.625;color:var(--muted-foreground);margin-bottom:32px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:48px}
.stats{display:flex;gap:48px}
.stat,.about-stats>div{display:flex;flex-direction:column}
.stat-n{font-size:30px;line-height:36px;font-weight:700;color:var(--primary)}
.stat-l{font-size:14px;color:var(--muted-foreground)}
.hero-media{position:relative}
.hero-media img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow-xl)}
.cert-badge{
  position:absolute;left:-24px;bottom:-24px;display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow-lg);
}
.badge-i{width:26px;height:26px;color:var(--accent)}
.cert-badge span{display:flex;flex-direction:column;line-height:1.3}
.cert-badge strong{font-size:14px;font-weight:600}
.cert-badge em{font-size:12px;font-style:normal;color:var(--muted-foreground)}

/* ---------- services ---------- */
.card.svc{background:hsl(210,20%,98%);padding:32px}
.svc-i{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:8px;font-size:24px;margin-bottom:24px}
.svc-i .i{width:24px;height:24px}
.i-green{color:var(--primary)}
.i-blue{color:var(--secondary)}
.i-red{color:hsl(0,84%,60%)}
.i-amber{color:var(--accent)}
.i-teal{color:hsl(174,62%,37%)}
.svc h3{font-size:20px;line-height:28px;font-weight:600;margin-bottom:8px}
.svc p{font-size:16px;line-height:24px;color:var(--muted-foreground);margin-bottom:24px}
.accred h3{font-size:18px;line-height:28px;font-weight:600;margin-bottom:8px}
.accred p{font-size:14px;line-height:20px;color:var(--muted-foreground)}
.ticks{display:flex;flex-direction:column;gap:8px}
.ticks li{position:relative;padding-left:22px;font-size:14px;line-height:20px;color:var(--muted-foreground)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.35em;width:12px;height:12px;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M20.3 5.7 9 17l-5.3-5.3 1.4-1.4L9 14.2l9.9-9.9z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M20.3 5.7 9 17l-5.3-5.3 1.4-1.4L9 14.2l9.9-9.9z'/></svg>") center/contain no-repeat;
}
.ticks-green li::before{background:var(--primary)}
.ticks-blue li::before{background:var(--secondary)}

/* ---------- compliance ---------- */
.accreds{margin-bottom:48px}
.accred{padding:32px;text-align:center;display:flex;flex-direction:column;align-items:center}
.accred-i{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:16px}
.accred-i .i{width:32px;height:32px}
.pill{display:inline-block;margin-top:16px;padding:2px 10px;border-radius:9999px;font-size:12px;line-height:16px;font-weight:600;color:hsl(210,40%,98%);background:var(--secondary)}
.cites-panel{padding:32px}
.cites-title{font-size:20px;font-weight:600;margin-bottom:24px}
.cites-panel h4{font-size:15px;font-weight:600;margin-bottom:16px}

/* ---------- gallery ---------- */
/* The caption is a hover overlay on the original, not a visible label. */
.gallery{gap:24px}
.shot{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin:0}
.shot img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .3s ease}
.shot figcaption{
  position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;
  background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.2),rgba(0,0,0,0));
  color:#fff;font-size:16px;font-weight:500;line-height:1.35;
  opacity:0;transition:opacity .3s ease;
}
.shot:hover figcaption,.shot:focus-within figcaption{opacity:1}
.shot:hover img{transform:scale(1.04)}

/* ---------- species ---------- */
.card.sp{overflow:hidden;display:flex;flex-direction:column}
.sp img{width:100%;aspect-ratio:382/192;object-fit:cover}
.sp-body{padding:24px}
.sp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.sp-head h3{font-size:20px;line-height:28px;font-weight:600}
.tag{background:hsl(0,84%,60%);color:hsl(210,40%,98%);font-size:12px;line-height:16px;font-weight:600;padding:2px 10px;border-radius:9999px;white-space:nowrap}
.sp p{font-size:16px;line-height:24px;color:var(--muted-foreground);margin-bottom:16px}
.dots{display:flex;flex-direction:column;gap:8px}
.dots li{font-size:14px;line-height:20px;color:var(--muted-foreground)}
.dots li::before{content:"\2022  ";color:var(--muted-foreground)}

/* ---------- testimonials ---------- */
.testi{max-width:672px;margin:0 auto;overflow:hidden}
.testi>picture img{width:100%;aspect-ratio:670/256;object-fit:cover}
.testi-body{padding:24px;text-align:center;display:flex;flex-direction:column;align-items:center}
.testi-logo{width:112px;height:64px;object-fit:contain;margin-bottom:12px}
.stars{display:flex;gap:2px;color:var(--accent);margin-bottom:12px}
.st{width:16px;height:16px;fill:currentColor;stroke:none}
.testi-name{font-size:15px;font-weight:600}
.testi-org{font-size:12px;color:var(--muted-foreground)}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-copy h2{font-size:36px;line-height:44px;font-weight:700;margin-bottom:24px}
.pts{display:flex;flex-direction:column;gap:24px;margin-bottom:32px}
.pt{display:flex;gap:16px}
.pt-i{width:20px;height:20px;font-size:20px;margin-top:2px;display:inline-flex}
.pt-i .i{width:20px;height:20px}
.pt h3{font-size:16px;font-weight:600;margin-bottom:4px}
.pt p{font-size:14px;line-height:1.65;color:var(--muted-foreground)}
.commit{background:var(--muted);border-radius:var(--radius);padding:24px}
.commit h3{font-size:15px;font-weight:600;margin-bottom:8px}
.commit p{font-size:13px;line-height:1.7;color:var(--muted-foreground)}
.about-media{position:relative}
.about-media img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow-xl)}
.about-stats{
  position:absolute;left:24px;bottom:-28px;right:24px;display:flex;gap:48px;justify-content:center;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 24px;box-shadow:var(--shadow-lg);
}
.about-stats>div{align-items:center}

/* ---------- contact ---------- */
.contact-cards{margin-bottom:48px}
.cc{padding:32px;text-align:center;display:flex;flex-direction:column;align-items:center}
.cc-i{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:24px}
.cc-i .i{width:32px;height:32px}
.cc h3{font-size:20px;line-height:28px;font-weight:600;margin-bottom:16px}
.cc p{font-size:16px;line-height:24px;color:var(--muted-foreground);margin-bottom:16px}
.cc-strong{font-size:24px;line-height:32px;font-weight:700;color:hsl(0,84%,60%);margin-bottom:8px}
.cc-line{display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;line-height:24px;color:var(--muted-foreground);margin-bottom:8px}
.cc-line .i{width:16px;height:16px;color:var(--primary)}
.cc-line a:hover{color:var(--primary)}
.cc-meta{font-size:14px !important;line-height:20px;color:var(--muted-foreground);margin-bottom:0 !important}
.hq-block{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;background:var(--alt);border-radius:var(--radius);padding:40px}
.hq h3{font-size:22px;font-weight:700;margin-bottom:24px}
.hq-row{display:flex;gap:14px;margin-bottom:20px}
.hq-row .i{width:18px;height:18px;color:var(--primary);margin-top:2px}
.hq-row div{display:flex;flex-direction:column;gap:2px}
.hq-row strong{font-size:15px;font-weight:600}
.hq-row span{font-size:14px;color:var(--muted-foreground)}
.directcontact{padding:32px;display:flex;flex-direction:column}
.directcontact h3{font-size:22px;font-weight:700;margin-bottom:12px}
.directcontact p{font-size:15px;line-height:1.65;color:var(--muted-foreground);margin-bottom:24px}
.dc-btn{margin-bottom:12px;font-size:16px}
.dc-btn .i{width:18px;height:18px}
.dc-meta{font-size:13px !important;color:var(--muted-foreground);margin:8px 0 0 !important;text-align:center}
.follow{text-align:center;margin-top:56px}
.follow h3{font-size:18px;font-weight:600;margin-bottom:20px}
.social{display:flex;gap:20px;justify-content:center}
.social a{color:var(--accent);font-size:20px;display:inline-flex;transition:color .15s}
.social a:hover{color:var(--primary)}
.social .i{width:20px;height:20px}

/* ---------- footer ---------- */
footer{background:var(--primary);color:hsl(210,40%,98%);padding:64px 0 0}
.ft{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:40px}
.ft p{font-size:14px;line-height:1.65;color:hsla(210,40%,98%,.8)}
.ft-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ft-logo .i{width:22px;height:22px;color:hsl(210,40%,98%)}
.ft-logo span{display:flex;flex-direction:column;line-height:1.25}
.ft-logo strong{font-size:16px;font-weight:700;color:hsl(210,40%,98%)}
.ft-logo em{font-size:12px;font-style:normal;color:hsla(210,40%,98%,.75)}
.ft-badge{font-size:13px !important;margin-top:10px}
.ft h4{font-size:15px;font-weight:600;margin-bottom:16px}
.ft ul{display:flex;flex-direction:column;gap:10px}
.ft li{font-size:14px;color:hsla(210,40%,98%,.8)}
.ft a:hover{color:#fff}
.ft-contact li{display:flex;align-items:center;gap:8px}
.ft-contact .i{width:14px;height:14px}
.ft-em{font-size:13px !important;font-weight:600;margin-top:20px;color:hsl(210,40%,98%) !important}
.ft-emnum{font-size:15px !important;font-weight:700;color:var(--accent) !important}
.ft-base{margin-top:48px;padding-top:24px;padding-bottom:24px;border-top:1px solid hsla(210,40%,98%,.2)}
.ft-base p{font-size:13px;color:hsla(210,40%,98%,.7);text-align:center}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .hero{grid-template-columns:1fr 1fr;gap:32px}
  h1{font-size:48px;line-height:52px}
}
@media (max-width:1000px){
  .mainnav{display:none}
  .burger{display:inline-flex}
  .grid-4{grid-template-columns:repeat(3,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .ft{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .wrap,.wrap-narrow{padding:0 20px}
  section{padding:56px 0}
  #home{padding:32px 0 0}
  .hero{grid-template-columns:1fr;gap:40px;padding-bottom:56px}
  .hero-media{margin-bottom:24px}
  .cert-badge{left:12px;bottom:-20px}
  .about{grid-template-columns:1fr;gap:56px}
  .about-stats{position:static;margin-top:16px;border-radius:var(--radius)}
  .hq-block{grid-template-columns:1fr;gap:32px;padding:28px}
}
@media (max-width:640px){
  /* the original collapses to a single column for every grid at this width */
  .wrap,.wrap-narrow{padding:0 16px}
  h1{font-size:36px;line-height:40px}
  .sec-head{margin-bottom:48px}
  .sec-head h2{font-size:30px;line-height:36px}
  .about-copy h2{font-size:30px;line-height:36px}
  .grid,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;gap:24px}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .stat-n{font-size:24px;line-height:30px}
  .stat-l{font-size:13px}
  .hero-cta .btn{width:100%}
  .emergency{display:none}
  .ft{grid-template-columns:1fr;gap:32px}
  .cites-panel,.svc,.accred,.cc,.directcontact{padding:24px}
  .hq-block{padding:24px}
}

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