/* Agency service pages — bespoke components matching staging2/agency-web:
   rotating-word hero, browser mockup, founder chat cards, problem/solution grid. */

/* the one-line claim under the hero CTAs — 16.5px inline on five pages, which is
   not a step of the scale; --fs-p-small is the compact body role it wanted */
.hero-note { margin-top: 24px; font-size: var(--fs-p-small); line-height: var(--lh-p-small); color: var(--text-dim); }
.hero-note b { color: var(--ink); font-weight: 700; }

/* --- Hero: rotating word box --- */
.hero-rotator { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  min-width: min(46vw, 340px); height: 1.32em; padding: 0 24px; margin-left: 6px;
  background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow); overflow: hidden; }
.hero-rotator .rw { display: inline-block; color: var(--ink); font-weight: 500; white-space: nowrap;
  transition: opacity var(--dur) ease, transform var(--dur) ease; }
.hero-rotator .rw.out { opacity: 0; transform: translateY(-45%); }

/* --- Stats: three, left-aligned (staging variant) --- */
/* flex (not equal thirds) so the wide "1,400+" takes what it needs and the
   narrow %/+ stats give up their slack — big numbers with labels on max two lines */
.stats.stats-3 { display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.stats.stats-3 .stat { justify-content: flex-start; text-align: left; gap: 16px; }
.stats.stats-3 .stat b { line-height: var(--lh-h2-big); font-size: var(--fs-h2-big); }
/* explicit <br> in the markup controls the two lines; keep a roomy cap as a safety net */
.stats.stats-3 .stat span { max-width: 320px; font-size: var(--fs-p-small); line-height: 1.3; }

/* --- What we do: browser mockup visual --- */
.wd-mock { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--card-border);
  box-shadow: var(--shadow-lg); background: #fff; aspect-ratio: 6 / 7; max-height: 660px; }
/* was a pink/lilac/blue wash — three hues from outside the system on a mock browser
   frame. The frame is a neutral stand-in for a website, so it takes neutral surfaces. */
.wd-mock .wd-top { height: 46%; background: linear-gradient(135deg, var(--light-bg) 0%, var(--soft-hover) 100%); }
.wd-mock .wd-url { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px;
  background: var(--muted-text); color: #fff; line-height: var(--lh-h6); font-size: var(--fs-h6); font-weight: 500; }
.wd-mock .wd-url svg { width: 13px; height: 13px; }
.wd-mock .wd-body { padding: clamp(18px, 5vw, 30px) clamp(18px, 6vw, 34px); }
.wd-mock .wd-nav { display: flex; flex-wrap: wrap; gap: 10px clamp(14px, 4vw, 34px); color: var(--mid-neutral); font-size: var(--fs-p); font-weight: 500; }   /* fixed 20px/34px gaps made the mock nav 366px wide on a 375px screen */
.wd-mock .wd-nav span { display: inline-flex; align-items: center; gap: 6px; }
.wd-mock .wd-nav span::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.wd-mock .wd-rows { margin-top: 48px; display: grid; gap: 16px; }
.wd-mock .wd-rows i { display: block; height: 14px; border-radius: var(--r-pill); background: var(--light-bg); }
.wd-mock .wd-rows i:nth-child(1) { width: 70%; }
.wd-mock .wd-rows i:nth-child(2) { width: 90%; }
.wd-mock .wd-rows i:nth-child(3) { width: 55%; }
.wd-mock .wd-chips { margin-top: 32px; display: flex; gap: 16px; }
.wd-mock .wd-chips b { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--light-bg); }

/* larger accordion headings to match staging */
.split .acc-head { font-weight: 500; line-height: var(--lh-h3); font-size: var(--fs-h3); padding: 32px 4px; }

/* --- Founder chat cards --- */
/* --- Problem / Solution two-column --- */
.ps-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px 64px; }
/* The frame heads each column with the h5 role in sentence case (1427:1010), not
   with a small uppercase kicker — the problem quotes underneath are 24/400, so a
   14px uppercase label was reading as a footnote to its own column. */
