/* ==========================================================================
   s7b — FOUND FIRST, LOCALLY (local SEO)
   Layout archetype: SPLIT (prose left, a light-branded mock LOCAL SEARCH RESULT
   right). Alternates from s7 (centred abstract gauge) and s8 (centred stepper).
   The screen is the FELLGATE ELECTRICAL light brand (mb--fellgate); page chrome
   stays Beaufort-dark.
   Signature motion (ONE): a single scrubbed proxy --rank (0 -> 1) on .s7b-stage.
   Everything derives from it:
     - the search query reveals (clip) and a caret blinks while "typing"
     - the map pin DROPS and settles, its shadow firming
     - the #1 result card lifts up + brightens; its gold "1st" badge ignites
     - the five stars fill ONE AFTER ANOTHER (each keys off --rank vs its --s)
     - the two competitor rows settle in DIMMED beneath (staggered by --i)
   Transform / opacity / stroke-dashoffset only. Reduced motion / no-JS force
   --rank:1 so the section rests fully ranked + readable; scrub never wired.
   ========================================================================== */

#s7b .s7b-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

/* ----- LEFT: prose ----- */
#s7b .s7b-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: var(--sp-3);
}
#s7b .s7b-eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}
#s7b .s7b-title {
  font-size: var(--fs-h2);
  font-weight: 600; line-height: 1.08; letter-spacing: -0.01em;
  color: var(--ice); text-wrap: balance;
  margin: 0 0 var(--sp-3);
  max-width: 16ch;
}
#s7b .s7b-title .accent { color: var(--gold-bright); font-style: italic; font-weight: 500; }
#s7b .s7b-lead {
  font-size: var(--fs-lead);
  color: var(--parchment-dim);
  line-height: 1.55;
  margin: 0;
  max-width: 50ch;
  text-wrap: pretty;
}

/* ----- RIGHT: the mock SERP stage ----- */
#s7b .s7b-stage {
  --rank: 0;                 /* 0 cold -> 1 fully ranked; JS scrubs it */
  position: relative;
  min-width: 0;
}
#s7b .s7b-browser { width: 100%; }
#s7b .s7b-browser .browser__viewport { aspect-ratio: 4 / 3.4; }

/* the light "page" inside the browser viewport */
#s7b .s7b-serp {
  height: 100%;
  padding: clamp(10px, 3.2cqw, 18px);
  gap: clamp(8px, 2.4cqw, 13px);
  display: flex;
  flex-direction: column;
  background: var(--mb-bg);
}

/* ---- search box ------------------------------------------------------- */
#s7b .s7b-search {
  flex: none;
  display: flex; align-items: center; gap: .55em;
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-radius: 999px;
  padding: .55em .9em;
  box-shadow: var(--mb-shadow);
  font-size: clamp(11px, 3.1cqw, 15px);
}
#s7b .s7b-search__ico {
  width: 1.05em; height: 1.05em; flex: none;
  stroke: var(--mb-accent);
}
#s7b .s7b-search__q {
  font-family: var(--mb-font-body);
  color: var(--mb-text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  /* query reveals as --rank rises (clip width), reading as "typing" */
  max-width: calc(var(--rank) * 100%);
}
#s7b .s7b-search__caret {
  width: 2px; height: 1.1em; flex: none;
  background: var(--mb-accent);
  margin-left: -.25em;
  /* caret only blinks while still typing (rank < 1) */
  opacity: clamp(0, (0.96 - var(--rank)) / 0.1, 1);
  animation: s7b-caret 1s steps(1) infinite;
}
@keyframes s7b-caret { 50% { opacity: 0; } }

