/* =====================================================================
   GREEN GRID CONNECT — PROJECT LIFECYCLE
   Full-bleed sticky horizontal scroll journey. Divi Code Module.
   Everything is namespaced under .ggc-project-lifecycle / .ggc-pl__*
   =====================================================================

   HOW TO CHANGE FONTS AND TEXT SIZES — use Ctrl+F / Cmd+F to jump to any
   of these class names, then edit the value shown. No coding knowledge
   needed — just don't delete the semicolon ; at the end of the line.

   FONT FAMILY (affects every bit of text in this section at once):
     Search for font-family:inherit — you'll get two matches: this
     sentence, and the real one about 45 lines further down, just under
     "position:relative;". "inherit" means it automatically matches
     whatever font your Divi page is already using. To force a specific
     font instead, replace that real line with e.g.
     font-family:"Poppins",sans-serif;

   TEXT SIZES — one class per piece of text:
     .ggc-pl__eyebrow  → small label above the heading  ("END-TO-END...")
     .ggc-pl__title    → the big heading itself         ("Simplified...")
     .ggc-pl__label    → the white box title on each of the 8 stages
     .ggc-pl__num      → the small "01".."08" number inside each box
     .ggc-pl__p        → the paragraph text under/above each stage
     .ggc-pl__count    → the "01 / 08" counter, bottom-left
     .ggc-pl__hint     → the "Keep scrolling" text, bottom-right
   Each of those rules has a font-size: line — change the px number (or
   the numbers inside a clamp(min, preferred, max) if you see one; the
   middle value is what most screens use).

   IMPORTANT: several of these class names appear a second (or third)
   time further down, inside blocks that start with @media(...) — those
   set the size used on smaller screens or shorter browser windows. If
   you change a size above and it doesn't seem to update, you're probably
   looking at a screen size that's picking up one of those @media
   overrides instead — search the same class name again to find it.
   ===================================================================== */
