/* ============================================================
   TAX FILINGS — HOMEPAGE REDESIGN LAYER (index.html only)
   Loads after style.css + modern.css. Same brand system, new
   layout language for the homepage-exclusive sections:
   hero, reviews bar, pricing, why-choose, workflow/form,
   team, case studies. Content untouched — pure UI/layout.
   ============================================================ */

/* ── HERO (homepage only): portrait scaled up 1.3x ────────── */
.hero.hero-v2 .hero-collage {
  min-height: 780px;
}
.hero.hero-v2 .hero-expert-img {
  max-height: 790px;
  max-width: none;
  width: auto;
}
.hero.hero-v2 .hero-collage::before {
  width: min(640px, 96%);
}
@media (max-width: 992px) {
  .hero.hero-v2 .hero-collage { min-height: 560px; }
  .hero.hero-v2 .hero-expert-img { max-height: 560px; }
}
@media (max-width: 640px) {
  .hero.hero-v2 .hero-collage { min-height: 420px; }
  .hero.hero-v2 .hero-expert-img { max-height: 420px; }
}

/* ── REVIEWS BAR: soft-masked marquee ─────────────────────── */
.reviews-bar { padding: 40px 0 !important; }
.reviews-badge .excellent {
  font-size: 1.15rem !important;
  letter-spacing: 0.06em;
}
.reviews-marquee-wrapper {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.review-card {
  border-radius: 18px !important;
  border: 1px solid var(--color-ivory-dark) !important;
  box-shadow: none !important;
  background: #fff !important;
}
.review-card .reviewer-avatar {
  background: linear-gradient(135deg, var(--primary), var(--color-kraft)) !important;
  color: #fff !important;
}

/* ── PRICING: two-tone brand cards, crisper ───────────────── */
#pricing .pricing-grid {
  gap: 16px;
}
#pricing .pricing-card {
  border-radius: 18px !important;
  border: none;
  padding: 24px 22px 20px !important;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
#pricing .pricing-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(22rem 14rem at 85% -18%, rgba(250, 250, 247, 0.2), transparent 62%);
  pointer-events: none;
}
#pricing .pricing-card.orange {
  /* The owner's brown ramp (2026-08-29), white text: 6.04:1 at the light end,
     8.18:1 at the dark, measured. */
  background: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
}
#pricing .pricing-card.teal {
  background: linear-gradient(150deg, var(--color-slate-dark) 0%, var(--color-slate-med) 100%) !important;
}
#pricing .pricing-card h4,
#pricing .pricing-card h3 {
  font-size: 1.08rem !important;
  letter-spacing: 0.01em;
}
#pricing .pricing-card .price {
  font-family: var(--font-serif) !important;
  font-size: clamp(1.55rem, 2.2vw, 1.9rem) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 6px 0 4px !important;
}
#pricing .pricing-card .includes {
  font-size: 0.84rem !important;
  opacity: 0.85;
  line-height: 1.5;
  margin-bottom: 12px !important;
}
#pricing .pricing-card .btn {
  border-radius: 999px !important;
  border-width: 1.5px !important;
  font-weight: 600;
}
#pricing .pricing-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 26px 60px -20px rgba(25, 25, 25, 0.4);
}

/* ── WHY CHOOSE: editorial split + toned cards ────────────── */
.choose-grid { gap: 18px !important; }
.choose-card {
  border-radius: 20px !important;
  border: 1px solid rgba(25, 25, 25, 0.07) !important;
  box-shadow: none !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.choose-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px -16px rgba(25, 25, 25, 0.2);
}
.choose-card-icon {
  border-radius: 14px !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.choose-card:hover .choose-card-icon { transform: scale(1.1) rotate(-4deg); }

/* ── WORKFLOW / LEAD FORM: elevated card ──────────────────── */
#workflow .prc-sticky-card {
  border-radius: 26px !important;
  border: 1px solid rgba(25, 25, 25, 0.07);
  box-shadow: 0 34px 80px -28px rgba(25, 25, 25, 0.35) !important;
  padding: 24px 26px 20px !important; /* was 34px: the Zoho iframe is padded on its own */
}
#workflow .prc-sticky-card input,
#workflow .prc-sticky-card select,
#workflow .prc-sticky-card textarea {
  border-radius: 12px !important;
  border: 1.5px solid var(--color-ivory-dark) !important;
  padding: 12px 14px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#workflow .prc-sticky-card input:focus,
#workflow .prc-sticky-card select:focus,
#workflow .prc-sticky-card textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(152, 73, 44, 0.14);
}
#workflow .workflow-title {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem) !important;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
#workflow .workflow-list li {
  padding: 10px 0 !important;
  font-size: 1rem;
}