/* ---- map strip with dropped pin --------------------------------------- */
#s7b .s7b-map {
  flex: none;
  position: relative;
  height: clamp(48px, 16cqw, 78px);
  border-radius: var(--mb-radius);
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 80% 10%, #eef3ec, transparent 60%),
    linear-gradient(180deg, #e9eef3, #e2e8ee);
  border: 1px solid var(--mb-line);
}
#s7b .s7b-map__road {
  position: absolute; background: #ffffff;
  box-shadow: 0 0 0 1px rgba(26,34,48,0.04);
}
#s7b .s7b-map__road--a { left: -8%; top: 36%; width: 130%; height: 6px; transform: rotate(-7deg); }
#s7b .s7b-map__road--b { left: 28%; top: -20%; width: 6px; height: 150%; transform: rotate(9deg); }
#s7b .s7b-map__road--c { left: 60%; top: -10%; width: 5px; height: 140%; transform: rotate(-4deg); }
#s7b .s7b-map__blob {
  position: absolute; border-radius: 40% 55% 50% 45%;
  background: rgba(91,115,85,0.18);
}
#s7b .s7b-map__blob--1 { left: 8%; top: 52%; width: 26%; height: 40%; }
#s7b .s7b-map__blob--2 { left: 72%; top: 8%; width: 22%; height: 46%; }

#s7b .s7b-map__pin {
  position: absolute;
  left: 46%; top: 50%;
  width: clamp(18px, 5.6cqw, 26px);
  /* drops from above + settles as rank rises */
  transform:
    translate(-50%, -100%)
    translateY(calc((1 - clamp(0, (var(--rank) - 0.25) / 0.45, 1)) * -22px));
  opacity: clamp(0, (var(--rank) - 0.22) / 0.18, 1);
  filter: drop-shadow(0 3px 4px rgba(26,34,48,0.32));
}
#s7b .s7b-map__pin svg { width: 100%; height: auto; display: block; }
#s7b .s7b-map__pin svg path { fill: var(--mb-accent); }
#s7b .s7b-map__pin .s7b-map__pin-dot { fill: #ffffff; }

/* ---- the WINNING #1 result -------------------------------------------- */
#s7b .s7b-win {
  --lift: clamp(0, (var(--rank) - 0.45) / 0.4, 1);
  position: relative;
  display: flex;
  gap: clamp(8px, 2.4cqw, 14px);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius);
  padding: clamp(9px, 2.8cqw, 15px);
  /* the card lifts to the top + brightens as it wins */
  transform: translateY(calc((1 - var(--lift)) * 14px));
  opacity: calc(0.35 + var(--lift) * 0.65);
  box-shadow:
    0 1px 2px rgba(26,34,48,0.05),
    0 calc(var(--lift) * 22px) calc(var(--lift) * 40px) -18px rgba(31,95,191,calc(var(--lift) * 0.45));
  outline: 1px solid rgba(31,95,191, calc(var(--lift) * 0.30));
}
#s7b .s7b-win__rank {
  flex: none;
  align-self: flex-start;
  display: inline-grid; place-items: center;
  min-width: clamp(28px, 8cqw, 38px);
  height: clamp(28px, 8cqw, 38px);
  border-radius: 10px;
  font-family: var(--mb-font-num);
  font-weight: 700;
  font-size: clamp(11px, 3cqw, 14px);
  letter-spacing: -.02em;
  color: var(--mb-on-accent);
  /* the "1st" badge ignites gold as the card wins */
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--mb-accent-2) 70%, #b9810b),
    var(--mb-accent-2));
  box-shadow: 0 0 calc(var(--lift) * 16px) rgba(232,163,23, calc(var(--lift) * 0.6));
  transform: scale(calc(0.82 + var(--lift) * 0.18));
}
#s7b .s7b-win__body { min-width: 0; display: flex; flex-direction: column; gap: clamp(3px, 1.2cqw, 6px); }
#s7b .s7b-win__head { display: flex; align-items: center; gap: .5em; }
#s7b .s7b-win__name {
  font-size: clamp(13px, 3.7cqw, 19px);
  color: var(--mb-text);
}
#s7b .s7b-win__verified {
  display: inline-grid; place-items: center; flex: none;
  width: 1.05em; height: 1.05em;
  border-radius: 50%;
  background: var(--mb-accent);
  font-size: clamp(11px, 3.2cqw, 15px);
  opacity: var(--lift);
  transform: scale(calc(0.6 + var(--lift) * 0.4));
}
#s7b .s7b-win__verified svg { width: 64%; height: 64%; stroke: #fff; }

