@charset "UTF-8";
/*
 * PINNACLE TAX LAB — responsive compositions
 *
 * style.css is written mobile-first and carries each section's own
 * breakpoints next to its rules. This file holds the adjustments that only
 * make sense per device class: the small-phone composition, tablet tuning,
 * touch-only behaviour and the dock/assistant on narrow screens.
 */

/* ============================================ Phones (< 640px) ========= */

@media (max-width: 639.98px) {
  :root {
    --nav-h: 76px;
    --section-y: clamp(4rem, 16vw, 5.5rem);
  }

  .nav {
    inset: 0.6rem 0 auto;
    padding-inline: 0.75rem;
  }

  .nav__pill {
    padding: 0.45rem 0.45rem 0.45rem 0.9rem;
  }

  .nav__mark {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .nav__name { font-size: 1.02rem; }

  .nav__toggle {
    width: 42px;
    height: 42px;
  }

  /* Hero: the poster becomes a vertical stack — headline, actions, object,
     proof. The object is smaller and its floating layers tuck inward. */
  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 2.25rem);
  }

  .hero__title {
    font-size: clamp(2.9rem, 13.4vw, 4.2rem);
    line-height: 0.92;
  }

  .hero__capsule {
    width: 1.4em;
    height: 0.62em;
  }

  .hero .btn-row .btn {
    flex: 1 1 100%;
  }

  .hero__visual {
    width: min(100%, 360px);
    padding-inline: 1.75rem;
  }

  .scene__ledger {
    left: -6%;
    width: 70%;
    padding: 0.8rem 0.85rem 0.7rem;
  }

  .ledger li { grid-template-columns: 3.9rem 1fr; font-size: 0.66rem; }

  .scene__cert {
    right: -5%;
    padding: 0.75rem 0.85rem;
  }

  .scene__cert strong { font-size: 0.92rem; }

  .hero__proof {
    gap: 1rem;
  }

  .hero__proof-value { font-size: 1.65rem; }
  .hero__proof-label { font-size: 0.74rem; }

  /* Page hero */
  .phero__title { font-size: clamp(2.5rem, 11.5vw, 3.6rem); }
  .phero__number { font-size: 11rem; right: -0.5rem; }
  .phero--stack .phero__figure img { aspect-ratio: 4 / 3; }
  .phero__note { right: 0.75rem; top: 0.75rem; font-size: 0.74rem; }

  /* Buttons fill the row on phones so they never wrap awkwardly. */
  .phero .btn-row .btn,
  .finale .btn-row .btn,
  .consult .btn-row .btn {
    flex: 1 1 100%;
  }

  .marquee__row--reverse { transform: rotate(-2.4deg); }

  .manifesto__statement .line:nth-child(2) { padding-left: 0; }

  .pillar__num { font-size: 4rem; }

  .xlist__arrow { width: 44px; height: 44px; }

  .founder__visual { padding: 1rem 1rem 0 0; }
  .founder__stat { left: -0.25rem; padding: 0.8rem 0.95rem; }
  .founder__stat strong { font-size: 2.2rem; }
  .founder__creds { right: -0.25rem; max-width: 80%; }
  .founder__quote { padding: 1.25rem 1.25rem 1.25rem 3rem; }

  .consult__panel--a { left: -0.5rem; }
  .consult__panel--b { right: -0.5rem; }

  .story__statement .line:nth-child(2) { padding-left: 0; }

  .collage { gap: 0.6rem; }
  .collage__cap { font-size: 0.68rem; padding: 0.35rem 0.6rem; }

  .accordion__panel p { padding: 0 0 1.35rem 3.3rem; }

  .finale__title { font-size: clamp(2.7rem, 12.5vw, 4rem); }

  .footer__word { font-size: 23vw; }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 5.5rem; /* clear the floating dock */
  }

  .stats__list { gap: 2rem 1rem; }
  .stats__value { font-size: clamp(2.8rem, 13vw, 3.6rem); }
}

/* Very narrow phones (≤ 380px). */
@media (max-width: 380px) {
  .hero__proof { grid-template-columns: 1fr 1fr; }
  .hero__proof li:last-child { grid-column: 1 / -1; }
  .nav__sub { display: none; }
}

/* ========================================== Tablets (640–1023px) ====== */

@media (min-width: 640px) and (max-width: 1023.98px) {
  .hero {
    min-height: auto;
  }

  .hero__title {
    font-size: clamp(4rem, 10vw, 6.2rem);
  }

  .hero__aside {
    max-width: 560px;
  }

  .hero__visual {
    width: min(100%, 440px);
  }

  .founder__visual,
  .consult__visual,
  .culture__visual {
    width: min(100%, 460px);
  }
}

/* ============================================ Touch-only devices ===== */

@media (hover: none) {
  .dock__label { display: none; }
  .dock__btn:hover,
  .card:hover,
  .vmp__item:hover { transform: none; }

  /* Hover-revealed tooltips have nothing to trigger them; show nothing
     extra, the tap focus state still opens them on the constellation. */
  .xpreview { display: none !important; }
}

/* ============================================= Dock & assistant ====== */

@media (max-width: 480px) {
  .dock {
    right: 0.75rem;
    bottom: 0.75rem;
    gap: 0.5rem;
  }

  .dock__btn { width: 46px; height: 46px; }
  .dock__btn--chat { width: 54px; height: 54px; }
  .dock__label { display: none; }

  .assistant {
    left: 0.5rem;
    right: 0.5rem;
    bottom: 5rem;
    width: auto;
    max-height: calc(100vh - 7rem);
  }
}

/* ================================================= Large screens ===== */

@media (min-width: 1680px) {
  :root {
    --container: 1480px;
  }

  .hero__title {
    font-size: clamp(8rem, 7.6vw, 9.25rem);
  }
}

/* Short laptop screens: keep the hero inside one viewport. */
@media (min-width: 1024px) and (max-height: 820px) {
  .hero__title {
    font-size: clamp(4.4rem, 7vw, 7.2rem);
  }

  .hero__aside {
    margin-top: 1.5rem;
  }
}