@import url('./tokens.css');

/* ─── HERO SECTION ─────────────────────────────────────────────────────────── */
.hero {
  position:        relative;
  min-height:      100vh;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  padding-block:   clamp(8rem, 6.42rem + 6.32vw, 14rem);
  padding-inline:  clamp(1.25rem, 4vw, 3rem);
  text-align:      center;
  overflow:        hidden;
  background-color: var(--color-beige);
  color:           var(--color-blue-darkest);
}

/* Background image with gradient overlay */
.hero__bg {
  position:       absolute;
  inset:          0;
  z-index:        1;
  pointer-events: none;
  background-image:
    linear-gradient(
      to bottom,
      rgba(253, 247, 239, 0.1) 0%,   /* --color-beige at 50% */
      rgba(253, 247, 239, 0.7) 100%  /* --color-beige at 100% */
    ),
    url('../images/home/hero-background-plain.webp');
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;

  /* Fade-in only — Ken Burns handled separately via animation class */
  opacity:    0;
  transform:  scale(1.18);
  transition: opacity 2.5s ease;
}

.hero.is-visible .hero__bg {
  opacity: 1;
}

/* Ken Burns — animation class toggled by JS so it restarts on scroll-back */
@keyframes hero-ken-burns {
  from { transform: scale(1.18); }
  to   { transform: scale(1.00); }
}

.hero__bg.ken-burns-active {
  animation: hero-ken-burns 18s cubic-bezier(0.1, 0, 0.3, 1) forwards;
}

/* Content container */
.hero__content {
  position: relative;
  z-index:  2;
  max-width: 1200px;
  width:     100%;
  display:   flex;
  flex-direction: column;
  align-items:    center;
  gap:       clamp(1.5rem, 1.24rem + 1.05vw, 2.25rem);
}

.hero__title {
  font-family: var(--font-serif);
  font-size:   var(--text-h1);
  line-height: 1.05;
  font-weight: var(--fw-light);
  max-width:   960px;
  margin:      0;
  text-shadow: 0 2px 48px rgba(253, 247, 239, 1),
               0 1px 20px rgba(253, 247, 239, 1),
               0 0   28px rgba(253, 247, 239, 1);

  /* Animation: Fluid slide + fade */
  opacity:   0;
  transform: translateY(60px);
  transition: opacity 1.4s var(--nav-ease) 0.4s, transform 1.4s var(--nav-ease) 0.4s;
}

.hero__title-regular {
  font-weight: var(--fw-regular);
}

.hero__subtitle-light {
  font-weight: var(--fw-light);
}

.hero__subtitle {
  font-family:    var(--font-sans);
  font-size:      var(--text-h5);
  font-weight:    var(--fw-regular);
  max-width:      720px;
  width: 100%;
  margin-top: calc(clamp(1.5rem, 1.24rem + 1.05vw, 2.25rem) * -0.75);
  letter-spacing: 0.04em;
  line-height:    1.4;
  text-transform: uppercase; /* Clean professional look */
  text-shadow:    0 1px 32px rgba(253, 247, 239, 1),
                  0 0   18px rgba(253, 247, 239, 1),
                  0 0    8px rgba(253, 247, 239, 1),
                  0 0   36px rgba(253, 247, 239, 1);
  
  /* Animation delay */
  opacity:   0;
  transform: translateY(40px);
  transition: opacity 1.4s var(--nav-ease) 0.6s, transform 1.4s var(--nav-ease) 0.6s;
}

.hero__actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       1.5rem;
  justify-content: center;
  margin-top: 1rem;
  
  /* Animation delay */
  opacity:   0;
  transform: translateY(20px);
  transition: opacity 1.2s var(--nav-ease) 0.9s, transform 1.2s var(--nav-ease) 0.9s;
}

/* Scroll Indicator */
.hero__scroll {
  position:        absolute;
  bottom:          clamp(2rem, 1.5rem + 2vw, 4rem);
  left:            50%;
  transform:       translateX(-50%);
  z-index:         3;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             1rem;
  text-decoration: none;
  color:           rgba(13, 13, 29, 0.4);
  transition:      color 0.3s ease, opacity 1.2s var(--nav-ease) 1.2s, transform 1.2s var(--nav-ease) 1.2s;
  
  /* Animation */
  opacity:   0;
  transform: translate(-50%, 20px);
}

.hero__scroll:hover {
  color: var(--color-blue-darkest);
}

.hero__scroll-text {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  white-space:    nowrap;
}

.hero__scroll-icon {
  width:      24px;
  height:     24px;
  animation:  hero-bounce 2.5s infinite;
}

@keyframes hero-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

/* Visibility triggers */
.hero.is-visible .hero__title,
.hero.is-visible .hero__subtitle,
.hero.is-visible .hero__actions,
.hero.is-visible .hero__scroll {
  opacity:   1;
  transform: translateY(0);
}

.hero.is-visible .hero__scroll {
  transform: translateX(-50%) translateY(0);
}

