/* ============================================================================
   Conrad Legal Office — newconradlegaloffice.com
   File:    assets/css/tenant-representation.css
   Page:    Tenant Representation Practice Area
   Depends: tokens.css (imported below), components.css (via HTML <link>)
   BEM:     .tr-hero | .tr-habitability | .tr-eviction | .tr-faq | .tr-cta
   ============================================================================ */

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


/* ============================================================================
   SHARED HELPERS
   Reused across all sections on this page
   ============================================================================ */

/* Section inner wrapper — centers content with max-width and fluid padding */
.tr-hero__inner,
.tr-habitability__inner,
.tr-eviction__inner,
.tr-protections__inner,
.tr-steps__inner,
.tr-faq__inner,
.tr-cta__inner {
  width:           100%;
  max-width:       1280px;
  margin-inline:   auto;
  padding-inline:  clamp(1.5rem, 6vw, 8rem);
}

/* Eyebrow label — small uppercase text above headings */
.tr-section-eyebrow {
  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-red);
  margin-bottom:  0.5rem;
}

/* Eyebrow on dark backgrounds */
.tr-section-eyebrow--light {
  color: var(--color-red-light);
}

/* Horizontal rule below section headings */
.tr-section-rule {
  width:         3rem;
  height:        2px;
  background:    var(--color-red-dark);
  border:        none;
  border-radius: 1px;
  margin-top:    clamp(1rem, 2vw, 1.5rem);
}

/* Rule on dark backgrounds */
.tr-section-rule--light {
  background: var(--color-red-light);
  opacity:    0.6;
}


/* ============================================================================
   ANIMATION SYSTEM
   1. JS adds .anim-ready to every .js-animate on load — hides [data-anim] children
   2. JS adds .in-view when section enters viewport (IntersectionObserver)
   3. nth-child delays create a stagger cascade
   4. Hero uses pure CSS @keyframes instead (tr-fade-up)
   ============================================================================ */

.js-animate.anim-ready [data-anim] {
  opacity:    0;
  transform:  translateY(28px);
  transition:
    opacity   0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-animate.in-view [data-anim] {
  opacity:   1;
  transform: none;
}

/* Stagger delays — up to 8 items */
.js-animate.in-view [data-anim]:nth-child(1) { transition-delay: 0.00s; }
.js-animate.in-view [data-anim]:nth-child(2) { transition-delay: 0.10s; }
.js-animate.in-view [data-anim]:nth-child(3) { transition-delay: 0.20s; }
.js-animate.in-view [data-anim]:nth-child(4) { transition-delay: 0.30s; }
.js-animate.in-view [data-anim]:nth-child(5) { transition-delay: 0.40s; }
.js-animate.in-view [data-anim]:nth-child(6) { transition-delay: 0.50s; }
.js-animate.in-view [data-anim]:nth-child(7) { transition-delay: 0.60s; }
.js-animate.in-view [data-anim]:nth-child(8) { transition-delay: 0.70s; }

/* Respect user preference — disable all transitions when reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
  .js-animate.anim-ready [data-anim] {
    opacity:    1;
    transform:  none;
    transition: none;
  }
}


/* ============================================================================
   SECTION 1 — TR-HERO
   Dark background (#0d0d1d), CSS @keyframes entrance (no JS needed)
   ============================================================================ */

.tr-hero {
  position:         relative;
  background-color: var(--color-blue-darkest);
  padding-block:    clamp(5rem, 8vw, 9rem);
  padding-top:      clamp(7rem, 12vw, 10rem); /* extra top padding for fixed navbar */
  overflow:         hidden;
}

/* Background image container */
.tr-hero__bg {
  position: absolute;
  inset:    0;
  z-index:  0;
}

.tr-hero__bg-img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  display:         block;
}

/* Dark gradient overlay — keeps text legible */
.tr-hero__bg::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to right,
    rgba(9, 9, 55, 0.88) 0%,
    rgba(9, 9, 55, 0.65) 60%,
    rgba(9, 9, 55, 0.45) 100%
  );
}

