/* ============================================================
   GOOGLE BUSINESS & ORGANIC GROWTH — local search, shown

   One idea runs the page: local demand is decided inside a
   search result, not on a website. So the hero is a search
   resolving into three map results, the "why" is the four
   actions a buyer takes without ever reaching a site, and the
   "what we improve" section is a profile that visibly corrects
   itself layer by layer.

   Nothing here claims a review programme, citation work or
   photography: none of those are in the offer. Reviews appear
   only as something a profile has.

   Scoped .gb-*. Built on the cx-* type scale from contact.css;
   this file loads only on this page.
   ============================================================ */

/* `hidden` loses to any class that sets display. Enforced before
   a component can render every state at once. */
.gb-why [hidden],.gb-prof [hidden],.gb-mo [hidden]{display:none !important;}

:root{
  --cx-lb:.72rem;
  --cx-cap:.95rem;

  --gb-d1:clamp(2.15rem,4.5vw,4rem);
  --gb-d2:clamp(1.9rem,3.3vw,2.9rem);

  --gb-line:rgba(168,210,236,.13);
  --gb-ok:#4ADE9B;          /* a field that is now correct */
  /* Was #E8B84B. Amber is the obvious colour for "not done yet" and it
     was the last gold anywhere on the site. A neutral silver-blue says
     the same thing inside the Midnight palette, and it reads better
     against the green: inactive becomes active, rather than one warm
     signal becoming a cool one. */
  --gb-warn:#7E93B5;        /* a field that is not */
  --gb-ig:#E1568F;          /* the two other surfaces, named by hue only */
  --gb-yt:#FF5C5C;
}

/* shared furniture -------------------------------------------- */
.gb-t2{
  margin:0;font-family:var(--font-display);font-weight:800;
  font-size:var(--gb-d2);line-height:1.04;letter-spacing:-.042em;
  color:var(--cx-ink);text-wrap:balance;
}
.gb-act{display:flex;flex-wrap:wrap;gap:13px 16px;align-items:center;
  margin-top:clamp(24px,3.6vh,34px);}
.gb-mk{
  position:absolute;left:0;width:7px;height:7px;
  background:color-mix(in srgb,var(--accent) 55%,transparent);
  transition:background .45s var(--ease-out), transform .45s var(--ease-out);
}

/* ============================================================
   1. THE HERO — a search resolving into three results
   ============================================================ */
.gb-hero{
  position:relative;overflow:clip;
  padding:clamp(96px,13vh,150px) var(--gut) clamp(46px,7vh,78px);
  background:
    radial-gradient(70% 90% at 76% 22%, rgba(6,44,199,.2), transparent 66%),
    linear-gradient(180deg,#04060B,#070B14 56%,#04060B);
}
.gb-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(168,210,236,.06) 1px,transparent 1px),
    linear-gradient(180deg,rgba(168,210,236,.06) 1px,transparent 1px);
  background-size:clamp(46px,5vw,72px) clamp(46px,5vw,72px);
  -webkit-mask-image:radial-gradient(70% 76% at 72% 42%,#000,transparent 78%);
          mask-image:radial-gradient(70% 76% at 72% 42%,#000,transparent 78%);
}
.gb-hero__in{
  position:relative;max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:clamp(34px,4vw,66px);align-items:center;
}
@media (min-width:1060px){
  .gb-hero__in{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);}
}
.gb-hero__art{min-width:0;}