.ps-head { line-height: var(--lh-h5); font-size: var(--fs-h5); font-weight: var(--fw-h5); color: var(--ink); padding-bottom: 16px; }
.ps-row { display: contents; }
.ps-problem { font-size: var(--fs-h5); font-weight: 400; color: var(--ink); line-height: 1.3;
  padding: 32px 0; border-top: 1px solid var(--card-border); }
.ps-solution { font-size: var(--fs-p); color: var(--text-dim); line-height: 1.7; padding: 32px 0; border-top: 1px solid var(--card-border); }

/* --- "Why trust us?" interactive testimonial switcher --- */
.trust-sec { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 50% -10%, #24306a 0%, #0a1740 42%, #050e2c 100%); }
.trust-sec .sec-head h2 { color: #fff;
  background: linear-gradient(180deg, #ffffff 0%, #b9c3e0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.trust-sec .sec-head p { color: #9aa6c9; }
.trust-card { position: relative; max-width: 1100px; margin: 0 auto; border-radius: var(--r-lg); padding: 64px 48px 48px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10); overflow: hidden; }
.trust-arc { position: absolute; top: 44px; left: 50%; width: 620px; height: 620px; transform: translateX(-50%);
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.12);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 34%); mask-image: linear-gradient(180deg, #000 0%, transparent 34%);
  pointer-events: none; }
.trust-stage { position: relative; z-index: 1; text-align: center; min-height: 220px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity var(--dur) ease; }
.trust-stage.swap { opacity: 0; }
.trust-logo { line-height: var(--lh-h5); font-size: var(--fs-h5); font-weight: 500; color: #fff; margin-bottom: 24px; }
.trust-quote { font-size: var(--fs-h5); line-height: 1.45; font-weight: 400; color: #eef1f8;
  max-width: 720px; margin: 0 auto; }
.trust-pills { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 48px; }
.trust-pill { display: inline-flex; align-items: baseline; gap: 8px; cursor: pointer; font-family: var(--ff);
  padding: 8px 24px; border-radius: var(--r-pill); background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10); transition: border-color var(--dur), background var(--dur), transform var(--dur); }
.trust-pill b { font-size: var(--fs-p-small); font-weight: 600; color: #cdd6ee; transition: color var(--dur); }
.trust-pill span { line-height: var(--lh-h6); font-size: var(--fs-h6); color: #7f8cb2; transition: color var(--dur); }
.trust-pill:hover { border-color: rgba(255,255,255,0.24); }
.trust-pill.is-active { background: rgba(255,189,14,0.10); border-color: var(--amber); }
.trust-pill.is-active b { color: #fff; }
.trust-pill.is-active span { color: #ffbd0e; }

@media (max-width: 940px) {
  .trust-card { padding: 48px 24px 32px; }
  .trust-arc { width: 420px; height: 420px; }
  .founders { grid-template-columns: 1fr; }
  /* two per row, like every other stats band — this stacked them one per row, so a
     three-stat page ran to three rows on a tablet. .stats.stats-3 carries two
     classes and outranks the plain .stats grid rule in tech.css, so it has to say
     it here rather than inherit it. */
  .stats.stats-3 { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 32px 24px; }
  .stats.stats-3 .stat span { max-width: none; }
  .ps-grid { grid-template-columns: 1fr; gap: 0 0; }
  .ps-head { display: none; }
  .ps-problem { border-top: 1px solid var(--card-border); padding-bottom: 8px; }
  .ps-solution { border-top: none; padding-top: 8px; }
  .hero-rotator { min-width: 0; width: auto; margin-left: 0; display: inline-flex; }
}

/* The trust switcher's pills are real buttons. Grow them by their padding rather
   than a min-height: the pill aligns its label and its role on a shared baseline,
   and min-height would let the extra space fall below the type instead of around it. */
@media (hover: none) and (pointer: coarse) {
  .trust-pill { padding-top: var(--s-2); padding-bottom: var(--s-2); }
}