/* ==========================================================================
   Results & Client Success (results-client-success/index.html). Page-only styles.
   One idea: case files. A standings board puts every result on one screen, then
   each client gets a file: logo plate, the numbers set big, and the real Google
   screenshot as evidence, with a signal-ring marker on their listing and the
   listing enlarged beside it.
   ========================================================================== */

/* ---------- 1. Hero ------------------------------------------------------- */
.res-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: max(100svh, 680px);
  background: var(--void);
}
.res-hero__photo { position: absolute; inset: 0; z-index: -1; }
.res-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 88% 38%; }
.res-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 8, 12, .9) 0%, rgba(5, 8, 12, .72) 30%, rgba(5, 8, 12, .15) 56%, rgba(5, 8, 12, 0) 70%),
    linear-gradient(180deg, rgba(5, 8, 12, .6) 0%, rgba(5, 8, 12, 0) 22%, rgba(5, 8, 12, 0) 56%, rgba(5, 8, 12, .7) 86%, var(--void) 100%);
}
.res-hero__inner { width: 100%; padding-top: calc(var(--header-h) + 3rem); padding-bottom: clamp(3.5rem, 9vh, 7rem); }
.res-hero__copy { display: grid; gap: clamp(1.1rem, 2.4vh, 1.75rem); justify-items: start; max-width: 780px; }
.res-hero__copy h1 { font-size: min(clamp(3.25rem, 1rem + 6.4vw, 7.75rem), 14.5vh); line-height: .88; letter-spacing: -.042em; max-width: 12ch; }
.res-hero__copy .lede { max-width: 46ch; }
@media (max-width: 899.98px) {
  .res-hero { display: grid; align-items: start; min-height: 0; }
  .res-hero__photo { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 3.4; }
  .res-hero__photo img { object-position: 78% 30%; }
  .res-hero__photo::after { background: linear-gradient(180deg, rgba(5, 8, 12, .6) 0%, rgba(5, 8, 12, 0) 26%, rgba(5, 8, 12, 0) 52%, rgba(5, 8, 12, .8) 84%, var(--void) 100%); }
  .res-hero__inner { position: relative; z-index: 1; margin-top: min(-16vw, -60px); padding-top: 0; padding-bottom: var(--space-l); }
  .res-hero__copy .btn-row { width: 100%; }
  .res-hero__copy .btn { flex: 1 1 auto; }
}
@media (min-width: 600px) and (max-width: 899.98px) { .res-hero__photo { aspect-ratio: 16 / 9; } }

/* ---------- 2. The board -------------------------------------------------- */
.board { padding-top: var(--space-xl); }
.board__head { display: grid; gap: var(--space-m); margin-bottom: var(--space-l); }
.board__head h2 { max-width: 12ch; }
.board__table { width: 100%; border-collapse: collapse; }
.board__table thead th {
  text-align: left;
  vertical-align: bottom;
  padding: 0 1.25rem .9rem 0;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--muted);
}
.board__table thead .board__col--maps { color: var(--cyan); }
.board__table tbody tr { border-top: 1px solid var(--line-2); transition: background-color var(--dur) var(--ease-out); }
.board__table tbody tr:last-child { border-bottom: 1px solid var(--line-2); }
.board__table tbody th { text-align: left; font-weight: inherit; padding: 1.35rem 1.25rem 1.35rem 0; width: 42%; }
.board__client { display: grid; gap: .25rem; width: fit-content; border-radius: 6px; }
.board__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.1;
  letter-spacing: -.028em;
  word-spacing: .03em;
  transition: color var(--dur-fast);
}
.board__meta { font-size: .9375rem; color: var(--muted); }
.board__cell { padding: 1.2rem 1.25rem 1.2rem 0; vertical-align: middle; white-space: nowrap; }
.board__num {
  display: block;
  font-family: var(--font-num);
  font-weight: 900;
  font-size: clamp(2.5rem, 1.5rem + 2.8vw, 4.5rem);
  line-height: .82;
  font-variant-numeric: lining-nums tabular-nums;
}
.board__cell--maps .board__num { color: var(--cyan); }
.board__unit { display: block; margin-top: .4rem; font-size: .875rem; color: var(--muted); white-space: normal; }
.board__note { margin-top: 1rem; font-size: .875rem; color: var(--muted); }
@media (hover: hover) {
  .board__table tbody tr:hover { background: rgba(234, 241, 247, .025); }
  .board__client:hover .board__name { color: var(--cyan); }
}
@media (min-width: 960px) {
  .board__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--space-xl); }
}
@media (max-width: 759.98px) {
  .board__table, .board__table tbody, .board__table tr, .board__table th, .board__table td { display: block; }
  .board__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .board__table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem 1rem; padding-block: 1.25rem; }
  .board__table tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 .6rem; }
  .board__cell { padding: 0; white-space: normal; }
  .board__cell::before { content: attr(data-label); display: block; margin-bottom: .45rem; font-size: .8125rem; font-weight: 600; color: var(--muted); }
  .board__cell--maps::before { color: var(--cyan); }
  .board__num { font-size: 2.75rem; }
}