.gb-h1{
  margin:0;max-width:16ch;
  font-family:var(--font-display);font-weight:800;
  font-size:var(--gb-d1);line-height:1.0;letter-spacing:-.052em;
  color:var(--cx-ink);text-wrap:balance;
}
.gb-say{
  margin:clamp(20px,3vh,28px) 0 0;max-width:46ch;
  font-size:clamp(1rem,1.1vw,1.1rem);line-height:1.66;color:rgba(184,197,218,.96);
}
.gb-say strong{color:#EEF4FF;font-weight:600;}

/* ---- the search result ---------------------------------------- */
.gb-stage{position:relative;}
.gb-serp{
  position:relative;border:1px solid var(--gb-line);
  background:linear-gradient(168deg,#080D18,#05070D 68%);
  box-shadow:0 34px 76px -40px rgba(3,20,60,.95);
  overflow:hidden;
}
.gb-serp__bar{
  display:flex;align-items:center;gap:11px;
  padding:clamp(11px,1.5vw,15px) clamp(13px,1.7vw,18px);
  border-bottom:1px solid var(--gb-line);
  background:rgba(255,255,255,.028);
}
.gb-mag{width:15px;height:15px;flex:none;color:rgba(150,172,200,.7);}
.gb-q{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-cap);color:#E4EDFB;white-space:nowrap;
}
.gb-caret{
  width:1px;height:1.05em;background:var(--accent);flex:none;
  box-shadow:0 0 8px var(--accent);
}
html.js .gb-stage:not(.s3) .gb-caret{animation:gbBlink 1.05s steps(1) infinite;}
html.js .gb-stage.s3 .gb-caret{opacity:0;}
@keyframes gbBlink{0%,49%{opacity:1;}50%,100%{opacity:0;}}

.gb-serp__body{
  display:grid;gap:0;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:620px){.gb-serp__body{grid-template-columns:minmax(0,.86fr) minmax(0,1fr);}}

/* the map */
.gb-map{
  position:relative;min-height:clamp(208px,30vh,286px);
  background:linear-gradient(160deg,#070C16,#04070E);
  border-right:1px solid var(--gb-line);overflow:hidden;
}
.gb-grid{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(168,210,236,.05) 1px,transparent 1px),
    linear-gradient(180deg,rgba(168,210,236,.05) 1px,transparent 1px);
  background-size:26px 26px;
}
.gb-road{position:absolute;background:rgba(146,170,200,.11);}
.gb-road--a{left:0;right:0;top:38%;height:7px;}
.gb-road--b{top:0;bottom:0;left:42%;width:6px;}
.gb-road--c{left:0;right:0;top:74%;height:4px;}

.gb-pin{
  position:absolute;left:var(--x);top:var(--y);
  width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:rgba(146,170,200,.4);
  transition:background .6s var(--ease-out), scale .6s var(--ease-out);
}
.gb-pin--you{
  width:17px;height:17px;margin:-8.5px 0 0 -8.5px;
  background:rgba(146,170,200,.5);z-index:2;
}
.gb-pin--you i{
  position:absolute;inset:-11px;border-radius:50%;
  border:1px solid var(--accent);opacity:0;transform:rotate(45deg);
}
.gb-stage.s2 .gb-pin--you,.gb-stage.s3 .gb-pin--you{
  background:var(--accent);scale:1.12;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent),
             0 0 26px color-mix(in srgb,var(--accent) 80%,transparent);
}
html.js .gb-stage.s3 .gb-pin--you i{animation:gbPing 2.6s var(--ease-out) infinite;}
@keyframes gbPing{
  0%{opacity:.65;scale:.55;} 70%{opacity:0;scale:1.5;} 100%{opacity:0;scale:1.5;}
}

/* the three results */
.gb-pack{
  margin:0;padding:clamp(12px,1.6vw,17px);list-style:none;
  display:grid;gap:clamp(8px,1.1vh,11px);align-content:center;
}
.gb-row{
  position:relative;display:grid;gap:7px;
  padding:clamp(10px,1.3vw,14px);
  border:1px solid rgba(168,210,236,.09);
  background:rgba(255,255,255,.018);
  opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out),
             border-color .55s var(--ease-out), background .55s var(--ease-out);
}
.gb-stage.s1 .gb-row,.gb-stage.s2 .gb-row,.gb-stage.s3 .gb-row{opacity:1;transform:none;}
.gb-stage.s1 .gb-row:nth-child(2),.gb-stage.s2 .gb-row:nth-child(2),
.gb-stage.s3 .gb-row:nth-child(2){transition-delay:.1s;}
.gb-stage.s1 .gb-row:nth-child(3),.gb-stage.s2 .gb-row:nth-child(3),
.gb-stage.s3 .gb-row:nth-child(3){transition-delay:.2s;}

.gb-row__t{display:block;height:9px;width:62%;background:rgba(190,215,245,.2);}
.gb-row__m{display:flex;gap:8px;align-items:center;height:7px;}
.gb-row__m::before{content:"";display:block;width:34%;height:100%;background:rgba(150,172,200,.16);}

