/* =========================================================
   SERVICE.CSS — Reusable premium "service page" template.
   Built for tax-preparation.html; intended to be reused as-is
   for bookkeeping / accounts-payable / management-consulting
   (only content changes, this stylesheet does not). Layers on
   main.css + home.css.
   ========================================================= */

/* ---------- Hero: floating form cards use the shared .float-cards
   grid from home.css. The large feature card spans both columns on
   top, the two supporting fc-sm cards sit side by side below — a
   static grid, so nothing can ever overlap. ---------- */
.hero-svc .float-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.hero-svc .fc-svc-1{ grid-column: 1 / -1; animation-delay:0s; }
.hero-svc .fc-svc-2{ animation-delay:.6s; }
.hero-svc .fc-svc-3{ animation-delay:1.2s; }
@media (max-width: 560px){ .hero-svc .float-cards{ grid-template-columns: 1fr; } .hero-svc .fc-svc-1{ grid-column: auto; } }

/* Per-service hero background swaps — same hero mechanic (particles,
   grid, glow lines, gradient overlay, floating cards) throughout,
   only the photo behind it changes per service. */
.hero-svc.hero-bookkeeping{ background-image: url("../images/bookkeeping-hero.jpg"); }
.hero-svc.hero-ap{ background-image: url("../images/ap-hero.jpg"); }
.hero-svc.hero-consulting{ background-image: url("../images/consulting-hero.jpg"); }

/* ---------- Section 1 / Section 11: reuses .card-gradient from home.css ---------- */

