/* ================================================================
   QUALZY: audience pages
   Shared by for/agencies.html, for/in-house-teams.html and
   for/public-sector-and-academic.html. Uses the variables in main.css.
   ================================================================ */

/* HERO
   ---------------------------------------------------------------- */
.fa-hero {
  position: relative;
  overflow: hidden;
  background: var(--wh);
  padding: 64px 80px 0; /* 64px = fixed nav */
}
.fa-hero::before {
  content: '';
  position: absolute;
  top: -180px; right: -180px;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: var(--op);
  box-shadow: inset 0 0 0 70px var(--om);
  z-index: 0;
}
.fa-hero-inn {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 0 80px;
}
.fa-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 80px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--dk);
  max-width: 900px;
  margin: 22px 0 26px;
}
.fa-hero h1 em { font-style: normal; color: var(--o); }
.fa-hero-sub {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--mid);
  max-width: 760px;
}
.fa-hero-sub + .fa-hero-sub { margin-top: 14px; }

/* Customer names under the hero copy */
.fa-names {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  max-width: 900px;
}
.fa-names-lbl {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mu);
  margin-bottom: 10px;
}
.fa-names ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0;
  padding: 0;
}
.fa-names a {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--dk);
  text-decoration: none;
  letter-spacing: -.01em;
}
.fa-names a:hover { color: var(--o2); text-decoration: underline; text-underline-offset: 4px; }

.fa-hero-inn > * { animation: faRise .8s cubic-bezier(.22, 1, .36, 1) both; }
.fa-hero-inn > *:nth-child(2) { animation-delay: .05s; }
.fa-hero-inn > *:nth-child(3) { animation-delay: .1s; }
.fa-hero-inn > *:nth-child(4) { animation-delay: .15s; }
.fa-hero-inn > *:nth-child(n+5) { animation-delay: .2s; }
@keyframes faRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* SHARED SECTION BITS
   ---------------------------------------------------------------- */
.fa-sec-hd { max-width: 860px; margin: 0 0 56px; }
.fa-sec-hd--c { text-align: center; margin-left: auto; margin-right: auto; }
.fa-sec-hd .sbod { margin-left: 0; }
.fa-sec-hd--c .sbod { margin-left: auto; }

.fa-body p,
.fa-body li { font-size: 16px; line-height: 1.7; color: var(--mid); }
.fa-body p + p { margin-top: 14px; }
.fa-body strong { color: var(--dk); }

.fa-white { background: #fff; }
.fa-tint  { background: var(--op); }
.fa-plain { background: var(--wh); }

.fa-link,
.fa-body a,
.fa-faq-list a,
.fa-note a {
  color: var(--o2);
  font-weight: 600;
  text-underline-offset: 3px;
}
.fa-link { text-decoration: none; display: inline-block; margin-top: 18px; }
.fa-link:hover { text-decoration: underline; }
.fa-body a:hover,
.fa-faq-list a:hover,
.fa-note a:hover { color: var(--dk); }

.fa-note { font-size: 15px; color: var(--mid); margin-top: 32px; }
.fa-note--c { text-align: center; }

.fa-ticks { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fa-ticks li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.6; color: var(--mid); }
.fa-ticks li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--o); font-weight: 700; }
.fa-ticks strong { color: var(--dk); }

/* DARK BAND: numbered points
   ---------------------------------------------------------------- */