/* Radial red glow behind the headline — decorative only */
.tr-hero__glow {
  position:       absolute;
  inset:          0;
  background:     radial-gradient(
    ellipse 75% 55% at 50% 0%,
    rgba(221, 68, 68, 0.07) 0%,
    transparent 68%
  );
  pointer-events: none;
  z-index:        1;
}

.tr-hero__inner {
  position:       relative;
  z-index:        2;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            clamp(1.25rem, 2.5vw, 1.75rem);
}

/* ── Breadcrumb back link ─────────────────────────────────────────────────── */

.tr-hero__breadcrumb {
  /* No extra margin — gap on __inner handles spacing */
  animation: tr-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.00s;
}

.tr-hero__back-link {
  display:         inline-flex;
  align-items:     center;
  gap:             0.4rem;
  font-family:     var(--font-sans);
  font-size:       var(--text-sm);
  font-weight:     var(--fw-regular);
  letter-spacing:  0.04em;
  color:           var(--color-white-alpha-80);
  text-decoration: none;
  transition:      color 0.2s ease, text-decoration-color 0.2s ease;
}

.tr-hero__back-link:hover,
.tr-hero__back-link:focus-visible {
  color:           var(--color-white);
  text-decoration: underline;
}

.tr-hero__back-link [data-lucide] {
  width:        var(--icon-size-sm);
  height:       var(--icon-size-sm);
  stroke-width: var(--icon-stroke-bold);
  flex-shrink:  0;
}

/* ── Eyebrow ──────────────────────────────────────────────────────────────── */

.tr-hero__eyebrow {
  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-red);
  animation:      tr-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.08s;
}

/* ── H1 ───────────────────────────────────────────────────────────────────── */

.tr-hero__title {
  font-family:  var(--font-serif);
  font-weight:  var(--fw-light);
  font-size:    var(--text-h1);
  line-height:  1.05;
  color:        var(--color-white);
  max-width:    14ch;
  animation:    tr-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.16s;
}

/* ── Location subheading ──────────────────────────────────────────────────── */

.tr-hero__subhead {
  font-family:  var(--font-sans);
  font-size:    var(--text-h5);
  font-weight:  var(--fw-regular);
  line-height:  1.3;
  color:        var(--color-red-light);
  animation:    tr-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.22s;
}

/* ── Intro paragraph ──────────────────────────────────────────────────────── */

.tr-hero__intro {
  font-family:  var(--font-sans);
  font-size:    var(--text-base);
  line-height:  1.65;
  color:        var(--color-white);
  opacity:      0.75;
  max-width:    700px;
  animation:    tr-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.30s;
}

/* ── CTA row ──────────────────────────────────────────────────────────────── */

.tr-hero__actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       1rem;
  animation: tr-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.38s;
}


/* Hero entrance keyframe */
@keyframes tr-fade-up {
  from {
    opacity:   0;
    transform: translateY(28px);
  }
  to {
    opacity:   1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tr-hero__breadcrumb,
  .tr-hero__eyebrow,
  .tr-hero__title,
  .tr-hero__subhead,
  .tr-hero__intro,
  .tr-hero__actions {
    animation: none;
  }
}


/* ============================================================================
   SECTION 2 — TR-HABITABILITY
   Light background (#fdf7ef), two-column layout: content left, card right
   ============================================================================ */

.tr-habitability {
  background-color: var(--color-beige);
  padding-block:    clamp(5rem, 8vw, 9rem);
}

.tr-habitability__inner {
  display:               grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:                   clamp(3rem, 6vw, 6rem);
  align-items:           start;
}

/* ── Left column: main editorial content ─────────────────────────────────── */

.tr-habitability__main {
  display:        flex;
  flex-direction: column;
  gap:            clamp(1.5rem, 3vw, 2rem);
}

.tr-habitability__header {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
}

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

.tr-habitability__lead,
.tr-habitability__body {
  font-family:  var(--font-sans);
  font-size:    var(--text-base);
  line-height:  1.65;
  color:        var(--color-blue);
}

/* ── Violation list ───────────────────────────────────────────────────────── */

.tr-violations {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
}

.tr-violation {
  display:     flex;
  align-items: flex-start;
  gap:         1rem;
}

/* Icon box — colored circle housing the Lucide icon */
.tr-violation__icon-box {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  width:            2.75rem;
  height:           2.75rem;
  border-radius:    50%;
  background-color: rgba(221, 68, 68, 0.08);
  color:            var(--color-red-dark);
  margin-top:       0.1rem;
}

.tr-violation__icon-box [data-lucide] {
  width:        var(--icon-size-md);
  height:       var(--icon-size-md);
  stroke-width: var(--icon-stroke);
}

.tr-violation__body {
  display:        flex;
  flex-direction: column;
  gap:            0.35rem;
}

.tr-violation__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;
}

