/* =============================================================================
   Critter Control of Central Mississippi - site styling on top of the Pro Star
   engine stylesheet (site.css). Colours come from config.php 'theme' via the
   tokens layout.php writes; nothing here hard-codes a brand colour.
   ============================================================================= */

/* --- The logo is wide (about 2:1), not a square shield ---------------------- */
.brand-mark{width:152px}
.site-header.is-stuck .brand-mark{width:128px}
@media (max-width:1079.98px){.brand-mark{width:136px}.site-header.is-stuck .brand-mark{width:118px}}
@media (max-width:599.98px){.brand-mark{width:118px}.site-header.is-stuck .brand-mark{width:104px}}
.footer-logo{width:150px;background:none;padding:0;border-radius:0}
.footer-ident{flex-direction:column;align-items:flex-start;gap:.6rem}
.splash-mark{width:clamp(160px,26vw,260px)}
.splash-inner{flex-direction:column;text-align:center;align-items:center}
@media (max-width:959.98px){.hero-mark{width:clamp(150px,44vw,220px)}}
@media (min-width:960px){
  .hero-badge img{width:clamp(260px,26vw,380px)}
  .hero-badge::before{width:min(38rem,140%)}
}

/* --- Hero photograph -------------------------------------------------------- */
.hero--photo .hero-media-still{object-position:62% 40%}
@media (max-width:959.98px){.hero--photo .hero-media-still{object-position:70% 35%}}

/* --- Seal tucked over the owner photograph ----------------------------------- */
.stack-shot .stack-inset--seal{
  width:30%;max-width:9.5rem;border:0;border-radius:50%;background:#fff;padding:6px;
  box-shadow:0 14px 30px rgba(var(--shade-rgb),.32)}
.stack-shot .stack-inset--seal img{aspect-ratio:1/1;object-fit:contain;border-radius:50%}
.js .stack-inset--seal{animation:sealTurn 1s cubic-bezier(.2,1.3,.4,1) both;animation-play-state:paused}
.is-revealed .stack-inset--seal,.reveal-off .stack-inset--seal{animation-play-state:running}
@keyframes sealTurn{from{transform:rotate(-40deg) scale(.6);opacity:0}to{transform:none;opacity:1}}

/* --- Animal cards ------------------------------------------------------------ */
.animal-grid{display:grid;gap:1rem;margin-top:2rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.animal-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.animal-card{
  position:relative;display:block;border-radius:8px;overflow:hidden;isolation:isolate;
  aspect-ratio:4/3.4;background:var(--brand-deep);color:#fff;text-decoration:none;
  box-shadow:0 8px 22px rgba(var(--shade-rgb),.14);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease}
.animal-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .8s cubic-bezier(.2,.8,.3,1),filter .4s ease;filter:saturate(.92)}
.animal-card::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,transparent 38%,rgba(var(--shade-rgb),.88) 100%)}
/* one pass of light across the photo on hover */
.animal-card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);
  transform:translateX(-130%)}
.animal-card-name{position:absolute;left:1rem;right:3rem;bottom:.85rem;
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.25rem,2.2vw,1.55rem);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.05;text-shadow:var(--ink-shadow)}
.animal-card-go{position:absolute;right:.85rem;bottom:.8rem;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent);color:var(--on-accent);
  transform:translateX(-6px);opacity:0;transition:transform .3s ease,opacity .3s ease}