.ggc-project-lifecycle{
  /* ---------- BRAND ---------- */
  --ggc-pl-green:#2ABD51;
  --ggc-pl-green-deep:#1E9C41;
  --ggc-pl-navy:#211C5C;
  --ggc-pl-teal:#00A199;
  --ggc-pl-slate:#3F6B84;
  --ggc-pl-body:#1B1E23;               /* body copy colour — near-black for contrast, per feedback */
  --ggc-pl-bg:#EFF7F3;                 /* set to transparent to inherit    */
  --ggc-pl-surface:#FFFFFF;            /* rings, discs and label boxes     */
  --ggc-pl-rule:rgba(33,28,92,.13);    /* box borders and stems            */
  --ggc-pl-track:#D2D8DE;              /* unfilled line + ring — must be   */
                                       /* OPAQUE or the line shows through */
  --ggc-pl-track-0:rgba(210,216,222,0);/* same colour, zero alpha          */
  /* the filled line — navy through blue grey to teal, as per the diagram.
     For a single flat colour set all three stops to the same value.       */
  --ggc-pl-line-a:#211C5C;
  --ggc-pl-line-b:#3F6B84;
  --ggc-pl-line-c:#00A199;
  /* ---------- GEOMETRY ----------
     --ggc-pl-scale is set from the Divi module's "Diagram Size" field
     (default 1 = 100%); every geometry value below is multiplied by it so
     that one slider scales the whole desktop diagram consistently. It only
     applies to the desktop width tiers — the short-viewport / mobile safety
     tiers further down are deliberately left fixed.                        */
  --ggc-pl-stage-w:calc(330px * var(--ggc-pl-scale,1));      /* width of one lifecycle stage column      */
  --ggc-pl-stage-gap:calc(66px * var(--ggc-pl-scale,1));     /* space between stages                     */
  --ggc-pl-node:calc(156px * var(--ggc-pl-scale,1));         /* outer diameter of the ring               */
  --ggc-pl-icon:calc(60px * var(--ggc-pl-scale,1));          /* icon size inside the white disc          */
  --ggc-pl-rail-h:calc(14px * var(--ggc-pl-scale,1));        /* thickness of the lifecycle line          */
  --ggc-pl-zone:calc(224px * var(--ggc-pl-scale,1));         /* content band above / below the line      */
  --ggc-pl-boxh:calc(82px * var(--ggc-pl-scale,1));          /* label box height (fixed = stable line)   */
  --ggc-pl-stem:calc(24px * var(--ggc-pl-scale,1));          /* stem between box and ring                */
  --ggc-pl-gutter:clamp(24px,5vw,90px);
  /* ---------- INTERACTION ---------- */
  --ggc-pl-focus:0.5;          /* activation line: a stage lights up as its  */
                               /* circle crosses this point across the       */
                               /* window. 0.5 = the exact middle of the      */
                               /* screen. Lower = lights up further left     */
                               /* (later), higher = further right (earlier). */
  --ggc-pl-lead-in:0.55;       /* how far LEFT of that line stage 01 parks   */
                               /* before you scroll, measured in stages      */
                               /* (0.55 = just over half a stage). Measured  */
                               /* in stages rather than a share of the       */
                               /* window so that stage 01 is always lit and  */
                               /* stage 02 never is, on any screen width.    */
  --ggc-pl-outro:100px;        /* travel left after stage 08 activates     */
  --ggc-pl-scroll-factor:0.5;  /* scroll length multiplier — shortened per feedback (was 1.25) */
  --ggc-pl-focus-v:0.58;       /* activation point on mobile (0–1 of vh)   */
  --ggc-pl-sticky-top:0px;     /* set to your fixed header height          */
  --ggc-pl-vw:100vw;           /* JS refines this to exclude the scrollbar */
  /* ---------- MOTION ---------- */
  --ggc-pl-speed:360ms;
  --ggc-pl-ring-speed:620ms;   /* unused now that the ring draw-in animation is removed below —
                                   kept so it's a one-line job to restore later               */
  --ggc-pl-ease:cubic-bezier(.22,.86,.24,1);
  --ggc-pl-ease-snap:cubic-bezier(.2,1.5,.35,1);
  --ggc-pl-ease-mech:cubic-bezier(.62,0,.2,1);
  /* vertical centre of the line, derived — do not edit directly */
  --ggc-pl-railtop:calc(var(--ggc-pl-zone) + var(--ggc-pl-node) / 2 - var(--ggc-pl-rail-h) / 2);
  position:relative;
  display:block;
  font-family:inherit;
  color:var(--ggc-pl-navy);
  background:var(--ggc-pl-bg);
  -webkit-font-smoothing:antialiased;
}
/* full bleed — break out of the Divi row and span the page.
   Remove the .ggc-pl--bleed class (or set data-ggc-pl-bleed="off" on the
   section) to keep the module inside its container instead.               */
.ggc-project-lifecycle.ggc-pl--bleed{
  width:var(--ggc-pl-vw);
  max-width:none;
  margin-left:calc(50% - var(--ggc-pl-vw) / 2);
  margin-right:calc(50% - var(--ggc-pl-vw) / 2);
}
.ggc-project-lifecycle *,
.ggc-project-lifecycle *::before,
.ggc-project-lifecycle *::after{box-sizing:border-box;}
/* zero-specificity reset so Divi's element styles cannot leak in,
   and so the module's own class rules always win */
.ggc-project-lifecycle :where(h2,h3,p,ol,li,span,div,i,b,em,svg){
  margin:0;padding:0;font-family:inherit;text-transform:none;font-style:normal;
  list-style:none;text-align:left;
}
.ggc-project-lifecycle :where(svg){display:block;overflow:visible;}
/* Kill first-paint transition flashes (state is written before arming) */
.ggc-project-lifecycle:not(.ggc-pl--armed) .ggc-pl__stage,
.ggc-project-lifecycle:not(.ggc-pl--armed) .ggc-pl__stage *{transition:none!important;}
/* ---------------------------------------------------------------
   OUTER SCROLL SHELL + STICKY VIEWPORT
   --------------------------------------------------------------- */