.tr-violation__desc {
  font-family:  var(--font-sans);
  font-size:    var(--text-sm);
  line-height:  1.6;
  color:        var(--color-blue-light);
}

/* Link row below violations */
.tr-habitability__link-row {
  /* No extra styles needed — gap on .tr-habitability__main handles spacing */
}

/* ── Right column: process sidebar card ──────────────────────────────────── */

.tr-process-card {
  position:         sticky;
  top:              6rem;
  background-color: var(--color-beige);
  background-image: linear-gradient(
    135deg,
    rgba(12, 13, 86, 0.035) 0%,
    rgba(12, 13, 86, 0.015) 100%
  );
  border-radius:    8px;
  border-left:      3px solid var(--color-red-dark);
  padding:          clamp(1.75rem, 3vw, 2.5rem);
  display:          flex;
  flex-direction:   column;
  gap:              1.25rem;
  /* Subtle shadow for depth against beige background */
  box-shadow:
    0 2px 8px  rgba(12, 13, 86, 0.06),
    0 1px 2px  rgba(12, 13, 86, 0.04);
}

/* Briefcase icon */
.tr-process-card__icon-wrap {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            3rem;
  height:           3rem;
  border-radius:    8px;
  background-color: var(--color-blue-electric);
}

.tr-process-card__icon {
  color:        var(--color-white) !important;
  width:        var(--icon-size-lg) !important;
  height:       var(--icon-size-lg) !important;
  stroke-width: var(--icon-stroke) !important;
}

.tr-process-card__heading {
  font-family:  var(--font-sans);
  font-size:    var(--text-h5);
  font-weight:  var(--fw-bold);
  color:        var(--color-blue-darkest);
  line-height:  1.2;
}

.tr-process-card__subhead {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--color-red-dark);
  margin-top:     -0.75rem; /* pull closer to heading */
}

/* ── Process step list ────────────────────────────────────────────────────── */

.tr-process-steps {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
  counter-reset:  process-step;
}

.tr-process-step {
  display:     flex;
  align-items: flex-start;
  gap:         1rem;
}

.tr-process-step__num {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  width:            2rem;
  height:           2rem;
  border-radius:    50%;
  border:           1.5px solid var(--color-red-dark);
  font-family:      var(--font-sans);
  font-size:        0.6875rem;
  font-weight:      var(--fw-bold);
  letter-spacing:   0.04em;
  color:            var(--color-red-dark);
  line-height:      1;
  margin-top:       0.1rem;
}

.tr-process-step__body {
  display:        flex;
  flex-direction: column;
  gap:            0.25rem;
}

.tr-process-step__label {
  font-family:  var(--font-sans);
  font-size:    var(--text-sm);
  font-weight:  var(--fw-bold);
  color:        var(--color-blue-darkest);
  line-height:  1.35;
  display:      block;
}

.tr-process-step__desc {
  font-family:  var(--font-sans);
  font-size:    var(--text-xs);
  line-height:  1.6;
  color:        var(--color-blue-light);
}


/* ============================================================================
   SECTION 3 — TR-EVICTION
   Dark background (#0e0e41), centered layout
   ============================================================================ */

.tr-eviction {
  background-color: var(--color-blue-dark);
  padding-block:    clamp(5rem, 8vw, 9rem);
  position:         relative;
  overflow:         hidden;
}

/* Subtle diagonal stripe pattern — purely decorative */
.tr-eviction::after {
  content:          '';
  position:         absolute;
  inset:            0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.012) 0px,
    rgba(255, 255, 255, 0.012) 1px,
    transparent 1px,
    transparent 30px
  );
  pointer-events: none;
}

