/* Hernandez Law site — layout & responsive helpers */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); }

.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

.section { padding: 120px 0; }
.section-soft { background: var(--color-bg-soft); }

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-luxe), transform 700ms var(--ease-luxe); }
.reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Feathered portrait — edges fade into the dark canvas */
.feather-img {
  -webkit-mask-image: radial-gradient(ellipse 68% 68% at 50% 50%, black 35%, transparent 92%);
  mask-image: radial-gradient(ellipse 68% 68% at 50% 50%, black 35%, transparent 92%);
}

/* Milder variant — keeps more of the frame, corners less lost */
.feather-img-soft {
  -webkit-mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, black 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, black 62%, transparent 100%);
}

/* Testimonial marquee */
.testi-marquee { overflow: hidden; position: relative; }
.testi-marquee::before, .testi-marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.testi-marquee::before { left: 0; background: linear-gradient(to right, var(--color-bg), transparent); }
.testi-marquee::after { right: 0; background: linear-gradient(to left, var(--color-bg), transparent); }
.testi-track { display: flex; gap: 24px; width: max-content; animation: testi-scroll 45s linear infinite; }
.testi-track:hover { animation-play-state: paused; }
.testi-track > * { width: 400px; flex-shrink: 0; }
@keyframes testi-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .testi-track { animation: none; }
  .testi-marquee { overflow-x: auto; }
}
@media (max-width: 767px) {
  .testi-track > * { width: 300px; }
}

/* Floating call button — mobile only */
.floating-call { display: none; }

@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; gap: 32px; }
  .section { padding: 80px 0; }
  .container { padding: 0 24px; }
  .nav-links-desktop { display: none !important; }
  .floating-call {
    display: flex;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-on-accent);
    align-items: center;
    justify-content: center;
    box-shadow: var(--glow-gold-strong);
    text-decoration: none;
  }
}

@media (max-width: 767px) {
  .grid-4 { grid-template-columns: 1fr; }
  .hero-title { font-size: 44px !important; }
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-portrait { display: none !important; }
  .nav-phone { display: none !important; }
}

/* ---- Mobile optimization ---- */
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

@media (max-width: 1023px) {
  nav { padding: 0 24px !important; }
}

@media (max-width: 767px) {
  /* Compact nav: smaller brand lockup; CTA folds into floating call + contact section */
  nav { padding: 0 16px !important; gap: 10px !important; }
  nav > a:first-child { gap: 10px !important; }
  nav > a:first-child img { height: 38px !important; width: 52px !important; }
  nav > a:first-child span span:first-child { font-size: 15px !important; }
  nav > a:first-child span span:last-child { font-size: 8px !important; }
  nav a[href="#contact"] { display: none !important; }

  /* Heroes: no forced full-viewport height, tighter top padding */
  .hero-home { min-height: auto !important; }
  .hero-home .container { padding-top: 110px !important; padding-bottom: 64px !important; }
  .hero-pp { padding: 130px 0 64px !important; }

  .serving-strip { font-size: 12px !important; letter-spacing: 0.08em !important; line-height: 1.9; }

  .form-2col { grid-template-columns: 1fr; }

  /* Stacked columns shouldn't stick */
  .grid-2 > div[style*="sticky"] { position: static !important; }

  /* Comfortable text rhythm */
  h2 { text-wrap: balance; }
}