@import url('colors_and_type.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #FFFDF5; }
body { font-family: 'Inter', system-ui, sans-serif; color: #171715; }

a { color: inherit; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 960px; margin: 0 auto; padding: 0 32px; }

/* Sticker / cards */
.sticker-card {
  background: #fff; border: 3px solid #000; border-radius: 28px;
  box-shadow: 5px 5px 0 #000;
}
.sticker-card--lemon { background: #FFE600; }
.sticker-card--ink { background: #000; color: #fff; }

@keyframes squishIn {
  0% { transform: scale(.92) rotate(-1deg); opacity: 0; }
  60% { transform: scale(1.03) rotate(.5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.squish-in { animation: squishIn 420ms cubic-bezier(0.34,1.56,0.64,1) both; }
.squish-in-delay { animation: squishIn 420ms cubic-bezier(0.34,1.56,0.64,1) 120ms both; opacity: 0; }

@keyframes peekMascot {
  0% { transform: translateY(14px) rotate(-6deg); opacity: 0; }
  60% { transform: translateY(-4px) rotate(2deg); opacity: 1; }
  100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}
.mascot-peek { animation: peekMascot 600ms cubic-bezier(0.34,1.56,0.64,1) 200ms both; }

@keyframes gentleBounce {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-2deg); }
}
.mascot-idle { animation: gentleBounce 3.6s ease-in-out infinite 1.2s; }

@keyframes spinY {
  from { transform: rotateY(0); }
  to { transform: rotateY(360deg); }
}
.spin-y { animation: spinY 1.2s linear infinite; }

/* Responsive grid helpers */
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: center; }

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; gap: 40px; }
  .container { padding: 0 16px; }
  .container-narrow { padding: 0 16px; }
  .hide-mobile { display: none !important; }
  .section-pad { padding: 56px 0 !important; }
  .hero-title { font-size: 48px !important; line-height: .95 !important; }
  .h2-title { font-size: 30px !important; }

  /* Attorney card stacks on mobile */
  .attorney-card { grid-template-columns: 1fr !important; }

  /* Contact form stacks on mobile */
  .contact-grid { grid-template-columns: 1fr !important; }

  /* Footer stacks on mobile */
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Fix oversized section padding on mobile */
  section { padding-left: 0 !important; padding-right: 0 !important; }
}

@media (max-width: 600px) {
  .grid-4 { grid-template-columns: 1fr; }
  .hero-title { font-size: 38px !important; }
  .h2-title { font-size: 26px !important; }

  /* Input grids (email+phone) stack on small phones */
  .input-row { grid-template-columns: 1fr !important; }
}

@media (min-width: 901px) {
  .hide-desktop { display: none !important; }
}

/* Focus styles */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid #FFE600; outline-offset: 2px;
}

input, select, textarea { font-family: 'Inter', system-ui, sans-serif; }

/* Scrollbar-free smoothness */
html { scroll-behavior: smooth; }