.tr-eviction__inner {
  position:        relative;
  z-index:         1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  gap:             clamp(1.5rem, 3vw, 2rem);
  max-width:       800px;
}

/* ── Shield icon ──────────────────────────────────────────────────────────── */

.tr-eviction__icon-wrap {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            5rem;
  height:           5rem;
  border-radius:    50%;
  background-color: rgba(245, 107, 107, 0.1);
  border:           1px solid rgba(245, 107, 107, 0.25);
}

.tr-eviction__shield-icon {
  color:        var(--color-red-light) !important;
  width:        3rem !important;
  height:       3rem !important;
  stroke-width: var(--icon-stroke-thin) !important;
}

/* ── Section header ───────────────────────────────────────────────────────── */

.tr-eviction__header {
  display:        flex;
  flex-direction: column;
  align-items:    center;
}

.tr-eviction__title {
  font-family:  var(--font-serif);
  font-weight:  var(--fw-regular);
  font-size:    var(--text-h2);
  line-height:  1.1;
  color:        var(--color-white);
}

/* ── Body paragraph ───────────────────────────────────────────────────────── */

.tr-eviction__body {
  font-family:  var(--font-sans);
  font-size:    var(--text-base);
  line-height:  1.65;
  color:        rgba(255, 255, 255, 0.75);
  max-width:    680px;
}

/* ── "Did you know?" highlight box ───────────────────────────────────────── */

.tr-eviction__highlight {
  width:            100%;
  max-width:        680px;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  gap:              0.65rem;
  padding:          clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 4vw, 2rem);
  background:       rgba(255, 255, 255, 0.05);
  border:           1px solid rgba(255, 255, 255, 0.15);
  border-radius:    8px;
}

.tr-eviction__highlight-label {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-red-light);
}

.tr-eviction__highlight-statement {
  font-family:  var(--font-sans);
  font-size:    var(--text-h5);
  font-weight:  var(--fw-bold);
  line-height:  1.4;
  color:        var(--color-white);
}

.tr-eviction__highlight-sub {
  font-family:  var(--font-sans);
  font-size:    var(--text-sm);
  line-height:  1.6;
  color:        rgba(255, 255, 255, 0.55);
  max-width:    560px;
}


/* ============================================================================
   SECTION 4 — TR-PROTECTIONS
   Light background (#fdf7ef), two-column: editorial left, action card right
   ============================================================================ */

.tr-protections {
  background-color: var(--color-beige);
  padding-block:    clamp(5rem, 8vw, 9rem);
}

.tr-protections__inner {
  display:               grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:                   clamp(3rem, 6vw, 5rem);
  align-items:           start;
}

/* ── Left column: editorial ────────────────────────────────────────────────── */

.tr-protections__main {
  display:        flex;
  flex-direction: column;
  gap:            clamp(1.5rem, 3vw, 2rem);
}

.tr-protections__header {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
}

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

.tr-protections__lead {
  font-family:  var(--font-sans);
  font-size:    var(--text-base);
  line-height:  1.65;
  color:        var(--color-blue);
}

/* ── Protections icon list ─────────────────────────────────────────────────── */

.tr-protections__list {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            1.75rem;
}

.tr-protections__item {
  display:     flex;
  align-items: flex-start;
  gap:         1rem;
}

.tr-protections__item-icon {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  width:            2.75rem;
  height:           2.75rem;
  border-radius:    50%;
  background-color: rgba(221, 68, 68, 0.08);
  color:            var(--color-red-dark);
  margin-top:       0.15rem;
}

.tr-protections__item-icon [data-lucide] {
  width:        var(--icon-size-md);
  height:       var(--icon-size-md);
  stroke-width: var(--icon-stroke);
}

.tr-protections__item-body {
  display:        flex;
  flex-direction: column;
  gap:            0.3rem;
}

.tr-protections__item-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;
}

.tr-protections__item-desc {
  font-family:  var(--font-sans);
  font-size:    var(--text-sm);
  line-height:  1.6;
  color:        var(--color-blue-light);
}

/* ── Right column: action card ─────────────────────────────────────────────── */