.gb-row--you{
  border-color:color-mix(in srgb,var(--accent) 34%,transparent);
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 11%,transparent),transparent 78%);
  order:0;
}
/* the whole point of the hero: your listing arrives in the pack */
.gb-stage.s2 .gb-row--you,.gb-stage.s3 .gb-row--you{
  order:-1;
  border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  box-shadow:0 0 30px -10px color-mix(in srgb,var(--accent) 80%,transparent);
}
.gb-row--you .gb-row__t{
  height:auto;width:auto;background:none;
  font-family:var(--font-display);font-weight:700;
  font-size:var(--cx-cap);color:#F2F7FF;letter-spacing:-.02em;
}
.gb-row--you .gb-row__m{height:auto;}
.gb-row--you .gb-row__m::before{display:none;}
.gb-star{color:var(--accent);font-size:.72rem;letter-spacing:.08em;}
.gb-row--you u{
  text-decoration:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gb-ok);
}
.gb-row__act{display:flex;gap:6px;margin-top:3px;opacity:0;
  transition:opacity .5s var(--ease-out) .25s;}
.gb-stage.s3 .gb-row__act{opacity:1;}
.gb-row__act b{
  padding:4px 9px;border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.08em;
  color:color-mix(in srgb,var(--accent) 80%,#fff);
}

.gb-serp__ft{
  display:flex;justify-content:space-between;gap:12px;margin:0;
  padding:9px clamp(13px,1.7vw,18px);
  border-top:1px solid var(--gb-line);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(140,156,184,.98);
}
.gb-note{
  display:flex;justify-content:space-between;gap:14px;
  margin:clamp(14px,2.2vh,20px) 0 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(124,140,167,.92);
}
.gb-note::after{
  content:"Watch it resolve";
  color:color-mix(in srgb,var(--accent) 76%,#fff);font-weight:700;
}
@media (hover:none){.gb-note::after{display:none;}}
@media (max-width:560px){.gb-note{flex-direction:column;gap:6px;}}

.gb-facts{
  position:relative;max-width:var(--maxw);margin:clamp(30px,4.4vh,50px) auto 0;
  display:grid;gap:0;border-top:1px solid var(--gb-line);
}
@media (min-width:760px){.gb-facts{grid-template-columns:repeat(4,minmax(0,1fr));}}
.gb-facts > div{
  padding:clamp(16px,2.2vh,22px) clamp(14px,1.6vw,22px);
  border-bottom:1px solid var(--gb-line);
}
@media (min-width:760px){
  .gb-facts > div + div{border-left:1px solid var(--gb-line);}
}
.gb-facts dt{
  margin-bottom:7px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(126,142,169,.9);
}
.gb-facts dd{margin:0;font-size:var(--cx-cap);line-height:1.56;color:rgba(186,199,220,.95);}

/* ============================================================
   2. WHY IT MATTERS — intent, discovery, action
   ============================================================ */
.gb-why{
  position:relative;padding:clamp(70px,10vh,128px) var(--gut);
  border-block:1px solid var(--gb-line);
  background:
    radial-gradient(60% 80% at 22% 0%, rgba(6,44,199,.14), transparent 68%),
    linear-gradient(180deg,#04060B,#080C16 46%,#04060B);
}
.gb-why__in{max-width:1180px;margin-inline:auto;}
.gb-why__hd{
  display:grid;gap:clamp(12px,2.4vw,44px);align-items:end;
  margin-bottom:clamp(30px,4.6vh,52px);
}
@media (min-width:920px){.gb-why__hd{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
.gb-why__hd .cx-bd{max-width:44ch;}

.gb-flow{
  display:grid;gap:clamp(20px,3vw,40px);
  align-items:start;
}
/* three children in a two column grid puts the answer back under
   column one, a full column away from the tabs it belongs to */
@media (min-width:900px){
  .gb-flow{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    grid-template-rows:auto auto;row-gap:clamp(14px,2.2vh,20px);}
  .gb-steps{grid-column:1;grid-row:1 / span 2;}
  .gb-acts{grid-column:2;grid-row:1;}
  .gb-pans{grid-column:2;grid-row:2;}
}

/* the three beats */
.gb-steps{
  margin:0;padding:0;list-style:none;
  display:grid;gap:clamp(12px,1.8vh,18px);
}
.gb-steps li{
  position:relative;padding-left:26px;
  transition:opacity .5s var(--ease-out);
}
.gb-steps li::before{
  content:"";position:absolute;left:0;top:.42em;
  width:9px;height:9px;border-radius:50%;
  border:1px solid rgba(132,150,180,.5);background:transparent;
  transition:background .5s var(--ease-out), border-color .5s var(--ease-out),
             box-shadow .5s var(--ease-out);
}
.gb-steps li::after{
  content:"";position:absolute;left:4px;top:calc(.42em + 12px);bottom:-14px;
  width:1px;background:rgba(132,150,180,.22);
}
.gb-steps li:last-child::after{display:none;}
.gb-steps li.is-on::before{
  background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent),
             0 0 14px color-mix(in srgb,var(--accent) 70%,transparent);
}
.gb-steps b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.02rem,1.3vw,1.18rem);letter-spacing:-.028em;
  color:rgba(150,166,191,.82);transition:color .5s var(--ease-out);
}
.gb-steps li.is-on b{color:#F2F7FF;}
.gb-steps span{display:block;margin-top:3px;font-size:var(--cx-cap);
  line-height:1.56;color:rgba(168,182,205,.9);}

/* the four actions */
.gb-acts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(8px,1.1vw,12px);
}
@media (min-width:560px){.gb-acts{grid-template-columns:repeat(4,minmax(0,1fr));}}
.gb-act__b{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding:clamp(13px,1.7vw,19px);
  border:1px solid rgba(168,210,236,.12);
  background:rgba(255,255,255,.02);
  cursor:pointer;text-align:left;
  transition:border-color .45s var(--ease-out), background .45s var(--ease-out),
             transform .45s var(--ease-out);
}
.gb-act__b svg{width:20px;height:20px;color:rgba(150,172,200,.7);
  transition:color .45s var(--ease-out), transform .45s var(--ease-out);}
.gb-act__b span{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--cx-cap);letter-spacing:-.022em;color:rgba(168,182,205,.9);
  transition:color .45s var(--ease-out);
}
.gb-act__b:hover{border-color:color-mix(in srgb,var(--accent) 34%,transparent);
  background:rgba(255,255,255,.04);transform:translateY(-2px);}
.gb-act__b:hover svg{color:color-mix(in srgb,var(--accent) 86%,#fff);transform:scale(1.1);}
.gb-act__b[aria-selected="true"]{
  border-color:color-mix(in srgb,var(--accent) 56%,transparent);
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 14%,transparent),transparent 74%);
  box-shadow:0 0 34px -14px color-mix(in srgb,var(--accent) 80%,transparent);
}
.gb-act__b[aria-selected="true"] svg{color:var(--accent);}
.gb-act__b[aria-selected="true"] span{color:#F4F9FF;}

.gb-pans{margin-top:clamp(14px,2.2vh,20px);}
@media (min-width:900px){.gb-pans{margin-top:0;}}
.gb-pan{
  margin:0;max-width:60ch;
  font-size:var(--cx-bd);line-height:var(--cx-lead-bd);color:rgba(182,196,218,.96);
  animation:gbFade .5s var(--ease-out) backwards;
}
@keyframes gbFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.gb-hon{
  margin:clamp(28px,4.2vh,48px) 0 0;max-width:78ch;
  padding:clamp(20px,2.6vw,30px) clamp(18px,2.4vw,30px);
  border-left:2px solid color-mix(in srgb,var(--accent) 64%,transparent);
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent 72%);
  font-size:var(--cx-bd);line-height:var(--cx-lead-bd);color:rgba(184,197,218,.96);
}
.gb-hon b{color:#F2F7FF;font-weight:600;}

/* ============================================================
   3. WHAT WE IMPROVE — the profile, corrected layer by layer
   ============================================================ */
.gb-prof{
  position:relative;padding:clamp(70px,10vh,128px) var(--gut);
  border-bottom:1px solid var(--gb-line);
  background:linear-gradient(180deg,#04060B,#070A12 50%,#04060B);
}
.gb-prof__in{max-width:1180px;margin-inline:auto;}
.gb-prof__hd{
  display:grid;gap:clamp(12px,2.4vw,44px);align-items:end;
  margin-bottom:clamp(30px,4.6vh,52px);
}
@media (min-width:920px){.gb-prof__hd{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
.gb-prof__hd .cx-bd{max-width:44ch;}

.gb-lab{display:grid;gap:clamp(22px,3vw,48px);align-items:center;}
@media (min-width:940px){.gb-lab{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);}}

.gb-lay{margin:0;padding:0;list-style:none;display:grid;}
.gb-lay li{
  position:relative;padding:clamp(13px,1.8vh,18px) 0 clamp(13px,1.8vh,18px) 30px;
  border-bottom:1px solid rgba(168,210,236,.1);
  cursor:pointer;
}
.gb-lay li:first-child{border-top:1px solid rgba(168,210,236,.1);}
.gb-lay li::before{
  content:"";position:absolute;left:0;top:calc(clamp(13px,1.8vh,18px) + .44em);
  width:7px;height:7px;border-radius:99px;
  background:transparent;border:1px solid rgba(120,136,162,.6);
  transition:width .5s var(--ease-out), background .5s var(--ease-out),
             border-color .5s var(--ease-out);
}
.gb-lay li.is-live::before{
  width:20px;background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent);
}
.gb-lay b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1rem,1.25vw,1.15rem);letter-spacing:-.028em;
  color:rgba(150,166,191,.84);transition:color .5s var(--ease-out);
}
.gb-lay li.is-live b{color:#F4F9FF;}
.gb-lay span{
  display:block;max-height:0;overflow:hidden;opacity:0;
  font-size:var(--cx-cap);line-height:1.6;color:rgba(178,192,214,.95);
  transition:max-height .55s var(--ease-out), opacity .45s var(--ease-out),
             margin-top .55s var(--ease-out);
}
.gb-lay li.is-live span{max-height:8em;opacity:1;margin-top:6px;}

/* the profile card the layers act on */
.gb-card{
  position:relative;
  border:1px solid var(--gb-line);
  background:linear-gradient(168deg,#080D18,#05070D 70%);
  box-shadow:0 30px 70px -40px rgba(3,20,60,.95);
  padding:clamp(16px,2vw,24px);
}
.gb-card__top{display:flex;align-items:center;gap:13px;
  padding-bottom:clamp(13px,1.8vh,17px);border-bottom:1px solid var(--gb-line);}
.gb-card__ph{
  flex:none;width:clamp(42px,5vw,56px);aspect-ratio:1;
  background:linear-gradient(150deg,rgba(146,170,200,.22),rgba(146,170,200,.06));
  transition:background .6s var(--ease-out);
}
.gb-lab.n4 .gb-card__ph,.gb-lab.n5 .gb-card__ph{
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 42%,transparent),
             color-mix(in srgb,var(--accent) 10%,transparent));
}
.gb-card__id{min-width:0;flex:1;}
.gb-card__nm{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1rem,1.3vw,1.18rem);letter-spacing:-.03em;color:#F2F7FF;
}
.gb-card__cat{
  display:block;margin-top:3px;text-decoration:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(126,142,169,.9);transition:color .5s var(--ease-out);
}
.gb-lab.n1 .gb-card__cat{color:color-mix(in srgb,var(--accent) 82%,#fff);}

/* the completeness meter: the one number on the page, and it is
   about the profile rather than about a result */
.gb-card__sc{
  flex:none;width:clamp(52px,6vw,66px);height:5px;
  background:rgba(146,170,200,.16);position:relative;
}
.gb-card__sc i{
  position:absolute;inset:0 auto 0 0;width:var(--sc,10%);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 45%,transparent),var(--accent));
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent);
  transition:width .7s var(--ease-out);
}
.gb-card__flag{
  position:absolute;top:clamp(16px,2vw,24px);right:clamp(16px,2vw,24px);
  transform:translateY(-140%);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(118,134,161,.8);
}