.ggc-pl__scroll{position:relative;}
.ggc-pl__sticky{
  position:sticky;
  top:var(--ggc-pl-sticky-top);
  height:calc(100vh - var(--ggc-pl-sticky-top));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--ggc-pl-bg);
}
.ggc-pl__viewport,
.ggc-pl__meter{position:relative;z-index:1;}
/* ---------------------------------------------------------------
   HEADING — lives inside the sticky panel (not the scroll track) so it
   stays on screen the whole time the diagram is pinned, per feedback.
   --------------------------------------------------------------- */
.ggc-pl__heading{
  flex:0 0 auto;
  position:relative;z-index:1;
  text-align:center;
  padding:clamp(28px,4.5vh,46px) var(--ggc-pl-gutter) clamp(2px,0.6vh,6px);
}
.ggc-pl__eyebrow{
  display:block;
  text-align:center;
  font-family:"Sora",Helvetica,Arial,sans-serif;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ggc-pl-teal);
  margin-bottom:4px;
}
.ggc-pl__title{
  display:block;
  text-align:center;
  font-family:"Sora",Helvetica,Arial,sans-serif;
  font-size:clamp(21px,2.8vw,var(--ggc-pl-title-max,38px));
  font-weight:500;
  line-height:1.16;
  letter-spacing:-.01em;
  color:var(--ggc-pl-navy);  /* matches the stage-title colour, per feedback */
}
/* ---------------------------------------------------------------
   HORIZONTAL VIEWPORT + TRACK
   --------------------------------------------------------------- */
.ggc-pl__viewport{
  flex:1 1 auto;
  display:flex;
  align-items:center;  /* now that the diagram is bigger, centring keeps top/bottom gaps even */
  overflow:hidden;
}
.ggc-project-lifecycle:not(.ggc-pl--ready) .ggc-pl__viewport{overflow-x:auto;}
.ggc-pl__track{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  transform:translate3d(0,0,0);
  will-change:transform;
}
.ggc-pl__stages{
  display:flex;
  flex:0 0 auto;
  align-items:stretch;
  gap:var(--ggc-pl-stage-gap);
}
/* ---------------------------------------------------------------
   THE LIFECYCLE LINE — thick, brand gradient, fills with scroll
   --------------------------------------------------------------- */
.ggc-pl__rail,
.ggc-pl__lead,
.ggc-pl__end{
  position:absolute;
  top:var(--ggc-pl-railtop);
  height:var(--ggc-pl-rail-h);
  pointer-events:none;
  z-index:0;
}
.ggc-pl__rail{
  left:0;width:0;
  background:var(--ggc-pl-track);
  border-radius:99px;
}
.ggc-pl__railFill{
  position:absolute;inset:0;
  border-radius:99px;
  background:linear-gradient(90deg,
    var(--ggc-pl-line-a) 0%,
    var(--ggc-pl-line-b) 52%,
    var(--ggc-pl-line-c) 100%);
  clip-path:inset(0 100% 0 0 round 99px);
}
.ggc-pl__lead{
  left:0;width:0;
  border-radius:99px;
  background:linear-gradient(90deg,var(--ggc-pl-track-0) 0%,var(--ggc-pl-track) 100%);
}
/* "power ahead" terminus — the isolated forward line from the logo */
.ggc-pl__end{
  left:0;width:max-content;background:none;
  display:flex;align-items:center;gap:14px;
}
.ggc-pl__end i{
  display:block;flex:0 0 auto;
  height:var(--ggc-pl-rail-h);border-radius:99px;
  background:var(--ggc-pl-track);
  transition:background-color 240ms steps(2);
}
.ggc-pl__end i:nth-child(1){width:78px;}
.ggc-pl__end i:nth-child(2){width:24px;}
.ggc-project-lifecycle.ggc-pl--done .ggc-pl__end i{background:var(--ggc-pl-line-c);}
.ggc-project-lifecycle.ggc-pl--done .ggc-pl__end i:nth-child(2){transition-delay:150ms;}
/* activation marker — an invisible coordinate. Set display:block to see it. */
.ggc-pl__focus{
  display:none;
  position:absolute;left:0;top:0;width:1px;height:0;
  background:linear-gradient(180deg,rgba(33,28,92,0),rgba(33,28,92,.20));
  pointer-events:none;z-index:0;
}
/* ---------------------------------------------------------------
   STAGE — content alternates above / below the line
   --------------------------------------------------------------- */