.tr-protections__card {
  position:         sticky;
  top:              clamp(6rem, 10vw, 8rem);
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  text-align:       center;
  gap:              1.25rem;
  padding:          clamp(2rem, 3vw, 2.75rem);
  background-color: var(--color-blue-darkest);
  border-radius:    12px;
  overflow:         hidden;
}

/* Subtle radial glow at top of card */
.tr-protections__card::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     radial-gradient(
    ellipse 80% 50% at 50% 0%,
    rgba(221, 68, 68, 0.1) 0%,
    transparent 65%
  );
  pointer-events: none;
}

.tr-protections__card-icon {
  position:         relative;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            3.5rem;
  height:           3.5rem;
  border-radius:    50%;
  background-color: rgba(245, 107, 107, 0.12);
  border:           1px solid rgba(245, 107, 107, 0.25);
  color:            var(--color-red-light);
}

.tr-protections__card-icon [data-lucide] {
  width:        var(--icon-size-lg);
  height:       var(--icon-size-lg);
  stroke-width: var(--icon-stroke);
}

.tr-protections__card-heading {
  position:     relative;
  font-family:  var(--font-serif);
  font-weight:  var(--fw-regular);
  font-size:    var(--text-h4);
  line-height:  1.2;
  color:        var(--color-white);
}

.tr-protections__card-body {
  position:     relative;
  font-family:  var(--font-sans);
  font-size:    var(--text-sm);
  line-height:  1.6;
  color:        rgba(255, 255, 255, 0.7);
}

.tr-protections__card .btn {
  position: relative;
  width:    100%;
}

.tr-protections__card-sub {
  position:       relative;
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  letter-spacing: 0.04em;
  color:          rgba(255, 255, 255, 0.45);
}


/* ============================================================================
   SECTION 5 — TR-STEPS
   Dark background (#0e0e41), 4 numbered step cards
   ============================================================================ */

.tr-steps {
  background-color: var(--color-blue-dark);
  padding-block:    clamp(5rem, 8vw, 9rem);
  position:         relative;
  overflow:         hidden;
}

/* Subtle diagonal stripe pattern — same as eviction section for visual continuity */
.tr-steps::after {
  content:          '';
  position:         absolute;
  inset:            0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.012) 0px,
    rgba(255, 255, 255, 0.012) 1px,
    transparent 1px,
    transparent 30px
  );
  pointer-events: none;
}

.tr-steps__inner {
  position:        relative;
  z-index:         1;
  display:         flex;
  flex-direction:  column;
  gap:             clamp(2rem, 4vw, 3rem);
}

.tr-steps__header {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
}

.tr-steps__title {
  font-family:  var(--font-serif);
  font-weight:  var(--fw-regular);
  font-size:    var(--text-h2);
  line-height:  1.1;
  color:        var(--color-white);
}

.tr-steps__lead {
  font-family:  var(--font-sans);
  font-size:    var(--text-base);
  line-height:  1.65;
  color:        rgba(255, 255, 255, 0.75);
  max-width:    700px;
}

/* ── Step cards grid ───────────────────────────────────────────────────────── */

.tr-steps__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   clamp(1.25rem, 2.5vw, 1.75rem);
}

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

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

.tr-steps__card-num {
  font-family:    var(--font-sans);
  font-size:      var(--text-h3);
  font-weight:    var(--fw-bold);
  line-height:    1;
  color:          var(--color-red);
  opacity:        0.35;
}

.tr-steps__card-title {
  font-family:  var(--font-sans);
  font-size:    var(--text-h5);
  font-weight:  var(--fw-bold);
  line-height:  1.25;
  color:        var(--color-white);
}

.tr-steps__card-desc {
  font-family:  var(--font-sans);
  font-size:    var(--text-sm);
  line-height:  1.65;
  color:        rgba(255, 255, 255, 0.6);
}

/* ── Inline CTA at bottom ──────────────────────────────────────────────────── */

.tr-steps__cta {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  text-align:       center;
  gap:              1.5rem;
  padding-top:      clamp(1rem, 2vw, 1.5rem);
}

.tr-steps__cta-text {
  font-family:  var(--font-sans);
  font-size:    var(--text-h5);
  font-weight:  var(--fw-regular);
  line-height:  1.4;
  color:        var(--color-white);
  max-width:    600px;
}