/* ---------- 3. Case files ------------------------------------------------- */
.case { position: relative; padding-block: var(--space-2xl) var(--space-xl); }
.case + .case, .strip + .case { border-top: 1px solid var(--line); }
.case__head { display: grid; gap: var(--space-m); }
.case__id { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.1rem; }
.case__plate {
  display: inline-grid;
  place-items: center;
  height: 68px;
  padding: .55rem .9rem;
  border-radius: 12px;
  background: #fff;
}
.case__plate img { height: 48px; width: auto; max-width: 200px; object-fit: contain; }
.case__plate--dark { background: #000; box-shadow: inset 0 0 0 1px var(--line-2); }
.case__plate--dark img { height: 56px; }
.case__meta { font-weight: 500; color: var(--text-2); }
.case__title { font-size: clamp(2.25rem, 1.1rem + 3.3vw, 4.5rem); line-height: .98; letter-spacing: -.042em; max-width: 19ch; }
.case__facts { display: flex; flex-wrap: wrap; gap: .75rem 2.75rem; }
.case__facts div { display: grid; gap: .1rem; }
.case__facts dt { font-size: .8125rem; color: var(--muted); }
.case__facts dd { margin: 0; font-weight: 600; }

.case__top { display: grid; gap: var(--space-xl); }
.case__results { padding-top: var(--space-l); border-top: 1px solid var(--line-2); }
.case__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
.case__stat { gap: .85rem; }
.case__stat .stat__num { --stat-size: clamp(3.25rem, 1.6rem + 4vw, 6.5rem); }
.case__stat .stat__label { font-size: .9375rem; max-width: 22ch; color: var(--text-2); }
.case__asof { margin-top: 1.75rem; font-size: .875rem; color: var(--muted); max-width: 60ch; }
@media (min-width: 1080px) {
  .case__top { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); column-gap: clamp(3rem, 5vw, 5.5rem); align-items: end; }
  .case__results { padding: 0 0 0 clamp(1.5rem, 3vw, 3rem); border-top: 0; border-left: 1px solid var(--line-2); }
}

.case__body { display: grid; gap: var(--space-xl); margin-top: var(--space-xl); }
@media (min-width: 1080px) {
  .case__body { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); column-gap: clamp(3rem, 5vw, 5.5rem); align-items: start; }
  .case--flip .case__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr); }
  .case--flip .evidence { order: 2; }
  .case__story { position: sticky; top: calc(var(--header-h) + 4vh); }
}