.ggc-pl__stage{
  position:relative;
  flex:0 0 var(--ggc-pl-stage-w);
  width:var(--ggc-pl-stage-w);
  display:grid;
  grid-template-rows:var(--ggc-pl-zone) var(--ggc-pl-node) var(--ggc-pl-zone);
  justify-items:center;
  text-align:center;
}
/* NOTE: never put opacity on .ggc-pl__stage — it would make the ring's white
   fill translucent and the lifecycle line would show through the circles.
   Only the text block fades; the ring dims via colour instead.            */
.ggc-pl__block{
  display:flex;flex-direction:column;align-items:center;
  width:100%;grid-column:1;
  opacity:.5;
  transform:translateY(0);
  transition:opacity var(--ggc-pl-speed) var(--ggc-pl-ease),
             transform 320ms var(--ggc-pl-ease);
}
.ggc-pl__stage.ggc-is-complete .ggc-pl__block{opacity:.92;}
.ggc-pl__stage.ggc-is-active .ggc-pl__block{opacity:1;}
.ggc-pl__stage--up .ggc-pl__block{grid-row:1;align-self:end;}
.ggc-pl__stage--dn .ggc-pl__block{grid-row:3;align-self:start;}
.ggc-pl__stage--up.ggc-is-active .ggc-pl__block{transform:translateY(-5px);}
.ggc-pl__stage--dn.ggc-is-active .ggc-pl__block{transform:translateY(5px);}
.ggc-pl__stage--up .ggc-pl__p{order:1;margin-bottom:17px;}
.ggc-pl__stage--up .ggc-pl__label{order:2;}
.ggc-pl__stage--up .ggc-pl__stem{order:3;}
.ggc-pl__stage--dn .ggc-pl__stem{order:1;}
.ggc-pl__stage--dn .ggc-pl__label{order:2;}
.ggc-pl__stage--dn .ggc-pl__p{order:3;margin-top:17px;}
/* label box + stem, as per the diagram ------------------------------- */
.ggc-pl__label{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;
  width:min(100%,268px);height:var(--ggc-pl-boxh);
  padding:8px 18px;
  border:1px solid var(--ggc-pl-rule);
  border-radius:8px;
  background:rgba(255,255,255,.62);
  box-shadow:0 0 0 rgba(33,28,92,0);
  font-size:15.5px;line-height:1.26;
  font-weight:600;letter-spacing:-.008em;
  color:var(--ggc-pl-navy);
  text-align:center;
  overflow:hidden;
  transition:
    background-color var(--ggc-pl-speed) var(--ggc-pl-ease),
    border-color var(--ggc-pl-speed) var(--ggc-pl-ease),
    box-shadow var(--ggc-pl-speed) var(--ggc-pl-ease);
}
.ggc-pl__stage.ggc-is-active .ggc-pl__label{
  background:var(--ggc-pl-surface);
  border-color:rgba(33,28,92,.20);
  box-shadow:0 8px 22px rgba(33,28,92,.07);
}
.ggc-pl__num{
  display:block;
  font-size:11.5px;line-height:1;
  font-weight:700;letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
  color:rgba(33,28,92,.36);
  transition:color 200ms steps(2);
}
.ggc-pl__stage.ggc-is-complete .ggc-pl__num,
.ggc-pl__stage.ggc-is-active .ggc-pl__num{color:var(--ggc-pl-green-deep);}
.ggc-pl__stem{
  display:block;flex:0 0 auto;
  width:1px;height:var(--ggc-pl-stem);
  background:var(--ggc-pl-rule);
}
/* the ring ----------------------------------------------------------- */
.ggc-pl__node{
  position:relative;z-index:2;grid-row:2;
  width:var(--ggc-pl-node);height:var(--ggc-pl-node);
  border-radius:50%;
}
/* active-state scale "pop" removed per feedback (too much motion) */
.ggc-pl__ringSvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.ggc-pl__ringBg{
  fill:var(--ggc-pl-surface);
  stroke:var(--ggc-pl-track);
  stroke-width:12.5;
}
.ggc-pl__ringFg{
  fill:none;
  stroke:var(--ggc-pl-hue,var(--ggc-pl-navy));
  stroke-width:12.5;
  stroke-linecap:butt;
  stroke-dasharray:280;
  stroke-dashoffset:280;
  transform:rotate(180deg);
  transform-origin:50% 50%;
  /* draw-in transition removed per feedback — ring now snaps to its state instantly */
}
.ggc-pl__stage.ggc-is-complete .ggc-pl__ringFg,
.ggc-pl__stage.ggc-is-active .ggc-pl__ringFg{stroke-dashoffset:0;}
.ggc-pl__disc{
  position:absolute;inset:calc(var(--ggc-pl-node) * .165);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--ggc-pl-surface);
}
.ggc-pl__ic{
  display:block;
  width:var(--ggc-pl-icon);height:var(--ggc-pl-icon);
  color:var(--ggc-pl-slate);
  opacity:.3;
  transition:color 260ms var(--ggc-pl-ease),opacity 260ms var(--ggc-pl-ease);
}
.ggc-pl__stage.ggc-is-complete .ggc-pl__ic,
.ggc-pl__stage.ggc-is-active .ggc-pl__ic{color:var(--ggc-pl-green);opacity:1;}
.ggc-pl__ic svg{width:100%;height:100%;}
/* used only when a custom icon image is uploaded for a stage in Divi */
.ggc-pl__ic img{width:100%;height:100%;object-fit:contain;display:block;}
/* description -------------------------------------------------------- */
/* The description is allowed to run a little wider than its stage column,
   borrowing just over half the gap to the next stage on each side. Wider
   lines mean fewer of them, which is what stops the long descriptions
   growing upward into the heading. It is expressed as a share of the gap
   rather than a fixed number so it stays in proportion on every screen
   tier, and the label boxes above are unaffected — they have their own
   fixed width, so the spacing along the line does not change at all. */