.tr-steps__cta-actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       1rem;
  justify-content: center;
}


/* ============================================================================
   SECTION 6 — TR-FAQ
   Light background (#fdf7ef), accordion
   ============================================================================ */

.tr-faq {
  background-color: var(--color-beige);
  padding-block:    clamp(5rem, 8vw, 9rem);
}

.tr-faq__inner {
  display:        flex;
  flex-direction: column;
  gap:            clamp(2.5rem, 5vw, 4rem);
}

/* ── Section header ───────────────────────────────────────────────────────── */

.tr-faq__header {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
}

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

/* ── FAQ list wrapper ─────────────────────────────────────────────────────── */

.tr-faq__list {
  max-width: 820px;
  display:   flex;
  flex-direction: column;
}

/* ── FAQ item ─────────────────────────────────────────────────────────────── */

.tr-faq__item {
  border-top: 1px solid var(--color-gray-subtle);
}

.tr-faq__item:last-child {
  border-bottom: 1px solid var(--color-gray-subtle);
}

.tr-faq__item.is-open {
  background-color: rgba(13, 13, 29, 0.02);
}

/* ── Trigger button ───────────────────────────────────────────────────────── */

.tr-faq__trigger {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding-block:   1.5rem;
  padding-inline:  0;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  text-align:      left;
  transition:
    background-color 0.25s ease,
    padding-inline 0.25s ease,
    margin-inline 0.25s ease,
    width 0.25s ease;
}

.tr-faq__trigger:hover {
  background-color: rgba(13, 13, 29, 0.03);
  padding-inline: 1rem;
  margin-inline: -1rem;
  width: calc(100% + 2rem);
}

.tr-faq__trigger:hover .tr-faq__question {
  color: var(--color-red-dark);
}

.tr-faq__item.is-open .tr-faq__trigger {
  background-color: rgba(13, 13, 29, 0.04);
  padding-inline:   1rem;
  margin-inline:    -1rem;
  width:            calc(100% + 2rem);
}

.tr-faq__trigger:focus-visible {
  outline:        2px solid var(--color-red-dark);
  outline-offset: 2px;
  border-radius:  4px;
}

/* Question text */
.tr-faq__question {
  font-family:  var(--font-sans);
  font-size:    var(--text-h5);
  font-weight:  var(--fw-regular);
  color:        var(--color-blue-darkest);
  line-height:  1.3;
  flex:         1;
  transition:   color 0.25s ease;
}

/* Chevron icon */
.tr-faq__chevron {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  color:           var(--color-red-dark);
  transition:      transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tr-faq__chevron [data-lucide] {
  width:  var(--icon-size-lg);
  height: var(--icon-size-lg);
}

.tr-faq__item.is-open .tr-faq__chevron {
  transform: rotate(180deg);
}

/* ── Collapsible panel ────────────────────────────────────────────────────── */

.tr-faq__panel {
  overflow:    hidden;
  max-height:  0;
  transition:  max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.tr-faq__panel[hidden] {
  display:    block;
  visibility: hidden;
}

.tr-faq__item.is-open .tr-faq__panel {
  visibility: visible;
  max-height: 500px;
}

/* Answer text */
.tr-faq__answer {
  font-family:    var(--font-sans);
  font-size:      var(--text-base);
  line-height:    1.7;
  color:          var(--color-blue);
  opacity:        0.85;
  padding-bottom: 1.75rem;
}


/* ============================================================================
   SECTION 5 — TR-CTA
   Dark background (#0d0d1d), centered layout
   ============================================================================ */

.tr-cta {
  background-color: var(--color-blue-darkest);
  padding-block:    clamp(5rem, 8vw, 9rem);
  position:         relative;
  overflow:         hidden;
}

/* Radial glow at bottom-center */
.tr-cta::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     radial-gradient(
    ellipse 60% 70% at 50% 100%,
    rgba(187, 50, 50, 0.08) 0%,
    transparent 65%
  );
  pointer-events: none;
}

.tr-cta__inner {
  position:        relative;
  z-index:         1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  gap:             clamp(1.25rem, 3vw, 2rem);
  max-width:       760px;
}

/* ── Scale icon ───────────────────────────────────────────────────────────── */

.tr-cta__icon-wrap {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            4rem;
  height:           4rem;
  border-radius:    50%;
  background-color: rgba(221, 68, 68, 0.1);
  border:           1px solid rgba(221, 68, 68, 0.2);
}

.tr-cta__icon {
  color:        var(--color-red) !important;
  width:        2rem !important;
  height:       2rem !important;
  stroke-width: var(--icon-stroke-thin) !important;
}

/* ── Heading ──────────────────────────────────────────────────────────────── */

.tr-cta__title {
  font-family:  var(--font-serif);
  font-weight:  var(--fw-regular);
  font-size:    var(--text-h2);
  line-height:  1.1;
  color:        var(--color-white);
}

/* ── Body ─────────────────────────────────────────────────────────────────── */

.tr-cta__body {
  font-family:  var(--font-sans);
  font-size:    var(--text-base);
  line-height:  1.65;
  color:        rgba(255, 255, 255, 0.7);
  max-width:    600px;
}

/* ── CTA buttons ──────────────────────────────────────────────────────────── */

.tr-cta__actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       1rem;
  justify-content: center;
}