/* Mobile adjustments */
@media (max-width: 860px) {
  .hero__title {
    max-width: 600px;
  }
}

@media (max-width: 560px) {
  .hero__title br {
    display: none;
  }
  .hero__subtitle br {
    display: none;
  }
}

/* ─── SECTION UTILITIES ─────────────────────────────────────────────────── */
.section-padding {
  padding-block:  clamp(5rem, 4.21rem + 3.16vw, 8rem);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.section-title-group {
  text-align:    center;
  margin-bottom: clamp(3rem, 2.47rem + 2.1vw, 5rem);
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           1rem;
}

.section-tag {
  display:        inline-block;
  padding:        0.28rem 0.75rem;
  border-radius:  999px;
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background:     rgba(12, 13, 86, 0.06);
  color:          rgba(12, 13, 86, 0.5);
}

.section-title {
  font-family: var(--font-serif);
  font-size:   var(--text-h2);
  line-height: 1.1;
  color:       var(--color-blue-darkest);
}

.section-rule {
  width:      48px;
  height:     1px;
  background: var(--color-red-dark);
  opacity:    0.3;
}

.container {
  max-width: 1440px;
  margin:    0 auto;
  width:     100%;
}

/* ─── REPUTATION SECTION ─────────────────────────────────────────────────── */

.reputation {
  position:         relative;
  overflow:         hidden;
  background-color: var(--color-beige);
}

/* Top and bottom vignette */
.reputation::before,
.reputation::after {
  content:        '';
  position:       absolute;
  left:           0;
  right:          0;
  height:         5%;
  pointer-events: none;
  z-index:        10;
}

/* Top: beige (top) → transparent (bottom) */
.reputation::before {
  top:        0;
  background: linear-gradient(to bottom, var(--color-beige), transparent);
}

/* Bottom: transparent (top) → beige (bottom) */
.reputation::after {
  bottom:     0;
  background: linear-gradient(to bottom, transparent, var(--color-beige));
}

.reputation__layout {
  display:               grid;
  grid-template-columns: 45fr 55fr;
  min-height:            clamp(540px, 70vh, 840px);
}

/* ── Left: Photo panel ── */

.reputation__media {
  position:  relative;
  overflow:  hidden;
  opacity:   0;
  transform: translateX(-40px);
  transition: opacity   1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reputation.in-view .reputation__media {
  opacity:   1;
  transform: translateX(0);
}

.reputation__portrait {
  display:         block;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center top;
}

/* ── Yelp overlay card ── */

.reputation__yelp-card {
  position:      absolute;
  bottom:        2.5rem;
  right:         1.5rem;
  width:         clamp(190px, 20vw, 252px);
  background:    var(--color-white-alpha-80);
  border-radius: 10px;
  box-shadow:    0 8px 28px rgba(13, 13, 29, 0.20);
  padding:       1.125rem 1.25rem 0.875rem;
  user-select:   none;
  opacity:       0;
  transform:     translateY(20px);
  transition:    opacity   0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s,
                 transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s;
}

.reputation.in-view .reputation__yelp-card {
  opacity:   1;
  transform: translateY(0);
}

.reputation__yelp-card {
  transition: opacity   0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s,
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s,
              box-shadow 0.3s ease,
              background 0.3s ease;
}

.reputation__yelp-card:hover {
  box-shadow: 0 12px 36px rgba(13, 13, 29, 0.28);
  background: var(--color-white);
}

.yelp-slider__brand {
  display:         flex;
  justify-content: center;
  margin-bottom:   0.5rem;
}

.yelp-slider__logo {
  width:   76px;
  height:  auto;
  display: block;
}

.yelp-slider__stars {
  display:         flex;
  justify-content: center;
  gap:             2px;
  color:           #ffb400; /* Yelp gold — intentional literal */
  margin-bottom:   0.5rem;
}

.yelp-slider__stars [data-lucide],
.yelp-slider__stars svg {
  width:  12px;
  height: 12px;
  fill:   currentColor;
  stroke: none;
}

/* Grid stacking — all slides occupy same cell; height = tallest slide */

.yelp-slider__track {
  display:             grid;
  grid-template-areas: "content";
  align-items:         start;
}

.yelp-slider__slide {
  grid-area:      content;
  opacity:        0;
  transition:     opacity 0.45s ease;
  pointer-events: none;
}

.yelp-slider__slide.is-active {
  opacity:        1;
  pointer-events: auto;
}

.yelp-slider__quote {
  font-family:   var(--font-sans);
  font-size:     0.7rem;
  line-height:   1.5;
  color:         var(--color-blue-darkest);
  opacity:       0.7;
  font-style:    italic;
  text-align:    center;
  margin-bottom: 0.5rem;
}

.yelp-slider__author {
  display:     block;
  font-family: var(--font-sans);
  font-size:   0.7rem;
  font-weight: var(--fw-bold);
  color:       var(--color-blue-darkest);
  text-align:  center;
}

.yelp-slider__dots {
  display:         flex;
  justify-content: center;
  gap:             5px;
  margin-top:      0.75rem;
}

.yelp-slider__dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--color-gray-subtle);
  border:        none;
  padding:       0;
  cursor:        default;
  transition:    background-color 0.3s ease;
}