.ggc-pl__p{
  --ggc-pl-p-bleed:calc(var(--ggc-pl-stage-gap) * 0.65);
  width:calc(100% + var(--ggc-pl-p-bleed));
  margin-left:calc(var(--ggc-pl-p-bleed) / -2);
  margin-right:calc(var(--ggc-pl-p-bleed) / -2);
  padding:0 6px;
  font-size:clamp(13.5px,.95vw,14.5px);
  line-height:1.5;
  font-weight:400;
  color:var(--ggc-pl-body);
  text-align:center;
}
/* ---------------------------------------------------------------
   PROGRESS METER
   --------------------------------------------------------------- */
.ggc-pl__meter{
  flex:0 0 auto;
  display:flex;align-items:center;gap:18px;
  padding:0 var(--ggc-pl-gutter) clamp(18px,3.4vh,44px);
}
.ggc-pl__count{
  font-size:13px;font-weight:700;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;color:rgba(33,28,92,.4);
  white-space:nowrap;
}
.ggc-pl__count b{font-weight:700;color:var(--ggc-pl-green-deep);}
.ggc-pl__meterTrack{
  position:relative;height:4px;width:min(260px,32vw);
  background:var(--ggc-pl-track);border-radius:99px;overflow:hidden;
}
.ggc-pl__meterFill{
  position:absolute;inset:0;border-radius:99px;
  background:linear-gradient(90deg,var(--ggc-pl-line-a),var(--ggc-pl-line-b),var(--ggc-pl-line-c));
  transform-origin:0 50%;transform:scaleX(0);
}
.ggc-pl__hint{
  position:relative;display:block;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:rgba(33,28,92,.34);white-space:nowrap;
}
.ggc-pl__hint b,
.ggc-pl__hint em{font:inherit;font-weight:500;letter-spacing:inherit;text-transform:inherit;transition:opacity 240ms steps(2);}
.ggc-pl__hint em{position:absolute;left:0;top:0;opacity:0;color:var(--ggc-pl-teal);}
.ggc-project-lifecycle.ggc-pl--done .ggc-pl__hint b{opacity:0;}
.ggc-project-lifecycle.ggc-pl--done .ggc-pl__hint em{opacity:1;}
/* ---------------------------------------------------------------
   ICON MICRO-ANIMATIONS — each plays once, then rests.
   Every animation ENDS on the element's natural state, so removing
   the class can never leave an icon in a half-built pose.
   --------------------------------------------------------------- */