.gb-card__rows{display:grid;gap:0;margin-block:clamp(4px,1vh,8px);}
.gb-cr{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:11px;align-items:center;
  padding:clamp(11px,1.5vh,15px) 0;
  border-bottom:1px solid rgba(168,210,236,.08);
  transition:background .5s var(--ease-out);
}
.gb-cr i{
  width:8px;height:8px;border-radius:50%;
  background:transparent;border:1px solid var(--gb-warn);
  transition:background .5s var(--ease-out), border-color .5s var(--ease-out),
             box-shadow .5s var(--ease-out);
}
.gb-cr span{font-size:var(--cx-cap);color:rgba(168,182,205,.9);}
.gb-cr b{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gb-warn);transition:color .5s var(--ease-out);
}
/* cumulative: from layer N onwards this row is fixed */
.gb-lab.n1 .gb-cr--cat i,.gb-lab.n2 .gb-cr--cat i,.gb-lab.n3 .gb-cr--cat i,
.gb-lab.n4 .gb-cr--cat i,.gb-lab.n5 .gb-cr--cat i,
.gb-lab.n2 .gb-cr--svc i,.gb-lab.n3 .gb-cr--svc i,.gb-lab.n4 .gb-cr--svc i,
.gb-lab.n5 .gb-cr--svc i,
.gb-lab.n3 .gb-cr--inf i,.gb-lab.n4 .gb-cr--inf i,.gb-lab.n5 .gb-cr--inf i,
.gb-lab.n4 .gb-cr--pst i,.gb-lab.n5 .gb-cr--pst i,
.gb-lab.n5 .gb-cr--vis i{
  background:var(--gb-ok);border-color:var(--gb-ok);
  box-shadow:0 0 12px color-mix(in srgb,var(--gb-ok) 60%,transparent);
}
.gb-lab.n1 .gb-cr--cat b,.gb-lab.n2 .gb-cr--cat b,.gb-lab.n3 .gb-cr--cat b,
.gb-lab.n4 .gb-cr--cat b,.gb-lab.n5 .gb-cr--cat b,
.gb-lab.n2 .gb-cr--svc b,.gb-lab.n3 .gb-cr--svc b,.gb-lab.n4 .gb-cr--svc b,
.gb-lab.n5 .gb-cr--svc b,
.gb-lab.n3 .gb-cr--inf b,.gb-lab.n4 .gb-cr--inf b,.gb-lab.n5 .gb-cr--inf b,
.gb-lab.n4 .gb-cr--pst b,.gb-lab.n5 .gb-cr--pst b,
.gb-lab.n5 .gb-cr--vis b{color:var(--gb-ok);}

