/* ============================================================
   Woolichooks — marketing site
   Faithful implementation of Woolichooks.dc.html (Claude Design handoff)
   ============================================================ */

:root{
  --ww-blue:#195AF1;--ww-blue-soft:#99A2F1;--ww-yellow:#F2B604;--ww-navy:#293559;--ww-paper:#FCFCFC;
  --ww-blue-700:#0E47C9;--ww-blue-100:#E5ECFE;--ww-yellow-700:#C99A03;--ww-yellow-100:#FDF1CB;
  --ww-navy-700:#1B2440;--ww-navy-500:#5C6786;--ww-navy-300:#A4ABBE;--ww-navy-100:#E7E9EF;--ww-navy-050:#F4F5F8;
  --ww-text:#293559;--ww-text-muted:#5C6786;--ww-border:rgba(41,53,89,0.10);
  --ww-font-heading:'Montserrat',system-ui,sans-serif;--ww-font-body:'Open Sans',system-ui,sans-serif;--ww-font-display:'Pacifico',cursive;
  --ww-radius-lg:20px;--ww-radius-xl:32px;--ww-radius-pill:999px;
  --ww-shadow-sm:0 1px 2px rgba(41,53,89,.06),0 1px 1px rgba(41,53,89,.04);
  --ww-shadow-md:0 4px 12px rgba(41,53,89,.08),0 2px 4px rgba(41,53,89,.04);
  --ww-shadow-lg:0 12px 32px rgba(41,53,89,.10),0 4px 8px rgba(41,53,89,.06);
  --ww-shadow-blue:0 10px 30px rgba(25,90,241,.25);
  --ww-ease:cubic-bezier(0.4,0,0.2,1);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--ww-paper);color:var(--ww-navy);font-family:var(--ww-font-body);-webkit-font-smoothing:antialiased;}
::selection{background:var(--ww-blue);color:#fff;}

@keyframes wwFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- Spark + interactive cards (from prototype <style>) ---- */
.svc-spark{position:absolute;top:16px;right:16px;opacity:0;transform:scale(.5) rotate(-25deg);transition:opacity .25s var(--ww-ease),transform .25s var(--ww-ease);pointer-events:none}
.svc-card{transition:transform .2s var(--ww-ease),box-shadow .2s var(--ww-ease),border-color .2s var(--ww-ease)}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--ww-shadow-lg);border-color:var(--ww-yellow)}
.svc-card:hover .svc-spark{opacity:1;transform:scale(1) rotate(0)}
.svc-row{transition:background .2s var(--ww-ease)}
.svc-row:hover{background:var(--ww-navy-050)}
.svc-row:hover .svc-spark{opacity:1;transform:scale(1) rotate(0)}
.svc-step{transition:transform .2s var(--ww-ease),box-shadow .2s var(--ww-ease),border-color .2s var(--ww-ease)}
.svc-step:hover{transform:translateY(-3px);box-shadow:var(--ww-shadow-md);border-color:var(--ww-yellow)}
.svc-step:hover .svc-spark{opacity:1;transform:scale(1) rotate(0)}

/* ---- Hover helpers (replacing prototype style-hover="…") ---- */
.h-chat{transition:background .2s var(--ww-ease)}
.h-chat:hover{background:var(--ww-blue-100)}
.h-blue{transition:background .2s var(--ww-ease),box-shadow .2s var(--ww-ease)}
.h-blue:hover{background:var(--ww-blue-700);box-shadow:var(--ww-shadow-blue)}
.h-yellow{transition:background .2s var(--ww-ease)}
.h-yellow:hover{background:var(--ww-yellow-700)}
.h-lift{transition:transform .2s var(--ww-ease),box-shadow .2s var(--ww-ease)}
.h-lift:hover{transform:translateY(-4px);box-shadow:var(--ww-shadow-lg)}

/* ---- SPA page switching ---- */
.page{display:none}
.page.is-active{display:block;animation:wwFade .35s var(--ww-ease)}

/* ---- Responsive ---- */
@media (max-width:920px){
  .nav-links{display:none !important}
  .hero-grid,
  .problem-grid,
  .whatwedo-head,
  .approach-grid,
  .partner-grid,
  .cta-split{grid-template-columns:1fr !important}
  .testimonial-grid{grid-template-columns:1fr !important}
  .pain-grid{grid-template-columns:1fr !important}
  .footer-grid{grid-template-columns:1fr 1fr !important}
  /* List services: drop the fixed 220px title column */
  .svc-row{grid-template-columns:auto 1fr !important;gap:12px 20px !important}
  .svc-row h3{grid-column:2}
  .svc-row p{grid-column:1 / -1}
}
@media (max-width:640px){
  .hero-h1{font-size:40px !important}
  .hero-h1-lg{font-size:48px !important}
  .section-h2{font-size:34px !important}
  .footer-grid{grid-template-columns:1fr !important}
  .ba-row{grid-template-columns:1fr 44px 1fr !important}
}