.ggc-project-lifecycle .ggc-pl__ic [data-draw]{stroke-dasharray:var(--l);stroke-dashoffset:0;}
.ggc-project-lifecycle .ggc-pl__ic [data-pop],
.ggc-project-lifecycle .ggc-pl__ic [data-spin],
.ggc-project-lifecycle .ggc-pl__ic [data-grow],
.ggc-project-lifecycle .ggc-pl__ic [data-slide]{
  transform-box:fill-box;transform-origin:50% 50%;
}
.ggc-project-lifecycle .ggc-pl__ic [data-grow="x"]{transform-origin:0% 50%;}
.ggc-project-lifecycle .ggc-pl__ic [data-grow="y"]{transform-origin:50% 100%;}
.ggc-project-lifecycle .ggc-pl__ic [data-grow="yd"]{transform-origin:50% 0%;}
/* draw/pop/spin/grow/slide keyframe animations removed per feedback ("too much
   animation") — icons now simply appear in their end state when a stage
   activates, via the opacity/colour fade on .ggc-pl__ic above. The base
   [data-draw] rule two blocks up already renders every icon fully drawn. */
/* ---------------------------------------------------------------
   VERTICAL MODE (mobile + reduced motion)
   --------------------------------------------------------------- */
.ggc-project-lifecycle[data-mode="v"] .ggc-pl__sticky,
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__sticky{
  position:static;height:auto;overflow:visible;
}
.ggc-project-lifecycle[data-mode="v"] .ggc-pl__viewport,
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__viewport{
  display:block;overflow:visible;
  padding:clamp(30px,7vw,60px) var(--ggc-pl-gutter) clamp(36px,7vw,64px);
}
.ggc-project-lifecycle[data-mode="v"] .ggc-pl__track,
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__track{
  display:block;width:100%;padding:0!important;transform:none!important;will-change:auto;
}
.ggc-project-lifecycle[data-mode="v"] .ggc-pl__stages,
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__stages{display:block;}
.ggc-project-lifecycle[data-mode="v"] .ggc-pl__rail,
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__rail,
.ggc-project-lifecycle[data-mode="v"] .ggc-pl__lead,
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__lead,
.ggc-project-lifecycle[data-mode="v"] .ggc-pl__end,
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__end,
.ggc-project-lifecycle[data-mode="v"] .ggc-pl__focus,
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__focus,
.ggc-project-lifecycle[data-mode="v"] .ggc-pl__stem,
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__stem,
.ggc-project-lifecycle[data-mode="v"] .ggc-pl__meter,
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__meter{display:none;}
.ggc-pl__vrail{display:none;}
.ggc-project-lifecycle[data-mode="v"] .ggc-pl__vrail,
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__vrail{
  display:block;position:absolute;left:0;top:0;height:0;
  margin-left:calc(var(--ggc-pl-node) / 2 - var(--ggc-pl-rail-h) / 2);
  width:var(--ggc-pl-rail-h);
  background:var(--ggc-pl-track);border-radius:99px;z-index:0;
}
.ggc-pl__vfillInner{
  position:absolute;inset:0;border-radius:99px;
  background:linear-gradient(180deg,
    var(--ggc-pl-line-a) 0%,var(--ggc-pl-line-b) 52%,var(--ggc-pl-line-c) 100%);
  clip-path:inset(0 0 100% 0 round 99px);
}
.ggc-project-lifecycle[data-mode="v"] .ggc-pl__stage,
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__stage{
  display:grid;
  grid-template-columns:var(--ggc-pl-node) minmax(0,1fr);
  grid-template-rows:auto;
  column-gap:20px;
  width:100%;flex-basis:auto;
  text-align:left;
  padding-bottom:34px;
}
.ggc-project-lifecycle[data-mode="v"] .ggc-pl__node,
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__node{
  grid-column:1;grid-row:1;align-self:start;
}
.ggc-project-lifecycle[data-mode="v"] .ggc-pl__block,
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__block{
  grid-column:2;grid-row:1;align-items:flex-start;transform:none!important;
}
.ggc-project-lifecycle[data-mode="v"] .ggc-pl__label,
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__label{
  order:1;width:100%;height:auto;min-height:0;
  align-items:flex-start;text-align:left;padding:11px 15px;
}
.ggc-project-lifecycle[data-mode="v"] .ggc-pl__p,
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__p{
  order:2;margin:13px 0 0!important;padding:0;text-align:left;
  width:100%;   /* no bleed when stacked — there is no neighbouring column */
}
/* reduced motion — everything present, nothing moves */
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__block{opacity:1;}
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__ic{color:var(--ggc-pl-green);opacity:1;}
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__ringFg{stroke-dashoffset:0;}
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__num{color:var(--ggc-pl-green-deep);}
.ggc-project-lifecycle[data-mode="rm"] .ggc-pl__vfillInner{clip-path:inset(0 0 0 0 round 99px);}
@media (prefers-reduced-motion:reduce){
  .ggc-project-lifecycle *,
  .ggc-project-lifecycle *::before,
  .ggc-project-lifecycle *::after{
    animation:none!important;
    transition:none!important;
  }
}
/* ---------------------------------------------------------------
   RESPONSIVE SCALE
   --------------------------------------------------------------- */
