/* TrustUs — /testimonials/ ----------------------------------------------------
   The page opens on the claim and then spends the rest of itself backing it up:
   clients on camera, clients in writing, and the Google page anyone can check.
   No filter row — there is nothing here to filter by. */

/* --- Head ------------------------------------------------------------------
   Centred, and the only place on the site where the heading runs to two lines
   in two weights of the same red: the second line is the one that carries the
   claim, so it is the one that lightens. */
.tst-head {
  /* Its own ground runs to the top of the page and behind the header, so the
     reserve for the header is padding here rather than a gap above it. */
  padding-top: calc(var(--hd-float-h) + clamp(var(--sp-6), 5vw, var(--sp-8)));
  padding-bottom: clamp(var(--sp-7), 6vw, var(--sp-9));
  text-align: center;
  /* التدرّج ينتهي شفافًا لا على لونٍ مسمّى. كان ينتهي على --wash (#fffbfa)
     بينما الأرضية تحته يرسمها ‎.hp‎ أبيضَ صافيًا (#fff) — فرقٌ صغير لكنه
     يُقرأ خطًّا أفقيًّا عبر الصفحة عند حافة الترويسة. الشفافية تجعلها تذوب
     في أرضية الصفحة أيًّا كان لونها، وفي اللغتين معًا. */
  background:
    radial-gradient(130% 95% at 50% 0%,
      rgba(167, 0, 30, .085) 0%,
      rgba(167, 0, 30, .035) 42%,
      rgba(167, 0, 30, 0) 82%),
    linear-gradient(180deg,
      var(--paper) 0%,
      var(--paper) 40%,
      rgba(255, 251, 250, .55) 72%,
      transparent 100%);
}

/* Breadcrumb: start-aligned even though the head is centred, because it is a
   position indicator rather than part of the statement. */
.tst-crumb { margin-bottom: clamp(var(--sp-6), 5vw, var(--sp-8)); text-align: start; }
.tst-crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); font-size: var(--fs-caption); }
.tst-crumb li { display: flex; align-items: center; gap: var(--sp-3); color: var(--muted); }
/* The separator points the way the page reads. */
/* The character itself, not an escape: written as \\203A it reached the
   stylesheet as an escaped backslash and printed "203A" on the page. */
