/* Homepage-only additions: Process, Tech stack, Client logos.
   Local-dev only for now, not yet approved for production. */

/* =========================================================
   LongRun Process Section
   ========================================================= */

.lr-process {
  --lr-ink: #0E0E10;
  --lr-ink-55: rgba(14, 14, 16, 0.55);
  --lr-ink-40: rgba(14, 14, 16, 0.40);
  --lr-hairline: rgba(0, 0, 0, 0.08);
  --lr-hairline-strong: rgba(0, 0, 0, 0.14);
  --lr-orange: #FF6E30;
  --lr-orange-deep: #FF3D14;
  --lr-grad-orange: linear-gradient(135deg, #FF6E30 0%, #FF2E1F 100%);
  --lr-dot: rgba(0, 0, 0, 0.10);
  --lr-dot-size: 18px;
  --lr-meta-col: 320px;
  --lr-gutter: 56px;
  --lr-tile-size: 30px;
  --lr-card-radius: 16px;
  --lr-pill-radius: 999px;
  --lr-row-gap: 96px;

  background: #FFFFFF;
  color: var(--lr-ink);
  padding: 100px 0 140px;
}

.lr-process-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}

.lr-section-desc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-default);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lr-ink);
  margin: 0 0 56px;
}
.lr-section-desc::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lr-orange);
}

.lr-diagram {
  position: relative;
  padding: 60px 36px;
  border-radius: 28px;
  background-color: #fff;
  background-image: radial-gradient(circle, var(--lr-dot) 1px, transparent 1px);
  background-size: var(--lr-dot-size) var(--lr-dot-size);
  border: 1px solid var(--lr-hairline);
}

.lr-stage {
  display: grid;
  grid-template-columns: var(--lr-meta-col) var(--lr-gutter) 1fr;
  align-items: center;
  position: relative;
  padding: 48px 0;
}
.lr-stage:first-of-type { padding-top: 0; }

/* Single continuous spine: each stage's connector spans the full stage height,
   so consecutive stages butt up to form one unbroken vertical line. The meta
   dot sits on the line at the row's vertical centerline. */
.lr-connector {
  position: absolute;
  top: 0;
  left: calc(var(--lr-meta-col) + (var(--lr-gutter) / 2) - 28px);
  width: 56px;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.lr-connector path {
  fill: none;
  stroke: var(--lr-orange);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.lr-connector .lr-node { fill: var(--lr-orange); }
.lr-connector.lr-funnel {
  left: calc(var(--lr-meta-col) + (var(--lr-gutter) / 2) - 100px);
  width: 200px;
}

/* Terminal tail: spine enters Handoff from the top and ends at the dot. */
.lr-connector-tail { height: 50%; }

.lr-meta { position: relative; z-index: 1; }
.lr-steps { position: relative; z-index: 1; }
.lr-meta-eyebrow {
  font-family: var(--font-default);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lr-orange);
  margin-bottom: 10px;
}
.lr-meta .lr-num {
  font-family: var(--font-default);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lr-orange);
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lr-meta .lr-num::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lr-orange);
}
.lr-meta h3 {
  margin: 0 0 14px;
  font-family: var(--font-default);
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--lr-ink);
}
.lr-meta p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--lr-ink-55);
  max-width: 280px;
}
.lr-meta::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(var(--lr-meta-col) + (var(--lr-gutter) / 2) - 5px);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--lr-orange);
  box-shadow: 0 0 0 5px rgba(255, 110, 48, 0.12);
  z-index: 2;
}

.lr-steps { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; }
.lr-step-wrap { display: flex; align-items: stretch; }

.lr-card {
  background: #fff;
  border: 1px solid var(--lr-hairline);
  border-radius: var(--lr-card-radius);
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 168px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.lr-card:hover {
  border-color: var(--lr-hairline-strong);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.05);
}
.lr-step-label {
  font-family: var(--font-default);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lr-ink-55);
}
.lr-step-name {
  font-family: var(--font-default);
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: var(--lr-ink);
}