@media (min-width:1900px){
  .ggc-project-lifecycle{
    --ggc-pl-stage-w:calc(356px * var(--ggc-pl-scale,1));--ggc-pl-stage-gap:calc(78px * var(--ggc-pl-scale,1));--ggc-pl-node:calc(172px * var(--ggc-pl-scale,1));
    --ggc-pl-icon:calc(68px * var(--ggc-pl-scale,1));--ggc-pl-rail-h:calc(16px * var(--ggc-pl-scale,1));--ggc-pl-zone:calc(244px * var(--ggc-pl-scale,1));--ggc-pl-boxh:calc(88px * var(--ggc-pl-scale,1));
  }
}
@media (min-width:1600px) and (max-width:1899px){
  .ggc-project-lifecycle{
    --ggc-pl-stage-w:calc(338px * var(--ggc-pl-scale,1));--ggc-pl-stage-gap:calc(72px * var(--ggc-pl-scale,1));--ggc-pl-node:calc(160px * var(--ggc-pl-scale,1));
    --ggc-pl-icon:calc(62px * var(--ggc-pl-scale,1));--ggc-pl-rail-h:calc(15px * var(--ggc-pl-scale,1));--ggc-pl-zone:calc(232px * var(--ggc-pl-scale,1));--ggc-pl-boxh:calc(84px * var(--ggc-pl-scale,1));
  }
}
@media (max-width:1279px){
  .ggc-project-lifecycle{
    --ggc-pl-stage-w:calc(296px * var(--ggc-pl-scale,1));--ggc-pl-stage-gap:calc(50px * var(--ggc-pl-scale,1));--ggc-pl-node:calc(130px * var(--ggc-pl-scale,1));
    --ggc-pl-icon:calc(50px * var(--ggc-pl-scale,1));--ggc-pl-rail-h:calc(12px * var(--ggc-pl-scale,1));--ggc-pl-zone:calc(200px * var(--ggc-pl-scale,1));--ggc-pl-boxh:calc(76px * var(--ggc-pl-scale,1));
  }
}
@media (max-width:1023px){
  .ggc-project-lifecycle{
    --ggc-pl-stage-w:calc(260px * var(--ggc-pl-scale,1));--ggc-pl-stage-gap:calc(42px * var(--ggc-pl-scale,1));--ggc-pl-node:calc(108px * var(--ggc-pl-scale,1));
    --ggc-pl-icon:calc(42px * var(--ggc-pl-scale,1));--ggc-pl-rail-h:calc(11px * var(--ggc-pl-scale,1));--ggc-pl-zone:calc(180px * var(--ggc-pl-scale,1));--ggc-pl-boxh:calc(70px * var(--ggc-pl-scale,1));
    --ggc-pl-stem:calc(20px * var(--ggc-pl-scale,1));--ggc-pl-outro:70px;
  }
  .ggc-pl__label{font-size:14.5px;}
}
@media (max-height:820px) and (min-width:768px){
  .ggc-project-lifecycle{
    --ggc-pl-node:106px;--ggc-pl-icon:41px;--ggc-pl-zone:174px;
    --ggc-pl-boxh:68px;--ggc-pl-stem:16px;
  }
  .ggc-pl__heading{padding-top:clamp(24px,3.6vh,36px);padding-bottom:clamp(6px,1.4vh,12px);}
  .ggc-pl__title{font-size:clamp(19px,2.4vw,28px);}
}
@media (max-height:720px) and (min-width:768px){
  .ggc-project-lifecycle{
    --ggc-pl-node:92px;--ggc-pl-icon:36px;--ggc-pl-zone:154px;
    --ggc-pl-boxh:62px;--ggc-pl-stem:13px;--ggc-pl-rail-h:9px;
  }
  .ggc-pl__label{font-size:14px;}
  .ggc-pl__p{font-size:13.5px;line-height:1.55;}
  .ggc-pl__stage--up .ggc-pl__p{margin-bottom:14px;}
  .ggc-pl__stage--dn .ggc-pl__p{margin-top:14px;}
  .ggc-pl__eyebrow{font-size:11.5px;}
  .ggc-pl__title{font-size:clamp(18px,2.2vw,25px);}
}
/* vertical layout sizing — keyed on the mode so it also covers a wide-but-short
   viewport that falls back to the vertical lifecycle */