.tst-crumb li + li::before { content: "›"; color: var(--muted); opacity: .6; }
.tst-crumb a { color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.tst-crumb a:hover { color: var(--red); border-bottom-color: currentColor; }
.tst-crumb [aria-current] { color: var(--ink); font-weight: 700; }

.tst-eyebrow {
  display: block;
  color: var(--red); font-weight: 800; font-size: var(--fs-caption);
  margin-bottom: var(--sp-4);
}
.hp .tst-title {
  margin: 0;
  font-size: clamp(34px, 5.4vw, 72px);
  line-height: 1.12;
  font-weight: 800;
  color: var(--red);
}
.tst-title span { display: block; }
/* The lighter of the two, so the pair reads as one heading rather than as two
   headings that happen to be stacked. */
.tst-title__b { color: #cf2540; }

.tst-stat {
  margin: clamp(var(--sp-6), 4vw, var(--sp-7)) 0 0;
  font-weight: 800;
  line-height: 1.5;
  font-size: clamp(18px, 1.9vw, 25px);
}
.tst-stat__n { display: block; color: #cf2540; }
.tst-stat__l { display: block; color: var(--red); }

.tst-lede {
  /* Wider than the 62ch a single sentence wants: this is a paragraph, and at
     that measure it was breaking into eight short lines under a heading twice
     its width. */
  max-width: 82ch;
  margin: var(--sp-5) auto 0;
  color: var(--muted);
  font-size: var(--fs-lead);
}

/* --- Reels -----------------------------------------------------------------
   Instagram's embed is a fixed portrait frame; the card gives it a ratio and
   the iframe fills it, so a row stays a row whatever each clip is. */
.tst-reels__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap, clamp(22px, 3vw, 30px));
}
/* Instagram's embed ships its own furniture: a profile bar on top, and under
   the clip a "View more on Instagram" line with like, comment and share icons.
   Six of those stacked read as six screenshots of Instagram rather than as six
   clients talking. The card clips them — the iframe is taller than the card and
   pulled up by the height of that top bar, so what shows is the clip. The
   numbers are Instagram's, so if they change theirs these two change here. */
.tst-reel {
  position: relative;
  /* Measured, not guessed: Instagram sizes the clip from the embed's width, so
     the card has to be exactly as tall as the clip is at that width or the
     furniture under it comes back into view. 344 wide gave 423 of clip. */
  aspect-ratio: 344 / 423;
  overflow: hidden;
  background: var(--dark);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
}
.tst-reel iframe {
  position: absolute;
  inset-inline: 0;
  top: -54px;                        /* the profile bar */
  width: 100%;
  height: calc(100% + 54px + 250px); /* + the actions, likes and comment box */
  border: 0;
}
.tst-reels__act { display: flex; justify-content: center; margin-top: clamp(var(--sp-6), 4vw, var(--sp-7)); }
/* .hp-btn sets display: inline-flex, which outranks the browser's own rule for
   the hidden attribute — so the button stayed on screen after the last row was
   revealed. It has happened once before, on the reviews. */
.tst-reels__act .hp-btn[hidden] { display: none; }

/* --- Video and its written version ----------------------------------------
   The player beside the words rather than under them: the quotes are what the
   clip says, and a reader who will not press play still gets them. */
.tst-videos__grid { display: grid; gap: clamp(var(--sp-6), 5vw, var(--sp-8)); }
.tst-video {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-7));
  align-items: start;
}
.tst-video__frame {
  position: relative; aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: var(--r-surface);
  background: var(--dark);
}
.tst-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Who it is, then what they said in a line, then what they said in full: the
   reader gets the point before deciding whether to read the paragraph or press
   play. The name is the loud one — the sentence under it is the same red,
   lighter, so the two read as one statement in two sizes. */
.tst-video__eyebrow {
  display: block;
  color: var(--red); font-weight: 800; font-size: var(--fs-caption);
  margin-bottom: var(--sp-4);
}
.tst-video__copy h2 {
  color: var(--red);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.25;
  margin: 0 0 var(--sp-4);
}
.tst-video__lead {
  color: #cf2540;
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 clamp(var(--sp-6), 3vw, var(--sp-7));
}
/* No rule and no quotation marks: the name above already says these are
   somebody's words, and a mark on every paragraph was a lot of punctuation
   for one person talking. */
.tst-video blockquote { margin: 0 0 var(--sp-5); }
.tst-video blockquote:last-child { margin-bottom: 0; }
.tst-video blockquote p { margin: 0; color: var(--muted); line-height: 1.85; }

/* --- Google reviews --------------------------------------------------------
   A card that states the score once, and the reviews as a list beside it. */
