/* ═══════════════════════════════════════════════════════════════════════
       ╔═══════════════════════════════════════════════════════════════════╗
       ║   GG-HR — PREMIUM HOMEPAGE HERO                                   ║
       ║   Dark · Text LEFT · Full-bleed image slider                      ║
       ║   Goes in /assets/css/home.css                                    ║
       ╚═══════════════════════════════════════════════════════════════════╝
       ═══════════════════════════════════════════════════════════════════════ */
    /* --- GG-HR: Start --- */

    .gg-hr{
      position:relative;
      width:100%;
      max-width:100vw;
      background:var(--gg-black);
      color:var(--gg-white);
      overflow:hidden;
      isolation:isolate;
      contain:layout paint;
    }

    /* ═══════════════════════════════════════════
       SWIPER container
       ═══════════════════════════════════════════ */
    .gg-hr__swiper{
      height:75vh;
      min-height:560px;
      max-height:760px;
      width:100%;
      position:relative;
      contain:layout paint;
    }

    .gg-hr__slide{
      position:relative;
      width:100%;
      height:100%;
      overflow:hidden;
      transform:translate3d(0,0,0);
      backface-visibility:hidden;
      -webkit-backface-visibility:hidden;
      will-change:opacity;
      background:var(--gg-black);
    }

    /* ═══════════════════════════════════════════
       BG IMAGE — wrapper holds the styling + animations,
       img tag stays clean for lazy-load compatibility
       ═══════════════════════════════════════════ */
    .gg-hr__bg-wrap{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      z-index:1;
      overflow:hidden;
      transform:scale(1.06) translate3d(0,0,0);
      will-change:transform;
      backface-visibility:hidden;
      -webkit-backface-visibility:hidden;
      animation:gg-hr-kenburns 22s ease-in-out infinite alternate;
    }
    .gg-hr__bg{
      width:100%!important;
      height:100%!important;
      object-fit:cover;
      object-position:center right;
      display:block;
    }
    @keyframes gg-hr-kenburns{
      0%{transform:scale(1.04) translate3d(0,0,0)}
      100%{transform:scale(1.12) translate3d(-2%,-1%,0)}
    }

    /* Cinematic overlay — dark left, red-tint right */
    .gg-hr__overlay{
      position:absolute;inset:0;z-index:2;
      background:
        linear-gradient(to bottom,rgba(10,10,10,.5) 0%,rgba(10,10,10,0) 30%,rgba(10,10,10,0) 60%,rgba(10,10,10,.55) 100%),
        linear-gradient(100deg,rgba(10,10,10,.96) 0%,rgba(10,10,10,.9) 22%,rgba(10,10,10,.65) 48%,rgba(10,10,10,.25) 72%,rgba(237,41,56,.2) 100%);
    }

    /* Atmospheric red glow behind text */
    .gg-hr__glow{
      position:absolute;top:-10%;left:-20%;width:60%;height:100%;
      background:radial-gradient(ellipse at 45% 50%,rgba(237,41,56,.3) 0%,transparent 60%);
      filter:blur(80px);
      z-index:3;
      pointer-events:none;
      animation:gg-hr-glow 22s ease-in-out infinite;
      will-change:transform,opacity;
    }
    @keyframes gg-hr-glow{
      0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.9}
      50%{transform:translate3d(8%,3%,0) scale(1.2);opacity:1}
    }

    /* Film grain texture */
    .gg-hr__grain{
      position:absolute;inset:0;z-index:4;pointer-events:none;
      background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
      mix-blend-mode:overlay;
      opacity:.5;
    }


    /* ═══════════════════════════════════════════
       CONTENT — left-aligned
       ═══════════════════════════════════════════ */
    .gg-hr__content{
      position:absolute;inset:0;
      z-index:10;
      display:flex;
      align-items:center;
      padding:var(--gg-sp-8) 0 var(--gg-sp-20);
    }

    .gg-hr__inner{
      width:100%;
      max-width:none;
      margin:0 auto;
      padding:0 var(--gg-sp-10);
    }

    .gg-hr__main{
      display:flex;
      flex-direction:column;
      gap:var(--gg-sp-5);
      max-width:760px;
    }

    /* Eyebrow — small red pill */
    .gg-hr__eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      padding:6px 14px;
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-2xs);
      font-weight:700;
      color:var(--gg-white);
      background:rgba(237,41,56,.18);
      box-shadow:0 0 0 1px rgba(237,41,56,.45) inset;
      border-radius:999px;
      letter-spacing:.12em;
      text-transform:uppercase;
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      width:fit-content;
    }
    .gg-hr__eyebrow::before{
      content:'';
      width:6px;height:6px;
      background:var(--gg-red);
      border-radius:50%;
      box-shadow:0 0 8px var(--gg-red);
      animation:gg-hr-pulse 1.8s ease-in-out infinite;
      flex-shrink:0;
    }
    @keyframes gg-hr-pulse{
      0%,100%{opacity:1;transform:scale(1)}
      50%{opacity:.5;transform:scale(1.4)}
    }

    /* Title */
    .gg-hr__title{
      font-family:var(--gg-font-head);
      font-size:clamp(2.5rem,5.5vw,var(--gg-text-6xl));
      font-weight:800;
      color:var(--gg-white);
      line-height:.95;
      letter-spacing:-.035em;
      text-shadow:0 2px 40px rgba(0,0,0,.4);
    }
    .gg-hr__title-accent{
      display:inline-block;
      background:linear-gradient(135deg,var(--gg-red) 0%,#FF6B7E 100%);
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
      position:relative;
    }
    .gg-hr__title-accent::after{
      content:'';
      position:absolute;
      bottom:.04em;left:0;
      width:100%;height:3px;
      background:var(--gg-red);
      border-radius:3px;
      transform-origin:left;
      transform:scaleX(0);
      transition:transform 1.2s 1s var(--gg-ease-out);
    }
    .swiper-slide-active .gg-hr__title-accent::after{transform:scaleX(1)}

    /* Subtitle */
    .gg-hr__sub{
      font-family:var(--gg-font-body);
      font-size:clamp(var(--gg-text-base),1.3vw,var(--gg-text-lg));
      color:rgba(255,255,255,.78);
      line-height:1.55;
      max-width:540px;
      text-shadow:0 1px 20px rgba(0,0,0,.5);
    }

    /* ═══════════════════════════════════════════
       CTAs
       ═══════════════════════════════════════════ */
    .gg-hr__ctas{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:var(--gg-sp-2);
    }

    .gg-hr__cta{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:15px 24px;
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-sm);
      font-weight:700;
      border-radius:var(--gg-r-lg);
      transition:transform var(--gg-dur-slow) var(--gg-ease-out),box-shadow var(--gg-dur-slow) var(--gg-ease-out),background var(--gg-dur-fast) ease;
      white-space:nowrap;
      position:relative;
      overflow:hidden;
      -webkit-tap-highlight-color:transparent;
    }
    .gg-hr__cta i{font-size:14px;transition:transform var(--gg-dur-slow) var(--gg-ease-out)}

    /* Red primary — with shine sweep */
    .gg-hr__cta--red{
      background:linear-gradient(135deg,var(--gg-red),var(--gg-red-deep));
      color:var(--gg-white);
      box-shadow:0 4px 14px var(--gg-red-glow),0 1px 0 rgba(255,255,255,.1) inset,0 -1px 0 rgba(0,0,0,.2) inset;
    }
    .gg-hr__cta--red::before{
      content:'';
      position:absolute;
      top:0;left:-100%;
      width:100%;height:100%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
      transition:left .8s var(--gg-ease);
    }
    .gg-hr__cta--red:hover{
      transform:translateY(-2px);
      box-shadow:0 14px 32px var(--gg-red-glow),0 1px 0 rgba(255,255,255,.2) inset;
    }
    .gg-hr__cta--red:hover::before{left:100%}

    /* White */
    .gg-hr__cta--white{
      background:var(--gg-white);
      color:var(--gg-black);
      box-shadow:0 4px 14px rgba(0,0,0,.25);
    }
    .gg-hr__cta--white:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.35)}

    /* Glass */
    .gg-hr__cta--glass{
      background:rgba(255,255,255,.08);
      color:var(--gg-white);
      box-shadow:0 0 0 1px rgba(255,255,255,.25) inset;
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
    }
    .gg-hr__cta--glass:hover{
      background:rgba(255,255,255,.16);
      transform:translateY(-2px);
      box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 8px 24px rgba(0,0,0,.2);
    }

    /* ═══════════════════════════════════════════
       CITIES — one line on desktop
       ═══════════════════════════════════════════ */
    .gg-hr__cities-wrap{
      display:flex;
      align-items:center;
      gap:var(--gg-sp-3);
      padding-top:var(--gg-sp-5);
      margin-top:var(--gg-sp-2);
      border-top:1px solid rgba(255,255,255,.12);
      flex-wrap:nowrap;
    }

    .gg-hr__cities-label{
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-2xs);
      font-weight:700;
      color:rgba(255,255,255,.55);
      letter-spacing:.14em;
      text-transform:uppercase;
      flex-shrink:0;
      padding-right:var(--gg-sp-3);
      border-right:1px solid rgba(255,255,255,.12);
      white-space:nowrap;
    }

    .gg-hr__cities{
      display:flex;
      align-items:center;
      gap:6px;
      flex-wrap:nowrap;
      flex:1;
      min-width:0;
    }

    .gg-hr__city{
      display:inline-flex;
      align-items:center;
      gap:5px;
      padding:6px 12px;
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-xs);
      font-weight:600;
      color:rgba(255,255,255,.85);
      background:rgba(255,255,255,.06);
      box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;
      border-radius:var(--gg-r-md);
      white-space:nowrap;
      flex-shrink:0;
      transition:background var(--gg-dur-fast) ease,box-shadow var(--gg-dur-fast) ease,color var(--gg-dur-fast) ease;
      -webkit-tap-highlight-color:transparent;
    }
    .gg-hr__city i{font-size:10px;color:var(--gg-red)}
    .gg-hr__city:hover{
      background:rgba(237,41,56,.2);
      box-shadow:0 0 0 1px rgba(237,41,56,.5) inset;
      color:var(--gg-white);
    }

    /* ═══════════════════════════════════════════
       Desktop nav
       ═══════════════════════════════════════════ */
    .gg-hr__counter{
      position:absolute;
      bottom:var(--gg-sp-8);
      left:var(--gg-sp-10);
      z-index:11;
      display:flex;
      align-items:center;
      gap:10px;
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-xs);
      font-weight:600;
      color:rgba(255,255,255,.6);
      letter-spacing:.14em;
      text-transform:uppercase;
    }
    .gg-hr__counter-num{
      color:var(--gg-white);
      font-size:var(--gg-text-lg);
      font-weight:800;
      letter-spacing:-.02em;
    }
    .gg-hr__counter-num-accent{color:var(--gg-red)}
    .gg-hr__counter-bar{width:32px;height:1px;background:rgba(255,255,255,.3)}

    .gg-hr__nav{
      position:absolute;
      bottom:var(--gg-sp-8);
      right:var(--gg-sp-10);
      z-index:11;
      display:flex;
      align-items:center;
      gap:var(--gg-sp-3);
    }

    .gg-hr__pagination{
      display:flex!important;
      gap:6px;
      align-items:center;
      position:static!important;
      width:auto!important;
    }
    .gg-hr__pagination .swiper-pagination-bullet{
      width:8px;height:8px;
      background:rgba(255,255,255,.3)!important;
      opacity:1!important;
      margin:0!important;
      cursor:pointer;
      padding:0;
      transition:width var(--gg-dur) var(--gg-ease),background var(--gg-dur) ease;
    }
    .gg-hr__pagination .swiper-pagination-bullet-active{
      width:28px!important;
      border-radius:4px;
      background:var(--gg-red)!important;
      box-shadow:var(--gg-shadow-glow);
    }

    .gg-hr__arrow{
      width:40px;height:40px;
      display:inline-flex;
      align-items:center;justify-content:center;
      border-radius:var(--gg-r-md);
      background:rgba(255,255,255,.1);
      box-shadow:0 0 0 1px rgba(255,255,255,.2) inset;
      color:var(--gg-white);
      font-size:15px;
      transition:all var(--gg-dur-fast) ease;
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
    }
    .gg-hr__arrow:hover{
      background:var(--gg-red);
      transform:scale(1.05);
    }

    /* Progress bar */
    .gg-hr__progress{
      position:absolute;
      bottom:0;left:0;right:0;
      height:3px;
      background:rgba(255,255,255,.08);
      z-index:12;
    }
    .gg-hr__progress-bar{
      height:100%;
      background:linear-gradient(90deg,var(--gg-red),#FF5A6B);
      box-shadow:var(--gg-shadow-glow);
      transform-origin:left;
      transform:scaleX(0);
      animation:gg-hr-progress 6s linear forwards;
      will-change:transform;
    }
    @keyframes gg-hr-progress{
      0%{transform:scaleX(0)}
      100%{transform:scaleX(1)}
    }

    /* ═══════════════════════════════════════════
       Smooth staggered entrance
       ═══════════════════════════════════════════ */
    .gg-hr__eyebrow,
    .gg-hr__title,
    .gg-hr__sub,
    .gg-hr__ctas,
    .gg-hr__cities-wrap{
      opacity:0;
      transform:translate3d(0,20px,0);
      transition:opacity .9s var(--gg-ease-out),transform .9s var(--gg-ease-out);
    }
    .swiper-slide-active .gg-hr__eyebrow{opacity:1;transform:translate3d(0,0,0);transition-delay:.3s}
    .swiper-slide-active .gg-hr__title{opacity:1;transform:translate3d(0,0,0);transition-delay:.5s}
    .swiper-slide-active .gg-hr__sub{opacity:1;transform:translate3d(0,0,0);transition-delay:.7s}
    .swiper-slide-active .gg-hr__ctas{opacity:1;transform:translate3d(0,0,0);transition-delay:.85s}
    .swiper-slide-active .gg-hr__cities-wrap{opacity:1;transform:translate3d(0,0,0);transition-delay:1s}


    /* ═══════════════════════════════════════════════════════════════════════
       RESPONSIVE
       ═══════════════════════════════════════════════════════════════════════ */

    /* 13" laptop */
    @media(max-width:1280px){
      .gg-hr__swiper{min-height:520px;max-height:720px}
      .gg-hr__inner{padding:0 var(--gg-sp-8)}
      .gg-hr__nav{right:var(--gg-sp-8)}
      .gg-hr__counter{left:var(--gg-sp-8)}
      .gg-hr__main{max-width:700px}
      .gg-hr__title{font-size:clamp(2.25rem,4.5vw,var(--gg-text-5xl))}
    }

    /* Tablet landscape */
    @media(max-width:1024px){
      .gg-hr__swiper{height:70vh;min-height:480px}
      .gg-hr__inner{padding:0 var(--gg-sp-6)}
      .gg-hr__nav{right:var(--gg-sp-6)}
      .gg-hr__counter{left:var(--gg-sp-6)}
      .gg-hr__title{font-size:clamp(2rem,4vw,var(--gg-text-4xl))}
      .gg-hr__main{max-width:620px}
      .gg-hr__sub{font-size:var(--gg-text-base)}
      .gg-hr__cta{padding:13px 20px;font-size:var(--gg-text-xs)}
    }

    /* Tablet portrait */
    @media(max-width:900px){
      .gg-hr__swiper{height:65vh;min-height:520px}
      .gg-hr__title{font-size:clamp(var(--gg-text-3xl),4.5vw,2.75rem)}
      .gg-hr__main{max-width:580px}
      .gg-hr__cities{gap:5px}
      .gg-hr__city{padding:5px 10px;font-size:var(--gg-text-2xs)}
      .gg-hr__cities-label{font-size:var(--gg-text-2xs)}
    }

    /* Phone — native app feel */
    @media(max-width:768px){
      .gg-hr__swiper{height:50vh;min-height:440px;max-height:560px}
      .gg-hr__slide{height:100%}

      /* Wrapper handles transform + disables Ken Burns on mobile */
      .gg-hr__bg-wrap{
        transform:scale(1.02) translate3d(0,0,0);
        animation:none;
      }
      /* Img stays minimal — just adjust cropping position */
      .gg-hr__bg{
        object-position:center center;
      }

      .gg-hr__overlay{
        background:linear-gradient(to bottom,rgba(10,10,10,.35) 0%,rgba(10,10,10,0) 20%,rgba(10,10,10,0) 35%,rgba(10,10,10,.75) 58%,rgba(10,10,10,.95) 80%,rgba(10,10,10,1) 100%);
      }

      .gg-hr__glow{
        top:40%;left:-20%;width:140%;height:60%;
        filter:blur(60px);
        background:radial-gradient(ellipse at 50% 40%,rgba(237,41,56,.35) 0%,transparent 65%);
        animation:none;
      }

      .gg-hr__grain{opacity:.3}

      .gg-hr__content{
        position:absolute;
        inset:auto 0 0 0;
        align-items:flex-end;
        padding:0;
        height:auto;
      }
      .gg-hr__inner{padding:var(--gg-sp-6) 0 44px}
      .gg-hr__main{max-width:100%;width:100%;gap:var(--gg-sp-3);padding:0}

      .gg-hr__eyebrow,
      .gg-hr__title,
      .gg-hr__sub{
        margin-left:var(--gg-sp-5);
        margin-right:var(--gg-sp-5);
      }
      .gg-hr__eyebrow{font-size:.625rem;padding:5px 12px;width:fit-content}
      .gg-hr__title{font-size:1.75rem;line-height:1.05;letter-spacing:-.025em}
      .gg-hr__sub{font-size:var(--gg-text-xs);line-height:1.5}

      /* CTAs — horizontal scroll row */
      .gg-hr__ctas{
        flex-direction:row;
        flex-wrap:nowrap;
        overflow-x:auto;
        overflow-y:visible;
        scrollbar-width:none;
        -ms-overflow-style:none;
        -webkit-overflow-scrolling:touch;
        gap:8px;
        margin:var(--gg-sp-2) 0 0 0;
        padding:4px var(--gg-sp-5);
        scroll-snap-type:x mandatory;
        scroll-padding-left:var(--gg-sp-5);
        width:100%;
      }
      .gg-hr__ctas::-webkit-scrollbar{display:none;width:0;height:0}
      .gg-hr__cta{
        flex-shrink:0;
        flex-grow:0;
        padding:11px 16px;
        font-size:var(--gg-text-xs);
        border-radius:var(--gg-r-md);
        scroll-snap-align:start;
      }
      .gg-hr__cta i{font-size:12px}

      /* Cities — horizontal scroll */
      .gg-hr__cities-wrap{
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:0;
        padding:var(--gg-sp-3) 0 0 0;
        margin:var(--gg-sp-2) 0 0 0;
        border-top:1px solid rgba(255,255,255,.12);
        width:100%;
        overflow:hidden;
        flex-wrap:nowrap;
      }
      .gg-hr__cities-label{display:none}
      .gg-hr__cities{
        flex:1;
        flex-direction:row;
        flex-wrap:nowrap;
        overflow-x:auto;
        overflow-y:hidden;
        scrollbar-width:none;
        -ms-overflow-style:none;
        -webkit-overflow-scrolling:touch;
        width:100%;
        min-width:0;
        padding:4px var(--gg-sp-5);
        margin:0;
        scroll-snap-type:x proximity;
      }
      .gg-hr__cities::-webkit-scrollbar{display:none;width:0;height:0}
      .gg-hr__city{flex-shrink:0;flex-grow:0;scroll-snap-align:start}

      /* Hide desktop chrome */
      .gg-hr__counter{display:none}
      .gg-hr__arrow{display:none}

      .gg-hr__nav{
        position:absolute;
        bottom:var(--gg-sp-3);
        left:0;right:0;
        z-index:13;
        display:flex;
        justify-content:center;
        gap:0;
        padding:0;
      }
      .gg-hr__pagination .swiper-pagination-bullet{width:6px!important;height:6px!important}
      .gg-hr__pagination .swiper-pagination-bullet-active{width:22px!important}
    }

    /* Small phone */
    @media(max-width:480px){
      .gg-hr__swiper{height:48vh;min-height:420px;max-height:520px}
      .gg-hr__inner{padding:var(--gg-sp-5) 0 40px}
      .gg-hr__eyebrow,
      .gg-hr__title,
      .gg-hr__sub{
        margin-left:var(--gg-sp-4);
        margin-right:var(--gg-sp-4);
      }
      .gg-hr__title{font-size:1.5rem}
      .gg-hr__sub{font-size:var(--gg-text-xs)}
      .gg-hr__ctas{padding:4px var(--gg-sp-4);scroll-padding-left:var(--gg-sp-4)}
      .gg-hr__cta{padding:10px 14px;font-size:var(--gg-text-2xs)}
      .gg-hr__cta i{font-size:12px}
      .gg-hr__cities{padding:4px var(--gg-sp-4)}
    }

    /* Tiny phone */
    @media(max-width:380px){
      .gg-hr__swiper{height:46vh;min-height:400px;max-height:480px}
      .gg-hr__inner{padding:var(--gg-sp-4) 0 36px}
      .gg-hr__eyebrow,
      .gg-hr__title,
      .gg-hr__sub{
        margin-left:var(--gg-sp-3);
        margin-right:var(--gg-sp-3);
      }
      .gg-hr__title{font-size:1.375rem}
      .gg-hr__ctas{padding:4px var(--gg-sp-3);scroll-padding-left:var(--gg-sp-3)}
      .gg-hr__cta{padding:10px 12px;font-size:.625rem}
      .gg-hr__cities{padding:4px var(--gg-sp-3)}
      .gg-hr__city{padding:5px 10px;font-size:var(--gg-text-2xs)}
    }

    /* Landscape phone */
    @media(max-width:900px) and (orientation:landscape) and (max-height:500px){
      .gg-hr__swiper{height:100vh;min-height:0;max-height:none}
      .gg-hr__bg{object-position:center}
      .gg-hr__content{align-items:center;padding:var(--gg-sp-6) 0}
      .gg-hr__inner{padding:0 var(--gg-sp-6)}
      .gg-hr__main{max-width:500px;gap:var(--gg-sp-3)}
      .gg-hr__eyebrow,.gg-hr__title,.gg-hr__sub{margin-left:0;margin-right:0}
      .gg-hr__title{font-size:clamp(var(--gg-text-2xl),3.5vw,2rem)}
      .gg-hr__sub{font-size:var(--gg-text-sm)}
      .gg-hr__ctas{flex-direction:row;flex-wrap:wrap;overflow:visible;padding:0;margin:var(--gg-sp-2) 0 0 0}
      .gg-hr__cta{flex:0 0 auto;padding:10px 16px;font-size:var(--gg-text-xs);scroll-snap-align:none}
      .gg-hr__cities-wrap{padding:var(--gg-sp-3) 0 0 0;margin-top:var(--gg-sp-2)}
    }

    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
      .gg-hr__bg-wrap,.gg-hr__glow{animation:none!important}
    }
    /* --- GG-HR: End --- */

     /* ═══════════════════════════════════════════════════════════════════════
       ╔═══════════════════════════════════════════════════════════════════╗
       ║   GG-WC — WHY CHOOSE GOGETER                                      ║
       ║   Premium · Cohesive · Flaticon grayscale → red on hover          ║
       ║   Goes in /assets/css/home.css                                    ║
       ╚═══════════════════════════════════════════════════════════════════╝
       ═══════════════════════════════════════════════════════════════════════ */
    /* --- GG-WC: Start --- */

    .gg-wc{
      position:relative;
      margin:0;
      padding:0;
      /* Subtle red glow — warmth without being loud */
      background:
        radial-gradient(ellipse at top right,rgba(237,41,56,.04) 0%,transparent 55%),
        radial-gradient(ellipse at bottom left,rgba(237,41,56,.03) 0%,transparent 55%),
        var(--gg-white);
    }


    /* ═══════════════════════════════════════════
       CARDS ROW — 6 columns, edge to edge
       ═══════════════════════════════════════════ */
    .gg-wc__row{
      position:relative;
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:0;
      scroll-behavior:smooth;
    }

    /* Card */
    .gg-wc__card{
      position:relative;
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
      gap:var(--gg-sp-3);
      padding:var(--gg-sp-6) var(--gg-sp-4);
      transition:background var(--gg-dur-slow) ease;
    }

    /* Vertical divider — Apple-like barely-there line */
    .gg-wc__card:not(:last-child)::after{
      content:'';
      position:absolute;
      top:0;
      bottom:0;
      right:0;
      width:1px;
      background:var(--gg-gray-100);
    }

    /* Subtle red glow on hover */
    .gg-wc__card:hover{
      background:linear-gradient(180deg,rgba(237,41,56,.03) 0%,rgba(237,41,56,.01) 100%);
    }


    /* ═══════════════════════════════════════════
       ICON — Bootstrap line icons (clean, cohesive)
       ═══════════════════════════════════════════ */
    .gg-wc__icon{
      font-size:36px;
      color:var(--gg-red);
      line-height:1;
      display:inline-block;
      transition:transform var(--gg-dur-slow) var(--gg-ease-out);
    }

    .gg-wc__card:hover .gg-wc__icon{
      transform:scale(1.08) translate3d(0,-2px,0);
    }


    /* ═══════════════════════════════════════════
       TEXT — premium typography
       ═══════════════════════════════════════════ */
    .gg-wc__card-title{
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-sm);
      font-weight:700;
      color:var(--gg-black);
      line-height:1.3;
      letter-spacing:-.015em;
      margin-top:var(--gg-sp-1);
      white-space:nowrap;
    }

    .gg-wc__card-desc{
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-xs);
      color:var(--gg-gray-500);
      line-height:1.5;
      /* Limit to 2 lines with ellipsis if overflow */
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }


    /* ═══════════════════════════════════════════════════════════════════════
       RESPONSIVE
       ═══════════════════════════════════════════════════════════════════════ */

    @media(max-width:1280px){
      .gg-wc__card{padding:var(--gg-sp-5) var(--gg-sp-3)}
      .gg-wc__icon{font-size:32px}
    }

    @media(max-width:1100px){
      .gg-wc__card{padding:var(--gg-sp-4) var(--gg-sp-3);gap:var(--gg-sp-2)}
      .gg-wc__icon{font-size:28px}
      .gg-wc__card-desc{font-size:var(--gg-text-2xs)}
    }


    /* ═══════════════════════════════════════════
       TABLET/MOBILE — horizontal scroll
       230px+ cards so titles fit in one line
       ═══════════════════════════════════════════ */
    @media(max-width:1024px){
      .gg-wc__row{
        display:flex;
        grid-template-columns:none;
        overflow-x:auto;
        overflow-y:visible;
        scrollbar-width:none;
        -ms-overflow-style:none;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x mandatory;
        scroll-padding-left:0;
        padding:0;
        gap:0;
        align-items:stretch;
      }
      .gg-wc__row::-webkit-scrollbar{display:none;width:0;height:0}

      .gg-wc__card{
        /* 240px — ensures all titles fit in one line */
        flex:0 0 240px;
        min-width:240px;
        max-width:240px;
        scroll-snap-align:start;
        padding:var(--gg-sp-5) var(--gg-sp-4) var(--gg-sp-4);
        gap:var(--gg-sp-2);
        background:transparent;
      }

      /* Full-height divider line */
      .gg-wc__card:not(:last-child)::after{
        top:0;bottom:0;
      }

      /* Tap feedback */
      .gg-wc__card:active{
        background:linear-gradient(180deg,rgba(237,41,56,.04) 0%,rgba(237,41,56,.015) 100%);
      }
      .gg-wc__card:active .gg-wc__icon{transform:scale(1.08)}
    }

    @media(max-width:768px){
      .gg-wc__card{
        flex:0 0 235px;
        min-width:235px;
        max-width:235px;
        padding:var(--gg-sp-5) var(--gg-sp-4) var(--gg-sp-4);
      }
      .gg-wc__icon{font-size:30px}
    }

    @media(max-width:480px){
      .gg-wc__card{
        flex:0 0 230px;
        min-width:230px;
        max-width:230px;
        padding:var(--gg-sp-4) var(--gg-sp-4) var(--gg-sp-4);
      }
      .gg-wc__icon{font-size:28px}
      .gg-wc__card-title{font-size:var(--gg-text-sm)}
    }

    @media(max-width:380px){
      .gg-wc__card{
        flex:0 0 220px;
        min-width:220px;
        max-width:220px;
      }
      .gg-wc__icon{font-size:26px}
    }

    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
    }
    /* --- GG-WC: End --- */

   /* ═══════════════════════════════════════════════════════════════════════
       ╔═══════════════════════════════════════════════════════════════════╗
       ║   GG-CAT — POPULAR CATEGORIES                                     ║
       ║   Compact 45vh · Horizontal card layout · Premium heading         ║
       ║   Goes in /assets/css/home.css                                    ║
       ╚═══════════════════════════════════════════════════════════════════╝
       ═══════════════════════════════════════════════════════════════════════ */
    /* --- GG-CAT: Start --- */

    .gg-cat{
      position:relative;
      min-height:45vh;
      padding:var(--gg-sp-8) 0;
      /* White with subtle red glows — warm and alive */
      background:
        radial-gradient(ellipse at top right,rgba(237,41,56,.06) 0%,transparent 55%),
        radial-gradient(ellipse at bottom left,rgba(237,41,56,.04) 0%,transparent 55%),
        var(--gg-white);
      display:flex;
      flex-direction:column;
      justify-content:center;
    }


    /* ═══════════════════════════════════════════
       HEADER — premium left-aligned
       Small red lining + eyebrow + big title + sub
       ═══════════════════════════════════════════ */
    .gg-cat__header{
      padding:0 var(--gg-sp-10);
      margin-bottom:var(--gg-sp-6);
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:var(--gg-sp-6);
    }

    .gg-cat__intro{
      display:flex;
      flex-direction:column;
      gap:var(--gg-sp-2);
      max-width:620px;
    }

    /* Red line + label */
    .gg-cat__eyebrow{
      display:flex;
      align-items:center;
      gap:var(--gg-sp-3);
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-xs);
      font-weight:700;
      color:var(--gg-red)!important;
      letter-spacing:.16em;
      text-transform:uppercase;
    }
    .gg-cat__eyebrow::before{
      content:'';
      width:24px;
      height:2px;
      background:var(--gg-red);
      border-radius:2px;
    }

    /* Simple clean title with subtle red word */
    .gg-cat__title{
      font-family:var(--gg-font-head);
      font-size:clamp(var(--gg-text-xl),2.2vw,var(--gg-text-2xl));
      font-weight:700;
      color:var(--gg-black)!important;
      line-height:1.15;
      letter-spacing:-.02em;
      margin-top:var(--gg-sp-1);
    }
    .gg-cat__title-accent{
      color:var(--gg-red)!important;
    }

    .gg-cat__sub{
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-sm);
      color:var(--gg-gray-500);
      line-height:1.5;
      margin-top:var(--gg-sp-1);
      max-width:480px;
    }


    /* ═══════════════════════════════════════════
       GRID — 5 × 2 compact tiles
       ═══════════════════════════════════════════ */
    .gg-cat__grid{
      padding:0 var(--gg-sp-10);
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:var(--gg-sp-3);
    }


    /* ═══════════════════════════════════════════
       TILE — HORIZONTAL 3D card (icon left, text right)
       Premium depth with multi-layer shadows
       ═══════════════════════════════════════════ */
    .gg-cat__tile{
      position:relative;
      display:flex;
      align-items:flex-start;
      gap:var(--gg-sp-3);
      padding:var(--gg-sp-4);
      background:var(--gg-white);
      border:1px solid rgba(255,255,255,.8);
      border-radius:var(--gg-r-lg);
      /* 3D layered shadow for depth */
      box-shadow:
        0 1px 0 rgba(255,255,255,1) inset,
        0 1px 2px rgba(0,0,0,.02),
        0 4px 8px -2px rgba(0,0,0,.04),
        0 12px 24px -6px rgba(0,0,0,.06);
      transition:transform var(--gg-dur-slow) var(--gg-ease),box-shadow var(--gg-dur-slow) var(--gg-ease),border-color var(--gg-dur) ease;
      overflow:hidden;
      cursor:pointer;
      isolation:isolate;
    }

    /* Soft red ambient on hover */
    .gg-cat__tile::before{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(135deg,var(--gg-white) 0%,var(--gg-red-light) 100%);
      opacity:0;
      transition:opacity var(--gg-dur-slow) var(--gg-ease);
      z-index:-1;
    }

    .gg-cat__tile:hover{
      transform:translate3d(0,-4px,0);
      border-color:rgba(237,41,56,.15);
      box-shadow:
        0 1px 0 rgba(255,255,255,1) inset,
        0 2px 4px rgba(0,0,0,.02),
        0 8px 16px -4px rgba(237,41,56,.12),
        0 20px 40px -8px rgba(0,0,0,.08);
    }
    .gg-cat__tile:hover::before{opacity:1}


    /* ═══════════════════════════════════════════
       ICON LEFT — full color always (vibrant)
       ═══════════════════════════════════════════ */
    .gg-cat__tile-ico{
      width:44px;
      height:44px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:var(--gg-red-light);
      border-radius:var(--gg-r-md);
      transition:background var(--gg-dur) ease,transform var(--gg-dur-slow) var(--gg-ease);
      flex-shrink:0;
    }
    .gg-cat__tile-ico img{
      width:26px;
      height:26px;
      /* Full color always — no grayscale */
      transition:transform var(--gg-dur-slow) var(--gg-ease);
    }
    .gg-cat__tile:hover .gg-cat__tile-ico{
      background:var(--gg-red-light);
      transform:rotate(-6deg) scale(1.05);
    }
    .gg-cat__tile:hover .gg-cat__tile-ico img{
      transform:scale(1.05);
    }


    /* ═══════════════════════════════════════════
       CONTENT RIGHT — name + meta (subs/stats)
       ═══════════════════════════════════════════ */
    .gg-cat__tile-content{
      flex:1;
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:2px;
    }

    .gg-cat__tile-name{
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-sm);
      font-weight:700;
      color:var(--gg-red-deep);
      line-height:1.2;
      letter-spacing:-.01em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      transition:color var(--gg-dur) ease;
    }
    .gg-cat__tile:hover .gg-cat__tile-name{
      color:var(--gg-red);
    }

    /* Meta area — swap subs ↔ stats on hover (2 lines tall) */
    .gg-cat__tile-meta{
      position:relative;
      height:32px;
      overflow:hidden;
      margin-top:2px;
    }

    .gg-cat__tile-subs{
      position:absolute;
      inset:0;
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-xs);
      color:var(--gg-gray-500);
      line-height:1.4;
      /* Allow 2 lines */
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      transition:opacity .35s var(--gg-ease-out),transform .35s var(--gg-ease-out);
    }
    .gg-cat__tile:hover .gg-cat__tile-subs{
      opacity:0;
      transform:translate3d(0,-4px,0);
    }

    /* Stats — appear on hover */
    .gg-cat__tile-stats{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      gap:var(--gg-sp-2);
      opacity:0;
      transform:translate3d(0,4px,0);
      transition:opacity .35s .1s var(--gg-ease-out),transform .35s .1s var(--gg-ease-out);
    }
    .gg-cat__tile:hover .gg-cat__tile-stats{
      opacity:1;
      transform:translate3d(0,0,0);
    }

    .gg-cat__stat{
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-xs);
      color:var(--gg-gray-700);
      display:inline-flex;
      align-items:baseline;
      gap:3px;
      white-space:nowrap;
      font-weight:500;
    }
    .gg-cat__stat-num{
      font-family:var(--gg-font-head);
      font-weight:800;
      color:var(--gg-red);
      letter-spacing:-.01em;
      font-size:var(--gg-text-sm);
    }
    .gg-cat__stats-dot{
      width:4px;
      height:4px;
      background:var(--gg-red);
      border-radius:50%;
      flex-shrink:0;
    }


    /* ═══════════════════════════════════════════════════════════════════════
       RESPONSIVE
       ═══════════════════════════════════════════════════════════════════════ */

    @media(max-width:1280px){
      .gg-cat__header{padding:0 var(--gg-sp-8);margin-bottom:var(--gg-sp-5)}
      .gg-cat__grid{padding:0 var(--gg-sp-8)}
    }

    @media(max-width:1100px){
      .gg-cat__tile{padding:var(--gg-sp-3)}
      .gg-cat__tile-ico{width:40px;height:40px}
      .gg-cat__tile-ico img{width:22px;height:22px}
      .gg-cat__tile-name{font-size:var(--gg-text-xs)}
    }

    /* Tablet landscape — 4 cols + no hover fade (touch device) */
    @media(max-width:1024px){
      .gg-cat{min-height:auto;padding:var(--gg-sp-8) 0}
      .gg-cat__header{padding:0 var(--gg-sp-6);margin-bottom:var(--gg-sp-5)}
      .gg-cat__grid{
        grid-template-columns:repeat(4,1fr);
        padding:0 var(--gg-sp-6);
      }

      /* Touch devices — subs and stats BOTH always visible (no hover swap) */
      .gg-cat__tile-meta{
        position:static;
        height:auto;
        display:flex;
        flex-direction:column;
        gap:var(--gg-sp-2);
        margin-top:var(--gg-sp-1);
      }
      .gg-cat__tile-subs,
      .gg-cat__tile:hover .gg-cat__tile-subs,
      .gg-cat__tile:active .gg-cat__tile-subs{
        position:static;
        opacity:1!important;
        transform:none!important;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
        line-height:1.4;
      }
      .gg-cat__tile-stats,
      .gg-cat__tile:hover .gg-cat__tile-stats,
      .gg-cat__tile:active .gg-cat__tile-stats{
        position:static;
        opacity:1!important;
        transform:none!important;
        padding-top:var(--gg-sp-2);
        border-top:1px solid var(--gg-gray-100);
      }
    }


    /* ═══════════════════════════════════════════
       TABLET PORTRAIT / MOBILE — horizontal scroll
       ═══════════════════════════════════════════ */
    @media(max-width:900px){
      .gg-cat{padding:var(--gg-sp-6) 0}
      .gg-cat__header{
        padding:0 var(--gg-sp-5);
        margin-bottom:var(--gg-sp-4);
        flex-direction:column;
        align-items:flex-start;
      }
      .gg-cat__title{font-size:clamp(var(--gg-text-xl),6vw,var(--gg-text-2xl))}
      .gg-cat__sub{font-size:var(--gg-text-sm)}

      .gg-cat__grid{
        display:flex;
        grid-template-columns:none;
        overflow-x:auto;
        overflow-y:visible;
        scrollbar-width:none;
        -ms-overflow-style:none;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x mandatory;
        scroll-behavior:smooth;
        scroll-padding-left:var(--gg-sp-5);
        padding:0 var(--gg-sp-5) var(--gg-sp-2);
        gap:var(--gg-sp-3);
      }
      .gg-cat__grid::-webkit-scrollbar{display:none;width:0;height:0}

      /* VERTICAL STACKED LAYOUT on mobile
         Row 1: Icon
         Row 2: Category name
         Row 3: Sub-services (2 lines)
         Row 4: Stats (always visible)                             */
      .gg-cat__tile{
        flex:0 0 180px;
        min-width:180px;
        max-width:180px;
        scroll-snap-align:start;
        padding:var(--gg-sp-4);
        /* Stack vertically */
        flex-direction:column;
        align-items:flex-start;
        gap:var(--gg-sp-3);
      }

      /* Larger icon on mobile (since it stands alone on row 1) */
      .gg-cat__tile-ico{
        width:48px;
        height:48px;
        background:var(--gg-red-light);
      }
      .gg-cat__tile-ico img{
        width:28px;
        height:28px;
      }

      /* Content fills remaining width */
      .gg-cat__tile-content{
        width:100%;
        gap:var(--gg-sp-2);
      }

      /* Category name */
      .gg-cat__tile-name{
        font-size:var(--gg-text-sm);
      }

      /* Meta area becomes taller for subs + stats shown together */
      .gg-cat__tile-meta{
        position:static;
        height:auto;
        display:flex;
        flex-direction:column;
        gap:var(--gg-sp-2);
        margin-top:0;
      }

      /* Sub-services — 2 lines, ALWAYS visible on mobile
         Override desktop :hover fade rules */
      .gg-cat__tile-subs,
      .gg-cat__tile:hover .gg-cat__tile-subs,
      .gg-cat__tile:active .gg-cat__tile-subs{
        position:static;
        opacity:1!important;
        transform:none!important;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
        line-height:1.4;
      }

      /* Stats — always visible below subs (static position)
         Override desktop :hover appear rules */
      .gg-cat__tile-stats,
      .gg-cat__tile:hover .gg-cat__tile-stats,
      .gg-cat__tile:active .gg-cat__tile-stats{
        position:static;
        opacity:1!important;
        transform:none!important;
        /* Top border separator between subs and stats */
        padding-top:var(--gg-sp-2);
        border-top:1px solid var(--gg-gray-100);
      }

      /* Disable the tap swap animation on mobile (both shown) */
      .gg-cat__tile:active{
        transform:scale(.98);
        background:var(--gg-white);
      }
      .gg-cat__tile:active::before{opacity:1}
      .gg-cat__tile:active .gg-cat__tile-ico{background:var(--gg-red-light)}
      .gg-cat__tile:active .gg-cat__tile-ico img{filter:grayscale(0) opacity(1)}
    }

    @media(max-width:768px){
      .gg-cat__tile{
        flex:0 0 175px;
        min-width:175px;
        max-width:175px;
      }
    }

    @media(max-width:480px){
      .gg-cat__header{padding:0 var(--gg-sp-4)}
      .gg-cat__grid{
        padding:0 var(--gg-sp-4) var(--gg-sp-2);
        scroll-padding-left:var(--gg-sp-4);
      }
      .gg-cat__tile{
        flex:0 0 165px;
        min-width:165px;
        max-width:165px;
        padding:var(--gg-sp-3);
      }
      .gg-cat__tile-ico{
        width:44px;
        height:44px;
      }
      .gg-cat__tile-ico img{width:24px;height:24px}
    }

    @media(max-width:380px){
      .gg-cat__tile{
        flex:0 0 155px;
        min-width:155px;
        max-width:155px;
      }
    }

    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
    }
    /* --- GG-CAT: End --- */

     /* ═══════════════════════════════════════════════════════════════════════
       ╔═══════════════════════════════════════════════════════════════════╗
       ║   GG-GT — MEET THE GOGETERS (Listing Carousel)                    ║
       ║                                                                   ║
       ║   Card represents a LISTING (one business → many listings)        ║
       ║   Each listing has: title, category, sub-services, starting price ║
       ║   URL: /details/{listing-slug}                                    ║
       ║                                                                   ║
       ║   Badges stack vertically (max 2) with priority:                  ║
       ║   1. 24/7 (emergency) · 2. Trending · 3. Same Day · 4. Fast       ║
       ║                                                                   ║
       ║   Goes in /assets/css/home.css                                    ║
       ╚═══════════════════════════════════════════════════════════════════╝
       ═══════════════════════════════════════════════════════════════════════ */
    /* --- GG-GT: Start --- */

    .gg-gt{
      position:relative;
      min-height:50vh;
      padding:var(--gg-sp-8) 0;
      /* Pure white with subtle red corner glow */
      background:
        radial-gradient(ellipse at top right,rgba(237,41,56,.04) 0%,transparent 55%),
        radial-gradient(ellipse at bottom left,rgba(237,41,56,.03) 0%,transparent 55%),
        var(--gg-white);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }


    /* ═══════════════════════════════════════════
       HEADER
       ═══════════════════════════════════════════ */
    .gg-gt__header{
      position:relative;
      padding:0 var(--gg-sp-10);
      margin-bottom:var(--gg-sp-6);
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:var(--gg-sp-6);
      z-index:1;
    }

    .gg-gt__intro{
      display:flex;
      flex-direction:column;
      gap:var(--gg-sp-2);
      max-width:620px;
    }

    .gg-gt__eyebrow{
      display:flex;
      align-items:center;
      gap:var(--gg-sp-3);
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-xs);
      font-weight:700;
      color:var(--gg-red)!important;
      letter-spacing:.16em;
      text-transform:uppercase;
    }
    .gg-gt__eyebrow::before{
      content:'';
      width:24px;
      height:2px;
      background:var(--gg-red);
      border-radius:2px;
    }

    .gg-gt__title{
      font-family:var(--gg-font-head);
      font-size:clamp(var(--gg-text-xl),2.4vw,var(--gg-text-2xl));
      font-weight:700;
      color:var(--gg-black)!important;
      line-height:1.15;
      letter-spacing:-.02em;
      margin-top:var(--gg-sp-1);
    }
    .gg-gt__title-accent{
      color:var(--gg-red)!important;
    }

    .gg-gt__sub{
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-sm);
      color:var(--gg-gray-600);
      line-height:1.5;
      margin-top:var(--gg-sp-1);
      max-width:520px;
    }

    .gg-gt__nav{
      display:flex;
      gap:var(--gg-sp-2);
      flex-shrink:0;
    }
    .gg-gt__nav-btn{
      width:40px;
      height:40px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:var(--gg-white);
      border:1px solid var(--gg-gray-200);
      border-radius:50%;
      color:var(--gg-black);
      font-size:14px;
      transition:all var(--gg-dur) ease;
      cursor:pointer;
    }
    .gg-gt__nav-btn:hover:not(.swiper-button-disabled){
      background:var(--gg-red);
      border-color:var(--gg-red);
      color:var(--gg-white);
      transform:scale(1.05);
      box-shadow:0 6px 16px var(--gg-red-glow);
    }
    .gg-gt__nav-btn.swiper-button-disabled{
      opacity:.35;
      cursor:not-allowed;
    }


    /* ═══════════════════════════════════════════
       SWIPER CONTAINER
       ═══════════════════════════════════════════ */
    .gg-gt__swiper-wrap{
      position:relative;
      padding:0 var(--gg-sp-10);
    }

    .gg-gt__swiper{
      overflow:visible!important;
      padding-bottom:var(--gg-sp-2);
    }

    /* Force all swiper slides to stretch to equal height */
    .gg-gt__swiper .swiper-wrapper{
      align-items:stretch;
    }
    .gg-gt__swiper .swiper-slide{
      height:auto;
      display:flex;
    }
    .gg-gt__swiper .swiper-slide > .gg-gt__card{
      width:100%;
    }

    .gg-gt__swiper::before,
    .gg-gt__swiper::after{
      content:'';
      position:absolute;
      top:0;bottom:0;
      width:var(--gg-sp-10);
      z-index:2;
      pointer-events:none;
    }
    .gg-gt__swiper::before{
      left:calc(var(--gg-sp-10) * -1);
      background:linear-gradient(to right,var(--gg-white) 0%,transparent 100%);
    }
    .gg-gt__swiper::after{
      right:calc(var(--gg-sp-10) * -1);
      background:linear-gradient(to left,var(--gg-white) 0%,transparent 100%);
    }


    /* ═══════════════════════════════════════════
       LISTING CARD
       ═══════════════════════════════════════════ */
    .gg-gt__card{
      position:relative;
      display:flex;
      flex-direction:column;
      background:var(--gg-white);
      border:1px solid var(--gg-gray-100);
      border-radius:var(--gg-r-xl);
      overflow:hidden;
      transition:transform var(--gg-dur-slow) var(--gg-ease),box-shadow var(--gg-dur-slow) var(--gg-ease),border-color var(--gg-dur) ease;
      cursor:pointer;
      height:100%;
    }

    .gg-gt__card:hover{
      transform:translate3d(0,-4px,0);
      border-color:rgba(237,41,56,.15);
      box-shadow:0 16px 32px -8px rgba(237,41,56,.12),0 6px 12px -4px rgba(0,0,0,.05);
    }


    /* ═══════════════════════════════════════════
       LISTING IMAGE + BADGES STACK
       Badges stack vertically on top-left
       Save icon always top-right
       ═══════════════════════════════════════════ */
    .gg-gt__card-img-wrap{
      position:relative;
      aspect-ratio:16/11;
      background:var(--gg-gray-100);
      overflow:hidden;
    }
    .gg-gt__card-img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .7s var(--gg-ease);
    }
    .gg-gt__card:hover .gg-gt__card-img{
      transform:scale(1.06);
    }


    /* BADGE STACK — vertical column on top-left */
    .gg-gt__badges{
      position:absolute;
      top:var(--gg-sp-2);
      left:var(--gg-sp-2);
      display:flex;
      flex-direction:column;
      gap:4px;
      z-index:2;
      align-items:flex-start;
    }

    /* Individual badge */
    .gg-gt__sbadge{
      display:inline-flex;
      align-items:center;
      gap:3px;
      padding:3px 8px;
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-2xs);
      font-weight:700;
      color:var(--gg-white);
      border-radius:999px;
      letter-spacing:.04em;
      text-transform:uppercase;
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }
    .gg-gt__sbadge i{font-size:9px}

    /* Badge variants (priority: 24/7 > Trending > Same Day > Fast) */
    .gg-gt__sbadge--emergency{
      background:linear-gradient(135deg,#F97316,#C2410C);
      box-shadow:0 3px 10px rgba(249,115,22,.3);
    }
    .gg-gt__sbadge--trending{
      background:linear-gradient(135deg,var(--gg-red),var(--gg-red-deep));
      box-shadow:0 3px 10px rgba(237,41,56,.3);
    }
    .gg-gt__sbadge--sameday{
      background:linear-gradient(135deg,#2563EB,#1E40AF);
      box-shadow:0 3px 10px rgba(37,99,235,.3);
    }
    .gg-gt__sbadge--fast{
      background:linear-gradient(135deg,#7C3AED,#5B21B6);
      box-shadow:0 3px 10px rgba(124,58,237,.3);
    }


    /* SAVE / PIN TOGGLE */
    .gg-gt__save{
      position:absolute;
      top:var(--gg-sp-2);
      right:var(--gg-sp-2);
      width:32px;
      height:32px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(255,255,255,.95);
      border-radius:50%;
      color:var(--gg-gray-600);
      font-size:14px;
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      transition:all var(--gg-dur) ease;
      box-shadow:0 2px 6px rgba(0,0,0,.08);
      z-index:3;
      cursor:pointer;
    }
    .gg-gt__save:hover{
      color:var(--gg-red);
      background:var(--gg-white);
      transform:scale(1.1);
    }
    .gg-gt__save .gg-gt__save-filled{display:none}
    .gg-gt__save .gg-gt__save-outline{display:inline-block}
    /* SAVED STATE — pin locked upright, red fill */
    .gg-gt__save.is-saved{
      color:var(--gg-red);
      background:var(--gg-red-light);
      box-shadow:0 2px 8px rgba(237,41,56,.2);
    }
    .gg-gt__save.is-saved .gg-gt__save-outline{display:none}
    .gg-gt__save.is-saved .gg-gt__save-filled{
      display:inline-block;
      animation:ggGtPinStab .45s var(--gg-ease);
    }
    /* Pin stab — rotates from angled to upright, then slight overshoot */
    @keyframes ggGtPinStab{
      0%{transform:scale(.4) rotate(-45deg);opacity:0}
      50%{transform:scale(1.25) rotate(10deg);opacity:1}
      75%{transform:scale(.95) rotate(-3deg)}
      100%{transform:scale(1) rotate(0);opacity:1}
    }


    /* ═══════════════════════════════════════════
       CARD BODY — listing info
       ═══════════════════════════════════════════ */
    .gg-gt__card-body{
      display:flex;
      flex-direction:column;
      gap:var(--gg-sp-2);
      padding:var(--gg-sp-3) var(--gg-sp-4) var(--gg-sp-4);
      flex:1;
    }

    /* Category + rating row */
    .gg-gt__card-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:var(--gg-sp-2);
    }
    .gg-gt__category{
      display:inline-flex;
      align-items:center;
      gap:4px;
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-2xs);
      font-weight:700;
      color:var(--gg-red-deep)!important;
      background:var(--gg-red-light);
      padding:3px 7px;
      border-radius:var(--gg-r-sm);
      letter-spacing:.04em;
      text-transform:uppercase;
    }
    .gg-gt__rating{
      display:inline-flex;
      align-items:center;
      gap:3px;
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-xs);
      font-weight:700;
      color:var(--gg-black)!important;
    }
    .gg-gt__rating i{
      color:#F59E0B;
      font-size:11px;
    }
    .gg-gt__rating-count{
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-2xs);
      font-weight:500;
      color:var(--gg-gray-500);
    }


    /* LISTING TITLE (H1 on detail page) — long-tail style
       Reserves 2 lines of space so all cards align consistently
       Short titles stay on line 1, long titles use line 2, 3+ truncates */
    .gg-gt__card-name{
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-sm);
      font-weight:700;
      color:var(--gg-black)!important;
      line-height:1.3;
      letter-spacing:-.01em;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      text-overflow:ellipsis;
      transition:color var(--gg-dur) ease;
      /* Reserve space for 2 lines to keep card heights uniform */
      min-height:calc(var(--gg-text-sm) * 1.3 * 2);
    }
    .gg-gt__card:hover .gg-gt__card-name{
      color:var(--gg-red)!important;
    }


    /* SUB-SERVICES — comma-separated list, truncated */
    .gg-gt__card-subs{
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-xs);
      font-weight:500;
      color:var(--gg-gray-600);
      line-height:1.4;
      display:-webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }


    /* META ROW — business name + verified tick + location */
    .gg-gt__meta{
      display:flex;
      align-items:center;
      gap:var(--gg-sp-1);
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-2xs);
      color:var(--gg-gray-500);
      min-width:0;
    }
    .gg-gt__meta-provider{
      display:inline-flex;
      align-items:center;
      gap:3px;
      min-width:0;
      overflow:hidden;
    }
    .gg-gt__meta-provider-name{
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      font-weight:500;
    }
    .gg-gt__verified-tick{
      color:var(--gg-success);
      font-size:12px;
      flex-shrink:0;
    }
    .gg-gt__meta-dot{
      width:2px;
      height:2px;
      background:var(--gg-gray-300);
      border-radius:50%;
      flex-shrink:0;
      margin:0 3px;
    }
    .gg-gt__meta-location{
      display:inline-flex;
      align-items:center;
      gap:2px;
      white-space:nowrap;
      flex-shrink:0;
    }
    .gg-gt__meta-location i{font-size:10px}


    /* FOOTER — starting price + CTA */
    .gg-gt__card-foot{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:var(--gg-sp-2);
      padding-top:var(--gg-sp-3);
      margin-top:auto;
      border-top:1px solid var(--gg-gray-100);
    }
    .gg-gt__price-label{
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-2xs);
      font-weight:500;
      color:var(--gg-gray-500);
      letter-spacing:.02em;
      line-height:1;
    }
    .gg-gt__price-value{
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-md);
      font-weight:800;
      color:var(--gg-red-deep)!important;
      letter-spacing:-.02em;
      line-height:1.1;
      margin-top:2px;
    }
    .gg-gt__card-arrow{
      display:inline-flex;
      align-items:center;
      gap:5px;
      padding:6px 12px;
      background:var(--gg-black);
      border-radius:999px;
      color:var(--gg-white);
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-2xs);
      font-weight:700;
      letter-spacing:.04em;
      text-transform:uppercase;
      transition:all var(--gg-dur) ease;
    }
    .gg-gt__card-arrow i{font-size:10px;transition:transform var(--gg-dur) var(--gg-ease-out)}
    .gg-gt__card:hover .gg-gt__card-arrow{
      background:var(--gg-red);
      box-shadow:0 4px 12px var(--gg-red-glow);
    }
    .gg-gt__card:hover .gg-gt__card-arrow i{transform:translate3d(2px,-2px,0)}


    /* ═══════════════════════════════════════════
       SWIPER PAGINATION
       ═══════════════════════════════════════════ */
    .gg-gt__pagination{
      position:relative!important;
      display:flex;
      justify-content:center;
      gap:6px;
      margin-top:var(--gg-sp-5);
      padding:0 var(--gg-sp-10);
    }
    .gg-gt__pagination .swiper-pagination-bullet{
      width:6px;
      height:6px;
      background:var(--gg-gray-300);
      opacity:1;
      margin:0!important;
      transition:all var(--gg-dur) ease;
      cursor:pointer;
    }
    .gg-gt__pagination .swiper-pagination-bullet-active{
      width:24px;
      border-radius:3px;
      background:var(--gg-red);
    }


    /* ═══════════════════════════════════════════════════════════════════════
       RESPONSIVE
       ═══════════════════════════════════════════════════════════════════════ */

    @media(max-width:1280px){
      .gg-gt{padding:var(--gg-sp-6) 0}
      .gg-gt__header{padding:0 var(--gg-sp-8);margin-bottom:var(--gg-sp-5)}
      .gg-gt__swiper-wrap{padding:0 var(--gg-sp-8)}
      .gg-gt__swiper::before{left:calc(var(--gg-sp-8) * -1);width:var(--gg-sp-8)}
      .gg-gt__swiper::after{right:calc(var(--gg-sp-8) * -1);width:var(--gg-sp-8)}
      .gg-gt__pagination{padding:0 var(--gg-sp-8)}
    }

    @media(max-width:1024px){
      .gg-gt{min-height:auto;padding:var(--gg-sp-6) 0}
      .gg-gt__header{padding:0 var(--gg-sp-6);margin-bottom:var(--gg-sp-4)}
      .gg-gt__swiper-wrap{padding:0 var(--gg-sp-6)}
      .gg-gt__swiper::before{left:calc(var(--gg-sp-6) * -1);width:var(--gg-sp-6)}
      .gg-gt__swiper::after{right:calc(var(--gg-sp-6) * -1);width:var(--gg-sp-6)}
      .gg-gt__pagination{padding:0 var(--gg-sp-6)}
    }

    @media(max-width:900px){
      .gg-gt__header{
        padding:0 var(--gg-sp-5);
        flex-direction:column;
        align-items:flex-start;
        gap:var(--gg-sp-3);
      }
      .gg-gt__nav{display:none}
      .gg-gt__swiper-wrap{padding:0 var(--gg-sp-5)}
      .gg-gt__swiper::before{left:calc(var(--gg-sp-5) * -1);width:var(--gg-sp-5)}
      .gg-gt__swiper::after{right:calc(var(--gg-sp-5) * -1);width:var(--gg-sp-5)}
      .gg-gt__pagination{padding:0 var(--gg-sp-5);margin-top:var(--gg-sp-4)}
    }

    @media(max-width:480px){
      .gg-gt__header{padding:0 var(--gg-sp-4)}
      .gg-gt__swiper-wrap{padding:0 var(--gg-sp-4)}
      .gg-gt__swiper::before{left:calc(var(--gg-sp-4) * -1);width:var(--gg-sp-4)}
      .gg-gt__swiper::after{right:calc(var(--gg-sp-4) * -1);width:var(--gg-sp-4)}
      .gg-gt__pagination{padding:0 var(--gg-sp-4)}
    }

    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
    }
    /* --- GG-GT: End --- */

    
    /* ═══════════════════════════════════════════════════════════════════════
       ╔═══════════════════════════════════════════════════════════════════╗
       ║   GG-HW — HOW IT WORKS (Shapes + Animated)                        ║
       ║                                                                   ║
       ║   Compact premium design with floating shapes, glow animations    ║
       ║   Horizontal scroll on mobile (no stacking — keeps page short)    ║
       ║   Left: sticky headline · Right: horizontal scroll cards          ║
       ║                                                                   ║
       ║   Goes in /assets/css/home.css                                    ║
       ╚═══════════════════════════════════════════════════════════════════╝
       ═══════════════════════════════════════════════════════════════════════ */
    /* --- GG-HW: Start --- */

    .gg-hw{
      position:relative;
      min-height:45vh;
      padding:var(--gg-sp-10) 0;
      /* Deep premium black with subtle red glows */
      background:
        radial-gradient(ellipse at 20% 40%,rgba(237,41,56,.15) 0%,transparent 40%),
        radial-gradient(ellipse at 80% 60%,rgba(237,41,56,.1) 0%,transparent 45%),
        var(--gg-black);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }

    /* ═══════════════════════════════════════════
       FLOATING GEOMETRIC SHAPES (ambient background)
       Positioned in margin areas where they're VISIBLE
       (not hidden behind cards/text)
       ═══════════════════════════════════════════ */
    .gg-hw__shape{
      position:absolute;
      border-radius:50%;
      pointer-events:none;
      z-index:0;
      will-change:transform;
    }
    /* Shape 1 — top-right corner glow (above cards, visible) */
    .gg-hw__shape--1{
      top:-100px;right:-60px;
      width:280px;height:280px;
      background:radial-gradient(circle,rgba(237,41,56,.25) 0%,transparent 70%);
      animation:ggHwFloat1 14s ease-in-out infinite;
    }
    /* Shape 2 — bottom-left corner glow (below header, visible) */
    .gg-hw__shape--2{
      bottom:-80px;left:-80px;
      width:320px;height:320px;
      background:radial-gradient(circle,rgba(237,41,56,.2) 0%,transparent 70%);
      animation:ggHwFloat2 18s ease-in-out infinite;
    }
    /* Shape 3 — small white dot between header and cards (gap area) */
    .gg-hw__shape--3{
      top:50%;left:38%;
      width:80px;height:80px;
      background:radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 70%);
      animation:ggHwFloat3 12s ease-in-out infinite;
      transform:translateY(-50%);
    }
    /* Triangle — top edge center (above cards, visible) */
    .gg-hw__shape--tri{
      top:24px;right:8%;
      width:60px;height:60px;
      opacity:.25;
      animation:ggHwSpin 30s linear infinite;
    }
    /* Square — bottom edge left (below header, visible) */
    .gg-hw__shape--sq{
      bottom:24px;left:8%;
      width:48px;height:48px;
      border:2px solid rgba(237,41,56,.4);
      border-radius:var(--gg-r-md);
      animation:ggHwRotate 20s linear infinite;
    }

    @keyframes ggHwFloat1{
      0%,100%{transform:translate3d(0,0,0) scale(1)}
      50%{transform:translate3d(30px,20px,0) scale(1.08)}
    }
    @keyframes ggHwFloat2{
      0%,100%{transform:translate3d(0,0,0) scale(1)}
      50%{transform:translate3d(-25px,-30px,0) scale(.95)}
    }
    @keyframes ggHwFloat3{
      0%,100%{transform:translate3d(0,-50%,0)}
      50%{transform:translate3d(-15px,calc(-50% + 20px),0)}
    }
    @keyframes ggHwSpin{
      0%{transform:rotate(0deg)}
      100%{transform:rotate(360deg)}
    }
    @keyframes ggHwRotate{
      0%{transform:rotate(0deg)}
      100%{transform:rotate(-360deg)}
    }


    /* ═══════════════════════════════════════════
       SPLIT LAYOUT
       Left: sticky header | Right: scroll cards
       Desktop: 2 columns · Mobile: stacked
       ═══════════════════════════════════════════ */
    .gg-hw__inner{
      position:relative;
      display:grid;
      /* Smaller header column so track gets more room */
      grid-template-columns:minmax(260px,300px) 1fr;
      gap:var(--gg-sp-8);
      align-items:center;
      z-index:1;
      min-width:0;
    }


    /* ═══════════════════════════════════════════
       LEFT — sticky header with hustle tone
       ═══════════════════════════════════════════ */
    .gg-hw__header{
      padding:0 0 0 var(--gg-sp-10);
      /* Prevent content from overflowing grid cell */
      min-width:0;
    }

    .gg-hw__eyebrow{
      display:inline-flex;
      align-items:center;
      gap:var(--gg-sp-3);
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-xs);
      font-weight:700;
      color:var(--gg-red)!important;
      letter-spacing:.16em;
      text-transform:uppercase;
      margin-bottom:var(--gg-sp-3);
    }
    .gg-hw__eyebrow::before{
      content:'';
      width:24px;
      height:2px;
      background:var(--gg-red);
      border-radius:2px;
    }

    .gg-hw__title{
      font-family:var(--gg-font-head);
      font-size:clamp(var(--gg-text-xl),2.4vw,var(--gg-text-3xl));
      font-weight:700;
      color:var(--gg-white)!important;
      line-height:1.1;
      letter-spacing:-.025em;
      word-wrap:break-word;
    }
    .gg-hw__title-accent{
      color:var(--gg-red)!important;
      display:block;
    }

    .gg-hw__sub{
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-sm);
      color:var(--gg-gray-400);
      line-height:1.55;
      margin-top:var(--gg-sp-3);
      margin-bottom:var(--gg-sp-5);
      max-width:400px;
    }

    .gg-hw__cta{
      display:inline-flex;
      align-items:center;
      gap:var(--gg-sp-2);
      padding:var(--gg-sp-3) var(--gg-sp-5);
      background:var(--gg-red);
      color:var(--gg-white)!important;
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-xs);
      font-weight:700;
      letter-spacing:.06em;
      text-transform:uppercase;
      border-radius:999px;
      box-shadow:0 6px 20px rgba(237,41,56,.4);
      transition:all var(--gg-dur) var(--gg-ease);
      position:relative;
      overflow:hidden;
    }
    .gg-hw__cta::before{
      content:'';
      position:absolute;
      top:0;left:-100%;
      width:100%;height:100%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
      transition:left .7s var(--gg-ease);
    }
    .gg-hw__cta:hover::before{left:100%}
    .gg-hw__cta i{
      font-size:12px;
      transition:transform var(--gg-dur) var(--gg-ease-out);
    }
    .gg-hw__cta:hover{
      background:var(--gg-red-hover);
      transform:translate3d(0,-2px,0);
      box-shadow:0 10px 28px rgba(237,41,56,.5);
    }
    .gg-hw__cta:hover i{transform:translate3d(4px,0,0)}


    /* ═══════════════════════════════════════════
       RIGHT — horizontal scroll cards track
       ═══════════════════════════════════════════ */
    .gg-hw__track-wrap{
      position:relative;
      /* Critical: prevent grid cell from expanding */
      min-width:0;
      /* Right edge padding via track */
    }

    .gg-hw__track{
      display:flex;
      gap:var(--gg-sp-3);
      overflow-x:hidden;
      overflow-y:visible;
      scrollbar-width:none;
      -ms-overflow-style:none;
      -webkit-overflow-scrolling:touch;
      scroll-snap-type:x mandatory;
      scroll-behavior:smooth;
      padding:var(--gg-sp-3) var(--gg-sp-8) var(--gg-sp-3) 0;
      scroll-padding-left:0;
      scroll-padding-right:var(--gg-sp-8);
    }
    .gg-hw__track::-webkit-scrollbar{display:none;width:0;height:0}


    /* ═══════════════════════════════════════════
       STEP CARD — flexible width, glass morphism
       On desktop: all 4 cards fit visibly (no scroll needed)
       On mobile: fixed width with horizontal scroll
       ═══════════════════════════════════════════ */
    .gg-hw__step{
      position:relative;
      /* Flex shrink/grow equally so 4 cards fill track width */
      flex:1 1 0;
      min-width:0;
      scroll-snap-align:start;
      padding:var(--gg-sp-5);
      background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--gg-r-xl);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      overflow:hidden;
      transition:all var(--gg-dur-slow) var(--gg-ease);
      cursor:pointer;
      isolation:isolate;
    }

    /* Animated gradient glow on hover */
    .gg-hw__step::before{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(135deg,rgba(237,41,56,.15) 0%,transparent 60%);
      opacity:0;
      transition:opacity var(--gg-dur-slow) var(--gg-ease);
      z-index:-1;
    }

    .gg-hw__step:hover{
      transform:translate3d(0,-6px,0);
      border-color:rgba(237,41,56,.35);
      background:linear-gradient(145deg,rgba(237,41,56,.08),rgba(255,255,255,.02));
      box-shadow:0 20px 40px -10px rgba(237,41,56,.3);
    }
    .gg-hw__step:hover::before{opacity:1}


    /* ═══════════════════════════════════════════
       STEP HEADER — icon with geometric accent
       ═══════════════════════════════════════════ */
    .gg-hw__step-head{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:var(--gg-sp-4);
    }

    /* Icon with geometric background shape */
    .gg-hw__step-ico-wrap{
      position:relative;
      width:54px;
      height:54px;
    }
    /* Background shape behind icon */
    .gg-hw__step-ico-shape{
      position:absolute;
      inset:0;
      background:linear-gradient(135deg,var(--gg-red),var(--gg-red-deep));
      border-radius:14px;
      transform:rotate(-8deg);
      transition:transform var(--gg-dur-slow) var(--gg-ease);
      box-shadow:0 8px 20px rgba(237,41,56,.35);
    }
    .gg-hw__step:hover .gg-hw__step-ico-shape{
      transform:rotate(-16deg) scale(1.08);
    }

    /* Icon on top */
    .gg-hw__step-ico{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--gg-white);
      font-size:24px;
      transition:transform var(--gg-dur-slow) var(--gg-ease);
    }
    .gg-hw__step:hover .gg-hw__step-ico{
      transform:scale(1.1);
    }

    /* Large faded step number on right */
    .gg-hw__step-num{
      font-family:var(--gg-font-head);
      font-size:64px;
      font-weight:900;
      color:var(--gg-white);
      opacity:.06;
      letter-spacing:-.05em;
      line-height:1;
      transition:opacity var(--gg-dur-slow) ease;
    }
    .gg-hw__step:hover .gg-hw__step-num{opacity:.12}


    /* ═══════════════════════════════════════════
       STEP CONTENT
       ═══════════════════════════════════════════ */
    .gg-hw__step-title{
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-md);
      font-weight:700;
      color:var(--gg-white)!important;
      line-height:1.2;
      letter-spacing:-.01em;
      margin-bottom:var(--gg-sp-2);
      transition:color var(--gg-dur) ease;
    }
    .gg-hw__step:hover .gg-hw__step-title{
      color:var(--gg-red)!important;
    }

    .gg-hw__step-desc{
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-xs);
      color:var(--gg-gray-400);
      line-height:1.55;
    }


    /* ═══════════════════════════════════════════
       CONNECTION LINE — animated dashes between cards
       ═══════════════════════════════════════════ */
    .gg-hw__step:not(:last-child)::after{
      content:'';
      position:absolute;
      top:50%;
      right:calc(var(--gg-sp-4) * -1 - 2px);
      width:var(--gg-sp-4);
      height:1px;
      background:repeating-linear-gradient(
        to right,
        rgba(237,41,56,.4) 0,
        rgba(237,41,56,.4) 3px,
        transparent 3px,
        transparent 6px
      );
      pointer-events:none;
    }


    /* ═══════════════════════════════════════════════════════════════════════
       RESPONSIVE
       Desktop: all 4 cards fit evenly (flex:1) - no scroll
       Tablet/Mobile: switches to horizontal scroll with fixed card widths
       ═══════════════════════════════════════════════════════════════════════ */

    /* ULTRAWIDE desktop (1600+) — cap content width, centered */
    @media(min-width:1600px){
      .gg-hw__inner{
        max-width:100%;
        margin:0 auto;
        grid-template-columns:minmax(280px,320px) 1fr;
        gap:var(--gg-sp-10);
      }
    }

    @media(max-width:1280px){
      .gg-hw__inner{
        grid-template-columns:minmax(240px,280px) 1fr;
        gap:var(--gg-sp-6);
      }
      .gg-hw__header{padding-left:var(--gg-sp-8)}
      .gg-hw__track{
        padding-right:var(--gg-sp-6);
        scroll-padding-right:var(--gg-sp-6);
      }
    }

    @media(max-width:1200px){
      .gg-hw__inner{
        grid-template-columns:220px 1fr;
        gap:var(--gg-sp-5);
      }
      .gg-hw__title{font-size:var(--gg-text-xl)}
      .gg-hw__step{padding:var(--gg-sp-4)}
      .gg-hw__step-ico-wrap{width:48px;height:48px}
      .gg-hw__step-ico{font-size:20px}
      .gg-hw__step-num{font-size:52px}
      .gg-hw__step-title{font-size:var(--gg-text-sm)}
      .gg-hw__step-desc{font-size:var(--gg-text-2xs)}
    }

    /* ═══════════════════════════════════════════
       SMALL LAPTOP (13" screens) — switch to scroll
       Cards become fixed-width, scroll horizontally
       ═══════════════════════════════════════════ */
    @media(max-width:1100px){
      .gg-hw__track{
        overflow-x:auto;
      }
      .gg-hw__step{
        /* Fixed width — scrollable */
        flex:0 0 210px;
        min-width:210px;
      }
    }

    /* ═══════════════════════════════════════════
       TABLET + MOBILE — stack layout
       Header on top, scroll track below
       ═══════════════════════════════════════════ */
    @media(max-width:1024px){
      .gg-hw{min-height:auto;padding:var(--gg-sp-8) 0}
      .gg-hw__inner{
        grid-template-columns:1fr;
        gap:var(--gg-sp-5);
      }
      .gg-hw__header{
        padding:0 var(--gg-sp-6);
      }
      .gg-hw__title{font-size:clamp(var(--gg-text-xl),3vw,var(--gg-text-2xl))}
      .gg-hw__track-wrap{padding:0}
      .gg-hw__track{
        overflow-x:auto!important;
        padding:var(--gg-sp-3) var(--gg-sp-6);
        scroll-padding-left:var(--gg-sp-6);
        scroll-padding-right:var(--gg-sp-6);
      }
      .gg-hw__step{
        flex:0 0 220px;
        min-width:220px;
        padding:var(--gg-sp-5);
      }
      .gg-hw__step-ico-wrap{width:54px;height:54px}
      .gg-hw__step-ico{font-size:24px}
      .gg-hw__step-num{font-size:64px}
      .gg-hw__step-title{font-size:var(--gg-text-md)}
      .gg-hw__step-desc{font-size:var(--gg-text-xs)}
    }

    @media(max-width:768px){
      .gg-hw__header{padding:0 var(--gg-sp-5)}
      .gg-hw__track{
        overflow-x:auto!important;
        padding:var(--gg-sp-3) var(--gg-sp-5);
        scroll-padding-left:var(--gg-sp-5);
        scroll-padding-right:var(--gg-sp-5);
      }
      .gg-hw__title{font-size:var(--gg-text-xl)}
      .gg-hw__sub{font-size:var(--gg-text-xs);max-width:100%}
      .gg-hw__cta{font-size:var(--gg-text-2xs)}
    }

    /* Mobile */
    @media(max-width:560px){
      .gg-hw{padding:var(--gg-sp-6) 0}
      .gg-hw__header{padding:0 var(--gg-sp-4)}
      .gg-hw__track{
        overflow-x:auto!important;
        padding:var(--gg-sp-2) var(--gg-sp-4);
        scroll-padding-left:var(--gg-sp-4);
        scroll-padding-right:var(--gg-sp-4);
        gap:var(--gg-sp-3);
      }
      .gg-hw__title{
        font-size:clamp(var(--gg-text-lg),6vw,var(--gg-text-xl));
      }
      .gg-hw__sub{
        font-size:var(--gg-text-xs);
        margin-bottom:var(--gg-sp-4);
      }

      .gg-hw__step{
        flex:0 0 210px;
        min-width:210px;
        padding:var(--gg-sp-4);
      }
      .gg-hw__step-ico-wrap{width:48px;height:48px}
      .gg-hw__step-ico{font-size:21px}
      .gg-hw__step-num{font-size:52px}
      .gg-hw__step-title{font-size:var(--gg-text-sm)}
      .gg-hw__step-desc{font-size:var(--gg-text-2xs);line-height:1.5}

      .gg-hw__step:not(:last-child)::after{
        right:calc(var(--gg-sp-3) * -1 - 2px);
        width:var(--gg-sp-3);
      }

      .gg-hw__shape--3,
      .gg-hw__shape--tri,
      .gg-hw__shape--sq{display:none}
    }

    /* Tiny mobile */
    @media(max-width:380px){
      .gg-hw__step{
        flex:0 0 195px;
        min-width:195px;
      }
      .gg-hw__cta{
        padding:var(--gg-sp-2) var(--gg-sp-4);
      }
    }

    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
      .gg-hw__shape{animation:none!important}
    }
    /* --- GG-HW: End --- */

     /* ═══════════════════════════════════════════════════════════════════════
       GG-ST — STATS (Borderless · Cloud Fade · Premium Minimal)
       6 metrics: Pros · Services · Cities · Categories · Customers · Rating
       Each card: small icon · counter · label · short paragraph
       ═══════════════════════════════════════════════════════════════════════ */
    /* --- GG-ST: Start --- */

    .gg-st{
      position:relative;
      padding:var(--gg-sp-12) 0;
      background:var(--gg-white);
      overflow:hidden;
    }


    /* ═══════════════════════════════════════════
       HEADER — left aligned with eyebrow
       ═══════════════════════════════════════════ */
    .gg-st__header{
      position:relative;
      padding:0 var(--gg-sp-10);
      margin-bottom:var(--gg-sp-8);
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:var(--gg-sp-6);
    }

    .gg-st__intro{
      display:flex;
      flex-direction:column;
      gap:var(--gg-sp-2);
      max-width:580px;
    }

    .gg-st__eyebrow{
      display:inline-flex;
      align-items:center;
      gap:var(--gg-sp-2);
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-2xs);
      font-weight:700;
      color:var(--gg-red)!important;
      letter-spacing:.14em;
      text-transform:uppercase;
    }
    /* Pulsing live dot */
    .gg-st__eyebrow-dot{
      width:6px;
      height:6px;
      background:var(--gg-red);
      border-radius:50%;
      position:relative;
    }
    .gg-st__eyebrow-dot::before{
      content:'';
      position:absolute;
      inset:-4px;
      border-radius:50%;
      background:var(--gg-red);
      opacity:.3;
      animation:ggStDotPulse 1.8s ease-in-out infinite;
    }
    @keyframes ggStDotPulse{
      0%,100%{transform:scale(1);opacity:.4}
      50%{transform:scale(2.2);opacity:0}
    }

    .gg-st__title{
      font-family:var(--gg-font-head);
      font-size:clamp(var(--gg-text-xl),2.4vw,var(--gg-text-2xl));
      font-weight:700;
      color:var(--gg-black)!important;
      line-height:1.15;
      letter-spacing:-.02em;
      margin-top:var(--gg-sp-1);
    }
    .gg-st__title-accent{
      color:var(--gg-red)!important;
    }

    .gg-st__sub{
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-sm);
      color:var(--gg-gray-500);
      line-height:1.55;
      margin-top:var(--gg-sp-1);
      max-width:500px;
    }


    /* ═══════════════════════════════════════════
       STATS GRID — flex layout
       Desktop: cards fill evenly (flex:1)
       Below 1100px: switches to horizontal scroll
       ═══════════════════════════════════════════ */
    .gg-st__grid{
      position:relative;
      padding:0 var(--gg-sp-10);
      display:flex;
      gap:var(--gg-sp-3);
      overflow:visible;
    }


    /* ═══════════════════════════════════════════
       STAT CARD — gradient bg + minimal 3D depth
       Row 1: icon (left) + counter + title (right)
       Row 2: paragraph
       Row 3: progress bar
       ═══════════════════════════════════════════ */
    .gg-st__card{
      position:relative;
      display:flex;
      flex-direction:column;
      /* Flex fill by default on desktop - cards distribute evenly */
      flex:1 1 0;
      min-width:0;
      padding:var(--gg-sp-5);
      /* Gradient red-light background - matches section tone */
      background:
        radial-gradient(ellipse at top left,rgba(237,41,56,.05) 0%,transparent 60%),
        radial-gradient(ellipse at bottom right,rgba(237,41,56,.04) 0%,transparent 60%),
        var(--gg-white);
      border-radius:var(--gg-r-xl);
      /* Minimal 3D - subtle depth, not heavy */
      box-shadow:
        0 1px 2px rgba(237,41,56,.04),
        0 4px 12px rgba(237,41,56,.04);
      transition:background var(--gg-dur-slow) var(--gg-ease),box-shadow var(--gg-dur-slow) var(--gg-ease),transform var(--gg-dur-slow) var(--gg-ease);
      scroll-snap-align:start;
    }

    .gg-st__card:hover{
      transform:translate3d(0,-3px,0);
      /* Slightly brighter gradient + slightly deeper shadow */
      background:
        radial-gradient(ellipse at top left,rgba(237,41,56,.1) 0%,transparent 60%),
        radial-gradient(ellipse at bottom right,rgba(237,41,56,.08) 0%,transparent 60%),
        var(--gg-white);
      box-shadow:
        0 2px 4px rgba(237,41,56,.06),
        0 8px 20px rgba(237,41,56,.1);
    }


    /* ═══════════════════════════════════════════
       ROW 1 — Icon LEFT + Content RIGHT
       ═══════════════════════════════════════════ */
    .gg-st__top{
      display:flex;
      align-items:center;
      gap:var(--gg-sp-3);
      margin-bottom:var(--gg-sp-3);
    }

    /* ICON on the LEFT */
    .gg-st__icon-wrap{
      flex-shrink:0;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:44px;
      height:44px;
      background:var(--gg-red-light);
      border-radius:var(--gg-r-md);
      color:var(--gg-red);
      font-size:18px;
      transition:all var(--gg-dur-slow) var(--gg-ease);
    }
    .gg-st__card:hover .gg-st__icon-wrap{
      background:var(--gg-red);
      color:var(--gg-white);
      transform:rotate(-4deg) scale(1.05);
    }

    /* RIGHT side — counter + title stacked */
    .gg-st__top-content{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
      flex:1;
    }

    /* COUNTER */
    .gg-st__card .counter{
      font-family:var(--gg-font-head)!important;
      font-size:var(--gg-text-xl)!important;
      font-weight:800!important;
      color:var(--gg-black)!important;
      line-height:1.1!important;
      letter-spacing:-.025em!important;
      display:flex;
      align-items:baseline;
      gap:1px;
    }
    .gg-st__card .counter span{
      color:var(--gg-black)!important;
    }
    .gg-st__suffix{
      color:var(--gg-red)!important;
      font-weight:700!important;
      font-size:.75em;
    }

    /* LABEL (title) */
    .gg-st__label{
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-sm);
      font-weight:600;
      color:var(--gg-gray-700)!important;
      line-height:1.3;
      letter-spacing:-.005em;
    }


    /* ═══════════════════════════════════════════
       ROW 2 — Paragraph
       ═══════════════════════════════════════════ */
    .gg-st__desc{
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-xs);
      font-weight:400;
      color:var(--gg-gray-600);
      line-height:1.55;
      margin-bottom:var(--gg-sp-4);
    }


    /* ═══════════════════════════════════════════
       ROW 3 — Progress bar (bottom)
       ═══════════════════════════════════════════ */
    .gg-st__bar-wrap{
      position:relative;
      margin-top:auto;
    }

    /* Height via class */
    .gg-st__bar-wrap .skill-progress{
      --cnvs-progress-height:5px;
      margin:0!important;
    }

    /* Track - soft gray */
    .gg-st__bar-wrap .skill-progress-bar{
      background:var(--gg-gray-100)!important;
      border-radius:999px!important;
      overflow:hidden!important;
    }

    /* Filled - red gradient */
    .gg-st__bar-wrap .skill-progress-percent{
      background:linear-gradient(90deg,var(--gg-red) 0%,var(--gg-red-deep) 100%)!important;
      border-radius:999px!important;
      position:relative!important;
      overflow:hidden!important;
    }

    /* Shimmer sweep across fill */
    .gg-st__bar-wrap .skill-progress-percent::after{
      content:'';
      position:absolute;
      top:0;left:0;bottom:0;
      width:40%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
      animation:ggStShimmer 2.5s 1.8s linear infinite;
    }
    @keyframes ggStShimmer{
      0%{transform:translateX(-100%)}
      100%{transform:translateX(400%)}
    }


    /* ═══════════════════════════════════════════════════════════════════════
       RESPONSIVE
       Ultra-wide: content capped, cards flex-fill evenly
       Desktop 1100+: cards flex-fill evenly (no scroll)
       Below 1100px: horizontal scroll with fixed-width cards
       ═══════════════════════════════════════════════════════════════════════ */

    /* Ultra-wide: cap content, cards stretch evenly */
    @media(min-width:1600px){
      .gg-st__header{max-width:100%;margin:0 auto var(--gg-sp-6);padding:0 var(--gg-sp-10)}
      .gg-st__grid{max-width:100%;margin:0 auto;padding:0 var(--gg-sp-10)}
    }

    @media(max-width:1280px){
      .gg-st{padding:var(--gg-sp-10) 0}
      .gg-st__header{padding:0 var(--gg-sp-8);margin-bottom:var(--gg-sp-6)}
      .gg-st__grid{padding:0 var(--gg-sp-8)}
      .gg-st__card{padding:var(--gg-sp-4)}
    }

    @media(max-width:1200px){
      .gg-st__icon-wrap{width:40px;height:40px;font-size:16px}
      .gg-st__card .counter{font-size:var(--gg-text-lg)!important}
      .gg-st__label{font-size:var(--gg-text-xs)}
      .gg-st__desc{font-size:var(--gg-text-2xs)}
    }

    /* ═══════════════════════════════════════════
       BELOW 1100px — switch to horizontal scroll
       All smaller screens: fixed-width cards, swipeable
       ═══════════════════════════════════════════ */
    @media(max-width:1100px){
      .gg-st{padding:var(--gg-sp-8) 0}
      .gg-st__header{padding:0 var(--gg-sp-6);margin-bottom:var(--gg-sp-5)}

      /* Grid becomes horizontal scroll container */
      .gg-st__grid{
        padding:var(--gg-sp-2) var(--gg-sp-6);
        overflow-x:auto!important;
        overflow-y:visible;
        scroll-snap-type:x mandatory;
        scroll-behavior:smooth;
        scroll-padding-left:var(--gg-sp-6);
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        -ms-overflow-style:none;
        gap:var(--gg-sp-4);
      }
      .gg-st__grid::-webkit-scrollbar{display:none;width:0;height:0}

      /* Cards switch to fixed width */
      .gg-st__card{
        flex:0 0 260px;
        min-width:260px;
        padding:var(--gg-sp-5) var(--gg-sp-4);
      }
      .gg-st__icon-wrap{width:44px;height:44px;font-size:18px}
      .gg-st__card .counter{font-size:var(--gg-text-xl)!important}
      .gg-st__label{font-size:var(--gg-text-sm)}
      .gg-st__desc{font-size:var(--gg-text-xs)}
    }

    @media(max-width:900px){
      .gg-st__header{
        flex-direction:column;
        align-items:flex-start;
        gap:var(--gg-sp-3);
      }
    }

    @media(max-width:768px){
      .gg-st__header{padding:0 var(--gg-sp-5)}
      .gg-st__grid{
        padding:var(--gg-sp-2) var(--gg-sp-5);
        scroll-padding-left:var(--gg-sp-5);
      }
      .gg-st__card{
        flex:0 0 250px;
        min-width:250px;
      }
      .gg-st__title{font-size:clamp(var(--gg-text-lg),5vw,var(--gg-text-xl))}
      .gg-st__sub{font-size:var(--gg-text-xs)}
    }

    /* Mobile */
    @media(max-width:560px){
      .gg-st{padding:var(--gg-sp-6) 0}
      .gg-st__header{padding:0 var(--gg-sp-4);margin-bottom:var(--gg-sp-4)}
      .gg-st__grid{
        padding:var(--gg-sp-2) var(--gg-sp-4);
        scroll-padding-left:var(--gg-sp-4);
        gap:var(--gg-sp-3);
      }
      .gg-st__card{
        flex:0 0 230px;
        min-width:230px;
        padding:var(--gg-sp-4) var(--gg-sp-3);
      }
      .gg-st__icon-wrap{width:40px;height:40px;font-size:16px}
      .gg-st__card .counter{font-size:var(--gg-text-lg)!important}
      .gg-st__label{font-size:var(--gg-text-xs)}
      .gg-st__desc{font-size:var(--gg-text-2xs);margin-bottom:var(--gg-sp-3)}
    }

    @media(max-width:400px){
      .gg-st__card{
        flex:0 0 220px;
        min-width:220px;
      }
    }

    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
    }
    /* --- GG-ST: End --- */

    
   
    /* ═══════════════════════════════════════════════════════════════════════
       GG-LC — POPULAR LOCATIONS (City cards with skyline photos)
       Each card links to city page for SEO
       ═══════════════════════════════════════════════════════════════════════ */
    /* --- GG-LC: Start --- */

    .gg-lc{
      position:relative;
      padding:var(--gg-sp-10) 0 0;
      /* Soft off-white base with red accent band at bottom */
      background:var(--gg-off-white);
      overflow:hidden;
    }

    /* Red accent band at bottom of section */
    .gg-lc::after{
      content:'';
      position:absolute;
      left:0;right:0;
      bottom:0;
      height:180px;
      background:linear-gradient(180deg,transparent 0%,var(--gg-red-light) 100%);
      pointer-events:none;
      z-index:0;
    }
    /* Keep content above accent */
    .gg-lc > *{position:relative;z-index:1}


    /* ═══════════════════════════════════════════
       HEADER — left aligned + view all link right
       ═══════════════════════════════════════════ */
    .gg-lc__header{
      position:relative;
      padding:0 var(--gg-sp-10);
      margin-bottom:var(--gg-sp-8);
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:var(--gg-sp-6);
    }

    .gg-lc__intro{
      display:flex;
      flex-direction:column;
      gap:var(--gg-sp-2);
      max-width:560px;
    }

    .gg-lc__eyebrow{
      display:inline-flex;
      align-items:center;
      gap:var(--gg-sp-3);
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-xs);
      font-weight:700;
      color:var(--gg-red)!important;
      letter-spacing:.16em;
      text-transform:uppercase;
    }
    .gg-lc__eyebrow::before{
      content:'';
      width:24px;
      height:2px;
      background:var(--gg-red);
      border-radius:2px;
    }

    .gg-lc__title{
      font-family:var(--gg-font-head);
      font-size:clamp(var(--gg-text-xl),2.4vw,var(--gg-text-2xl));
      font-weight:700;
      color:var(--gg-black)!important;
      line-height:1.15;
      letter-spacing:-.02em;
      margin-top:var(--gg-sp-1);
    }
    .gg-lc__title-accent{
      color:var(--gg-red)!important;
    }

    .gg-lc__sub{
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-sm);
      color:var(--gg-gray-500);
      line-height:1.55;
      margin-top:var(--gg-sp-1);
      max-width:500px;
    }

    /* View all — elegant borderless link, right-aligned below grid */
    .gg-lc__footer{
      position:relative;
      padding:var(--gg-sp-5) var(--gg-sp-10) var(--gg-sp-5);
      display:flex;
      justify-content:flex-end;
    }
    .gg-lc__view-all{
      display:inline-flex;
      align-items:center;
      gap:var(--gg-sp-3);
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-sm);
      font-weight:600;
      color:var(--gg-black)!important;
      letter-spacing:-.005em;
      white-space:nowrap;
      padding:var(--gg-sp-2) 0;
      transition:color var(--gg-dur) ease,gap var(--gg-dur) var(--gg-ease-out);
      position:relative;
    }
    /* Text underline on hover - subtle */
    .gg-lc__view-all-text{
      position:relative;
      display:inline-block;
    }
    .gg-lc__view-all-text::after{
      content:'';
      position:absolute;
      left:0;
      right:0;
      bottom:-2px;
      height:1.5px;
      background:var(--gg-red);
      transform:scaleX(0);
      transform-origin:left center;
      transition:transform var(--gg-dur-slow) var(--gg-ease);
    }

    /* Red circle with arrow */
    .gg-lc__view-all-arrow{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:32px;
      height:32px;
      background:var(--gg-red);
      border-radius:50%;
      color:var(--gg-white);
      font-size:13px;
      transition:all var(--gg-dur) var(--gg-ease);
      box-shadow:0 4px 12px rgba(237,41,56,.25);
    }
    .gg-lc__view-all-arrow i{
      transition:transform var(--gg-dur) var(--gg-ease-out);
    }

    .gg-lc__view-all:hover{
      color:var(--gg-red)!important;
      gap:var(--gg-sp-4);
    }
    .gg-lc__view-all:hover .gg-lc__view-all-text::after{
      transform:scaleX(1);
    }
    .gg-lc__view-all:hover .gg-lc__view-all-arrow{
      transform:scale(1.1);
      box-shadow:0 6px 16px rgba(237,41,56,.4);
    }
    .gg-lc__view-all:hover .gg-lc__view-all-arrow i{
      transform:translate3d(2px,0,0);
    }


    /* ═══════════════════════════════════════════
       LOCATIONS GRID — edge to edge, 8 in single row
       No padding, no gap — all cards connected
       ═══════════════════════════════════════════ */
    .gg-lc__grid{
      position:relative;
      display:flex;
      gap:0;
      width:100%;
      overflow:visible;
    }


    /* ═══════════════════════════════════════════
       CITY CARD — full-bleed, no rounded corners, no gap
       Cards share edges like a connected strip
       ═══════════════════════════════════════════ */
    .gg-lc__card{
      position:relative;
      display:block;
      flex:1 1 0;
      min-width:0;
      aspect-ratio:4/5;
      overflow:hidden;
      transition:flex var(--gg-dur-slow) var(--gg-ease);
    }

    /* Skyline image — uses Canvas lazy loading (handled by style.css) */
    .gg-lc__card-img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      background:var(--gg-gray-100);
      z-index:1;
    }

    /* Dark gradient overlay for text readability */
    .gg-lc__card-overlay{
      position:absolute;
      inset:0;
      background:linear-gradient(
        180deg,
        rgba(0,0,0,.2) 0%,
        rgba(0,0,0,.25) 40%,
        rgba(0,0,0,.75) 75%,
        rgba(0,0,0,.9) 100%
      );
      z-index:2;
      transition:background var(--gg-dur-slow) var(--gg-ease);
    }

    /* Content over image */
    .gg-lc__card-content{
      position:absolute;
      bottom:0;
      left:0;
      right:0;
      padding:var(--gg-sp-4);
      z-index:3;
      color:var(--gg-white);
    }

    .gg-lc__card-state{
      display:inline-block;
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-2xs);
      font-weight:700;
      color:var(--gg-white)!important;
      letter-spacing:.14em;
      text-transform:uppercase;
      opacity:.8;
      margin-bottom:var(--gg-sp-1);
    }

    .gg-lc__card-name{
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-xl);
      font-weight:700;
      color:var(--gg-white)!important;
      line-height:1.1;
      letter-spacing:-.02em;
      margin-bottom:var(--gg-sp-2);
    }

    .gg-lc__card-stats{
      display:flex;
      align-items:center;
      gap:var(--gg-sp-2);
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-xs);
      font-weight:500;
      color:rgba(255,255,255,.85);
      white-space:nowrap;
    }
    .gg-lc__card-count{
      color:var(--gg-red)!important;
      font-weight:700;
    }
    .gg-lc__card-dot{
      width:3px;
      height:3px;
      background:rgba(255,255,255,.4);
      border-radius:50%;
    }

    /* Red accent bar on bottom edge (reveals on hover) */
    .gg-lc__card-accent{
      position:absolute;
      bottom:0;
      left:0;
      right:0;
      height:3px;
      background:linear-gradient(90deg,var(--gg-red),var(--gg-red-deep));
      transform:scaleX(0);
      transform-origin:left center;
      transition:transform var(--gg-dur-slow) var(--gg-ease);
      z-index:4;
    }

    /* Hover effects — darken + shine, no width change */
    .gg-lc__card:hover .gg-lc__card-overlay{
      background:linear-gradient(
        180deg,
        rgba(0,0,0,.4) 0%,
        rgba(0,0,0,.5) 50%,
        rgba(0,0,0,.95) 100%
      );
    }
    .gg-lc__card:hover .gg-lc__card-accent{
      transform:scaleX(1);
    }

    /* Shine sweep effect on hover */
    .gg-lc__card::before{
      content:'';
      position:absolute;
      top:0;
      left:-100%;
      width:70%;
      height:100%;
      background:linear-gradient(
        110deg,
        transparent 0%,
        transparent 30%,
        rgba(255,255,255,.25) 50%,
        transparent 70%,
        transparent 100%
      );
      z-index:3;
      pointer-events:none;
      transition:left .8s var(--gg-ease);
    }
    .gg-lc__card:hover::before{
      left:130%;
    }

    /* Arrow icon (appears on hover top-right) */
    .gg-lc__card-arrow{
      position:absolute;
      top:var(--gg-sp-3);
      right:var(--gg-sp-3);
      width:32px;
      height:32px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(255,255,255,.15);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      border-radius:50%;
      color:var(--gg-white);
      font-size:14px;
      opacity:0;
      transform:translate3d(-6px,6px,0);
      transition:all var(--gg-dur-slow) var(--gg-ease);
      z-index:4;
    }
    .gg-lc__card:hover .gg-lc__card-arrow{
      opacity:1;
      transform:translate3d(0,0,0);
      background:var(--gg-red);
    }


    /* ═══════════════════════════════════════════════════════════════════════
       RESPONSIVE
       Desktop (including 13" laptop ~1280px): 8 cards fit edge-to-edge
       Below 900px: horizontal scroll (touch-friendly)
       ═══════════════════════════════════════════════════════════════════════ */

    @media(max-width:1280px){
      .gg-lc__header{padding:0 var(--gg-sp-8);margin-bottom:var(--gg-sp-6)}
      .gg-lc__footer{padding:var(--gg-sp-5) var(--gg-sp-8) var(--gg-sp-4)}
      /* Reduce aspect ratio so cards aren't too tall at narrower widths */
      .gg-lc__card{aspect-ratio:3/4}
      .gg-lc__card-name{font-size:var(--gg-text-lg)}
    }

    @media(max-width:1100px){
      .gg-lc__card{aspect-ratio:3/4}
      .gg-lc__card-content{padding:var(--gg-sp-3)}
      .gg-lc__card-name{font-size:var(--gg-text-md)}
      .gg-lc__card-state{font-size:9px}
      .gg-lc__card-stats{font-size:var(--gg-text-2xs)}
    }

    @media(max-width:900px){
      .gg-lc__header{
        flex-direction:column;
        align-items:flex-start;
        gap:var(--gg-sp-3);
        padding:0 var(--gg-sp-6);
      }
      .gg-lc__footer{padding:var(--gg-sp-4) var(--gg-sp-6)}
    }

    /* ═══════════════════════════════════════════
       BELOW 900px — horizontal scroll (touch screens)
       ═══════════════════════════════════════════ */
    @media(max-width:900px){
      .gg-lc{padding:var(--gg-sp-8) 0 0}
      .gg-lc__header{margin-bottom:var(--gg-sp-5)}

      .gg-lc__grid{
        overflow-x:auto!important;
        overflow-y:visible;
        scroll-snap-type:x mandatory;
        scroll-behavior:smooth;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        -ms-overflow-style:none;
      }
      .gg-lc__grid::-webkit-scrollbar{display:none;width:0;height:0}

      /* Fixed-width cards for scroll */
      .gg-lc__card{
        flex:0 0 200px;
        min-width:200px;
        aspect-ratio:4/5;
        scroll-snap-align:start;
      }
    }

    @media(max-width:768px){
      .gg-lc__header{padding:0 var(--gg-sp-5)}
      .gg-lc__footer{padding:var(--gg-sp-4) var(--gg-sp-5)}
      .gg-lc__card{
        flex:0 0 240px;
        min-width:240px;
        aspect-ratio:3/4;
      }
      .gg-lc__title{font-size:clamp(var(--gg-text-lg),5vw,var(--gg-text-xl))}
      .gg-lc__sub{font-size:var(--gg-text-xs)}
    }

    @media(max-width:560px){
      .gg-lc{padding:var(--gg-sp-6) 0 0}
      .gg-lc__header{padding:0 var(--gg-sp-4);margin-bottom:var(--gg-sp-4)}
      .gg-lc__footer{padding:var(--gg-sp-4) var(--gg-sp-4) var(--gg-sp-2)}
      /* Wider cards so stats fit single line + feels premium at 2.2 visible */
      .gg-lc__card{
        flex:0 0 220px;
        min-width:220px;
        aspect-ratio:3/4;
      }
      .gg-lc__card-content{padding:var(--gg-sp-3)}
      .gg-lc__card-name{font-size:var(--gg-text-md)}
      .gg-lc__card-state{font-size:9px}
      /* Keep stats on one line — no wrap */
      .gg-lc__card-stats{
        font-size:var(--gg-text-2xs);
        white-space:nowrap;
      }
    }

    @media(max-width:400px){
      .gg-lc__card{
        flex:0 0 200px;
        min-width:200px;
      }
    }

    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
    }
    /* --- GG-LC: End --- */

    /* ═══════════════════════════════════════════════════════════════════════
       GG-TS — TESTIMONIALS (Bento · Glow cards · Max 2 rows)
       Single card template. CSS handles ALL styling via :nth-child positions.
       8 cards = 2 rows of 4 on desktop
       ═══════════════════════════════════════════════════════════════════════ */
    /* --- GG-TS: Start --- */

    .gg-ts{
      position:relative;
      padding:var(--gg-sp-10) 0;
      background:var(--gg-white);
      overflow:hidden;
      /* Target 65vh - aligned for performance */
      min-height:65vh;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }


    /* ═══════════════════════════════════════════
       HEADER
       ═══════════════════════════════════════════ */
    .gg-ts__header{
      position:relative;
      padding:0 var(--gg-sp-10);
      margin-bottom:var(--gg-sp-8);
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:var(--gg-sp-6);
    }

    .gg-ts__intro{
      display:flex;
      flex-direction:column;
      gap:var(--gg-sp-2);
      max-width:560px;
    }

    .gg-ts__eyebrow{
      display:inline-flex;
      align-items:center;
      gap:var(--gg-sp-3);
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-xs);
      font-weight:700;
      color:var(--gg-red)!important;
      letter-spacing:.16em;
      text-transform:uppercase;
    }
    .gg-ts__eyebrow::before{
      content:'';
      width:24px;
      height:2px;
      background:var(--gg-red);
      border-radius:2px;
    }

    .gg-ts__title{
      font-family:var(--gg-font-head);
      font-size:clamp(var(--gg-text-xl),2.4vw,var(--gg-text-2xl));
      font-weight:700;
      color:var(--gg-black)!important;
      line-height:1.15;
      letter-spacing:-.02em;
      margin-top:var(--gg-sp-1);
    }
    .gg-ts__title-accent{
      color:var(--gg-red)!important;
    }

    .gg-ts__sub{
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-sm);
      color:var(--gg-gray-500);
      line-height:1.55;
      margin-top:var(--gg-sp-1);
      max-width:500px;
    }

    /* Rating summary */
    .gg-ts__meta{
      display:inline-flex;
      align-items:center;
      gap:var(--gg-sp-3);
      padding:var(--gg-sp-2) var(--gg-sp-4);
      background:var(--gg-red-light);
      border-radius:999px;
      white-space:nowrap;
    }
    .gg-ts__meta-icon{
      color:var(--gg-red);
      font-size:15px;
    }
    .gg-ts__meta-text{
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-xs);
      font-weight:600;
      color:var(--gg-black);
    }
    .gg-ts__meta-text strong{
      color:var(--gg-red);
      font-weight:800;
    }


    /* ═══════════════════════════════════════════
       BENTO GRID — 8 cards in 2 rows of 4
       Each row has different sizing to avoid generic grid
       Pattern: [wide][narrow][medium][medium] / [medium][medium][narrow][wide]
       Works for 4, 8, 12, 16 cards (repeats every 8)
       ═══════════════════════════════════════════ */
    .gg-ts__bento{
      position:relative;
      padding:0 var(--gg-sp-10);
      display:grid;
      grid-template-columns:repeat(12,1fr);
      grid-auto-rows:1fr;
      gap:var(--gg-sp-3);
    }

    /* Bento sizing pattern (7-card cycle)
       Row 1 (4 cards): 3+3+3+3 = 12
       Row 2 (3 cards): 4+4+4   = 12
       Pattern repeats every 7 cards
    */
    .gg-ts__card:nth-child(7n+1){grid-column:span 3}
    .gg-ts__card:nth-child(7n+2){grid-column:span 3}
    .gg-ts__card:nth-child(7n+3){grid-column:span 3}
    .gg-ts__card:nth-child(7n+4){grid-column:span 3}
    .gg-ts__card:nth-child(7n+5){grid-column:span 4}
    .gg-ts__card:nth-child(7n+6){grid-column:span 4}
    .gg-ts__card:nth-child(7n+7){grid-column:span 4}


    /* ═══════════════════════════════════════════
       TESTIMONIAL CARD — gradient glow, premium minimal
       SAME background/style for all cards (DB-consistent)
       Like the stats cards — red-tinted gradient, no border
       ═══════════════════════════════════════════ */
    .gg-ts__card{
      position:relative;
      display:flex;
      flex-direction:column;
      padding:var(--gg-sp-4);
      /* Gradient red-light bg (same as stats cards) */
      background:
        radial-gradient(ellipse at top left,rgba(237,41,56,.05) 0%,transparent 60%),
        radial-gradient(ellipse at bottom right,rgba(237,41,56,.04) 0%,transparent 60%),
        var(--gg-white);
      border-radius:var(--gg-r-xl);
      /* Minimal 3D shadow */
      box-shadow:
        0 1px 2px rgba(237,41,56,.04),
        0 4px 12px rgba(237,41,56,.04);
      transition:
        background var(--gg-dur-slow) var(--gg-ease),
        box-shadow var(--gg-dur-slow) var(--gg-ease),
        transform var(--gg-dur-slow) var(--gg-ease);
      scroll-snap-align:start;
      overflow:hidden;
      isolation:isolate;
    }

    /* Red glow blob (like stats cards - premium touch) */
    .gg-ts__card::before{
      content:'';
      position:absolute;
      top:-60px;
      right:-60px;
      width:160px;
      height:160px;
      background:radial-gradient(circle,rgba(237,41,56,.12) 0%,transparent 70%);
      border-radius:50%;
      opacity:.5;
      transition:opacity var(--gg-dur-slow) var(--gg-ease),transform var(--gg-dur-slow) var(--gg-ease);
      pointer-events:none;
      z-index:0;
    }

    .gg-ts__card:hover{
      transform:translate3d(0,-3px,0);
      background:
        radial-gradient(ellipse at top left,rgba(237,41,56,.1) 0%,transparent 60%),
        radial-gradient(ellipse at bottom right,rgba(237,41,56,.08) 0%,transparent 60%),
        var(--gg-white);
      box-shadow:
        0 2px 4px rgba(237,41,56,.06),
        0 8px 20px rgba(237,41,56,.1);
    }
    .gg-ts__card:hover::before{
      opacity:1;
      transform:scale(1.1);
    }

    .gg-ts__card > *{position:relative;z-index:1}


    /* ═══ ACCENT CARDS (via :nth-child - DB-safe, no extra classes needed) ═══
       Position 2 (narrow): RED card — visual anchor row 1
       Position 7 (narrow): BLACK card — visual anchor row 2
       Pattern repeats every 8 cards
    */

    /* RED accent card — position 2 */
    .gg-ts__card:nth-child(7n+2){
      background:linear-gradient(135deg,var(--gg-red) 0%,var(--gg-red-deep) 100%);
      box-shadow:
        0 1px 2px rgba(237,41,56,.15),
        0 6px 20px rgba(237,41,56,.2);
    }
    .gg-ts__card:nth-child(7n+2)::before{
      background:radial-gradient(circle,rgba(255,255,255,.18) 0%,transparent 70%);
      opacity:.7;
    }
    .gg-ts__card:nth-child(7n+2) .gg-ts__quote-icon{color:rgba(255,255,255,.5)}
    .gg-ts__card:nth-child(7n+2) .gg-ts__quote{color:var(--gg-white)!important}
    .gg-ts__card:nth-child(7n+2) .gg-ts__author{border-top-color:rgba(255,255,255,.2)}
    .gg-ts__card:nth-child(7n+2) .gg-ts__author-name{color:var(--gg-white)!important}
    .gg-ts__card:nth-child(7n+2) .gg-ts__author-role{color:rgba(255,255,255,.75)!important}
    .gg-ts__card:nth-child(7n+2) .gg-ts__author-role::before{background-color:rgba(255,255,255,.9)}
    /* Red card overrides for new elements */
    .gg-ts__card:nth-child(7n+2) .gg-ts__category{
      background:rgba(255,255,255,.2);
      color:var(--gg-white)!important;
    }
    .gg-ts__card:nth-child(7n+2) .gg-ts__verified{color:rgba(255,255,255,.9)!important}
    .gg-ts__card:nth-child(7n+2) .gg-ts__date{color:rgba(255,255,255,.6)!important}
    .gg-ts__card:nth-child(7n+2):hover{
      background:linear-gradient(135deg,var(--gg-red-hover) 0%,var(--gg-red-deep) 100%);
      box-shadow:
        0 4px 8px rgba(237,41,56,.25),
        0 12px 28px rgba(237,41,56,.35);
    }
    .gg-ts__card:nth-child(7n+2):hover::before{
      opacity:1;
    }

    /* BLACK accent card — position 7 */
    .gg-ts__card:nth-child(7n+6){
      background:linear-gradient(145deg,var(--gg-black) 0%,var(--gg-black-soft) 100%);
      box-shadow:
        0 1px 2px rgba(0,0,0,.15),
        0 6px 20px rgba(0,0,0,.2);
    }
    .gg-ts__card:nth-child(7n+6)::before{
      background:radial-gradient(circle,rgba(237,41,56,.3) 0%,transparent 70%);
      opacity:.6;
    }
    .gg-ts__card:nth-child(7n+6) .gg-ts__quote-icon{color:var(--gg-red)}
    .gg-ts__card:nth-child(7n+6) .gg-ts__quote{color:var(--gg-white)!important}
    .gg-ts__card:nth-child(7n+6) .gg-ts__author{border-top-color:rgba(255,255,255,.1)}
    .gg-ts__card:nth-child(7n+6) .gg-ts__author-name{color:var(--gg-white)!important}
    .gg-ts__card:nth-child(7n+6) .gg-ts__author-role{color:var(--gg-gray-400)!important}
    .gg-ts__card:nth-child(7n+6) .gg-ts__author-role::before{background-color:var(--gg-red)}
    /* Black card overrides for new elements */
    .gg-ts__card:nth-child(7n+6) .gg-ts__category{
      background:rgba(237,41,56,.2);
      color:var(--gg-white)!important;
    }
    .gg-ts__card:nth-child(7n+6) .gg-ts__verified{color:var(--gg-success)!important}
    .gg-ts__card:nth-child(7n+6) .gg-ts__date{color:var(--gg-gray-500)!important}
    .gg-ts__card:nth-child(7n+6):hover{
      background:linear-gradient(145deg,var(--gg-black-soft) 0%,var(--gg-black) 100%);
      box-shadow:
        0 4px 8px rgba(0,0,0,.25),
        0 12px 28px rgba(237,41,56,.25);
    }
    .gg-ts__card:nth-child(7n+6):hover::before{
      opacity:1;
      background:radial-gradient(circle,rgba(237,41,56,.45) 0%,transparent 70%);
    }


    /* Quote icon */
    .gg-ts__quote-icon{
      display:inline-flex;
      font-size:22px;
      color:var(--gg-red);
      margin-bottom:var(--gg-sp-3);
      line-height:1;
    }


    /* ═══════════════════════════════════════════
       CARD TOP ROW — stars + category tag + verified
       All in one horizontal line above the quote
       ═══════════════════════════════════════════ */
    .gg-ts__top{
      display:flex;
      align-items:center;
      gap:var(--gg-sp-2);
      margin-bottom:var(--gg-sp-3);
      flex-wrap:wrap;
    }

    /* Stars row */
    .gg-ts__stars{
      display:inline-flex;
      gap:1px;
      color:#F59E0B;
      font-size:11px;
      line-height:1;
    }
    /* On dark/red cards stars stay golden (readable) */

    /* Category tag */
    .gg-ts__category{
      display:inline-flex;
      align-items:center;
      padding:2px 7px;
      font-family:var(--gg-font-head);
      font-size:9px;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      background:var(--gg-red-light);
      color:var(--gg-red-deep);
      border-radius:999px;
      line-height:1.4;
    }

    /* Verified booking badge */
    .gg-ts__verified{
      display:inline-flex;
      align-items:center;
      gap:3px;
      font-family:var(--gg-font-head);
      font-size:9px;
      font-weight:700;
      color:var(--gg-success);
      letter-spacing:.04em;
      text-transform:uppercase;
      margin-left:auto;
    }
    .gg-ts__verified i{
      font-size:11px;
    }


    /* Date posted — subtle, appears next to name */
    .gg-ts__date{
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-2xs);
      font-weight:500;
      color:var(--gg-gray-400);
      line-height:1.2;
      margin-top:2px;
    }


    /* Quote text — 3 lines clamp by default */
    .gg-ts__quote{
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-sm);
      font-weight:500;
      color:var(--gg-gray-800);
      line-height:1.5;
      letter-spacing:-.005em;
      flex:1;
      position:relative;
      margin-bottom:0;
    }
    .gg-ts__quote p{
      margin:0;
      color:inherit;
      font:inherit;
      display:-webkit-box;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
      overflow:hidden;
      transition:max-height .4s var(--gg-ease);
    }

    /* When card is expanded, show full quote smoothly */
    .gg-ts__card.is-expanded .gg-ts__quote p{
      -webkit-line-clamp:unset;
      display:block;
      overflow:visible;
    }


    /* ═══════════════════════════════════════════
       READ MORE PILL — "..." by default, expands on hover
       Click: expands the quote to show full text
       ═══════════════════════════════════════════ */
    .gg-ts__more{
      align-self:flex-start;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:32px;
      padding:0 8px;
      background:var(--gg-red-light);
      border:none;
      border-radius:999px;
      font-family:var(--gg-font-head);
      font-size:0;
      font-weight:700;
      color:var(--gg-red);
      cursor:pointer;
      overflow:hidden;
      white-space:nowrap;
      position:relative;
      /* Collapsed: zero height, zero margin - NO space reserved */
      height:0;
      margin:0;
      opacity:0;
      pointer-events:none;
      transition:
        height .35s var(--gg-ease),
        margin .35s var(--gg-ease),
        opacity .3s ease,
        min-width .35s var(--gg-ease),
        background .25s ease;
    }

    /* When button is needed (JS detects overflow) */
    .gg-ts__more.is-visible{
      /* Still collapsed initially - waits for card hover */
    }

    /* Show on card hover (expands smoothly with no blink) */
    .gg-ts__card:hover .gg-ts__more.is-visible{
      height:24px;
      margin:var(--gg-sp-2) 0 var(--gg-sp-2);
      opacity:1;
      pointer-events:auto;
    }

    /* Keep visible when expanded (so user can collapse) */
    .gg-ts__card.is-expanded .gg-ts__more.is-visible{
      height:24px;
      margin:var(--gg-sp-2) 0 var(--gg-sp-2);
      opacity:1;
      pointer-events:auto;
    }

    /* Dots before content */
    .gg-ts__more::before{
      content:'•••';
      font-size:14px;
      line-height:1;
      color:var(--gg-red);
      letter-spacing:1px;
      transition:color .25s ease;
    }

    /* Hidden "Read more" text that slides in */
    .gg-ts__more::after{
      content:' Read more';
      font-size:var(--gg-text-xs);
      font-weight:600;
      color:var(--gg-red);
      max-width:0;
      overflow:hidden;
      opacity:0;
      margin-left:0;
      transition:max-width .35s var(--gg-ease),opacity .25s ease .1s,margin-left .25s ease,color .25s ease;
    }

    /* Hover: pill expands to show text */
    .gg-ts__more:hover{
      min-width:130px;
      background:var(--gg-red);
    }
    .gg-ts__more:hover::before{
      color:var(--gg-white);
    }
    .gg-ts__more:hover::after{
      max-width:100px;
      margin-left:6px;
      opacity:1;
      color:var(--gg-white);
    }

    /* Expanded state: change to × icon and "Show less" */
    .gg-ts__card.is-expanded .gg-ts__more{
      background:var(--gg-black);
      min-width:110px;
    }
    .gg-ts__card.is-expanded .gg-ts__more::before{
      content:'×';
      font-size:16px;
      color:var(--gg-white);
    }
    .gg-ts__card.is-expanded .gg-ts__more::after{
      content:' Show less';
      max-width:100px;
      margin-left:6px;
      opacity:1;
      color:var(--gg-white);
    }

    /* ═══ Red card: invert pill colors ═══ */
    .gg-ts__card:nth-child(7n+2) .gg-ts__more{
      background:rgba(255,255,255,.2);
    }
    .gg-ts__card:nth-child(7n+2) .gg-ts__more::before,
    .gg-ts__card:nth-child(7n+2) .gg-ts__more::after{
      color:var(--gg-white);
    }
    .gg-ts__card:nth-child(7n+2) .gg-ts__more:hover{
      background:var(--gg-white);
    }
    .gg-ts__card:nth-child(7n+2) .gg-ts__more:hover::before,
    .gg-ts__card:nth-child(7n+2) .gg-ts__more:hover::after{
      color:var(--gg-red);
    }

    /* ═══ Black card: red pill ═══ */
    .gg-ts__card:nth-child(7n+6) .gg-ts__more{
      background:rgba(237,41,56,.15);
    }
    .gg-ts__card:nth-child(7n+6) .gg-ts__more::before,
    .gg-ts__card:nth-child(7n+6) .gg-ts__more::after{
      color:var(--gg-red);
    }
    .gg-ts__card:nth-child(7n+6) .gg-ts__more:hover{
      background:var(--gg-red);
    }
    .gg-ts__card:nth-child(7n+6) .gg-ts__more:hover::before,
    .gg-ts__card:nth-child(7n+6) .gg-ts__more:hover::after{
      color:var(--gg-white);
    }


    /* Author block */
    .gg-ts__author{
      display:flex;
      align-items:center;
      gap:var(--gg-sp-3);
      margin-top:auto;
      padding-top:var(--gg-sp-3);
      border-top:1px solid rgba(237,41,56,.1);
    }

    .gg-ts__avatar{
      flex-shrink:0;
      width:36px;
      height:36px;
      border-radius:50%;
      object-fit:cover;
      background:var(--gg-gray-100);
    }

    .gg-ts__author-info{
      display:flex;
      flex-direction:column;
      gap:1px;
      min-width:0;
      flex:1;
    }

    .gg-ts__author-name{
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-sm);
      font-weight:700;
      color:var(--gg-black)!important;
      line-height:1.2;
      letter-spacing:-.005em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .gg-ts__author-role{
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-2xs);
      font-weight:500;
      color:var(--gg-gray-500);
      line-height:1.2;
      display:flex;
      align-items:center;
      gap:5px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    /* Location icon via CSS before (no <i> tag needed) */
    .gg-ts__author-role::before{
      content:'';
      display:inline-block;
      width:10px;
      height:10px;
      background-color:var(--gg-red);
      -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E") no-repeat center/contain;
      mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E") no-repeat center/contain;
      flex-shrink:0;
    }
    /* Building variant for pros (uses data-icon="building") */
    .gg-ts__author-role[data-icon="building"]::before{
      -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-2v-3H7v3h-2.5a.5.5 0 0 1-.5-.5v-12zm1 2v1h1v-1H5zm1 3v1h1V7.5H6zm-1 3v1h1v-1H5zm3-6v1h1v-1H8zm0 3v1h1V7.5H8zm0 3v1h1v-1H8zm3-6v1h1v-1h-1zm0 3v1h1V7.5h-1zm0 3v1h1v-1h-1z'/%3E%3C/svg%3E") no-repeat center/contain;
      mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-2v-3H7v3h-2.5a.5.5 0 0 1-.5-.5v-12zm1 2v1h1v-1H5zm1 3v1h1V7.5H6zm-1 3v1h1v-1H5zm3-6v1h1v-1H8zm0 3v1h1V7.5H8zm0 3v1h1v-1H8zm3-6v1h1v-1h-1zm0 3v1h1V7.5h-1zm0 3v1h1v-1h-1z'/%3E%3C/svg%3E") no-repeat center/contain;
    }
    .gg-ts__author-role i{
      display:none;
    }


    /* ═══════════════════════════════════════════════════════════════════════
       RESPONSIVE
       Desktop: 7 cards bento 2 rows · min 65vh
       Below 900px: horizontal scroll (auto height, not 65vh)
       ═══════════════════════════════════════════════════════════════════════ */

    @media(max-width:1280px){
      .gg-ts{min-height:65vh;padding:var(--gg-sp-8) 0}
      .gg-ts__header{padding:0 var(--gg-sp-8);margin-bottom:var(--gg-sp-5)}
      .gg-ts__bento{padding:0 var(--gg-sp-8);gap:var(--gg-sp-3)}
      .gg-ts__card{padding:var(--gg-sp-3)}
    }

    @media(max-width:1100px){
      .gg-ts__quote{font-size:var(--gg-text-xs)}
      .gg-ts__avatar{width:32px;height:32px}
    }

    /* ═══════════════════════════════════════════
       BELOW 900px — HORIZONTAL SCROLL (single row)
       Section height becomes natural (not 65vh)
       Pill always visible (no hover on touch)
       ═══════════════════════════════════════════ */
    @media(max-width:900px){
      .gg-ts{
        padding:var(--gg-sp-8) 0;
        min-height:auto;
      }
      .gg-ts__header{
        flex-direction:column;
        align-items:flex-start;
        gap:var(--gg-sp-3);
        padding:0 var(--gg-sp-6);
        margin-bottom:var(--gg-sp-5);
      }

      /* Grid becomes horizontal flex scroll */
      .gg-ts__bento{
        display:flex!important;
        grid-template-columns:none!important;
        padding:var(--gg-sp-2) var(--gg-sp-6);
        gap:var(--gg-sp-3);
        overflow-x:auto!important;
        overflow-y:visible;
        scroll-snap-type:x mandatory;
        scroll-behavior:smooth;
        scroll-padding-left:var(--gg-sp-6);
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        -ms-overflow-style:none;
        grid-auto-rows:auto;
      }
      .gg-ts__bento::-webkit-scrollbar{display:none;width:0;height:0}

      /* All cards same fixed width in scroll */
      .gg-ts__card,
      .gg-ts__card:nth-child(7n+1),
      .gg-ts__card:nth-child(7n+2),
      .gg-ts__card:nth-child(7n+3),
      .gg-ts__card:nth-child(7n+4),
      .gg-ts__card:nth-child(7n+5),
      .gg-ts__card:nth-child(7n+6),
      .gg-ts__card:nth-child(7n+7){
        grid-column:auto;
        flex:0 0 280px;
        min-width:280px;
        padding:var(--gg-sp-4);
      }

      /* On touch devices, always show pill (no hover) */
      .gg-ts__more.is-visible{
        height:24px;
        margin:var(--gg-sp-2) 0 var(--gg-sp-2);
        opacity:1;
        pointer-events:auto;
      }

      .gg-ts__quote{font-size:var(--gg-text-sm)}
      .gg-ts__avatar{width:36px;height:36px}
    }

    @media(max-width:768px){
      .gg-ts__header{padding:0 var(--gg-sp-5)}
      .gg-ts__bento{padding:var(--gg-sp-2) var(--gg-sp-5);scroll-padding-left:var(--gg-sp-5)}
      .gg-ts__card,
      .gg-ts__card:nth-child(7n+1),
      .gg-ts__card:nth-child(7n+7){
        flex:0 0 260px;
        min-width:260px;
      }
      .gg-ts__title{font-size:clamp(var(--gg-text-lg),5vw,var(--gg-text-xl))}
      .gg-ts__sub{font-size:var(--gg-text-xs)}
    }

    @media(max-width:560px){
      .gg-ts{padding:var(--gg-sp-6) 0}
      .gg-ts__header{padding:0 var(--gg-sp-4);margin-bottom:var(--gg-sp-4)}
      .gg-ts__bento{padding:var(--gg-sp-2) var(--gg-sp-4);scroll-padding-left:var(--gg-sp-4)}
      .gg-ts__card,
      .gg-ts__card:nth-child(7n+1),
      .gg-ts__card:nth-child(7n+7){
        flex:0 0 240px;
        min-width:240px;
        padding:var(--gg-sp-3);
      }
      .gg-ts__meta{display:none}
    }

    @media(max-width:400px){
      .gg-ts__card,
      .gg-ts__card:nth-child(7n+1),
      .gg-ts__card:nth-child(7n+7){
        flex:0 0 220px;
        min-width:220px;
      }
    }

    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
    }
    /* --- GG-TS: End --- */

    /* ═══════════════════════════════════════════════════════════════════════
       GG-BL — LATEST BLOG (Premium editorial cards · Full-image with overlay)
       Single template · DB foreach loop safe
       ═══════════════════════════════════════════════════════════════════════ */
    /* --- GG-BL: Start --- */

    .gg-bl{
      position:relative;
      padding:var(--gg-sp-10) 0;
      background:var(--gg-off-white);
      overflow:hidden;
    }


    /* ═══════════════════════════════════════════
       HEADER
       ═══════════════════════════════════════════ */
    .gg-bl__header{
      position:relative;
      padding:0 var(--gg-sp-10);
      margin-bottom:var(--gg-sp-8);
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:var(--gg-sp-6);
    }

    .gg-bl__intro{
      display:flex;
      flex-direction:column;
      gap:var(--gg-sp-2);
      max-width:560px;
    }

    .gg-bl__eyebrow{
      display:inline-flex;
      align-items:center;
      gap:var(--gg-sp-3);
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-xs);
      font-weight:700;
      color:var(--gg-red)!important;
      letter-spacing:.16em;
      text-transform:uppercase;
    }
    .gg-bl__eyebrow::before{
      content:'';
      width:24px;
      height:2px;
      background:var(--gg-red);
      border-radius:2px;
    }

    .gg-bl__title{
      font-family:var(--gg-font-head);
      font-size:clamp(var(--gg-text-xl),2.4vw,var(--gg-text-2xl));
      font-weight:700;
      color:var(--gg-black)!important;
      line-height:1.15;
      letter-spacing:-.02em;
      margin-top:var(--gg-sp-1);
    }
    .gg-bl__title-accent{
      color:var(--gg-red)!important;
    }

    .gg-bl__sub{
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-sm);
      color:var(--gg-gray-500);
      line-height:1.55;
      margin-top:var(--gg-sp-1);
      max-width:500px;
    }

    /* View all link */
    .gg-bl__view-all{
      display:inline-flex;
      align-items:center;
      gap:var(--gg-sp-3);
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-sm);
      font-weight:600;
      color:var(--gg-black)!important;
      letter-spacing:-.005em;
      white-space:nowrap;
      padding:var(--gg-sp-2) 0;
      transition:color var(--gg-dur) ease,gap var(--gg-dur) var(--gg-ease-out);
      flex-shrink:0;
    }
    .gg-bl__view-all-text{
      position:relative;
      display:inline-block;
    }
    .gg-bl__view-all-text::after{
      content:'';
      position:absolute;
      left:0;right:0;
      bottom:-2px;
      height:1.5px;
      background:var(--gg-red);
      transform:scaleX(0);
      transform-origin:left center;
      transition:transform var(--gg-dur-slow) var(--gg-ease);
    }
    .gg-bl__view-all-arrow{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:32px;
      height:32px;
      background:var(--gg-red);
      border-radius:50%;
      color:var(--gg-white);
      font-size:13px;
      transition:all var(--gg-dur) var(--gg-ease);
      box-shadow:0 4px 12px rgba(237,41,56,.25);
    }
    .gg-bl__view-all-arrow i{
      transition:transform var(--gg-dur) var(--gg-ease-out);
    }
    .gg-bl__view-all:hover{
      color:var(--gg-red)!important;
      gap:var(--gg-sp-4);
    }
    .gg-bl__view-all:hover .gg-bl__view-all-text::after{
      transform:scaleX(1);
    }
    .gg-bl__view-all:hover .gg-bl__view-all-arrow{
      transform:scale(1.1);
      box-shadow:0 6px 16px rgba(237,41,56,.4);
    }
    .gg-bl__view-all:hover .gg-bl__view-all-arrow i{
      transform:translate3d(2px,0,0);
    }


    /* ═══════════════════════════════════════════
       BLOG GRID — 5 cards ALWAYS in single row
       Desktop: 5 equal columns (flex:1 1 0)
       Below 900px: horizontal scroll with fixed card widths
       NO WRAPPING EVER
       ═══════════════════════════════════════════ */
    /* Single horizontal row — 5 cards at desktop, horizontal scroll on
       narrower viewports. Hides the native scrollbar but keeps scroll
       fully functional (touch + mouse-wheel). */
    .gg-bl__grid{
      position:relative;
      padding:4px var(--gg-sp-10) var(--gg-sp-2);  /* a touch of vertical padding so card shadow doesn't get clipped on scroll */
      display:flex;
      flex-wrap:nowrap;
      gap:var(--gg-sp-4, 24px);
      overflow-x:auto;
      overflow-y:hidden;
      scroll-snap-type:x mandatory;
      scroll-padding-left:var(--gg-sp-10);  /* snap aligns to the visible edge after the section padding */
      scrollbar-width:none;
      -ms-overflow-style:none;
      -webkit-overflow-scrolling:touch;
    }
    .gg-bl__grid::-webkit-scrollbar{ display:none; }


    /* ═══════════════════════════════════════════
       BLOG CARD — editorial 16:9 rectangle (matches
       1920×1080 source images). 4 cards share the
       row equally on wide viewports; cards stick at
       a 280px min-width and the row scrolls horizontally
       below that.
       ═══════════════════════════════════════════ */
    .gg-bl__card{
      /* Equal share when there's space, never below 280px */
      flex: 0 0 max(280px, calc((100% - var(--gg-sp-4, 24px) * 3) / 4));
      position:relative;
      aspect-ratio:16/9;
      display:block;
      border-radius:var(--gg-r-xl);
      overflow:hidden;
      scroll-snap-align:start;
      box-shadow:
        0 1px 3px rgba(0,0,0,.08),
        0 10px 28px rgba(0,0,0,.08);
      transition:transform var(--gg-dur-slow) var(--gg-ease),box-shadow var(--gg-dur-slow) var(--gg-ease);
      isolation:isolate;
    }

    /* Placeholder when post has no cover image — branded gray block
       with a soft icon, never a third-party stock fallback. */
    .gg-bl__card-img--placeholder{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      background:
        linear-gradient(135deg, var(--gg-red-subtle, rgba(237,41,56,.07)), var(--gg-gray-100, #F3F4F6));
      color: var(--gg-gray-400, #9CA3AF);
      font-size: 48px;
      z-index: 1;
    }

    /* Empty state — shows when there are zero published blog posts */
    .gg-bl__empty{
      padding: 64px 24px;
      margin: 0 var(--gg-sp-10);
      text-align: center;
      background: var(--gg-white);
      border: 1px solid var(--gg-gray-200);
      border-radius: var(--gg-r-xl);
    }
    .gg-bl__empty-ico{
      width: 72px; height: 72px;
      display: inline-flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, var(--gg-red-subtle), rgba(237,41,56,.12));
      color: var(--gg-red);
      border-radius: 50%;
      font-size: 32px;
      margin-bottom: 18px;
    }
    .gg-bl__empty h3{
      font-family: var(--gg-font-head);
      font-weight: 800;
      font-size: 20px;
      color: var(--gg-gray-900, #0F172A);
      margin: 0 0 8px;
    }
    .gg-bl__empty p{
      font-size: 14px;
      color: var(--gg-gray-600);
      margin: 0;
      max-width: 420px;
      margin-left: auto;
      margin-right: auto;
    }

    /* Responsive — cards always 16:9 horizontal. On smaller viewports
       the row scrolls horizontally (each card snaps into view). */
    @media (max-width: 900px){
      .gg-bl__grid{
        padding-left: var(--gg-sp-5, 32px);
        padding-right: var(--gg-sp-5, 32px);
        scroll-padding-left: var(--gg-sp-5, 32px);
      }
      .gg-bl__card{
        /* Slightly wider min-width on tablet so titles are readable */
        flex: 0 0 320px;
      }
    }
    @media (max-width: 600px){
      .gg-bl__grid{
        padding-left: var(--gg-sp-4, 20px);
        padding-right: var(--gg-sp-4, 20px);
        scroll-padding-left: var(--gg-sp-4, 20px);
        gap: var(--gg-sp-3, 16px);
      }
      .gg-bl__card{
        /* On phones, each card takes most of the viewport — Netflix style */
        flex: 0 0 85%;
      }
      .gg-bl__empty{ margin: 0 var(--gg-sp-4); padding: 48px 20px; }
    }

    .gg-bl__card-link{
      position:relative;
      display:block;
      width:100%;
      height:100%;
      color:inherit;
    }


    /* ═══════════════════════════════════════════
       COVER IMAGE — full card background
       ═══════════════════════════════════════════ */
    .gg-bl__card-img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      z-index:1;
      /* No transform/transition — the image stays fixed at 16:9 so the
         user-uploaded 1920×1080 crop reads as intended. The hover effect
         lives on the overlay (darken) + the category reveal. */
      transform: none !important;
    }

    /* Dark gradient overlay for text readability */
    .gg-bl__card-overlay{
      position:absolute;
      inset:0;
      z-index:2;
      background:linear-gradient(
        180deg,
        rgba(0,0,0,.1) 0%,
        rgba(0,0,0,.15) 30%,
        rgba(0,0,0,.75) 75%,
        rgba(0,0,0,.95) 100%
      );
      transition:background var(--gg-dur-slow) var(--gg-ease);
    }

    /* Category floating top-left — hidden by default, reveals on hover */
    .gg-bl__card-category{
      position:absolute;
      top:var(--gg-sp-3);
      left:var(--gg-sp-3);
      display:inline-flex;
      align-items:center;
      padding:5px 12px;
      background:var(--gg-red);
      color:var(--gg-white)!important;
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-2xs);
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      border-radius:999px;
      z-index:3;
      box-shadow:0 4px 12px rgba(237,41,56,.4);
      /* Hidden state: faded out + slightly raised */
      opacity: 0;
      transform: translate3d(0, -8px, 0);
      transition: opacity .28s var(--gg-ease), transform .28s var(--gg-ease);
      pointer-events: none;
    }

    /* Hover arrow top-right */
    .gg-bl__card-arrow{
      position:absolute;
      top:var(--gg-sp-3);
      right:var(--gg-sp-3);
      width:32px;
      height:32px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(255,255,255,.15);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      border-radius:50%;
      color:var(--gg-white);
      font-size:14px;
      opacity:0;
      transform:translate3d(-6px,6px,0);
      transition:all var(--gg-dur-slow) var(--gg-ease);
      z-index:3;
    }


    /* ═══════════════════════════════════════════
       CARD CONTENT — floating over image bottom
       ═══════════════════════════════════════════ */
    .gg-bl__card-content{
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      padding:var(--gg-sp-4);
      z-index:3;
      color:var(--gg-white);
    }

    /* Meta row — date + read time */
    .gg-bl__card-meta{
      display:flex;
      align-items:center;
      gap:var(--gg-sp-2);
      font-family:var(--gg-font-body);
      font-size:var(--gg-text-2xs);
      font-weight:500;
      color:rgba(255,255,255,.8);
      margin-bottom:var(--gg-sp-2);
    }
    .gg-bl__card-meta-sep{
      width:3px;
      height:3px;
      background:rgba(255,255,255,.5);
      border-radius:50%;
      flex-shrink:0;
    }
    .gg-bl__card-readtime::before{
      content:'';
      display:inline-block;
      width:10px;
      height:10px;
      background-color:rgba(255,255,255,.8);
      -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E") no-repeat center/contain;
      mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E") no-repeat center/contain;
      vertical-align:-1px;
      margin-right:3px;
    }


    /* Title (2 line clamp) */
    .gg-bl__card-title{
      font-family:var(--gg-font-head);
      font-size:var(--gg-text-md);
      font-weight:700;
      color:var(--gg-white)!important;
      line-height:1.25;
      letter-spacing:-.015em;
      /* 2 line clamp */
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }


    /* Red accent bar bottom (reveal on hover) */
    .gg-bl__card-accent{
      position:absolute;
      bottom:0;
      left:0;
      right:0;
      height:3px;
      background:linear-gradient(90deg,var(--gg-red),var(--gg-red-deep));
      transform:scaleX(0);
      transform-origin:left center;
      transition:transform var(--gg-dur-slow) var(--gg-ease);
      z-index:4;
    }


    /* ═══════════════════════════════════════════
       HOVER STATES
       ─ No image zoom (image stays static, premium feel)
       ─ Overlay deepens for better category + title visibility
       ─ Category fades + slides into view from top
       ─ Card lifts slightly with a softer shadow
       ═══════════════════════════════════════════ */
    .gg-bl__card:hover{
      transform: translate3d(0, -4px, 0);
      box-shadow:
        0 14px 32px -10px rgba(15,23,42,.22),
        0 8px 18px -8px rgba(0,0,0,.12);
    }
    /* Darken the overlay so the category pill and title pop clearly */
    .gg-bl__card:hover .gg-bl__card-overlay{
      background:linear-gradient(
        180deg,
        rgba(0,0,0,.45) 0%,
        rgba(0,0,0,.4) 40%,
        rgba(0,0,0,.85) 75%,
        rgba(0,0,0,.95) 100%
      );
    }
    /* Reveal category: fade in + slide down to its anchor position */
    .gg-bl__card:hover .gg-bl__card-category{
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }


    /* ═══════════════════════════════════════════════════════════════════════
       RESPONSIVE
       Desktop: 5 cards single row (flex-fill)
       Below 1100px: horizontal scroll, fixed card width
       ═══════════════════════════════════════════════════════════════════════ */

    @media(max-width:1280px){
      .gg-bl__header{padding:0 var(--gg-sp-8);margin-bottom:var(--gg-sp-6)}
      .gg-bl__grid{padding:0 var(--gg-sp-8);gap:var(--gg-sp-3)}
      .gg-bl__card-title{font-size:var(--gg-text-sm)}
    }

    @media(max-width:1100px){
      .gg-bl__card-title{font-size:var(--gg-text-xs);line-height:1.3}
      .gg-bl__card-content{padding:var(--gg-sp-3)}
    }

    @media(max-width:900px){
      .gg-bl__header{
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        gap:var(--gg-sp-3);
        padding:0 var(--gg-sp-6);
        flex-wrap:wrap;
      }
      .gg-bl__intro{
        flex:1 1 auto;
        min-width:0;
      }
      /* Hide entire View All button on mobile (both text + arrow) */
      .gg-bl__view-all{
        display:none;
      }
    }

    /* ═══════════════════════════════════════════
       BELOW 900px — HORIZONTAL SCROLL (native feel)
       ═══════════════════════════════════════════ */
    @media(max-width:900px){
      .gg-bl{padding:var(--gg-sp-8) 0}
      .gg-bl__header{margin-bottom:var(--gg-sp-5)}

      .gg-bl__grid{
        padding:var(--gg-sp-2) var(--gg-sp-6);
        overflow-x:auto!important;
        overflow-y:visible;
        scroll-snap-type:x mandatory;
        scroll-behavior:smooth;
        scroll-padding-left:var(--gg-sp-6);
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        -ms-overflow-style:none;
        gap:var(--gg-sp-3);
      }
      .gg-bl__grid::-webkit-scrollbar{display:none;width:0;height:0}

      /* Fixed-width cards for scroll */
      .gg-bl__card{
        flex:0 0 240px;
        min-width:240px;
        aspect-ratio:4/5;
      }
      .gg-bl__card-title{font-size:var(--gg-text-md)}
      .gg-bl__card-content{padding:var(--gg-sp-4)}
    }

    @media(max-width:768px){
      .gg-bl__header{padding:0 var(--gg-sp-5)}
      .gg-bl__grid{padding:var(--gg-sp-2) var(--gg-sp-5);scroll-padding-left:var(--gg-sp-5)}
      .gg-bl__card{
        flex:0 0 220px;
        min-width:220px;
      }
      .gg-bl__title{font-size:clamp(var(--gg-text-lg),5vw,var(--gg-text-xl))}
      .gg-bl__sub{font-size:var(--gg-text-xs)}
    }

    @media(max-width:560px){
      .gg-bl{padding:var(--gg-sp-6) 0}
      .gg-bl__header{padding:0 var(--gg-sp-4);margin-bottom:var(--gg-sp-4)}
      .gg-bl__grid{
        padding:var(--gg-sp-2) var(--gg-sp-4);
        scroll-padding-left:var(--gg-sp-4);
      }
      .gg-bl__card{
        flex:0 0 200px;
        min-width:200px;
      }
      .gg-bl__card-content{padding:var(--gg-sp-3)}
      .gg-bl__card-title{font-size:var(--gg-text-sm)}
    }

    @media(max-width:400px){
      .gg-bl__card{
        flex:0 0 180px;
        min-width:180px;
      }
    }

    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
    }
    /* --- GG-BL: End --- */