#s7b .s7b-win__rating { display: flex; align-items: center; gap: .45em; }
#s7b .s7b-stars { display: inline-flex; gap: 1.5px; }
#s7b .s7b-stars i {
  --fill: clamp(0, (var(--rank) - 0.5 - var(--s) * 0.08) / 0.1, 1);
  width: clamp(10px, 3cqw, 14px);
  height: clamp(10px, 3cqw, 14px);
  background: var(--mb-accent-2);
  /* fill one star after another via opacity + a subtle pop */
  opacity: calc(0.22 + var(--fill) * 0.78);
  transform: scale(calc(0.7 + var(--fill) * 0.3));
  -webkit-mask: var(--s7b-star) center/contain no-repeat;
  mask: var(--s7b-star) center/contain no-repeat;
}
#s7b .s7b-serp {
  --s7b-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.2 6.6.8-4.9 4.6 1.3 6.6L12 17.8 6.1 20.8l1.3-6.6L2.5 9l6.6-.8z'/%3E%3C/svg%3E");
}
#s7b .s7b-win__score {
  font-family: var(--mb-font-num); font-weight: 700;
  color: var(--mb-text);
  font-size: clamp(11px, 3.1cqw, 14px);
}
#s7b .s7b-win__score .figure { color: inherit; }
#s7b .s7b-win__count { color: var(--mb-text-soft); font-size: clamp(10px, 2.8cqw, 12px); }
#s7b .s7b-win__meta {
  color: var(--mb-text-soft);
  font-size: clamp(10px, 2.9cqw, 13px);
  line-height: 1.35;
}
#s7b .s7b-win__tags { display: flex; flex-wrap: wrap; gap: .4em; margin-top: 1px; }
#s7b .s7b-win__tags .mb-chip {
  font-size: clamp(9px, 2.6cqw, 11px);
  padding: .26em .65em;
  background: var(--mb-surface-2);
  color: var(--mb-accent);
}

/* ---- greyed competitors beneath --------------------------------------- */
#s7b .s7b-rest {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: clamp(7px, 2cqw, 11px);
}
#s7b .s7b-rest__row {
  --in: clamp(0, (var(--rank) - 0.7 - var(--i) * 0.1) / 0.2, 1);
  display: flex; align-items: center; gap: clamp(8px, 2.4cqw, 13px);
  padding: clamp(7px, 2.2cqw, 11px) clamp(8px, 2.6cqw, 13px);
  border-radius: calc(var(--mb-radius) - 2px);
  background: var(--mb-surface-2);
  opacity: calc(var(--in) * 0.6);          /* deliberately dimmed: they lose */
  transform: translateY(calc((1 - var(--in)) * 8px));
}
#s7b .s7b-rest__pos {
  flex: none;
  display: inline-grid; place-items: center;
  width: clamp(20px, 6cqw, 28px); height: clamp(20px, 6cqw, 28px);
  border-radius: 8px;
  background: #d7dbe1;
  color: #71798a;
  font-family: var(--mb-font-num); font-weight: 600;
  font-size: clamp(10px, 2.9cqw, 13px);
}
#s7b .s7b-rest__lines { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
#s7b .s7b-rest__bar { display: block; height: clamp(6px, 1.7cqw, 8px); border-radius: 999px; background: #c7ccd4; }
#s7b .s7b-rest__bar--name { width: 56%; }
#s7b .s7b-rest__bar--meta { width: 78%; height: clamp(5px, 1.4cqw, 6px); background: #d6dae1; }

/* ---- responsive: stack, visual under prose ---------------------------- */
@media (max-width: 880px) {
  #s7b .s7b-grid { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 40px); }
  #s7b .s7b-copy { text-align: center; }
  #s7b .s7b-eyebrow { justify-content: center; }
  #s7b .s7b-eyebrow::before { display: none; }
  #s7b .s7b-title { max-width: none; margin-inline: auto; }
  #s7b .s7b-lead { max-width: 60ch; margin-inline: auto; }
  #s7b .s7b-stage { max-width: 460px; margin-inline: auto; }
}

/* ---- reduced motion / no-JS resting state: fully ranked --------------- */
@media (prefers-reduced-motion: reduce) {
  #s7b .s7b-stage { --rank: 1; }
  #s7b .s7b-search__caret { animation: none; opacity: 0; }
}
.no-js #s7b .s7b-stage { --rank: 1; }