.lr-step-link {
  width: 32px;
  flex: 0 0 32px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lr-step-link svg { display: block; overflow: visible; }
.lr-step-link path {
  fill: none;
  stroke: var(--lr-orange);
  stroke-width: 1.4;
  stroke-dasharray: 3 4;
  stroke-linecap: round;
}

.lr-tile-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.lr-tile {
  width: var(--lr-tile-size);
  height: var(--lr-tile-size);
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--lr-hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70% 70%;
}
.lr-tile.lr-plus {
  width: auto;
  padding: 0 9px;
  font-family: var(--font-default);
  font-size: 11px;
  font-weight: 600;
  color: var(--lr-ink-55);
  letter-spacing: 0;
  background-image: none;
}
.lr-tile.lr-plus::before { content: "+5 vendors"; }

/* Tile SVG mapping */
.lr-tile[data-tool="fireflies"]   { background-image: url('img/tools/fireflies.svg'); }
.lr-tile[data-tool="clay"]        { background-image: url('img/tools/clay.svg'); }
.lr-tile[data-tool="notion"]      { background-image: url('img/tools/notion.svg'); }
.lr-tile[data-tool="namecheap"]   { background-image: url('img/tools/namecheap.svg'); }
.lr-tile[data-tool="longrun"]     { background-image: url('img/tools/longrun.svg'); background-color: #FF6E30; background-size: 60% 60%; border-color: transparent; }
.lr-tile[data-tool="google"]      { background-image: url('img/tools/google.svg'); }
.lr-tile[data-tool="microsoft"]   { background-image: url('img/tools/microsoft.svg'); }
.lr-tile[data-tool="bison"]       { background-image: url('img/tools/email-bison.svg'); }
.lr-tile[data-tool="emailguard"]  { background-image: url('img/tools/emailguard.svg'); }
.lr-tile[data-tool="linkedin"]    { background-image: url('img/tools/linkedin.svg'); }
.lr-tile[data-tool="apollo"]      { background-image: url('img/tools/apollo.svg'); }
.lr-tile[data-tool="debounce"]    { background-image: url('img/tools/debounce.svg'); }
.lr-tile[data-tool="claude"]      { background-image: url('img/tools/anthropic.svg'); }
.lr-tile[data-tool="openai"]      { background-image: url('img/tools/openai.svg'); }
.lr-tile[data-tool="gemini"]      { background-image: url('img/tools/googlegemini.svg'); }
.lr-tile[data-tool="n8n"]         { background-image: url('img/tools/n8n.svg'); }
.lr-tile[data-tool="slack"]       { background-image: url('img/tools/slack.svg'); }
.lr-tile[data-tool="hubspot"]     { background-image: url('img/tools/hubspot.svg'); }
.lr-tile[data-tool="pipedrive"]   { background-image: url('img/tools/pipedrive.svg'); }
.lr-tile[data-tool="attio"]       { background-image: url('img/tools/attio.svg'); }
.lr-tile[data-tool="supabase"]    { background-image: url('img/tools/supabase.svg'); }

/* Storage row, dark data layer */
.lr-storage {
  position: relative;
  margin-bottom: var(--lr-row-gap);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,110,48,0.18) 0%, transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(62,207,142,0.10) 0%, transparent 50%),
    linear-gradient(180deg, #0E0E10 0%, #0A0A0C 100%);
  color: #fff;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.lr-storage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
}
.lr-storage-inner {
  position: relative;
  display: grid;
  grid-template-columns: var(--lr-meta-col) var(--lr-gutter) 1fr;
  padding: 32px 32px 36px;
  align-items: center;
}
.lr-storage .lr-meta { padding-top: 0; }
.lr-storage .lr-meta .lr-num { color: var(--lr-orange); }
.lr-storage .lr-meta .lr-num::before { background: var(--lr-orange); }
.lr-storage .lr-meta h3 { color: #fff; font-size: 36px; }
.lr-storage .lr-meta p { color: rgba(255,255,255,0.6); }
.lr-storage .lr-meta::after {
  background: var(--lr-orange);
  box-shadow: 0 0 0 5px rgba(255, 110, 48, 0.18);
}
.lr-storage-card {
  grid-column: 3 / 4;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  backdrop-filter: blur(4px);
}
.lr-storage-card .lr-tile {
  width: 40px; height: 40px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.18);
  background-color: #fff;
}
.lr-storage-copy { display: flex; flex-direction: column; gap: 4px; }
.lr-storage-copy strong {
  font-family: var(--font-default);
  font-weight: 500;
  letter-spacing: -0.012em;
  font-size: 18px;
  color: #fff;
}
.lr-storage-copy span {
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  line-height: 1.45;
  max-width: 720px;
}

/* Terminal */
.lr-terminal {
  display: grid;
  grid-template-columns: var(--lr-meta-col) var(--lr-gutter) 1fr;
  align-items: center;
  position: relative;
  padding: 48px 0 8px;
}
.lr-terminal-cards {
  grid-column: 3 / 4;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.lr-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-radius: var(--lr-pill-radius);
  font-family: var(--font-default);
  font-weight: 500;
  letter-spacing: -0.012em;
}
.lr-pill-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lr-pill-label { font-size: 17px; line-height: 1; }
.lr-pill-meeting {
  background: var(--lr-grad-orange);
  color: #fff;
  box-shadow: 0 6px 20px rgba(255, 110, 48, 0.28);
}
.lr-pill-meeting .lr-pill-icon { background: rgba(255,255,255,0.20); color: #fff; }
.lr-pill-deal { background: #0E0E10; color: #fff; }
.lr-pill-deal .lr-pill-icon { background: #fff; color: #0E0E10; }
.lr-pill-team {
  background: #fff;
  border: 1px solid var(--lr-hairline);
  color: var(--lr-ink);
}
.lr-pill-team .lr-pill-icon { background: #F4F4F5; color: var(--lr-ink); }

.lr-arrow {
  flex: 0 0 auto;
  color: var(--lr-orange);
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.lr-arrow svg { display: block; overflow: visible; }
.lr-arrow path {
  fill: none;
  stroke: var(--lr-orange);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lr-terminal .lr-meta { padding-top: 0; }
.lr-terminal .lr-meta .lr-num { color: var(--lr-ink-55); }
.lr-terminal .lr-meta .lr-num::before { background: var(--lr-ink-40); }
.lr-terminal .lr-meta h3 { font-size: 36px; }

/* Goal node: spine terminates here, so the dot is larger with a stronger halo
   to read as the destination of the entire pipeline. */
.lr-terminal .lr-meta::after {
  display: block;
  width: 14px; height: 14px;
  left: calc(var(--lr-meta-col) + (var(--lr-gutter) / 2) - 7px);
  background: var(--lr-orange);
  box-shadow:
    0 0 0 6px rgba(255, 110, 48, 0.18),
    0 0 0 14px rgba(255, 110, 48, 0.08);
}

.lr-terminal-feed {
  grid-column: 2 / 4;
  display: block;
  width: 100%;
  height: 56px;
  margin: -28px 0 4px;
  pointer-events: none;
}
.lr-terminal-feed path {
  fill: none;
  stroke: var(--lr-orange);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
  stroke-linecap: round;
}

/* Responsive */
@media (max-width: 1100px) {
  .lr-stage,
  .lr-terminal,
  .lr-storage-inner { grid-template-columns: 1fr; gap: 18px; align-items: stretch; }
  .lr-stage { padding: 28px 0 28px 28px; }
  .lr-stage:first-of-type { padding-top: 0; }
  .lr-terminal { padding: 28px 0 8px 28px; }
  .lr-meta { margin-bottom: 8px; }
  .lr-meta::after { left: -28px; top: 14px; transform: none; }
  .lr-terminal .lr-meta::after { left: -30px; top: 14px; transform: none; }
  .lr-connector { left: 0; width: 56px; height: 100%; }
  .lr-connector-tail { height: 50%; }
  .lr-connector.lr-funnel { left: 0; width: 56px; }
  .lr-storage-inner { padding: 24px; }
  .lr-storage-card { grid-column: 1; }
  .lr-terminal-cards { grid-column: 1; }
  .lr-terminal-feed { display: none; }
}
@media (max-width: 967px) {
  .lr-process-wrap { padding: 0 40px; }
  .lr-meta h3 { font-size: 44px; }
}
@media (max-width: 780px) {
  .lr-step-wrap { flex-direction: column; align-items: stretch; }
  .lr-step-link { width: 100%; height: 28px; flex: 0 0 28px; transform: rotate(90deg); }
  .lr-step-link svg { width: 28px; }
}
@media (max-width: 650px) {
  .lr-process { padding: 60px 0 80px; }
  .lr-process-wrap { padding: 0 20px; }
  .lr-diagram { padding: 40px 20px; border-radius: 20px; }
  .lr-meta h3 { font-size: 38px; }
  .lr-terminal-cards { flex-direction: column; align-items: flex-start; }
  .lr-arrow { transform: rotate(90deg); }
}

/* Reveal animation states */
.lr-stage .lr-meta,
.lr-storage .lr-meta,
.lr-terminal .lr-meta {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity .5s ease, transform .5s ease;
}
.lr-stage .lr-card,
.lr-storage-card,
.lr-pill {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
}
.lr-step-link,
.lr-connector,
.lr-terminal-feed {
  opacity: 0;
  transition: opacity .5s ease .2s;
}
.lr-in-view .lr-step-link,
.lr-in-view .lr-connector,
.lr-in-view .lr-terminal-feed { opacity: 1; }

/* Section connector (vertical): slow continuous downward flow.
   Dashes drift toward the next stage so the line reads as
   "data settling into the next layer". */
@keyframes lr-section-flow {
  to { stroke-dashoffset: -7; }
}
.lr-connector path,
.lr-terminal-feed path {
  animation: lr-section-flow 2.4s linear infinite;
}

/* Step connector (horizontal): faster continuous rightward flow.
   Distinct speed and direction from section connectors so they read
   as "data running between steps in real time". */
@keyframes lr-step-flow {
  to { stroke-dashoffset: -7; }
}
.lr-step-link path {
  animation: lr-step-flow 1.2s linear infinite;
}

.lr-in-view .lr-meta { opacity: 1; transform: none; }
.lr-in-view .lr-card,
.lr-in-view .lr-storage-card,
.lr-in-view .lr-pill { opacity: 1; transform: none; }
.lr-in-view .lr-card { transition-delay: calc(var(--i, 0) * 80ms); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lr-stage .lr-meta,
  .lr-storage .lr-meta,
  .lr-terminal .lr-meta,
  .lr-stage .lr-card,
  .lr-storage-card,
  .lr-pill,
  .lr-step-link,
  .lr-connector,
  .lr-terminal-feed {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .lr-step-link path,
  .lr-connector path,
  .lr-terminal-feed path { animation: none !important; }
}



/* ========== TECH STACK ==========
   Temporarily hidden, pending rework. */
.techstack-section { display: none !important; }

.techstack-section-keep-styles {
    background: var(--black);
    color: var(--white);
    padding: 7rem 8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.techstack-head {
    text-align: center;
    max-width: 80rem;
    margin: 0 auto 3.2rem;
}

.techstack-head .section-desc {
    color: var(--orange);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 1.2rem;
    font-weight: 500;
}

.techstack-title {
    font-size: 3rem;
    line-height: 115%;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0;
    font-weight: 500;
}

.techstack-flat {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    max-width: 110rem;
    margin: 0 auto;
}

.techstack-item {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.4rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10rem;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    transition: all 0.2s ease;
}

.techstack-item:hover {
    background: rgba(255, 110, 48, 0.12);
    border-color: var(--orange);
    color: var(--orange);
}

@media screen and (max-width: 650px) {
    .techstack-section { padding: 5rem 2.4rem; }
    .techstack-title { font-size: 2rem; }
    .techstack-item { font-size: 1.2rem; padding: 0.6rem 1.1rem; }
}


/* ========== CONTACT MARQUEE ==========
   The bulk text inherits color: white from <main>, which is invisible on
   the white .contact background. Set an explicit ink color so the
   "Feel free to contact" marquee is visible; keep the <span>free</span>
   grey accent intact. */
.contact .contact-line { color: var(--black); }
.contact .contact-line span { color: var(--grey); }

/* ========== TESTIMONIALS WALL ========== */
.testimonials-section {
    background: var(--black);
    color: var(--white);
    padding: 10rem 0 12rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Head and grid share the same wrap width / padding as the Process
   section above (max-width 1440px, 80px internal padding), so the
   "Proof" eyebrow lines up with the Workflow / Process / About
   eyebrows on the same vertical. */
.testimonials-head,
.testimonials-grid {
    max-width: 144rem;
    margin: 0 auto;
    padding: 0 8rem;
    box-sizing: border-box;
}

/* Eyebrow stays left (lined up with Workflow / Process / About);
   the title sits centered beneath it. */
.testimonials-head {
    text-align: left;
    margin-bottom: 6rem;
}

.testimonials-head .section-desc {
    color: var(--orange);
    margin-bottom: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 1.2rem;
    font-weight: 500;
}

.testimonials-head .testimonials-title {
    text-align: center;
}

.testimonials-title {
    font-size: 4rem;
    line-height: 115%;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0;
    text-wrap: balance;
    font-weight: 500;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
}


.testimonial-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.6rem;
    padding: 3.6rem 3.2rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 2.8rem;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.testimonial-card:hover {
    border-color: rgba(255, 110, 48, 0.4);
    background: rgba(255, 255, 255, 0.05);
}

.testimonial-quote {
    font-size: 1.7rem;
    line-height: 155%;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    font-style: normal;
    font-weight: 400;
    text-wrap: pretty;
}

.testimonial-quote::before {
    content: "\201C";
    display: block;
    font-size: 4rem;
    line-height: 0.6;
    color: var(--orange);
    margin-bottom: 1.2rem;
}

.testimonial-author {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: auto;
}

.testimonial-avatar {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
}

.testimonial-meta {
    min-width: 0;
}

.testimonial-name {
    font-size: 1.7rem;
    color: var(--white);
    font-weight: 500;
    line-height: 125%;
    margin-bottom: 0.4rem;
}

.testimonial-title {
    font-size: 1.45rem;
    color: rgba(255, 255, 255, 0.62);
    line-height: 135%;
}

/* Logos are pre-processed white-on-transparent PNGs derived from each company's
   brand mark. Uniform monochrome treatment keeps brand variety from competing
   with the testimonial copy. Hover restores full opacity. */
.testimonial-logo {
    height: 4.4rem;
    width: auto;
    max-width: 16rem;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.25s ease;
}

.testimonial-card:hover .testimonial-logo {
    opacity: 1;
}

@media screen and (max-width: 1100px) {
    .testimonials-section { padding: 8rem 0 10rem; }
    .testimonials-head,
    .testimonials-grid { padding: 0 4rem; }
    .testimonials-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media screen and (max-width: 650px) {
    .testimonials-section { padding: 6rem 0 8rem; }
    .testimonials-head,
    .testimonials-grid { padding: 0 2rem; }
    .testimonial-card { padding: 2.8rem 2.4rem 2.4rem; }
    .testimonial-quote { font-size: 1.5rem; }
    .testimonial-avatar { width: 3.6rem; height: 3.6rem; }
    .testimonial-logo { height: 3.2rem; max-width: 12rem; }
}