.fa-dark { background: var(--dk); }
.fa-dark-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 96px;
  align-items: start;
}
.fa-dark .slbl { color: var(--ol); }
.fa-dark .stit { color: #fff; }
.fa-dark .sbod { color: rgba(255,255,255,.62); margin-left: 0; font-size: 18px; }
.fa-pts { list-style: none; margin: 0; padding: 0; }
.fa-pt {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.fa-pt:first-child { padding-top: 0; }
.fa-pt:last-child { border-bottom: 0; }
.fa-pt-n {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--o);
  letter-spacing: -.035em;
}
.fa-pt h3 { color: #fff; font-size: 17px; font-weight: 700; line-height: 1.35; margin-bottom: 6px; }
.fa-pt p { color: rgba(255,255,255,.66); font-size: 15px; line-height: 1.65; }
.fa-pt a { color: #fff; text-underline-offset: 3px; }

/* PRODUCT ROWS: image + copy, alternating
   ---------------------------------------------------------------- */
.fa-rows { display: flex; flex-direction: column; gap: 88px; }
.fa-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.fa-row--flip .fa-row-media { order: 2; }
.fa-row-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--o2);
  background: var(--op);
  border: 1px solid rgba(232, 97, 44, .2);
  border-radius: 100px;
  padding: 5px 12px;
  margin-bottom: 16px;
}
.fa-row h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--dk);
  margin-bottom: 14px;
}
.fa-row-media { margin: 0; }
.fa-row-media img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .12);
}
/* Transparent product renders sit straight on the page, with no frame or shadow box. */
.fa-row-media--bare img { border-radius: 0; box-shadow: none; }
.fa-row-media figcaption {
  font-size: 13px;
  color: var(--mu);
  margin-top: 12px;
  text-align: center;
}

/* PULL QUOTE
   ---------------------------------------------------------------- */
.fa-q {
  margin: 0;
  padding: 0 0 0 22px;
  border-left: 4px solid var(--o);
}
.fa-q p {
  font-family: var(--font-quote);
  font-size: 20px;
  line-height: 1.55;
  color: var(--dk);
  margin-bottom: 14px;
}
.fa-q cite {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mu);
}
.fa-q--lg p { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.45; font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; }
.fa-q--card {
  background: #fff;
  border: 1px solid rgba(232, 97, 44, .16);
  border-left: 4px solid var(--o);
  border-radius: 0 14px 14px 0;
  padding: 26px 28px;
}
.fa-q-face {
  display: flex;
  align-items: center;
  gap: 14px;
}
.fa-q-face img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* SPLIT: copy beside quote or figure
   ---------------------------------------------------------------- */
.fa-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
}
.fa-split--top { align-items: start; }
.fa-split .sbod { margin-left: 0; font-size: 19px; }
.fa-stack { display: flex; flex-direction: column; gap: 24px; }

/* STAT TRIO
   ---------------------------------------------------------------- */
.fa-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  margin: 28px 0 0;
}
.fa-stat { background: #fff; padding: 22px 20px; }
.fa-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--o);
  margin-bottom: 8px;
}
.fa-stat span { font-size: 13.5px; line-height: 1.5; color: var(--mid); display: block; }

/* CARD GRIDS: pricing, capabilities, case studies
   ---------------------------------------------------------------- */
.fa-grid { display: grid; gap: 22px; }
.fa-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fa-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fa-grid--4 { grid-template-columns: repeat(4, 1fr); }

.fa-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
}
.fa-tint .fa-card { border-color: rgba(232, 97, 44, .16); }
.fa-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--dk);
  letter-spacing: -.02em;
  line-height: 1.25;
  margin-bottom: 10px;
}
.fa-card p { font-size: 14.5px; line-height: 1.65; color: var(--mid); }
.fa-card p + p { margin-top: 10px; }
.fa-card-k {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--o2);
  margin-bottom: 10px;
}
.fa-card .fa-link { margin-top: auto; padding-top: 16px; font-size: 14px; }
.fa-card a.fa-link:hover { text-decoration: underline; }

/* Case-study cards */
.fa-case-co {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--dk);
  letter-spacing: -.02em;
}
.fa-case-what { font-size: 13px; color: var(--mu); margin: 2px 0 14px; }
.fa-case .fa-q { margin-top: 18px; padding-left: 14px; border-left-width: 3px; }
.fa-case .fa-q p { font-size: 15px; margin-bottom: 10px; }
.fa-case .fa-q cite { font-size: 11px; }

/* INDEPENDENTS PANEL
   ---------------------------------------------------------------- */