.animal-card-go svg{width:18px;height:18px;fill:currentColor}
.animal-card:hover,.animal-card:focus-visible{transform:translateY(-5px);box-shadow:0 22px 44px rgba(var(--shade-rgb),.26)}
.animal-card:hover .animal-card-img,.animal-card:focus-visible .animal-card-img{transform:scale(1.07);filter:saturate(1.08)}
.animal-card:hover::after{transform:translateX(130%);transition:transform .9s ease}
.animal-card:hover .animal-card-go,.animal-card:focus-visible .animal-card-go{transform:none;opacity:1}
.animal-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* --- Numbers band -------------------------------------------------------------- */
.stats-band{
  background:
    radial-gradient(70% 140% at 12% 0%,rgba(var(--accent-rgb),.22) 0%,transparent 60%),
    var(--brand-deep);
  color:#fff;padding:clamp(2.2rem,4.5vw,3.4rem) 0;position:relative;overflow:hidden}
.stats-band::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 18px,transparent 18px 30px);opacity:.55}
.stats-grid{display:grid;gap:1.6rem;grid-template-columns:repeat(2,minmax(0,1fr));text-align:center}
@media (min-width:860px){.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{display:flex;flex-direction:column;gap:.3rem}
.stat-n{font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,6vw,4rem);line-height:1;
  color:var(--accent);font-variant-numeric:tabular-nums}
.stat-l{color:var(--on-dark);font-size:.98rem;letter-spacing:.02em}

/* --- How it works ------------------------------------------------------------- */
.steps{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;gap:1.2rem;counter-reset:none;position:relative}
@media (min-width:880px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
  /* the dotted trail joining the four steps, drawn left to right on reveal */
  .steps::before{content:"";position:absolute;left:12%;right:12%;top:31px;height:3px;z-index:0;
    background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 16px);
    transform-origin:left center;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.3,.7,.3,1) .2s}
  .steps:has(.is-revealed)::before,.reveal-off .steps::before,html:not(.reveal-ready) .steps::before{transform:none}
}
.step{position:relative;z-index:1;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  border-radius:8px;padding:1.3rem 1.2rem 1.4rem;text-align:center}
.step-n{display:grid;place-items:center;width:62px;height:62px;margin:-.2rem auto .8rem;border-radius:50%;
  background:var(--accent);color:var(--on-accent);font-family:var(--font-display);font-weight:800;font-size:1.8rem;
  box-shadow:0 0 0 6px rgba(var(--accent-rgb),.18)}
.step h3{color:#fff;margin:0 0 .4rem;font-size:1.35rem}
.step p{color:var(--on-dark-muted);margin:0;font-size:.98rem}

/* --- Page hero on the animal and service pages: keep the subject in frame ---- */
.page-hero-media img{object-position:50% 38%}

/* --- Wildlife hub cards ------------------------------------------------------- */
.hub-group{scroll-margin-top:calc(var(--nav-off) + 20px)}
.hub-jump{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.4rem}
.hub-jump a{display:inline-block;padding:.45rem .95rem;border:1px solid var(--line);border-radius:999px;
  background:var(--paper);color:var(--brand-deep);text-decoration:none;font-weight:600;font-size:.95rem;
  transition:border-color .15s ease,background .15s ease}
.hub-jump a:hover{border-color:var(--accent);background:var(--accent-wash)}

/* --- In the field photo grid ---------------------------------------------------- */
.field-grid{display:grid;gap:.9rem;margin-top:2rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.field-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.field-grid figure{margin:0;border-radius:6px;overflow:hidden;background:var(--cream);aspect-ratio:3/4}
.field-grid figure:nth-child(5n+1){grid-row:span 1}
.field-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.field-grid figure:hover img{transform:scale(1.05)}

/* --- Contact form: the two required contact fields sit side by side ------------ */
.contact-urgent{border-left:4px solid var(--accent);background:var(--accent-wash);padding:1rem 1.2rem;border-radius:4px;margin:0 0 1.4rem}
.contact-urgent p{margin:0}


/* --- Hero: the header carries the logo; let the photograph show ------------ */
@media (min-width:960px){.hero--photo .hero-badge{visibility:hidden}}

/* --- Seal sits inside the photo frame, not across its clipped edge ---------- */
.stack-shot .stack-inset--seal{right:1rem;bottom:1rem;top:auto}
@media (max-width:619.98px){.stack-shot .stack-inset--seal{right:.6rem;top:.6rem;bottom:auto}}


/* --- Orange call-to-action band: dark ink, charcoal primary button ----------- */
.cta-band h2,.cta-band p{text-shadow:none}
.cta-band .btn-primary{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.cta-band .btn-primary:hover{background:#000;border-color:#000;color:var(--accent)}