/* the row the live layer is working on */
.gb-lab.n1 .gb-cr--cat,.gb-lab.n2 .gb-cr--svc,.gb-lab.n3 .gb-cr--inf,
.gb-lab.n4 .gb-cr--pst,.gb-lab.n5 .gb-cr--vis{
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 72%);
}

.gb-card__acts{display:flex;gap:7px;padding-top:clamp(12px,1.7vh,16px);}
.gb-card__acts b{
  flex:1;text-align:center;padding:8px 6px;
  border:1px solid rgba(168,210,236,.14);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.08em;
  color:rgba(150,166,191,.7);
  transition:border-color .5s var(--ease-out), color .5s var(--ease-out),
             background .5s var(--ease-out);
}
.gb-lab.n4 .gb-card__acts b,.gb-lab.n5 .gb-card__acts b{
  border-color:color-mix(in srgb,var(--accent) 38%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent);
  color:color-mix(in srgb,var(--accent) 86%,#fff);
}

/* ============================================================
   4. HOW IT WORKS — one month, three surfaces
   ============================================================ */
.gb-mo{
  position:relative;padding:clamp(70px,10vh,128px) var(--gut);
  border-bottom:1px solid var(--gb-line);
  background:
    radial-gradient(56% 70% at 78% 40%, rgba(6,44,199,.14), transparent 70%),
    linear-gradient(180deg,#04060B,#080C16 50%,#04060B);
}
.gb-mo__in{max-width:1180px;margin-inline:auto;}
.gb-mo__hd{
  display:grid;gap:clamp(12px,2.4vw,44px);align-items:end;
  margin-bottom:clamp(30px,4.6vh,52px);
}
@media (min-width:920px){.gb-mo__hd{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
.gb-mo__hd .cx-bd{max-width:46ch;}

.gb-rig{display:grid;gap:clamp(18px,2.4vw,30px);align-items:center;}
@media (min-width:860px){
  .gb-rig{grid-template-columns:minmax(0,.78fr) minmax(0,.46fr) minmax(0,1fr);}
}

.gb-src{
  padding:clamp(18px,2.2vw,26px);
  border:1px solid var(--gb-line);
  background:linear-gradient(160deg,rgba(9,14,25,.7),rgba(4,6,11,.5));
}
.gb-src__k,.gb-src__n{
  margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(126,142,169,.9);
}
.gb-src__n{margin-top:clamp(13px,1.8vh,17px);color:rgba(168,182,205,.92);}
.gb-src__n b{
  font-family:var(--font-display);font-size:1.5rem;letter-spacing:-.04em;
  color:#F4F9FF;margin-right:8px;
}
.gb-dots{
  margin-top:clamp(13px,1.8vh,17px);
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
}
.gb-dots i{
  display:block;aspect-ratio:1;
  background:rgba(146,170,200,.12);
  border:1px solid rgba(168,210,236,.1);
  transition:background .5s var(--ease-out), border-color .5s var(--ease-out),
             box-shadow .5s var(--ease-out);
}
.gb-dots i.is-on{
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 40%,transparent),
             color-mix(in srgb,var(--accent) 8%,transparent));
  border-color:color-mix(in srgb,var(--accent) 46%,transparent);
  box-shadow:0 0 14px -4px color-mix(in srgb,var(--accent) 80%,transparent);
}

.gb-fan{position:relative;min-height:170px;}
@media (max-width:859px){.gb-fan{min-height:74px;}}
.gb-fan svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.gb-wire{fill:none;stroke:rgba(168,210,236,.16);stroke-width:1.4;}
.gb-pk{
  fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:7 93;stroke-dashoffset:100;opacity:0;
}
html.js .gb-rig.go .gb-pk[data-at="0"],
html.js .gb-rig.go .gb-pk[data-at="1"],
html.js .gb-rig.go .gb-pk[data-at="2"]{opacity:1;animation:gbRun 3s linear infinite;}
html.js .gb-rig.go .gb-pk[data-at="1"]{animation-delay:.9s;}
html.js .gb-rig.go .gb-pk[data-at="2"]{animation-delay:1.8s;}
@keyframes gbRun{to{stroke-dashoffset:0;}}
@media (max-width:859px){.gb-fan svg{display:none;}}

.gb-out{margin:0;padding:0;list-style:none;display:grid;gap:clamp(9px,1.3vh,13px);}
.gb-o{
  position:relative;padding:clamp(14px,1.8vw,19px) clamp(15px,1.9vw,21px);
  padding-left:clamp(22px,2.6vw,30px);
  border:1px solid rgba(168,210,236,.12);
  background:rgba(255,255,255,.02);
  transition:border-color .45s var(--ease-out), background .45s var(--ease-out),
             transform .45s var(--ease-out);
}
.gb-o::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--c,var(--accent));opacity:.7;
}
.gb-o--gbp{--c:var(--accent);}
.gb-o--ig{--c:var(--gb-ig);}
.gb-o--yt{--c:var(--gb-yt);}
.gb-o:hover{border-color:color-mix(in srgb,var(--c) 40%,transparent);
  background:rgba(255,255,255,.042);transform:translateX(3px);}