/* ============================================================================
   RESPONSIVE OVERRIDES
   Breakpoints: 1024px, 768px, 480px
   ============================================================================ */

/* ── 1024px: Tablet landscape ─────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Habitability: collapse two columns to one */
  .tr-habitability__inner {
    grid-template-columns: 1fr;
  }

  /* Process card sits below the main content, full width */
  .tr-process-card {
    position: static;
    order: 2;
  }

  /* Protections: collapse two columns to one */
  .tr-protections__inner {
    grid-template-columns: 1fr;
  }

  /* Action card: unstick on tablet, center */
  .tr-protections__card {
    position:  static;
    max-width: 480px;
    margin-inline: auto;
  }

  /* Steps: 4-col → 2-col */
  .tr-steps__grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


/* ── 768px: Tablet portrait ───────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Hero: tighten top padding when navbar is smaller on mobile */
  .tr-hero {
    padding-top: clamp(5.5rem, 14vw, 7rem);
  }

  /* Reduce gap inside the habitability section */
  .tr-habitability__inner {
    gap: 2.5rem;
  }

  /* Eviction icon: slightly smaller */
  .tr-eviction__icon-wrap {
    width:  4rem;
    height: 4rem;
  }

  .tr-eviction__shield-icon {
    width:  2.25rem !important;
    height: 2.25rem !important;
  }

  /* FAQ: question font size reduction */
  .tr-faq__question {
    font-size: var(--text-base);
  }

  /* Steps: 2-col → 1-col on tablet portrait */
  .tr-steps__grid {
    grid-template-columns: 1fr;
  }
}


/* ── 480px: Mobile portrait ───────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Hero CTAs: stack vertically and stretch full width */
  .tr-hero__actions {
    flex-direction: column;
    align-items:    stretch;
  }

  .tr-hero__actions .btn {
    justify-content: center;
    text-align:      center;
  }

  /* FAQ trigger: tighter vertical padding */
  .tr-faq__trigger {
    padding-block: 1.25rem;
  }

  /* CTA buttons: stack vertically */
  .tr-cta__actions {
    flex-direction: column;
    align-items:    stretch;
    width:          100%;
    max-width:      360px;
  }

  .tr-cta__actions .btn {
    justify-content: center;
    text-align:      center;
  }

  /* Eviction highlight: tighten padding */
  .tr-eviction__highlight {
    padding: 1.25rem 1rem;
  }

  /* Process card: tighten padding */
  .tr-process-card {
    padding: 1.5rem;
  }

  /* Steps CTA: stack buttons */
  .tr-steps__cta-actions {
    flex-direction: column;
    align-items:    stretch;
    width:          100%;
    max-width:      360px;
  }

  .tr-steps__cta-actions .btn {
    justify-content: center;
    text-align:      center;
  }

  /* Protections card: tighten padding */
  .tr-protections__card {
    padding: 1.5rem;
  }

}