/* Growth MAX, part by part (Mark, 8 Oct 2026: the ruled rows were "lazy"; "make something special").
   One component for the Growth MAX page and the Durban and Pretoria marketing pages.
   Marketing Strategy is the hub; the other four parts hang off it on connectors with a red signal
   travelling down each one. Paper ground with the brand hairline grid, ink blocks, corner brackets.
   A part inverts to yellow with a small lift on hover or keyboard focus; hovering the hub lights every line. */

.gx{--gx-gap:clamp(48px,4.6vw,76px);--gx-deep:#a93129;position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(84px,8vw,132px);background:var(--paper);color:var(--ink)}
.gx::before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(16,16,15,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(16,16,15,.05) 1px,transparent 1px);background-size:72px 72px}

/* Head: the homepage's statement scale. City pages carry a heading; the Growth MAX page only the label. */
.gx__head{max-width:1100px;margin-bottom:clamp(48px,5vw,80px)}
.gx__head:not(:has(h2)){margin-bottom:clamp(26px,2.4vw,36px)}
.gx .gx__head .eyebrow:last-child{margin-bottom:0}
.gx .gx__head .eyebrow{margin-bottom:22px;color:rgba(16,16,15,.68)}
.gx .gx__head h2{max-width:none;margin:0;font-size:clamp(3.2rem,6vw,6.2rem);line-height:.87;letter-spacing:-.068em;color:var(--ink)}

/* The diagram, framed by corner brackets. */
.gx__map{position:relative;padding:clamp(18px,1.8vw,28px)}
.gx__map>i{position:absolute;width:44px;height:44px;pointer-events:none}
.gx__map>i::before,.gx__map>i::after{content:'';position:absolute;top:0;left:0;background:rgba(16,16,15,.5)}
.gx__map>i::before{width:100%;height:1px}
.gx__map>i::after{width:1px;height:100%}
.gx__map>i:nth-of-type(1){top:0;left:0}
.gx__map>i:nth-of-type(2){top:0;right:0;transform:scaleX(-1)}
.gx__map>i:nth-of-type(3){bottom:0;left:0;transform:scaleY(-1)}
.gx__map>i:nth-of-type(4){bottom:0;right:0;transform:scale(-1)}

/* The hub: Marketing Strategy, set large on ink. */
.gx__hub{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center;padding:clamp(34px,3.6vw,58px);background:var(--ink);color:var(--paper);outline:none}
.gx .gx__hub h3{--gx-sq:clamp(10px,.9vw,14px);display:flex;align-items:flex-start;gap:clamp(14px,1.2vw,20px);margin:0;font-size:clamp(2.3rem,4.2vw,4.4rem);line-height:.9;letter-spacing:-.06em;color:var(--paper);text-wrap:balance}
/* The marker sits on the middle of the capitals (measured: cap middle is .443em down at line-height .9). */
.gx .gx__hub h3::before{content:'';width:var(--gx-sq);height:var(--gx-sq);margin-top:calc(.443em - var(--gx-sq) / 2);background:var(--red);flex:none}
.gx .gx__hub p{max-width:46ch;margin:0;font-size:clamp(1.06rem,1.3vw,1.26rem);font-weight:600;line-height:1.48;color:rgba(243,239,230,.84);text-wrap:pretty}

/* The parts the plan steers. Each card's connector runs from the hub (or the card above) into its marker. */
.gx__parts{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gx-gap) clamp(14px,1.4vw,22px);margin-top:var(--gx-gap)}
.gx__part{--gx-pad:clamp(22px,1.9vw,30px);position:relative;min-width:0;padding:clamp(26px,2.2vw,34px) var(--gx-pad) clamp(30px,2.6vw,40px);background:var(--ink);color:var(--paper);outline:none;transition:background .34s cubic-bezier(.16,1,.3,1),transform .34s cubic-bezier(.16,1,.3,1)}
.gx__part::before{content:'';position:absolute;left:var(--gx-pad);top:calc(-1 * var(--gx-gap) - 4px);width:9px;height:calc(var(--gx-gap) + 4px);background:linear-gradient(var(--red),var(--red)) 50% 0/9px 9px no-repeat,linear-gradient(rgba(16,16,15,.55),rgba(16,16,15,.55)) 50% 0/1px 100% no-repeat;transition:background .34s ease}
.gx__part::after{content:'';position:absolute;inset:0 0 auto;height:5px;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform .38s cubic-bezier(.16,1,.3,1)}
.gx__signal{position:absolute;left:calc(var(--gx-pad) + 3.5px);top:calc(-1 * var(--gx-gap) + 4px);width:2px;height:18px;background:var(--red);opacity:0;animation:gx-signal 2.8s cubic-bezier(.55,0,.45,1) infinite;pointer-events:none}
.gx__part:nth-child(2) .gx__signal{animation-delay:.7s}
.gx__part:nth-child(3) .gx__signal{animation-delay:1.4s}
.gx__part:nth-child(4) .gx__signal{animation-delay:2.1s}
@keyframes gx-signal{0%{transform:translateY(0);opacity:0}14%{opacity:1}78%{opacity:1}100%{transform:translateY(calc(var(--gx-gap) - 22px));opacity:0}}
.gx .gx__part h3{display:flex;align-items:flex-start;gap:14px;margin:0;font-size:clamp(1.4rem,1.75vw,1.78rem);line-height:1.04;letter-spacing:-.036em;color:inherit;text-wrap:balance}
.gx .gx__part h3::before{content:'';width:9px;height:9px;margin-top:calc(.52em - 4.5px);background:var(--red);flex:none;transition:background .34s ease}
.gx .gx__part p{margin:18px 0 0;font-size:clamp(1rem,1.06vw,1.06rem);line-height:1.52;color:rgba(243,239,230,.76);text-wrap:pretty;transition:color .34s ease}

.gx__part:is(:hover,:focus-visible){z-index:1;background:var(--yellow);color:var(--ink);transform:translateY(-6px)}
.gx .gx__part:is(:hover,:focus-visible) p{color:rgba(16,16,15,.82)}
.gx__part:is(:hover,:focus-visible)::after{transform:scaleX(1)}
.gx__part:is(:hover,:focus-visible) h3::before{background:var(--gx-deep)}
.gx__part:is(:hover,:focus-visible)::before,.gx__map:has(.gx__hub:hover,.gx__hub:focus-visible) .gx__part::before{background:linear-gradient(var(--red),var(--red)) 50% 0/9px 9px no-repeat,linear-gradient(var(--red),var(--red)) 50% 0/2px 100% no-repeat}

@media(max-width:1120px){
  .gx__parts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .gx__hub{grid-template-columns:1fr;gap:20px;align-items:start}
}
@media(max-width:640px){
  .gx{--gx-gap:36px;padding-block:72px 84px}
  .gx .gx__head h2{font-size:clamp(2.5rem,12vw,3.3rem);line-height:.9}
  .gx__map{padding:12px}
  .gx__map>i{width:28px;height:28px}
  .gx__hub{padding:26px 22px 28px}
  .gx .gx__hub h3{font-size:clamp(2rem,10vw,2.6rem)}
  .gx .gx__hub p{font-size:1rem}
  .gx__parts{grid-template-columns:1fr}
  .gx__part{--gx-pad:20px;padding:22px 20px 26px}
  .gx .gx__part h3{font-size:1.45rem}
  .gx .gx__part p{margin-top:12px;font-size:1rem}
}
@media(prefers-reduced-motion:reduce){
  .gx__signal{display:none}
  .gx__part,.gx__part::before,.gx__part::after{transition:none}
  .gx__part:is(:hover,:focus-visible){transform:none}
}