.tst-rv {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  align-items: start;
}
.tst-rv__card {
  padding: clamp(var(--sp-6), 3vw, var(--sp-7)) var(--sp-5);
  text-align: center;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  /* Follows the list rather than scrolling away from it. */
  position: sticky;
  top: calc(var(--hd-float-h) + var(--sp-5));
}
.tst-rv__score {
  margin: 0;
  color: var(--red);
  font-size: clamp(46px, 5vw, 66px); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tst-rv__stars { margin: var(--sp-4) 0 0; color: #e8b04b; letter-spacing: 2px; }
.tst-rv__by { margin: var(--sp-5) 0 0; color: var(--muted); font-size: var(--fs-small); line-height: 1.7; }
.tst-rv__by strong { color: var(--ink); }
.tst-rv__src { margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--fs-caption); }
/* Both actions in the card, which follows the list down the page — under the
   list they were only reachable after scrolling past every review. */
.tst-rv__acts { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.tst-rv__acts .hp-btn { width: 100%; }

.tst-rv__main h2.tst-rv__count {
  margin: 0 0 var(--sp-6);
  font-size: clamp(22px, 2.2vw, 30px);
}
.tst-rv__list { list-style: none; margin: 0; padding: 0; }
/* A rule between them rather than a box around each: at seven and rising, a
   grid of cards is a wall and a list is something you can read down. */
.tst-rv__item {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: clamp(var(--sp-5), 3vw, var(--sp-6));
  padding-block: clamp(var(--sp-5), 3vw, var(--sp-6));
  border-top: 1px solid var(--line);
}
.tst-rv__item:last-child { border-bottom: 1px solid var(--line); }
.tst-rv__who { display: flex; flex-direction: column; gap: var(--sp-2); }
.tst-rv__istars { color: #e8b04b; letter-spacing: 1px; font-size: var(--fs-caption); }
.tst-rv__who b { font-size: var(--fs-body); }
.tst-rv__who a { color: var(--muted); font-size: var(--fs-caption); width: max-content; border-bottom: 1px solid var(--line); }
.tst-rv__who a:hover { color: var(--red); border-bottom-color: currentColor; }
.tst-rv__item blockquote { margin: 0; }
.tst-rv__item blockquote p { margin: 0; color: var(--muted); line-height: 1.8; }

/* --- Services, named and nothing more --------------------------------------
   Two columns of names on a wide screen. The homepage gives each a paragraph
   and an icon; twelve of those here would be another screen and a half. */
.tst-svc__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(var(--sp-6), 4vw, var(--sp-7));
}
.tst-svc__list li { border-top: 1px solid var(--line); }
.tst-svc__list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-5);
  color: var(--ink); font-weight: 700; font-size: var(--fs-body);
  transition: color .18s ease;
}
.tst-svc__list svg {
  flex: none; width: 17px; height: 17px; color: var(--red);
  transition: transform .18s ease;
}
.tst-svc__list a:hover { color: var(--red); }
.tst-svc__list a:hover svg { transform: translateX(-3px); }
@media (prefers-reduced-motion: reduce) { .tst-svc__list svg { transition: none; } }
.tst-svc__act { display: flex; justify-content: center; margin-top: clamp(var(--sp-6), 4vw, var(--sp-7)); }
/* The last band on the page, and the footer under it is white — so it walks to
   white instead of ending on a line across the page. */
.tst-svc {
  background: linear-gradient(180deg, var(--wash) 0%, var(--wash) 52%, var(--paper) 100%);
}

.tst-rv__src { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); }
.tst-rv__g { display: inline-flex; line-height: 0; }
.tst-rv__on { display: inline-flex; align-items: center; gap: 6px; }
.tst-rv__on svg { width: 14px; height: 14px; }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .tst-svc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .tst-reels__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tst-video { grid-template-columns: minmax(0, 1fr); }
  /* The card stops leading and becomes a header over the list. */
  .tst-rv { grid-template-columns: minmax(0, 1fr); }
  .tst-rv__card { position: static; }
  .tst-rv__item { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
}
@media (max-width: 560px) {
  /* Two to a row, not one. A single column made each clip the width of the
     screen and turned six of them into six screens of scrolling. */
  .tst-reels__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .tst-crumb { margin-bottom: var(--sp-5); }
  .tst-svc__list { grid-template-columns: minmax(0, 1fr); }

  /* The head was set for a measure twice this wide. */
  .hp .tst-title { font-size: clamp(28px, 8.6vw, 38px); }
  .tst-stat { margin-top: var(--sp-5); font-size: 17px; }
  .tst-lede { font-size: 15.5px; line-height: 1.85; }
  .tst-head { padding-bottom: var(--sp-7); }

  .tst-video__lead { font-size: 18px; }
  .tst-videos__grid { gap: var(--sp-7); }

  .tst-rv__card { padding: var(--sp-5) var(--sp-4); }
  .tst-rv__score { font-size: 40px; }
  .tst-rv__item { padding-block: var(--sp-5); }
  .tst-svc__list a { padding-block: var(--sp-4); }
}