/* ── TEAM: portrait cards ─────────────────────────────────── */
.team-card {
  border-radius: 20px !important;
  overflow: hidden;
}
.team-card img {
  border-radius: 16px !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.team-card:hover img { transform: scale(1.04); }
.grid-5 { gap: 20px !important; }

/* ── CASE STUDIES: toned editorial cards ──────────────────── */
.case-study-card {
  border-radius: 22px !important;
  border: 1px solid rgba(25, 25, 25, 0.07) !important;
  box-shadow: none !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.case-study-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 54px -18px rgba(25, 25, 25, 0.22);
}
.grid-4 { gap: 20px !important; }

/* ── Responsive: hero stacks with dignity ─────────────────── */
@media (max-width: 992px) {
  .hero.hero-v2 .container { grid-template-columns: 1fr; gap: 56px; }
  .hero-stack { align-items: center; text-align: center; }
  .hero-ctas { justify-content: center; }
  .hero-cred-row { justify-content: center; }
  .hero.hero-v2 h1 { font-size: clamp(2.1rem, 6.4vw, 2.9rem) !important; }
  .hero-collage { min-height: 440px; max-width: 480px; margin: 0 auto; width: 100%; }
  .hero-expert-img { max-height: 420px; }
}
@media (max-width: 640px) {
  .hero-ctas .btn { width: 100%; text-align: center; }
  .hero-cred-row { gap: 8px; }
  .hero-expert-img { max-height: 320px; }
  .hero-collage .hero-float-card { transform: scale(0.85); }
  #pricing .pricing-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  #pricing .pricing-grid { grid-template-columns: 1fr; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-badge-item, .choose-card, .case-study-card, .team-card img,
  #pricing .pricing-card, .choose-card-icon {
    transition: none !important;
  }
  .aurora, .hero-tagline .dot,
  .hero-collage .card-refund-new, .hero-collage .card-expert-new {
    animation: none !important;
  }
}

/* ── HERO: fit the first screen (spacing only) ───────────────
   The section measured 882px under the 80px sticky header, so on a
   1080p laptop the credential badges and the portrait's lower card sat
   just below the fold (at 90% browser zoom it fitted, which made it
   look like a zoom bug rather than a layout one).

   Nothing here touches copy, colour, type scale or composition.

   Two tiers, because what governs the section's height changes with
   the screen: on a tall display the 790px portrait is the tallest
   column, so only the section's own padding needs to come down and the
   text column keeps its original, roomier rhythm. On a short display
   the text column governs, so its gaps tighten there and there only.  */
@media (min-width: 993px) {
  /* the section's own top padding: 48px was more than the composition needs */
  .hero.hero-v2 { padding-top: clamp(16px, 1.8vw, 26px); }

  /* The grid's bottom padding existed only so the portrait could bleed
     onto the section edge (the collage cancels it with an equal negative
     margin). 72px of it was dead space under the text column — both
     values drop together, so the portrait still sits flush. */
  .hero.hero-v2 .container { padding-bottom: 24px; }
  .hero.hero-v2 .hero-collage { margin-bottom: -24px; }

  /* Same words, fewer lines: the paragraph was set to 54ch inside a
     ~700px column, so it spent height it did not need to. */
  .hero.hero-v2 .hero-text { max-width: 60ch; }

  /* The arrow's viewBox is now cropped to its ink (it used to carry ~30%
     empty box below the drawing), so it no longer needs a margin hack. */
  .hero.hero-v2 .hero-arrow { margin-top: 0; margin-bottom: -4px; }

  /* Portrait keeps its full 790px on tall displays and scales down to the
     height actually available on shorter ones, instead of pushing the
     section past the fold. 112px covers the sticky header + padding. */
  .hero.hero-v2 .hero-collage { min-height: min(780px, calc(100vh - 112px)); }
  .hero.hero-v2 .hero-expert-img { max-height: min(790px, calc(100vh - 112px)); }

  /* Keep the terracotta backdrop inside the collage so a shorter collage
     crops it to a curve rather than slicing a flat chord off the top. */
  .hero.hero-v2 .hero-collage::before { max-height: 100%; }

  /* Lift the lower floating card clear of the section's bottom edge so it
     is never half-cut by the hero's overflow clip. */
  .hero.hero-v2 .hero-collage .card-expert-new { bottom: 9%; }
}

/* Short viewports (small laptops, roughly 768–820px tall). Here the text
   column — not the portrait — decides the section's height, so this is the
   only tier that tightens the stack's internal gaps. Taller displays keep
   the original spacing, which is why nothing looks squeezed on them. */
@media (min-width: 993px) and (max-height: 820px) {
  .hero.hero-v2 { padding-top: 16px; }
  .hero.hero-v2 .hero-tagline { margin-bottom: 12px !important; }
  .hero.hero-v2 .hero-subtitle { margin-top: 10px !important; margin-bottom: 6px !important; }
  .hero.hero-v2 .hero-text { margin-top: 4px !important; margin-bottom: 4px !important; }
  .hero.hero-v2 .hero-ctas { margin-top: 14px !important; }
  .hero.hero-v2 .hero-cred-row { margin-top: 16px !important; gap: 8px; }
  .hero.hero-v2 .container { padding-bottom: 16px; }
  .hero.hero-v2 .hero-collage { margin-bottom: -16px; }
}