.yelp-slider__dot.is-active {
  background: var(--color-red);
}

/* ── Right: Content panel ── */

.reputation__content {
  background:      var(--color-white);
  padding:         clamp(3rem, 5vw, 7rem) clamp(2rem, 5.5vw, 6rem);
  display:         flex;
  flex-direction:  column;
  gap:             0;
  justify-content: center;
}

.reputation__heading {
  font-family:   var(--font-serif);
  font-size:     var(--text-h2);
  font-weight:   var(--fw-regular);
  line-height:   1.05;
  color:         var(--color-blue-darkest);
  margin-bottom: clamp(0.4375rem, 0.75vw, 0.625rem);
  opacity:       0;
  transform:     translateX(30px);
  transition:    opacity   0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s,
                 transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}

.reputation.in-view .reputation__heading {
  opacity:   1;
  transform: translateX(0);
}

.reputation__heading-accent {
  color:   var(--color-red);
  display: block;
}

.reputation__intro {
  font-family:   var(--font-sans);
  font-size:     var(--text-base);
  font-weight:   var(--fw-bold);
  line-height:   1.2;
  color:         #969696;
  max-width:     44ch;
  margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
  opacity:       0;
  transform:     translateY(20px);
  transition:    opacity   0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s,
                 transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

.reputation.in-view .reputation__intro {
  opacity:   0.7;
  transform: translateY(0);
}

.reputation__rule {
  width:            48px;
  height:           2px;
  background:       var(--color-red);
  transform-origin: left center;
  transform:        scaleX(0);
  transition:       transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.45s;
  margin-bottom:    clamp(1.25rem, 2vw, 2rem);
}

.reputation.in-view .reputation__rule {
  transform: scaleX(1);
}

.reputation__pillars {
  display:        flex;
  flex-direction: column;
  gap:            clamp(1rem, 1.75vw, 1.5rem);
  margin-bottom:  clamp(1.5rem, 2.5vw, 2.5rem);
}

.reputation__pillar {
  opacity:   0;
  transform: translateY(16px);
}

.reputation__pillar:nth-child(1) {
  transition: opacity   0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.55s,
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.55s;
}

.reputation__pillar:nth-child(2) {
  transition: opacity   0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.70s,
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.70s;
}

.reputation.in-view .reputation__pillar {
  opacity:   1;
  transform: translateY(0);
}

.reputation__pillar-heading {
  font-family:   var(--font-serif);
  font-size:     var(--text-h5);
  font-weight:   var(--fw-regular);
  color:         var(--color-blue-darkest);
  line-height:   1.2;
  margin-bottom: 0.35rem;
}

.reputation__pillar-body {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  line-height: 1.6;
  color:       var(--color-blue-darkest);
  opacity:     0.65;
  max-width:   44ch;
}

.reputation__footer {
  display:     flex;
  align-items: center;
  gap:         1.5rem;
  opacity:     0;
  transition:  opacity 0.5s ease 0.9s;
}

.reputation.in-view .reputation__footer {
  opacity: 1;
}

.reputation__plus {
  width:            3rem;
  height:           3rem;
  border-radius:    50%;
  border:           none;
  background-color: var(--color-blue-darkest);
  color:            var(--color-white);
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  cursor:           pointer;
  flex-shrink:      0;
  transition:       background-color 0.2s ease,
                    transform        0.2s ease,
                    box-shadow       0.2s ease;
}

.reputation__plus:hover {
  background-color: var(--color-blue-electric);
  transform:        scale(1.1);
  box-shadow:       0 4px 16px rgba(12, 13, 86, 0.3);
}

.reputation__plus:focus-visible {
  outline:        3px solid var(--color-red-light);
  outline-offset: 3px;
}

.reputation__plus [data-lucide] {
  width:        1.125rem;
  height:       1.125rem;
  stroke-width: 2.5;
}

.reputation__signature {
  font-family:             var(--font-serif);
  font-size:               clamp(1.5rem, 2.5vw, 2.25rem);
  line-height:             1;
  pointer-events:          none;
  user-select:             none;
  opacity:                 0;
  transition:              opacity 1s ease 1s;
  color:                   transparent;
  background:              linear-gradient(90deg, var(--color-blue-darkest) 50%, rgba(13,13,29,0.35) 50%);
  background-size:         200% 100%;
  background-position:     100% 0;
  -webkit-background-clip: text;
  background-clip:         text;
  transition:              opacity 1s ease 1s, background-position 1s cubic-bezier(0.8, 0, 0.2, 1);
}

.reputation.in-view .reputation__signature {
  opacity: 1;
}

.reputation__plus:hover + .reputation__signature,
.reputation__plus:focus-visible + .reputation__signature {
  background-position: 0% 0;
}

/* ─── ABOUT MODAL ────────────────────────────────────────────────────────── */

.reputation-modal__backdrop {
  position:         fixed;
  inset:            0;
  z-index:          10000;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          1.5rem;
  background-color: rgba(13, 13, 29, 0.72);
  opacity:          0;
  pointer-events:   none;
  transition:       opacity 0.25s ease;
}

.reputation-modal__backdrop.is-open {
  opacity:        1;
  pointer-events: auto;
}

/* Container: positions the close btn without overflow-clipping it */
.reputation-modal__container {
  position:  relative;
  width:     100%;
  max-width: 780px;
}

.reputation-modal__box {
  background:            var(--color-white);
  border-radius:         16px;
  width:                 100%;
  max-height:            90vh;
  overflow-y:            auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior:   contain;
  transform:             scale(0.95);
  transition:            transform 0.25s ease;
}

.reputation-modal__backdrop.is-open .reputation-modal__box {
  transform: scale(1);
}

.reputation-modal__inner {
  display:     flex;
  align-items: stretch;
}

.reputation-modal__img-col {
  flex:          0 0 380px;
  width:         380px;
  border-radius: 16px 0 0 16px;
  background:    var(--color-gray-subtle);
}

.reputation-modal__portrait {
  display:         block;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: top center;
}

.reputation-modal__text-col {
  flex:           1 1 auto;
  padding:        3rem 2.5rem;
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.reputation-modal__heading {
  font-family: var(--font-serif);
  font-size:   var(--text-h4);
  font-weight: var(--fw-regular);
  line-height: 1.15;
  color:       var(--color-blue-dark);
}

.reputation-modal__body {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: 1.65;
  color:       var(--color-blue-darkest);
  opacity:     0.8;
}

.reputation-modal__close {
  position:         absolute;
  top:              -0.875rem;
  right:            -0.875rem;
  z-index:          10;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            2.25rem;
  height:           2.25rem;
  border-radius:    50%;
  border:           none;
  background-color: var(--color-blue);
  color:            var(--color-white);
  cursor:           pointer;
  transition:       background-color 0.2s ease;
}

.reputation-modal__close:hover {
  background-color: var(--color-blue-light);
}

.reputation-modal__close:focus-visible {
  outline:        3px solid var(--color-red-light);
  outline-offset: 3px;
}

.reputation-modal__close [data-lucide] {
  width:  1rem;
  height: 1rem;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .reputation__layout {
    grid-template-columns: 1fr;
  }

  .reputation__media {
    aspect-ratio: auto;
    transform:    translateY(-20px);
    overflow:     visible;
  }

  .reputation__portrait {
    height:          auto;
    object-fit:      contain;
    object-position: center top;
  }

  .reputation.in-view .reputation__media {
    transform: translateY(0);
  }

  .reputation__yelp-card {
    bottom: calc(1rem + 160px);
    right:  1rem;
    width:  clamp(180px, 55vw, 240px);
  }

  .reputation__content {
    margin-top: -160px;
    z-index:    1;
    position:   relative;
  }

  .reputation__heading {
    transform: translateY(20px);
  }

  .reputation.in-view .reputation__heading {
    transform: translateY(0);
  }

  .reputation__intro,
  .reputation__pillar-body {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .reputation__yelp-card {
    bottom: calc(1rem + 110px);
  }

  .reputation__content {
    margin-top: -110px;
  }
}

@media (max-width: 720px) {
  .reputation-modal__container {
    max-width: 420px;
  }

  .reputation-modal__inner {
    flex-direction: column;
  }

  .reputation-modal__img-col {
    flex:          none;
    width:         100%;
    height:        340px;
    overflow:      hidden;
    border-radius: 16px 16px 0 0;
  }

  .reputation-modal__portrait {
    height:          340px;
    object-fit:      cover;
    object-position: top center;
  }

  .reputation-modal__text-col {
    padding: 2rem 1.5rem;
  }

  .reputation-modal__close {
    top:   -0.75rem;
    right: -0.75rem;
  }
}

@media (max-width: 560px) {
  .reputation__media {
    aspect-ratio: auto;
  }

  .reputation__content {
    margin-top: 0;
  }

  .reputation__yelp-card {
    position:      relative;
    bottom:        auto;
    right:         auto;
    width:         100%;
    border-radius: 0;
    box-shadow:    0 4px 12px rgba(13, 13, 29, 0.10);
  }

  .reputation-modal__img-col {
    height:        340px;
    border-radius: 16px 16px 0 0;
  }
}

/* ─── REDUCED MOTION ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .reputation__media,
  .reputation__heading,
  .reputation__intro,
  .reputation__pillar,
  .reputation__footer,
  .reputation__yelp-card {
    opacity:    1 !important;
    transform:  none !important;
    transition: none !important;
  }

  .reputation__rule {
    transform:  scaleX(1) !important;
    transition: none !important;
  }

  .reputation.in-view .reputation__intro {
    opacity: 0.7 !important;
  }

  .reputation.in-view .reputation__signature {
    opacity: 0.4 !important;
  }

  .reputation-modal__backdrop,
  .reputation-modal__box {
    transition: none;
  }
}


/* ─── PRACTICE AREAS SECTION ────────────────────────────────────────────────── */

.practice-areas {
  position:       relative;
  background:     var(--color-beige);
  padding-block:  clamp(5rem, 4rem + 4.5vw, 9rem);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.practice-areas__container {
  max-width:      1200px;
  margin-inline:  auto;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            clamp(3rem, 2.5rem + 2vw, 5rem);
}

/* ── Header ── */

.practice-areas__header {
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.875rem;
}

.practice-areas__title {
  font-family: var(--font-serif);
  font-size:   var(--text-h2);
  font-weight: var(--fw-regular);
  color:       var(--color-blue-darkest);
  margin:      0;
  line-height: 1.1;
}

.practice-areas__subtitle {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  font-weight: var(--fw-regular);
  color:       var(--color-blue-light);
  margin:      0;
  line-height: 1.5;
}

.practice-areas__rule {
  width:            48px;
  height:           2px;
  background:       var(--color-red);
  border-radius:    2px;
  margin-top:       0.375rem;
}

/* ── Groups layout ── */

.practice-areas__groups {
  width:   100%;
  display: flex;
  gap:     clamp(2rem, 1.5rem + 2.5vw, 4rem);
  align-items: flex-start;
}

.practice-areas__group {
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
}

/* Tenant Rights = 2 cards → flex: 2 */
.practice-areas__group:first-child { flex: 2; }


/* ── Group label ── */

.practice-areas__group-label {
  display:        block;
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--color-blue-light);
  text-align:     center;
  padding-bottom: 0.75rem;
}

/* ── Card grids inside each group ── */

.practice-areas__group:first-child .practice-areas__cards {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   clamp(1.25rem, 0.9rem + 1.25vw, 2rem);
}


/* ── Individual Card ── */

.pa-card {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  text-align:       center;
  text-decoration:  none;
  color:            inherit;
  gap:              0.75rem;
  cursor:           pointer;
  padding:          clamp(1.5rem, 2.5vw, 2rem);
  background-color: var(--color-white);
  border:           1px solid rgba(12, 13, 86, 0.06);
  border-radius:    10px;
  box-shadow:       0 2px 12px rgba(13, 13, 29, 0.06);
  transition:       box-shadow 0.25s ease,
                    border-color 0.25s ease,
                    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  /* Fade-up — initial hidden state */
  opacity:   0;
  transform: translateY(60px);
}

@keyframes paCardFadeUp {
  from {
    opacity:   0;
    transform: translateY(60px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

.pa-card.is-visible {
  animation: paCardFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Card hover — lift + red border glow ── */

.pa-card:hover {
  border-color: rgba(221, 68, 68, 0.3);
  box-shadow:   0 8px 30px rgba(13, 13, 29, 0.1),
                0 0 0 1px rgba(221, 68, 68, 0.15);
  transform:    translateY(-6px);
}

/* ── Icon Box with pulse ring ── */

.pa-card__icon-box {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            3.25rem;
  height:           3.25rem;
  border-radius:    50%;
  background-color: rgba(221, 68, 68, 0.08);
  border:           1px solid rgba(221, 68, 68, 0.2);
  position:         relative;
  transition:       background-color 0.3s ease, transform 0.3s ease;
}

/* Pulse ring */
.pa-card__icon-box::after {
  content:       '';
  position:      absolute;
  inset:         -4px;
  border-radius: 50%;
  border:        2px solid rgba(221, 68, 68, 0.25);
  opacity:       0;
  transform:     scale(0.85);
  transition:    opacity 0.4s ease, transform 0.4s ease;
}

.pa-card:hover .pa-card__icon-box {
  background-color: rgba(221, 68, 68, 0.15);
  transform:        scale(1.08);
}

.pa-card:hover .pa-card__icon-box::after {
  opacity:   1;
  transform: scale(1);
}

.pa-card__icon-box svg,
.pa-card__icon-box [data-lucide] {
  width:        1.25rem;
  height:       1.25rem;
  flex-shrink:  0;
  color:        var(--color-red-dark);
  stroke-width: var(--icon-stroke);
}

/* ── Card Title ── */

.pa-card__title {
  font-family: var(--font-serif);
  font-size:   var(--text-h5);
  font-weight: var(--fw-regular);
  color:       var(--color-blue-darkest);
  margin:      0;
  line-height: 1.3;
  transition:  color 0.3s ease;
}

.pa-card:hover .pa-card__title {
  color: var(--color-red-dark);
}

/* ── Card Body ── */

.pa-card__body {
  font-family: var(--font-sans);
  font-size:   var(--text-xs);
  font-weight: var(--fw-regular);
  color:       var(--color-blue);
  opacity:     0.6;
  margin:      0;
  line-height: 1.55;
}

/* ── CTA ── */

.practice-areas__cta {
  text-align: center;
}

/* ── Responsive ── */

/* Tablet: stack groups, 2-column cards */
/* Tablet + Mobile: stack groups, 2-column cards, tighter spacing — holds to 481px */
@media (max-width: 860px) {
  .practice-areas__groups {
    flex-direction: column;
    gap:            2rem;
  }

  .practice-areas__group:first-child {
    flex:  unset;
    width: 100%;
  }

  .practice-areas__group:first-child {
    max-width: 70% !important;
    margin-inline: auto;
  }

  /* 2-column grid all the way to 481px */
  .practice-areas__group:first-child .practice-areas__cards {
    grid-template-columns: repeat(2, 1fr);
    gap:                   1.5rem;
  }

  /* Tighter gap below 580px */
  @media (max-width: 580px) {
    .practice-areas__group:first-child .practice-areas__cards {
      gap: 0.75rem;
    }
  }

  /* Single column below 480px — card fills full width, icon doubles naturally */
  @media (max-width: 480px) {
    .practice-areas__group:first-child .practice-areas__cards {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

  }


  /* Tighter card internals */
  .pa-card { gap: 0.5rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pa-card {
    opacity:    1;
    transform:  none;
    transition: none;
  }
}

/* ─── TESTIMONIALS SECTION ────────────────────────────────────────────────── */
.testimonials {
  position:         relative;
  background-color: var(--color-blue);
  color:            var(--color-white);
  text-align:       center;
  overflow:         hidden;
}

.testimonials__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(0.825rem, 0.6875rem + 0.55vw, 1.2375rem);
}


.testimonials__title {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  line-height: 1.1;
  font-weight: var(--fw-regular);
  margin: 0;
}

.testimonials__subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  opacity: 0.7;
  margin: 0;
}

.testimonials__rule {
  width: 48px;
  height: 2px;
  background-color: var(--color-red);
  margin-top: 0.5rem;
  border-radius: 2px;
}

/* ── Slider Wrapper ── */
.testimonials__slider {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* ── Track & Slides ── */
.testimonials__track {
  position: relative;
  flex: 1;
  min-height: 260px; /* Prevent layout shift */
  display: grid;
  grid-template-areas: "slide";
  align-items: center;
}

.testimonials__slide {
  grid-area: slide;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.testimonials__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.testimonials__quote {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  max-width: 72ch;
  margin: 0 auto;
}

.testimonials__attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: var(--font-serif);
  font-size: var(--text-h5);
  font-weight: var(--fw-light);
}
.testimonials__platform-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

.testimonials__platform-icon svg,
.testimonials__platform-icon svg path {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* ── Navigation ── */
.testimonials__nav {
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  padding: 0.5rem;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.6;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.testimonials__nav:hover {
  opacity: 1;
  transform: scale(1.1);
}

.testimonials__nav [data-lucide] {
  width: 32px;
  height: 32px;
  stroke-width: 1.5;
}

/* ── Footer ── */
.testimonials__footer {
  margin-top: 0;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .testimonials__slider {
    gap: 1rem;
  }
  
  .testimonials__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    min-width: 44px;
    min-height: 44px;
  }

  .testimonials__nav--prev { left: -1rem; }
  .testimonials__nav--next { right: -1rem; }
  
  .testimonials__quote {
    font-size: var(--text-sm);
    padding-inline: 2rem;
  }
}

@media (max-width: 560px) {
  .testimonials__nav {
    display: none;
  }
  
  .testimonials__track {
    min-height: 270px;
  }
  
  .testimonials__quote {
    padding-inline: 0;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .testimonials__slide {
    transition: none !important;
  }
}

/* ─── EXPECTATIONS SECTION ────────────────────────────────────────────────── */
.expectations {
  position:         relative;
  background-color: var(--color-beige);
  text-align:       center;
}

.expectations__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(3.5rem, 3rem + 3vw, 5.5rem);
}

.expectations__title {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  color: var(--color-blue-darkest);
  line-height: 1.1;
  font-weight: var(--fw-regular);
}

.expectations__subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-blue-light);
  max-width: 60ch;
  line-height: 1.5;
  opacity: 0.8;
}

.expectations__rule {
  width: 48px;
  height: 2px;
  background-color: var(--color-red);
  margin-top: 0.5rem;
  border-radius: 2px;
}

/* ── Grid ── */
.expectations__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  align-items: start;
}

.expectations__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;

  /* Animation: Initial state */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.expectations.is-visible .expectations__item {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays */
.expectations.is-visible .expectations__item:nth-child(1) { transition-delay: 0.1s; }
.expectations.is-visible .expectations__item:nth-child(2) { transition-delay: 0.25s; }
.expectations.is-visible .expectations__item:nth-child(3) { transition-delay: 0.4s; }
.expectations.is-visible .expectations__item:nth-child(4) { transition-delay: 0.55s; }

/* ── Item Components ── */
.expectations__icon-placeholder {
  width:               clamp(76.8px, 7.2vw, 105.6px);
  height:              clamp(76.8px, 7.2vw, 105.6px);
  background-color:    var(--color-blue-darkest);
  mask-size:           contain;
  mask-repeat:         no-repeat;
  mask-position:       center;
  mask-mode:           alpha;
  -webkit-mask-size:   contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  transition:          background-color 0.4s ease, transform 0.4s ease;
}

.expectations__item:hover .expectations__icon-placeholder {
  background-color: var(--color-red);
  transform:        scale(1.08);
}

.expectations__item:nth-child(1) .expectations__icon-placeholder {
  mask-image:         url('../images/Icons/support.svg');
  -webkit-mask-image: url('../images/Icons/support.svg');
}

.expectations__item:nth-child(2) .expectations__icon-placeholder {
  mask-image:         url('../images/Icons/attention.svg');
  -webkit-mask-image: url('../images/Icons/attention.svg');
}

.expectations__item:nth-child(3) .expectations__icon-placeholder {
  mask-image:         url('../images/Icons/attorney.svg');
  -webkit-mask-image: url('../images/Icons/attorney.svg');
}

.expectations__item:nth-child(4) .expectations__icon-placeholder {
  mask-image:         url('../images/Icons/chess.svg');
  -webkit-mask-image: url('../images/Icons/chess.svg');
}

.expectations__label {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--color-blue-darkest);
  line-height: 1.3;
  max-width: 18ch;
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .expectations__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 4rem;
  }
}

@media (max-width: 560px) {
  .expectations__grid {
    grid-template-columns: 1fr;
    row-gap: 3.5rem;
  }
  
  .expectations__header {
    margin-bottom: 4rem;
  }
  
  .expectations__title {
    font-size: var(--text-h3);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .expectations__item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ─── CASE RESULTS SECTION ──────────────────────────────────────────────────── */

.case-results {
  position:   relative;
  background: var(--color-blue);
}

/* ── Stats Banner ── */

.case-results__stats-banner {
  overflow: hidden;
}

.case-results__stats-container {
  display: flex;
}

/* ── Panels ── */

.case-results__stats-panel {
  position:        relative;
  flex:            1 1 50%;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding-block:   clamp(2rem, 1.5rem + 2vw, 3.5rem);
  gap:             0.25rem;
  padding-inline:  clamp(1.5rem, 4vw, 4rem);
  overflow:        hidden;
}

/* Background images */
.case-results__stats-panel--left {
  background-image:    url('../images/home/success-1.webp');
  background-size:     cover;
  background-position: center;
}

.case-results__stats-panel--right {
  background-image:    url('../images/home/success-2.webp');
  background-size:     cover;
  background-position: center;
}

/* Overlay layer — sits between bg image and content */
.case-results__stats-panel::before {
  content:        '';
  position:       absolute;
  inset:          0;
  pointer-events: none;
  z-index:        1;
}

.case-results__stats-panel--left::before {
  background: rgba(14, 14, 65, 0.80); /* --color-blue-dark at 80% */
}

.case-results__stats-panel--right::before {
  background: rgba(253, 247, 239, 0.80); /* --color-beige at 80% */
}

/* Edge gradients — decorative fade at panel boundaries */
.case-results__stats-panel--left::after,
.case-results__stats-panel--right::after {
  content:        '';
  position:       absolute;
  left:           0;
  right:          0;
  height:         20%;
  pointer-events: none;
  z-index:        1;
}

/* Left panel: fade from --color-blue at bottom to transparent at top */
.case-results__stats-panel--left::after {
  bottom:     0;
  background: linear-gradient(to bottom, transparent, var(--color-blue));
}

/* Right panel: fade from --color-beige at top to transparent at bottom */
.case-results__stats-panel--right::after {
  top:        0;
  background: linear-gradient(to bottom, var(--color-beige), transparent);
}

/* Content sits above overlay */
.case-results__stats-panel .case-results__stat-value,
.case-results__stats-panel .case-results__stat-label {
  position: relative;
  z-index:  2;
}

/* ── Stat Value (number row) ── */

.case-results__stat-value {
  display:     flex;
  align-items: baseline;
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  line-height: 1;
  gap:         0;
}

/* Left panel: white text */
.case-results__stats-panel--left .case-results__stat-value {
  color: var(--color-white);
}

/* Right panel: dark blue text */
.case-results__stats-panel--right .case-results__stat-value {
  color: var(--color-red);
}

.case-results__stat-prefix,
.case-results__stat-suffix {
  font-size:   clamp(1.5rem, 1rem + 2vw, 3rem);
  line-height: 1;
  align-self:  flex-start;
  padding-top: 0.18em;
}

.case-results__stat-number {
  font-size:   clamp(4rem, 2.75rem + 5vw, 7.5rem);
  line-height: 1;
}

/* ── Stat Label ── */

.case-results__stat-label {
  font-family:  var(--font-sans);
  font-size:    clamp(1.3rem, 1rem + 1.25vw, 2.11rem);
  font-weight:  var(--fw-light);
  line-height:  1.3;
  margin-top:   clamp(-1.26rem, -0.63rem + -1.26vw, -2.52rem);
}

.case-results__stats-panel--left .case-results__stat-label {
  color: rgba(255, 255, 255, 0.85);
}

.case-results__stats-panel--right .case-results__stat-label {
  color: var(--color-red);
}

/* ── Elastic spring finish animation ── */

@keyframes stat-elastic {
  0%   { transform: scale(1);    }
  35%  { transform: scale(1.06); }
  60%  { transform: scale(0.985); }
  80%  { transform: scale(1.02); }
  100% { transform: scale(1);    }
}

.case-results__stat-value.is-elastic {
  animation: stat-elastic 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── Results Body ── */

.case-results__body {
  padding-top:    clamp(4rem, 3.5rem + 3vw, 7rem);
  padding-bottom: clamp(2rem, 1.75rem + 1.5vw, 3.5rem);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.case-results__container {
  max-width:      1200px;
  margin-inline:  auto;
  display:        flex;
  flex-direction: column;
  gap:            clamp(3rem, 2.5rem + 2vw, 4.5rem);
}

/* Header */

.case-results__header {
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.75rem;
}

.case-results__title {
  font-family: var(--font-serif);
  font-size:   var(--text-h2);
  font-weight: var(--fw-regular);
  color:       var(--color-white);
  margin:      0;
  line-height: 1.1;
}

.case-results__subtitle {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  color:       rgba(255, 255, 255, 0.55);
  margin:      0;
}

.case-results__rule {
  width:         48px;
  height:        2px;
  background:    var(--color-red);
  border-radius: 2px;
  margin-top:    0.375rem;
}

/* ── Card Grid ── */

.case-results__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.5rem;
  align-items:           stretch;
}

/* ── Result Card ── */

.result-card {
  background:     rgba(255, 255, 255, 0.04);
  border:         1px solid rgba(255, 255, 255, 0.08);
  border-radius:  10px;
  padding:        clamp(1.5rem, 2.5vw, 2rem);
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  transition:     background 0.3s ease, border-color 0.3s ease;
}

.result-card:hover {
  background:   rgba(255, 255, 255, 0.07);
  border-color: rgba(245, 107, 107, 0.25);
}

.result-card__date {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-regular);
  color:          rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.result-card__title {
  font-family: var(--font-serif);
  font-size:   var(--text-h5);
  font-weight: var(--fw-regular);
  color:       var(--color-white);
  line-height: 1.35;
  margin:      0;
}

.result-card__body {
  font-family:          var(--font-sans);
  font-size:            var(--text-sm);
  color:                rgba(255, 255, 255, 0.5);
  line-height:          1.65;
  margin:               0;
  /* Clamp to 4 lines */
  display:              -webkit-box;
  -webkit-line-clamp:   4;
  -webkit-box-orient:   vertical;
  overflow:             hidden;
  flex:                 1;
}

.result-card__link {
  display:        inline-flex;
  align-items:    center;
  gap:            0.375rem;
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-bold);
  color:          var(--color-red-light);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top:     auto;
  transition:     color 0.2s ease, gap 0.2s ease;
}

.result-card__link:hover {
  color: var(--color-beige);
  gap:   0.625rem;
}

.result-card__link [data-lucide] {
  width:      14px;
  height:     14px;
  flex-shrink: 0;
}

/* CTA inside grid — not a card, just centered */
.case-results__grid-cta {
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* ── Responsive ── */

@media (max-width: 860px) {
  .case-results__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  /* Stack panels vertically on mobile */
  .case-results__stats-container {
    flex-direction: column;
  }

  .case-results__stats-panel {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .case-results__grid {
    grid-template-columns: 1fr;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .case-results__stat-value.is-elastic {
    animation: none !important;
  }
}


/* Tenant Rights group — constrain width and center */
.practice-areas__group:first-child {
  max-width: 80%;
  margin-inline: auto;
}

/* Card gap — 35% larger since only 2 tenant cards are shown */
.practice-areas__group:first-child .practice-areas__cards {
  gap: clamp(1.65rem, 1.2rem + 1.65vw, 2.7rem);
}

/* ─────────────────────────────────────────────────────────────────────────── */

/* ── Slider pause buttons (a11y) ─────────────────────────────────────── */
.yelp-slider__pause {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 13, 29, 0.06);
  border: none;
  border-radius: 50%;
  color: var(--color-blue-darkest);
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease;
}
.yelp-slider__pause:hover { background: rgba(13, 13, 29, 0.12); }
.yelp-slider__pause:focus-visible {
  outline: 2px solid var(--color-red-light);
  outline-offset: 2px;
}
.yelp-slider__pause [data-lucide] { width: 14px; height: 14px; }

.testimonials__pause {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: var(--color-white);
  cursor: pointer;
  z-index: 5;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.testimonials__pause:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}
.testimonials__pause:focus-visible {
  outline: 2px solid var(--color-red-light);
  outline-offset: 2px;
}
.testimonials__pause [data-lucide] { width: 18px; height: 18px; }