.gb-o b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1rem,1.25vw,1.14rem);letter-spacing:-.028em;color:#F2F7FF;
}
.gb-o span{display:block;margin-top:4px;font-size:var(--cx-cap);
  line-height:1.56;color:rgba(174,188,210,.94);}

/* ============================================================
   5. WHAT CHANGES — the six reported measures
   ============================================================ */
.gb-rep{
  position:relative;padding:clamp(70px,10vh,128px) var(--gut);
  border-bottom:1px solid var(--gb-line);
  background:linear-gradient(180deg,#04060B,#070A12 48%,#04060B);
}
.gb-rep__in{max-width:1180px;margin-inline:auto;}
.gb-rep__hd{
  display:grid;gap:clamp(12px,2.4vw,44px);align-items:end;
  margin-bottom:clamp(26px,4vh,44px);
}
@media (min-width:920px){.gb-rep__hd{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
.gb-rep__hd .cx-bd{max-width:50ch;}

/* six small columns rather than six rows of prose: the measures
   are a scan, not a read. Everything the eye needs is the icon
   and the name; the interaction is a measure line sweeping the
   card, which is what the section is about. */
.gb-met{
  margin:0;padding:0;list-style:none;
  display:grid;gap:clamp(10px,1.2vw,16px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:680px){.gb-met{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (min-width:1080px){.gb-met{grid-template-columns:repeat(6,minmax(0,1fr));}}

.gb-m{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:clamp(14px,2vh,22px);
  padding:clamp(15px,1.7vw,21px) clamp(13px,1.5vw,18px) clamp(17px,2vh,23px);
  border:1px solid rgba(168,210,236,.11);
  background:linear-gradient(170deg,rgba(255,255,255,.028),rgba(255,255,255,.008));
  transition:border-color .45s var(--ease-out), background .45s var(--ease-out),
             transform .45s var(--ease-out);
}
.gb-m__i{
  width:20px;height:20px;flex:none;
  color:rgba(142,164,194,.78);
  transition:color .45s var(--ease-out), transform .45s var(--ease-out);
}
.gb-m__t{
  display:block;margin-top:auto;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(.95rem,1.06vw,1.08rem);line-height:1.16;letter-spacing:-.03em;
  color:#EFF4FE;text-wrap:balance;
}
.gb-m__n{
  display:block;margin-top:5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(140,156,184,.98);
}
/* the measure line: the whole point of the section, drawn rather
   than described */
.gb-m__r{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 40%,transparent),var(--accent));
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.gb-m:hover,.gb-m:focus-within{
  border-color:color-mix(in srgb,var(--accent) 44%,transparent);
  background:linear-gradient(170deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent 76%);
  transform:translateY(-3px);
}
.gb-m:hover .gb-m__i,.gb-m:focus-within .gb-m__i{
  color:var(--accent);transform:translateY(-2px) scale(1.06);
}
.gb-m:hover .gb-m__r,.gb-m:focus-within .gb-m__r{transform:scaleX(1);}

/* on arrival each card draws its own line once, left to right,
   so the idea reads without a pointer */
html.js .gb-rep.is-in .gb-m__r{
  animation:gbMeasure 1.5s var(--ease-out) backwards;
  animation-delay:calc(var(--i,0) * 110ms + 260ms);
}
.gb-m:nth-child(1){--i:0;} .gb-m:nth-child(2){--i:1;} .gb-m:nth-child(3){--i:2;}
.gb-m:nth-child(4){--i:3;} .gb-m:nth-child(5){--i:4;} .gb-m:nth-child(6){--i:5;}
@keyframes gbMeasure{
  0%{transform:scaleX(0);} 46%{transform:scaleX(1);}
  100%{transform:scaleX(0);}
}

/* ============================================================
   6. REDUCED MOTION
   Everything is a state change or scroll position, so the page
   keeps working; only the decorative loops stop.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html.js .gb-caret{animation:none;opacity:0;}
  html.js .gb-stage.s3 .gb-pin--you i{animation:none;}
  html.js .gb-rig.go .gb-pk{animation:none;opacity:.5;stroke-dashoffset:50;}
  .gb-pan{animation:none;}
  html.js .gb-rep.is-in .gb-m__r{animation:none;}
  .gb-row{transition:none;}
}

/* ============================================================
   7. SMALL VIEWPORTS
   ============================================================ */
@media (max-width:620px){
  .gb-map{border-right:0;border-bottom:1px solid var(--gb-line);min-height:170px;}
  .gb-serp__ft{font-size:.72rem;}
  .gb-card__flag{display:none;}
  .gb-cr{grid-template-columns:auto minmax(0,1fr);row-gap:4px;}
  .gb-cr b{grid-column:2;justify-self:start;}
}
@media (max-width:480px){
  .gb-row__act{flex-wrap:wrap;}
  .gb-dots{grid-template-columns:repeat(5,1fr);}
}