.fa-indie {
  background: var(--d2);
  border-radius: 22px;
  padding: 64px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.fa-indie .slbl { color: var(--ol); }
.fa-indie .stit { color: #fff; }
.fa-indie .fa-body p,
.fa-indie .fa-ticks li { color: rgba(255,255,255,.7); }
.fa-indie .fa-ticks strong,
.fa-indie .fa-body strong { color: #fff; }
.fa-indie .fa-ticks li::before { color: var(--ol); }
.fa-indie .fa-body a,
.fa-indie .fa-link { color: var(--ol); }
.fa-indie .fa-q { border-left-color: var(--ol); }
.fa-indie .fa-q p { color: #fff; }
.fa-indie .fa-q cite { color: rgba(255,255,255,.55); }
.fa-indie .fa-stack { gap: 32px; }

/* FAQ
   ---------------------------------------------------------------- */
.fa-faq-inn { max-width: 860px; }
.fa-faq-list { border-top: 1px solid var(--rule); }
.fa-faq-list details { border-bottom: 1px solid var(--rule); }
.fa-faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 44px 20px 0;
  position: relative;
}
.fa-faq-list summary::-webkit-details-marker { display: none; }
.fa-faq-list summary::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 300;
  color: var(--o);
  transition: transform var(--t-base);
}
.fa-faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.fa-faq-list summary:focus-visible { outline: 2px solid var(--o); outline-offset: 2px; border-radius: 4px; }
.fa-faq-list summary h3 {
  display: inline;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--dk);
  letter-spacing: -.01em;
  line-height: 1.4;
}
.fa-faq-list details p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--mid);
  padding: 0 44px 22px 0;
}

/* RELATED AUDIENCE LINKS
   ---------------------------------------------------------------- */
.fa-also {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.fa-also a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 24px 48px;
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  background: var(--wh);
  text-decoration: none;
  transition: border-color var(--t-base), background var(--t-base);
}
.fa-also a:hover,
.fa-also a:focus-visible { border-color: var(--o); background: var(--op); }
.fa-also b { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--dk); letter-spacing: -.02em; }
.fa-also span { font-size: 14.5px; line-height: 1.55; color: var(--mid); }
.fa-also a::after { content: '→'; position: absolute; left: 24px; bottom: 18px; color: var(--o2); font-weight: 700; }

/* RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 1100px) {
  .fa-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .fa-hero { padding: 64px 24px 0; }
  .fa-hero-inn { padding: 52px 0 60px; }
  .fa-hero-sub { font-size: 18px; }
  .fa-dark-grid,
  .fa-row,
  .fa-split,
  .fa-indie { grid-template-columns: 1fr; gap: 40px; }
  .fa-row--flip .fa-row-media { order: 0; }
  .fa-rows { gap: 64px; }
  .fa-grid--2,
  .fa-grid--3,
  .fa-also { grid-template-columns: 1fr; }
  .fa-indie { padding: 40px 24px; border-radius: 16px; }
  .fa-pt { grid-template-columns: 52px 1fr; gap: 16px; }
  .fa-pt-n { font-size: 32px; }
  .fa-sec-hd { margin-bottom: 40px; }
}
@media (max-width: 600px) {
  .fa-grid--4 { grid-template-columns: 1fr; }
  .fa-stats { grid-template-columns: 1fr; }
  .fa-q--lg p { font-size: 21px; }
}

/* REDUCED MOTION
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fa-hero-inn > * { animation: none; }
  .fu { opacity: 1; transform: none; transition: none; }
  .eyd { animation: none; }
  .fa-faq-list summary::after,
  .fa-also a { transition: none; }
}

/* Inline links in hero copy */
.fa-hero-sub a { color: var(--o2); font-weight: 600; text-underline-offset: 3px; }
.fa-hero-sub a:hover { color: var(--dk); }

/* Inline links in cards and section intros */
.fa-card p a,
.fa-sec-hd .sbod a { color: var(--o2); font-weight: 600; text-underline-offset: 3px; }
.fa-card p a:hover,
.fa-sec-hd .sbod a:hover { color: var(--dk); }

/* h3 inside university rows */
.fa-h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--dk);
  margin-bottom: 14px;
}