/* ---------- Section 3: interactive form-type grid ---------- */
.form-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:16px; }
@media (max-width: 992px){ .form-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px){ .form-grid{ grid-template-columns: repeat(2,1fr); } }
.form-card{
  position:relative; background: var(--white); border:1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 26px 18px; text-align:center; overflow:hidden; cursor:default;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease), border-color .4s;
}
.form-card .icon{
  width:46px; height:46px; margin:0 auto 14px; border-radius:12px; display:grid; place-items:center;
  background: var(--paper-dim); color: var(--teal); font-size:1.1rem;
  transition: transform .5s var(--ease), background .4s, color .4s;
  position:relative; z-index:1;
}
.form-card strong{ display:block; font-family: var(--f-display); font-size:1.02rem; color: var(--ink); position:relative; z-index:1; transition: color .4s; }
.form-card span{ display:block; font-size:.76rem; color: var(--slate-soft); margin-top:4px; position:relative; z-index:1; transition: color .4s; }
.form-card:hover{ transform: translateY(-8px) scale(1.05); box-shadow: var(--shadow-lift); border-color: transparent; background: var(--ink); z-index:2; }
.form-card:hover .icon{ transform: rotate(-14deg) scale(1.15); background: var(--teal-deep); color:#fff; }
.form-card:hover strong{ color: var(--paper); }
.form-card:hover span{ color: rgba(247,245,240,.62); }

/* ---------- Section 4: animated checklist ---------- */
.check-list{ display:grid; gap:16px; margin-top:8px; }
.check-list li{ display:flex; align-items:center; gap:14px; font-size:.98rem; color: var(--slate); }
.on-ink .check-list li{ color: rgba(247,245,240,.85); }
.check-list .check-mark{
  width:26px; height:26px; border-radius:50%; background: var(--teal-deep); color:#fff; flex-shrink:0;
  display:grid; place-items:center; font-size:.72rem;
  transform: scale(0); opacity:0; transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.check-list.in-view .check-mark{ transform: scale(1); opacity:1; }
.check-list.in-view li:nth-child(1) .check-mark{ transition-delay:.05s; }
.check-list.in-view li:nth-child(2) .check-mark{ transition-delay:.15s; }
.check-list.in-view li:nth-child(3) .check-mark{ transition-delay:.25s; }
.check-list.in-view li:nth-child(4) .check-mark{ transition-delay:.35s; }
.check-list.in-view li:nth-child(5) .check-mark{ transition-delay:.45s; }
.check-list.in-view li:nth-child(6) .check-mark{ transition-delay:.55s; }
.check-list.in-view li:nth-child(7) .check-mark{ transition-delay:.65s; }
.check-list.in-view li:nth-child(8) .check-mark{ transition-delay:.75s; }

/* ---------- Section 5: horizontal timeline that "draws" while scrolling ---------- */
.grid-6{ display:grid; grid-template-columns: repeat(6,1fr); gap:26px; }
@media (max-width: 992px){ .grid-6{ grid-template-columns: repeat(3,1fr); row-gap:44px; } }
@media (max-width: 560px){ .grid-6{ grid-template-columns: repeat(2,1fr); } }
.grid-7{ display:grid; grid-template-columns: repeat(7,1fr); gap:22px; }
@media (max-width: 1180px){ .grid-7{ grid-template-columns: repeat(4,1fr); row-gap:44px; } }
@media (max-width: 640px){ .grid-7{ grid-template-columns: repeat(2,1fr); } }
.h-timeline{ position:relative; margin-top:56px; }
.h-timeline .h-rail{ position:absolute; top:26px; left:0; right:0; height:2px; background: var(--ink-line); }
.on-dim .h-timeline .h-rail, .h-timeline.on-light .h-rail{ background: var(--rule); }
.h-timeline .h-rail-fill{ position:absolute; top:26px; left:0; height:2px; width:0%; background: linear-gradient(90deg, var(--navy-brand), var(--teal)); transition: width .1s linear; }
.h-timeline .grid{ position:relative; }
.h-step{ position:relative; z-index:1; text-align:left; }
.h-step .step-idx{
  font-family: var(--f-mono); font-size:.85rem; width:52px; height:52px; border-radius:50%;
  background: var(--paper); border:2px solid var(--ink-line); color: var(--slate-soft);
  display:grid; place-items:center; margin-bottom:20px; transition: border-color .4s, color .4s, background .4s;
}
.h-step.in-view .step-idx{ border-color: var(--teal-deep); color: var(--teal-deep); background: var(--paper-dim); box-shadow: 0 0 0 5px rgba(7,107,100,.14); }
@media (max-width: 860px){ .h-timeline .h-rail, .h-timeline .h-rail-fill{ display:none; } }

/* ---------- Section 6: bento grid ---------- */
.bento-grid{ display:grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 160px; gap:18px; margin-top:44px; }
@media (max-width: 860px){ .bento-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .bento-grid{ grid-template-columns: 1fr; grid-auto-rows:auto; } }
.bento-item{
  position:relative; border-radius: var(--radius-lg); padding: 26px; background: var(--white);
  background-image: linear-gradient(var(--white), var(--white)); border: 2px solid var(--rule);
  display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.bento-item:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--teal); }
.bento-item .icon{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background: var(--paper-dim); color: var(--teal); font-size:1.05rem; margin-bottom:14px; transition: transform .5s var(--ease); }
.bento-item:hover .icon{ transform: scale(1.15) rotate(-8deg); }
.bento-item strong{ font-family: var(--f-display); font-size:1.05rem; color: var(--ink); display:block; }
.bento-item span{ font-size:.82rem; color: var(--slate-soft); }

/* Large tile: full-width banner (not a tall square) so the remaining
   5 regular tiles line up into a clean 3+2 grid instead of an orphan */
.bento-item.lg{
  grid-column: 1 / -1; flex-direction:row; align-items:center; gap:28px; justify-content:flex-start;
  background: linear-gradient(120deg, var(--ink) 0%, var(--teal-deep) 100%); border-color: var(--ink-line);
  padding: 30px 36px;
}
.bento-item.lg::after{ content:""; position:absolute; inset:0; background: radial-gradient(45% 90% at 90% 0%, rgba(10,154,144,.25), transparent 60%); pointer-events:none; z-index:0; }
.bento-item.lg .icon{ background: rgba(10,154,144,.18); color: var(--teal); width:64px; height:64px; font-size:1.5rem; margin-bottom:0; flex-shrink:0; position:relative; z-index:1; }
.bento-item.lg .big-num{ font-family: var(--f-display); font-size:2.8rem; color: var(--paper); line-height:1; position:relative; z-index:1; }
.bento-item.lg .big-num span{ font-size:inherit; color:inherit; }
.bento-item.lg strong{ color: var(--paper); font-size:1.1rem; position:relative; z-index:1; }
.bento-item.lg span{ color: rgba(247,245,240,.62); position:relative; z-index:1; }
@media (max-width: 560px){ .bento-item.lg{ flex-direction:column; align-items:flex-start; text-align:left; gap:14px; } }

/* Fill sweep: grows corner-to-corner as the accuracy % counts up */
.bento-fill{
  position:absolute; inset:0; width:0%; z-index:0; pointer-events:none;
  background: linear-gradient(115deg, rgba(10,154,144,.5) 0%, rgba(10,154,144,.16) 75%, transparent 100%);
  transition: width 1.8s cubic-bezier(.22,1,.36,1);
}

/* ---------- Section 7: 3D tilt benefit cards ---------- */
.tilt-card{
  background: var(--white); border:1px solid var(--rule); border-radius: var(--radius-lg); padding: 34px 30px;
  transform-style: preserve-3d; transition: transform .25s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  will-change: transform;
}
.tilt-card:hover{ box-shadow: 0 30px 60px -20px rgba(10,154,144,.35); border-color: var(--teal); }
.tilt-card .icon{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background: var(--paper-dim); color: var(--teal); font-size:1.25rem; margin-bottom:20px; }

/* ---------- Section 8: technology logo wall ---------- */
.logo-wall{ display:grid; grid-template-columns: repeat(5,1fr); gap:16px; margin-top:40px; }
@media (max-width: 860px){ .logo-wall{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px){ .logo-wall{ grid-template-columns: repeat(2,1fr); } }
.logo-tile{
  display:flex; flex-direction:column; align-items:center; gap:10px; padding: 26px 12px;
  background: var(--paper-dim); border:1px solid var(--rule); border-radius: var(--radius-lg);
  filter: grayscale(1); opacity:.6; transition: filter .4s var(--ease), opacity .4s var(--ease), transform .4s var(--ease), background .4s, box-shadow .4s;
}
.logo-tile i{ font-size:1.6rem; color: var(--teal); }
.logo-tile span{ font-size:.82rem; font-weight:600; color: var(--ink); }
.logo-tile:hover{ filter:grayscale(0); opacity:1; transform: translateY(-4px); background: var(--white); box-shadow: var(--shadow-card); }

/* ---------- Section 9: business impact (light cards, distinct from
   the dark impact-grid used on Home/About — service pages get their
   own treatment per the "unlike the homepage" brief) ---------- */
.impact-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-top:44px; }
@media (max-width: 760px){ .impact-cards{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .impact-cards{ grid-template-columns: 1fr; } }
.impact-card{
  background: var(--white); border:1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 32px 26px; text-align:center; box-shadow: var(--shadow-card);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.impact-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--teal); }
.impact-card .icon{
  width:52px; height:52px; margin:0 auto 16px; border-radius:14px; display:grid; place-items:center;
  background: var(--paper-dim); color: var(--teal); font-size:1.2rem; transition: transform .5s var(--ease), background .3s, color .3s;
}
.impact-card:hover .icon{ transform: scale(1.12) rotate(-6deg); background: var(--teal-deep); color:#fff; }
.impact-card .stat-num{ font-size:2.1rem; color: var(--ink); }
.impact-card .stat-num .suffix{ color: var(--teal-deep); }
.impact-card .stat-label{ margin-top:6px; color: var(--slate-soft); font-size:.85rem; }

/* ---------- Sticky consultation bar ----------
   Stacked above the WhatsApp float (also left:26px/bottom:26px) so the
   two don't overlap, mirroring how the AI chat launcher stacks above
   WhatsApp on the right. ---------- */
.sticky-cta{
  position: fixed; left:26px; bottom:100px; z-index:1130;
  display:flex; align-items:center; gap:12px; background: var(--ink); color: var(--paper);
  border-radius:999px; padding: 12px 22px 12px 16px; box-shadow: var(--shadow-lift); border:1px solid var(--ink-line);
  /* Fixed px offset (not %, which is relative to the element's own small
     height and isn't enough to clear the viewport from a bottom:100px
     resting position on a tall screen) — 200px reliably clears both the
     100px offset and the element's own height. */
  transform: translateY(200px); transition: transform .5s var(--ease);
}
.sticky-cta.show{ transform: translateY(0); }
.sticky-cta .sc-icon{ width:34px; height:34px; border-radius:50%; background: var(--teal-deep); color:#fff; display:grid; place-items:center; font-size:.9rem; flex-shrink:0; }
.sticky-cta span{ font-size:.85rem; white-space:nowrap; }
.sticky-cta a{ font-weight:700; color: var(--teal-soft); white-space:nowrap; }
@media (max-width: 640px){ .sticky-cta span{ display:none; } .sticky-cta{ left:16px; padding:12px; } }

/* ---------- Gradient CTA band variant ---------- */
.cta-band.cta-gradient{
  background: linear-gradient(120deg, var(--ink), var(--teal-deep), var(--ink));
  background-size: 240% 240%;
  animation: ctaGradientShift 10s ease infinite;
}
@keyframes ctaGradientShift{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }