/* ============================================
   REVIEWS — reviews.html

   The page is a magazine-style mosaic of testimonial cards
   set against an atmospheric background. Cormorant italic
   is restored to its reserved role: it appears ONLY in the
   single featured pull-quote at the top and as a giant
   decorative quote glyph behind each card. The card body
   text is Source Sans 3 — properly editorial, not eulogy.
   Hero + dark CTA close inherited from inner-pages.css.
   ============================================ */

/* ----- Shared container — wider than .container so the mosaic
   has room to breathe in 2 columns ----- */
.t-container,
.quotes-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

/* The featured pull-quote uses the wide container so the 2-column
   horizontal magazine spread has room to breathe. */
.featured-quote-section .quotes-container {
  max-width: 1140px;
}

/* ============================================
   1) FEATURED PULL-QUOTE (top of page)
   2-column magazine spread: Cormorant italic quote on the left,
   attribution panel on the right, separated by a hairline rule.
   Wider, shorter, more horizontal — reads as a true editorial
   pull-quote rather than a tall narrow column.
   ============================================ */
.featured-quote-section {
  background: var(--white);
  padding: 96px 0 88px;
}

.featured-quote {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
  text-align: left;
  position: relative;
}

.featured-quote-text {
  position: relative;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
  padding-left: 0.55em;
}

/* Decorative opening curly-quote that hangs into the left margin —
   classic editorial typography move. Maroon, larger than the body italic
   so it reads as a typographic ornament, not a literal punctuation mark. */
.featured-quote-text::before {
  content: '\201C';
  position: absolute;
  left: -0.15em;
  top: -0.18em;
  font-size: 1.45em;
  line-height: 1;
  color: rgba(123, 35, 50, 0.5);
  font-weight: 400;
}

.featured-quote-attr {
  display: block;
  border-left: 1px solid var(--hairline-strong);
  padding-left: 56px;
}

.featured-quote-name {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.3;
}

.featured-quote-detail {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-light);
  margin: 0 0 24px;
  line-height: 1.55;
  text-transform: none;
  letter-spacing: 0;
}

.featured-quote-detail a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease-soft);
}

.featured-quote-detail a:hover { border-color: var(--accent); }

.featured-quote-source {
  font-family: var(--font-heading);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Mobile: stack the spread vertically, attribution moves below quote */
@media (max-width: 768px) {
  .featured-quote {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .featured-quote-attr {
    border-left: 0;
    border-top: 1px solid var(--hairline-strong);
    padding-left: 0;
    padding-top: 28px;
  }
}

/* ============================================
   1b) STATS STRIP
   Numerical proof anchors the page before the quotes begin.
   Reuses the homepage stat-value/-num/-suffix/-label treatment
   (Montserrat 200 numerals, maroon suffix marks, caps labels).
   ============================================ */
.t-stats {
  background: var(--white);
  padding: 88px 0 96px;
  position: relative;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.t-stats-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.t-stat {
  padding: 16px 24px;
  text-align: center;
  border-right: 1px solid var(--hairline);
}

.t-stat:last-child { border-right: 0; }

/* Local copies of the homepage stat treatment so reviews.html doesn't
   need to load home.css. Identical token usage — pure typography brand. */
.t-stat .stat-value {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.t-stat .stat-num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.t-stat .stat-suffix {
  font-size: 0.6em;
  font-weight: 300;
  color: var(--warm);
  margin-left: 4px;
}

.t-stat .stat-label {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0;
}

.t-stats-foot {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-light);
  text-align: center;
  margin: 56px auto 0;
  max-width: 560px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .t-stats { padding: 64px 0 72px; }
  .t-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .t-stat { border-right: 0; padding: 24px 16px; }
  .t-stat:nth-child(odd) { border-right: 1px solid var(--hairline); }
  .t-stat:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
  .t-stats-foot { margin-top: 36px; }
}

/* ============================================
   2) MOSAIC SECTIONS — atmospheric background + 2-col grid
   ============================================ */
.t-section {
  padding: 120px 0 140px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
}

.t-section-clients { background: var(--off-white); }
.t-section-agents  { background: var(--white); }

/* Subtle gradient mesh atmosphere — two soft glows so the page has
   presence even before the cards arrive. */
.t-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 800px 600px at 18% 22%, rgba(44, 74, 110, 0.045), transparent 60%),
    radial-gradient(ellipse 700px 500px at 82% 78%, rgba(123, 35, 50, 0.040), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.t-section-agents::before {
  background:
    radial-gradient(ellipse 800px 600px at 80% 25%, rgba(44, 74, 110, 0.04), transparent 60%),
    radial-gradient(ellipse 700px 500px at 20% 75%, rgba(123, 35, 50, 0.035), transparent 60%);
}

/* Grain texture overlay — subtle SVG noise pushes the page from "designed
   but flat" into "premium editorial magazine." Sits above the gradient mesh
   but below the content. Inline data URI keeps it free of network requests. */
.t-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}

.t-section .t-container { position: relative; z-index: 1; }

/* Section header */
.t-section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 72px;
}

.t-section-head .section-label {
  display: inline-block;
  margin-bottom: 14px;
}

.t-section-sub {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-light);
  margin: 0;
}

/* ============================================
   3) THE MOSAIC GRID
   ============================================ */
.t-mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  grid-auto-flow: dense;
}

/* ============================================
   4) THE CARD
   Body text in Source Sans 3 (NOT Cormorant — keeping that
   reserved). A giant decorative opening quote glyph in
   Cormorant italic acts as a graphic element behind the text.
   ============================================ */
.t-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 44px 40px 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base) var(--ease-calm),
              transform var(--t-base) var(--ease-calm),
              border-color var(--t-base) var(--ease-soft);
}

.t-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--hairline-strong);
}

.t-section-clients .t-card { background: var(--white); }
.t-section-agents .t-card  { background: var(--off-white); }

/* Decorative giant opening quote glyph — Cormorant italic as a
   graphic element, not body type. Low-opacity maroon, sits behind. */
.t-card-glyph {
  position: absolute;
  top: -24px;
  left: 28px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 11rem;
  line-height: 0.8;
  color: rgba(123, 35, 50, 0.10);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.t-card-quote {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  padding-top: 24px;
  flex: 1;
}

.t-card-attr {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  position: relative;
  z-index: 1;
}

.t-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--r-circle);
  background: var(--warm);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  line-height: 1;
}

.t-card-info {
  min-width: 0;
  flex: 1;
}

.t-card-name {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.3;
}

.t-card-name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease-soft),
              color var(--t-fast) var(--ease-soft);
}

.t-card-name a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.t-card-detail {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-light);
  margin: 0;
  line-height: 1.45;
}

.t-card-detail a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease-soft);
}

.t-card-detail a:hover { border-color: var(--accent); }

/* Source + date line — verification credibility under the attribution.
   Tiny caps in muted accent so it reads as "verified data" not as decoration.
   Same shape an automated Google Reviews API integration would render. */
.t-card-source {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin: 8px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.t-source-platform { color: var(--accent); }
.t-source-sep { opacity: 0.4; }
.t-source-date { color: var(--text-light); font-weight: 500; }

/* ============================================
   5) FEATURED CARD — spans 2 columns, larger quote, gradient bg
   Differentiated by SIZE and BACKGROUND, not typeface — keeps
   Cormorant reserved for the top featured pull-quote.
   ============================================ */
.t-card-featured {
  grid-column: span 2;
  padding: 64px 72px 48px;
  background: linear-gradient(135deg, var(--white) 0%, var(--off-white) 100%);
}

.t-section-agents .t-card-featured {
  background: linear-gradient(135deg, var(--off-white) 0%, var(--white) 100%);
  /* The agents section has only two cards; don't span 2 columns or the second
     card is orphaned beside an empty half-column. Keep them equal side-by-side. */
  grid-column: span 1;
}

.t-card-featured .t-card-glyph {
  font-size: 16rem;
  top: -32px;
  left: 36px;
  color: rgba(123, 35, 50, 0.13);
}

.t-card-featured .t-card-quote {
  font-size: clamp(1.3rem, 2.1vw, 1.65rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink);
  padding-top: 36px;
  max-width: 60ch;
}

.t-card-featured .t-card-avatar {
  width: 56px;
  height: 56px;
  font-size: 0.86rem;
}

.t-card-featured .t-card-name {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.t-card-featured .t-card-detail {
  font-size: 0.86rem;
}

/* ============================================
   6) RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .t-card-featured {
    padding: 52px 48px 40px;
  }
  .t-card-featured .t-card-glyph {
    font-size: 13rem;
    top: -24px;
  }
}

@media (max-width: 900px) {
  .featured-quote-section { padding: 80px 0 72px; }
  .t-section { padding: 88px 0 104px; }
  .t-section-head { margin-bottom: 56px; }

  .t-mosaic {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .t-card-featured {
    grid-column: 1;
    padding: 44px 36px 32px;
  }
  .t-card-featured .t-card-glyph {
    font-size: 11rem;
    top: -20px;
    left: 28px;
  }
  .t-card-featured .t-card-quote {
    font-size: 1.15rem;
    padding-top: 24px;
  }
}

@media (max-width: 520px) {
  .t-container { padding: 0 20px; }
  .featured-quote-section { padding: 88px 0 72px; }
  .t-section { padding: 72px 0 80px; }

  .t-card { padding: 36px 28px 24px; }
  .t-card-featured { padding: 36px 28px 24px; }
  .t-card-glyph { font-size: 9rem; top: -16px; left: 20px; }
  .t-card-featured .t-card-glyph { font-size: 9rem; top: -16px; left: 20px; }
  .t-card-quote { font-size: 1rem; padding-top: 18px; }
  .t-card-featured .t-card-quote { padding-top: 20px; }

  .featured-quote-attr { margin-top: 36px; }
}