/* Evidence: the real Google screenshot, the client's listing marked and enlarged */
.evidence { margin: 0; min-width: 0; }
.evidence__shot { position: relative; }
.evidence__shot img {
  width: 100%;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(234, 241, 247, .14), 0 50px 90px -40px rgba(0, 0, 0, .95);
}
.evidence__mark {
  position: absolute;
  left: calc(var(--x) - var(--w) / 2);
  top: calc(var(--y) - var(--h) / 2);
  width: var(--w);
  height: var(--h);
  border-radius: 5px;
  box-shadow: 0 0 0 2px var(--cyan), 0 0 0 5px rgba(5, 8, 12, .25);
  container-type: inline-size;
}
.evidence__rings {
  --signal-size: 190cqw;
  --signal-dur: 2.4s;
  left: 50%;
  top: 50%;
  margin: calc(var(--signal-size) * -.18) 0 0 calc(var(--signal-size) / -2);
}
.evidence__rings > i { border-width: 2px; }
.evidence__zoom {
  position: relative;
  z-index: 2;
  width: min(72%, 520px);
  margin: -7% 4% 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--cyan), 0 40px 70px -26px rgba(0, 0, 0, .95);
}
.evidence__zoom img { display: block; width: 100%; height: auto; }
.case--flip .evidence__zoom { margin-left: 4%; margin-right: auto; }
.evidence__cap { margin-top: 1.1rem; font-size: .875rem; color: var(--muted); }
@media (max-width: 599.98px) {
  .evidence__zoom, .case--flip .evidence__zoom { width: 92%; margin: -5% auto 0; }
}

/* The story beside it */
.case__story { display: grid; gap: var(--space-l); align-content: start; }
.case__block p { color: var(--text-2); line-height: 1.6; }
.case__block p + p { margin-top: .85em; }
.case__block--lead p { font-size: var(--step-1); line-height: 1.5; color: var(--text); }
.case__block h3 {
  margin-bottom: .7rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  word-spacing: 0;
  line-height: 1.4;
  color: var(--cyan);
}
.case__list li {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding-block: .55rem;
  border-top: 1px solid var(--line);
  line-height: 1.45;
}
.case__list li::before { content: ""; flex: none; width: .6rem; height: 2px; background: var(--muted); transform: translateY(-.3em); }
.case__list--did li::before {
  width: .5em;
  height: .26em;
  background: none;
  border-left: .12em solid var(--cyan);
  border-bottom: .12em solid var(--cyan);
  transform: translateY(-.28em) rotate(-45deg);
}
.case__block .case__list + p { margin-top: .9em; }
.case__pull {
  padding-left: 1.25rem;
  border-left: 2px solid var(--cyan);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -.028em;
  word-spacing: .03em;
  text-wrap: balance;
}
.case__live { justify-self: start; }

/* ---------- 4. Mid-page call ---------------------------------------------- */
.strip { background: var(--night); border-block: 1px solid var(--line); padding-block: var(--space-xl); }
.strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.strip__title { font-size: var(--step-3); max-width: 22ch; }

/* ---------- 5. Trust (daylight) ------------------------------------------- */
.trust__head { display: grid; gap: var(--space-l); }
.trust__head h2 { max-width: 12ch; }
.trust__intro { display: grid; gap: .9rem; }
.trust__word { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); letter-spacing: -.028em; color: var(--ink); }
.trust__facts { display: grid; gap: var(--space-l); margin-top: var(--space-xl); align-items: start; }
.trust__facts .stat__num { --stat-size: clamp(5rem, 3rem + 7vw, 10rem); }
.trust__facts .stat__label { font-size: 1rem; }
.trust__fact {
  margin-top: .35rem;
  padding-top: 1rem;
  border-top: 2px solid var(--cyan-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.12;
  letter-spacing: -.028em;
  word-spacing: .03em;
  max-width: 17ch;
}
.trust__reviews { margin-top: var(--space-xl); }
.trust__cta { margin-top: var(--space-l); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.trust__cta p { font-size: var(--step-1); color: var(--ink); }
@media (min-width: 960px) {
  .trust__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--space-xl); }
  .trust__facts { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 5rem); }
}

/* ---------- 6. Finale ----------------------------------------------------- */
.page-results .finale__bg img { object-position: 70% 40%; }

/* Load check: the inline stylesheet guard re-fetches this file if this rule is missing. Keep it last. */
:root { --css-results: 1; }