.ggc-project-lifecycle[data-mode="v"],
.ggc-project-lifecycle[data-mode="rm"]{
  --ggc-pl-stage-w:100%;
  --ggc-pl-node:76px;
  --ggc-pl-icon:35px;
  --ggc-pl-rail-h:8px;
}
@media (max-height:640px) and (min-width:768px){
  .ggc-project-lifecycle{
    --ggc-pl-node:80px;--ggc-pl-icon:31px;--ggc-pl-zone:136px;
    --ggc-pl-boxh:56px;--ggc-pl-stem:11px;--ggc-pl-rail-h:8px;
  }
  .ggc-pl__label{font-size:13.5px;}
  .ggc-pl__p{font-size:13px;line-height:1.5;}
  .ggc-pl__stage--up .ggc-pl__p{margin-bottom:10px;}
  .ggc-pl__stage--dn .ggc-pl__p{margin-top:10px;}
  .ggc-pl__heading{padding-top:clamp(20px,3vh,28px);padding-bottom:clamp(4px,1vh,8px);}
  .ggc-pl__eyebrow{font-size:11px;margin-bottom:4px;}
  .ggc-pl__title{font-size:clamp(17px,2vw,22px);}
}
@media (max-width:767px){
  .ggc-project-lifecycle{--ggc-pl-gutter:20px;}
  .ggc-pl__label{font-size:15px;}
  .ggc-pl__p{font-size:14.5px;}
  .ggc-pl__heading{padding-top:clamp(20px,6vw,32px);padding-bottom:clamp(10px,3vw,18px);}
}
/* small phones — give the text column back some width */
@media (max-width:400px){
  .ggc-project-lifecycle[data-mode="v"],
  .ggc-project-lifecycle[data-mode="rm"]{
    --ggc-pl-node:64px;--ggc-pl-icon:30px;--ggc-pl-gutter:16px;--ggc-pl-rail-h:7px;
  }
  .ggc-project-lifecycle[data-mode="v"] .ggc-pl__stage,
  .ggc-project-lifecycle[data-mode="rm"] .ggc-pl__stage{column-gap:14px;padding-bottom:28px;}
  .ggc-pl__label{font-size:14.5px;padding:10px 12px;}
  .ggc-pl__p{font-size:14px;}
}