.elementor-11 .elementor-element.elementor-element-e8717b4{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-35b2cf0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-01f2283{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-b1e92cb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-be9ad5a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-a96e74b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-0f06d01{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-a2d1114{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-d33ed5d *//* ==========================================================
HERO CAROUSEL + STATS — Black / White / Grey
Everything is scoped under .rs-hero so theme / Elementor
styles cannot leak in (and this can't leak out).
Fonts needed: Montserrat + Inter (see the in the HTML file)
THIS VERSION:
- Mobile / tablet (<=900px) rebuilt: slides now stack in a single
grid cell, so the hero height = the tallest slide. Image sits on
top, text below on black, nothing overlaps or gets clipped
(slide 3's long headline included).
- Slide 2 now has a CTA button (uses the same .hc-actions styles).
- Separate desktop + mobile banners (). On mobile the image
shows in full at its own aspect ratio (nothing cropped). To force one
height for all three mobile banners, set --m-ratio (e.g. 4/5) on
.rs-hero below.
- Stats: icon-above-text, centered, 2x2 grid below 700px.
Desktop (>900px) layout is unchanged.
========================================================== */
/* ---- Theme / Elementor guards ---- */
.rs-hero{font-family:var(--font-body,'Inter',system-ui,sans-serif);line-height:1.5;text-align:left;position:relative;width:100%;
-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
.rs-hero *,.rs-hero *::before,.rs-hero *::after{box-sizing:border-box}
.rs-hero h1,.rs-hero h2,.rs-hero p{margin:0;padding:0;text-transform:none}
.rs-hero a{text-decoration:none;box-shadow:none}
.rs-hero button{margin:0;text-transform:none;letter-spacing:normal;box-shadow:none;-webkit-appearance:none;appearance:none;font-family:inherit}
.rs-hero .hc-arrow,.rs-hero .hc-arrow:hover,.rs-hero .hc-arrow:focus{background:rgba(0,0,0,.35);color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.rs-hero .hc-dot,.rs-hero .hc-dot:hover,.rs-hero .hc-dot:focus{background:none;border:0;padding:0;border-radius:0;color:inherit}
.rs-hero .hc .hc-actions a.hc-btn-solid,.rs-hero .hc .hc-actions a.hc-btn-solid:hover,.rs-hero .hc .hc-actions a.hc-btn-solid:focus{color:#000}
.rs-hero .hc .hc-actions a.hc-btn-ghost{color:#fff}
.rs-hero .hc .hc-title,.rs-hero .hc .hc-kicker{color:#fff}
.rs-hero .hc .hc-title .soft{color:#a3a3a3}
/* ---- Optional: use ONLY if the widget sits inside a boxed Elementor container ----
add the class rs-hero--bleed next to rs-hero in the HTML */
.rs-hero.rs-hero--bleed{width:100vw;max-width:100vw;left:50%;margin-left:-50vw}
/* ---- Component styles ---- */
.rs-hero{--black:#000;
--ink:#0d0d0d;
--charcoal:#1c1c1c;
--grey-900:#262626;
--grey-600:#6b6b6b;
--grey-400:#a3a3a3;
--grey-200:#d4d4d4;
--grey-100:#ececec;
--white:#fff;
--font-display:'Montserrat','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--hero-h:clamp(540px,66vh,620px);
--lap:0px;
--m-ratio:auto;
--wrap:1250px;
--pad:max(24px,calc((100% - var(--wrap))/2));}
.rs-hero .hc-wrap{width:100%;max-width:none;margin:0;padding-inline:var(--pad)}
.rs-hero .hc{position:relative;background:var(--black);color:var(--white);overflow:hidden;isolation:isolate;
height:var(--hero-h);touch-action:pan-y}
.rs-hero .hc-slide{position:absolute;inset:0;opacity:0;visibility:hidden;
transition:opacity .9s ease,visibility 0s linear .9s}
.rs-hero .hc-slide.is-active{opacity:1;visibility:visible;transition:opacity .9s ease}
/* original banner image — full cover, no filter, no overlay */
.rs-hero .hc-person{position:absolute;top:0;bottom:0;right:0;left:0;width:100%;pointer-events:none}
.rs-hero .hc-person picture{display:block;width:100%;height:100%}
.rs-hero .hc-person img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.rs-hero .hc-person svg.dummy{position:absolute;right:4%;bottom:0;height:92%;width:auto;max-width:100%;
color:#3a3a3a}
.rs-hero .hc-content{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;
padding-block:40px calc(var(--lap) + 64px)}
.rs-hero .hc-copy{max-width:640px}
.rs-hero .hc-copy > *{opacity:0;transform:translateY(18px)}
.rs-hero .hc-slide.is-active .hc-copy > *{opacity:1;transform:none;
transition:opacity .7s ease,transform .7s ease}
.rs-hero .hc-slide.is-active .hc-copy > *:nth-child(1){transition-delay:.25s}
.rs-hero .hc-slide.is-active .hc-copy > *:nth-child(2){transition-delay:.35s}
.rs-hero .hc-slide.is-active .hc-copy > *:nth-child(3){transition-delay:.45s}
.rs-hero .hc-slide.is-active .hc-copy > *:nth-child(4){transition-delay:.55s}
.rs-hero .hc-slide.is-active .hc-copy > *:nth-child(5){transition-delay:.65s}
.rs-hero .hc-kicker{font-family:var(--font-display);font-size:clamp(15px,1.4vw,19px);font-weight:500;color:var(--grey-200);letter-spacing:.2px}
.rs-hero .hc-title{font-family:var(--font-display);font-weight:800;line-height:1.05;letter-spacing:-.02em;
font-size:clamp(30px,3.5vw,48px);margin:6px 0 12px;color:var(--white);text-wrap:balance}
.rs-hero .hc-title.sentence{font-size:clamp(26px,2.9vw,40px);line-height:1.15;max-width:21ch}
.rs-hero .hc-title .soft{color:var(--grey-400);font-weight:700}
.rs-hero .hc-sub{font-family:var(--font-body);font-weight:400;font-size:clamp(14.5px,1.2vw,17px);color:var(--grey-200);max-width:54ch;line-height:1.65}
.rs-hero .hc-sub-2{margin-top:16px}
.rs-hero .hc-meta{font-family:var(--font-body);display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:20px;
font-weight:600;font-size:clamp(14px,1.2vw,16px);color:var(--white)}
.rs-hero .hc-meta span{display:inline-flex;align-items:center;gap:8px}
.rs-hero .hc-meta svg{width:18px;height:18px;flex:none;color:var(--grey-200)}
.rs-hero .hc-meta .bar{width:1px;height:18px;background:var(--grey-600)}
.rs-hero .hc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.rs-hero .hc-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
padding:0 24px;border-radius:6px;font:700 14.5px/1 var(--font-display);cursor:pointer;
border:2px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .2s}
.rs-hero .hc-btn svg{width:16px;height:16px;transition:transform .25s}
.rs-hero .hc-btn-solid{background:var(--white);color:var(--black)}
.rs-hero .hc-btn-ghost{background:rgba(255,255,255,.06);color:var(--white);border-color:rgba(255,255,255,.55);
backdrop-filter:blur(4px)}
.rs-hero .hc-btn:focus-visible,
.rs-hero .hc-arrow:focus-visible,
.rs-hero .hc-dot:focus-visible{outline:3px solid var(--white);outline-offset:3px}
@media(hover:hover) and (pointer:fine){
.rs-hero .hc-btn-solid:hover{background:var(--grey-100)}
.rs-hero .hc-btn-solid:hover svg{transform:translateX(4px)}
.rs-hero .hc-btn-ghost:hover{background:var(--white);color:var(--black);border-color:var(--white)}
}
.rs-hero .hc-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.rs-hero .hc-pills span{font-family:var(--font-body);display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
padding:6px 14px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:var(--grey-100);
background:rgba(255,255,255,.05)}
.rs-hero .hc-pills svg{width:13px;height:13px}
.rs-hero .hc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:48px;height:48px;
border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35);
color:var(--white);display:grid;place-items:center;cursor:pointer;
backdrop-filter:blur(4px);transition:background .2s,color .2s,border-color .2s}
.rs-hero .hc-arrow svg{width:22px;height:22px}
.rs-hero .hc-prev{left:clamp(16px,2vw,32px)}
.rs-hero .hc-next{right:clamp(16px,2vw,32px)}
.rs-hero .hc-nav{display:none;gap:8px}
.rs-hero .hc-nav .hc-arrow{left:auto;right:auto;position:static;transform:none;width:40px;height:40px;display:grid}
.rs-hero .hc-nav .hc-arrow svg{width:18px;height:18px}
.rs-hero .hc-right{display:flex;align-items:center;gap:18px}
@media(max-width:1479px){
.rs-hero .hc > .hc-arrow{display:none}
.rs-hero .hc-nav{display:flex}
}
@media(hover:hover) and (pointer:fine){
.rs-hero .hc-arrow:hover{background:var(--white);color:var(--black);border-color:var(--white)}
}
.rs-hero .hc-bar{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:0 0 calc(var(--lap) + 22px)}
.rs-hero .hc-bar .hc-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.rs-hero .hc-dots{display:flex;gap:10px;flex:1;max-width:420px}
.rs-hero .hc-dot{position:relative;flex:1;height:26px;background:none;border:0;cursor:pointer}
.rs-hero .hc-dot::before{content:'';position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;
background:rgba(255,255,255,.28);border-radius:2px}
.rs-hero .hc-dot i{position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;width:0;background:var(--white);border-radius:2px}
.rs-hero .hc-dot.is-active i{animation:hc-fill var(--dur,6500ms) linear forwards}
.rs-hero .hc-dot.is-done i{width:100%}
.rs-hero .hc.paused .hc-dot.is-active i{animation-play-state:paused}
@keyframes hc-fill{from{width:0}to{width:100%}}
.rs-hero .hc-count{font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--grey-200);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.rs-hero .hc-count b{font-family:var(--font-display);color:var(--white);font-size:18px}
.rs-hero .hc-marquee{overflow:hidden;padding:16px 0;border-block:1px solid var(--grey-100);background:var(--white);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rs-hero .hc-mtrack{display:flex;width:max-content;white-space:nowrap;animation:hc-mslide 34s linear infinite}
.rs-hero .hc-mtrack span{font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--grey-900);padding-right:30px}
.rs-hero .hc-mtrack i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--grey-400);margin:0 26px 0 0;vertical-align:middle}
@keyframes hc-mslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rs-hero .hc-stats{position:relative;width:100%;overflow:hidden;
background-color:#e7e7dd;
background-image:
radial-gradient(70% 60% at 50% 0%,rgba(255,255,255,.95),transparent 70%),
radial-gradient(rgba(0,0,0,.09) 1px,transparent 1.3px);
background-size:auto,18px 18px;
border-bottom:1px solid var(--grey-200)}
.rs-hero .hc-stats-in{display:grid;grid-template-columns:repeat(4,1fr);padding-block:44px}
.rs-hero .hc-stat{display:flex;align-items:center;gap:16px;min-width:0;padding:6px 24px 6px 32px;
border-left:1px solid var(--grey-200)}
.rs-hero .hc-stat:first-child{border-left:0;padding-left:6px}
.rs-hero .hc-stat .hc-ib{flex:none;width:52px;height:52px;border-radius:50%;background:var(--black);color:var(--white);
display:grid;place-items:center;box-shadow:0 0 0 6px rgba(0,0,0,.07);transition:transform .25s,box-shadow .25s}
.rs-hero .hc-stat .hc-ib svg{width:23px;height:23px}
.rs-hero .hc-stat .hc-tx{min-width:0}
.rs-hero .hc-stat b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(26px,2.5vw,34px);
line-height:1.05;letter-spacing:-.02em;color:var(--black);font-variant-numeric:tabular-nums}
.rs-hero .hc-stat span{display:block;margin-top:6px;font-size:13.5px;font-weight:500;color:var(--grey-600);line-height:1.35}
@media(hover:hover) and (pointer:fine){
.rs-hero .hc-stat:hover .hc-ib{transform:translateY(-3px);box-shadow:0 0 0 9px rgba(0,0,0,.08)}
}
@media(max-width:1100px){
.rs-hero .hc-stats-in{padding-block:36px}
.rs-hero .hc-stat{flex-direction:column;align-items:flex-start;gap:14px;padding:4px 18px 4px 24px}
}
/* ================= TABLET + MOBILE (<=900px) =================
Slides stack in ONE grid cell (grid-area:1/1). The container's height
becomes the tallest slide, so text can never overlap the image or get
cut off, no matter how long a headline is. */
@media(max-width:900px){
.rs-hero{--hero-h:auto;--pad:28px;--lap:0px}
.rs-hero .hc{height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr)}
.rs-hero .hc-slide{position:relative;inset:auto;grid-area:1/1;display:flex;flex-direction:column;min-width:0}
/* image on top, hard edge */
.rs-hero .hc-person{position:relative;inset:auto;flex:none;width:100%;height:auto}
.rs-hero .hc-person picture{height:auto}
.rs-hero .hc-person img{height:auto;aspect-ratio:var(--m-ratio,auto);object-position:center top}
.rs-hero .hc-person svg.dummy{position:relative;right:auto;display:block;margin:0 auto;height:clamp(200px,60vw,320px)}
/* text below on black; bottom padding leaves room for the dots bar */
.rs-hero .hc-content{flex:1 1 auto;height:auto;justify-content:flex-start;align-items:center;
padding-block:28px 68px}
.rs-hero .hc-copy{width:100%;text-align:center;margin-inline:auto}
.rs-hero .hc-title{margin:0 auto 12px}
.rs-hero .hc-title.sentence{max-width:none}
.rs-hero .hc-title.long{font-size:clamp(20px,5.6vw,28px);line-height:1.15}
.rs-hero .hc-sub{margin-inline:auto}
.rs-hero .hc-meta{justify-content:center}
.rs-hero .hc-pills{justify-content:center}
.rs-hero .hc-actions{justify-content:center;margin-top:20px}
.rs-hero .hc-arrow,
.rs-hero .hc-nav{display:none !important}
.rs-hero .hc-dots{max-width:none}
}
/* ---- stats: 2x2 grid ---- */
@media(max-width:700px){
.rs-hero .hc-stats-in{grid-template-columns:1fr 1fr;padding-block:8px}
.rs-hero .hc-stat,
.rs-hero .hc-stat:first-child{flex-direction:column;align-items:center;text-align:center;border-left:0;padding:24px 12px}
.rs-hero .hc-stat:nth-child(2n){border-left:1px solid var(--grey-200)}
.rs-hero .hc-stat:nth-child(n+3){border-top:1px solid var(--grey-200)}
.rs-hero .hc-stat .hc-ib{width:44px;height:44px}
.rs-hero .hc-stat .hc-ib svg{width:20px;height:20px}
}
/* ---- small phones ---- */
@media(max-width:560px){
.rs-hero{--pad:20px}
.rs-hero .hc-content{padding-block:24px 64px}
.rs-hero .hc-title{font-size:clamp(28px,8.4vw,38px)}
.rs-hero .hc-title.sentence{font-size:clamp(24px,7.2vw,32px);max-width:none}
.rs-hero .hc-sub{font-size:14.5px;line-height:1.6}
.rs-hero .hc-meta{font-size:13.5px;gap:6px 12px}
.rs-hero .hc-meta .bar{display:none}
.rs-hero .hc-meta span{width:100%;justify-content:center}
.rs-hero .hc-actions{flex-direction:column}
.rs-hero .hc-actions .hc-btn{width:100%}
.rs-hero .hc-pills{gap:6px;margin-top:16px}
.rs-hero .hc-pills span{font-size:12px;padding:5px 11px}
.rs-hero .hc-bar{padding-bottom:calc(var(--lap) + 16px)}
.rs-hero .hc-count{display:none}
}
@media(max-width:360px){
.rs-hero .hc-stat{gap:10px}
.rs-hero .hc-stat .hc-ib{width:40px;height:40px}
.rs-hero .hc-stat .hc-ib svg{width:18px;height:18px}
.rs-hero .hc-btn{padding:0 16px;font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){
.rs-hero .hc-slide,
.rs-hero .hc-copy > *{transition:none !important}
.rs-hero .hc-copy > *{opacity:1;transform:none}
.rs-hero .hc-mtrack{animation:none}
.rs-hero .hc-dot.is-active i{animation:none;width:100%}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2148e8a *//* ==========================================================
CLIENT STORIES — VIDEO CAROUSEL (Light bg #e7e7dd / Black / Grey)
Paste into Elementor: Site Settings > Custom CSS (or Appearance >
Customize > Additional CSS). Everything is scoped under
#gb-videos-widget, so it can't leak out and theme styles can't leak in.
Fonts: Montserrat + Inter (the is in the HTML file).
Tweaks:
--cols cards visible per row (4 desktop, 3.15 tablet, 1.28 phone)
--gap space between cards
--wrap content width (keep the same as your hero: 1250px)
--bg section background colour
========================================================== */
#gb-videos-widget{--black:#000;--ink:#0b0b0b;--char:#161616;--g900:#262626;--g700:#404040;--g500:#737373;--g400:#a3a3a3;--g300:#c8c8c8;--g200:#e2e2e2;--g100:#f1f1f1;--white:#fff;--bg:#e7e7dd;
--font-display:'Montserrat','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--wrap:1250px;
--pad:max(24px,calc((100% - var(--wrap))/2));
--gap:20px;
--cols:4;
font-family:var(--font-body);line-height:1.5;text-align:left;position:relative;width:100%;
-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;}
#gb-videos-widget *,
#gb-videos-widget *::before,
#gb-videos-widget *::after{box-sizing:border-box}
#gb-videos-widget h2,
#gb-videos-widget p{margin:0;padding:0;text-transform:none}
#gb-videos-widget button{margin:0;text-transform:none;letter-spacing:normal;box-shadow:none;-webkit-appearance:none;appearance:none;font-family:inherit;touch-action:manipulation}
#gb-videos-widget video{max-width:none;margin:0}
#gb-videos-widget .gv-wrap{width:100%;max-width:none;margin:0;padding-inline:var(--pad)}
#gb-videos-widget .gv-section{position:relative;overflow:hidden;color:var(--char);padding:84px 0 72px;
background-color:var(--bg);
background-image:
radial-gradient(70% 50% at 50% 0%,rgba(255,255,255,.95),transparent 70%),
radial-gradient(rgba(0,0,0,.09) 1px,transparent 1.3px);
background-size:auto,18px 18px}
#gb-videos-widget .gv-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:40px;text-align:center}
#gb-videos-widget .gv-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:6px 14px 6px 11px;border-radius:999px;
font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--g700);
background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.18)}
#gb-videos-widget .gv-eyebrow svg{width:15px;height:15px;flex:none}
#gb-videos-widget .gv-title{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3vw,40px);line-height:1.12;
letter-spacing:-.02em;color:var(--ink);max-width:none;text-wrap:balance}
#gb-videos-widget .gv-side{max-width:340px;margin-inline:auto;font-size:15px;line-height:1.65;color:var(--g700);padding-bottom:4px}
#gb-videos-widget .gv-track{position:relative;display:block;overflow-x:auto;overflow-y:hidden;padding:14px 0 30px;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
#gb-videos-widget .gv-track::-webkit-scrollbar{display:none}
#gb-videos-widget .gv-track:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:12px}
#gb-videos-widget .gv-slides{display:flex;gap:var(--gap);width:100%}
#gb-videos-widget .gv-card{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));min-width:0;
scroll-snap-align:start;scroll-snap-stop:always}
#gb-videos-widget .gv-vinner{position:relative;width:100%;aspect-ratio:9/16;border-radius:22px;overflow:hidden;isolation:isolate;
background:var(--char);border:1px solid rgba(0,0,0,.14);
box-shadow:0 30px 50px -30px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06);
transition:transform .35s ease,opacity .35s ease,border-color .3s,box-shadow .3s}
/* video: original colour always (no grayscale filter) */
#gb-videos-widget .gv-vinner video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--ink)}
#gb-videos-widget .gv-vinner::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 40%,rgba(0,0,0,.92) 100%)}
#gb-videos-widget .gv-ic{width:18px;height:18px;fill:currentColor;flex:none}
#gb-videos-widget .gv-play{position:absolute;top:50%;left:50%;z-index:3;width:64px;height:64px;padding:0;border-radius:50%;
transform:translate(-50%,-50%);display:grid;place-items:center;cursor:pointer;color:var(--white);
background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.7);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .25s,transform .25s,background .25s}
#gb-videos-widget .gv-play .gv-ic{width:22px;height:22px}
#gb-videos-widget .gv-play .gv-ic-pause{display:none}
#gb-videos-widget .gv-vinner.is-playing .gv-play{opacity:0}
#gb-videos-widget .gv-vinner.is-playing .gv-play .gv-ic-play{display:none}
#gb-videos-widget .gv-vinner.is-playing .gv-play .gv-ic-pause{display:block}
#gb-videos-widget .gv-mute{position:absolute;top:12px;left:12px;z-index:4;width:40px;height:40px;padding:0;border-radius:50%;
display:grid;place-items:center;cursor:pointer;color:var(--white);
background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.4);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s,color .2s}
#gb-videos-widget .gv-mute .gv-ic-on{display:none}
#gb-videos-widget .gv-vinner.is-unmuted .gv-mute .gv-ic-muted{display:none}
#gb-videos-widget .gv-vinner.is-unmuted .gv-mute .gv-ic-on{display:block}
#gb-videos-widget .gv-vinner.is-unmuted .gv-mute{background:var(--white);color:var(--black);border-color:var(--white)}
#gb-videos-widget .gv-dur{position:absolute;top:18px;right:14px;z-index:4;padding:3px 10px;border-radius:999px;
font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.02em;color:var(--white);
background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.4)}
#gb-videos-widget .gv-meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 18px 22px;color:var(--white);pointer-events:none}
#gb-videos-widget .gv-q{font-family:var(--font-display);font-weight:600;font-size:14px;line-height:1.5;margin-bottom:14px;color:var(--white);
display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
#gb-videos-widget .gv-who{display:flex;align-items:center;gap:10px}
#gb-videos-widget .gv-av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
font-family:var(--font-display);font-weight:800;font-size:11px;letter-spacing:.02em;color:var(--black);background:var(--white)}
#gb-videos-widget .gv-wt{min-width:0;display:block}
#gb-videos-widget .gv-wt strong{display:block;font-family:var(--font-display);font-weight:700;font-size:13px;line-height:1.25;color:var(--white)}
#gb-videos-widget .gv-loc{display:block;margin-top:2px;font-size:12px;font-weight:500;line-height:1.3;color:var(--g300)}
#gb-videos-widget .gv-vbar{position:absolute;left:0;right:0;bottom:0;z-index:5;height:3px;background:rgba(255,255,255,.18);pointer-events:none}
#gb-videos-widget .gv-vbar i{display:block;height:100%;width:0;background:var(--white)}
@media(hover:hover) and (pointer:fine){
#gb-videos-widget .gv-vinner:hover{transform:translateY(-6px);border-color:rgba(0,0,0,.28);box-shadow:0 40px 60px -30px rgba(0,0,0,.5)}
#gb-videos-widget .gv-play:hover{transform:translate(-50%,-50%) scale(1.08);background:rgba(255,255,255,.26)}
#gb-videos-widget .gv-mute:hover{background:rgba(255,255,255,.9);color:var(--black)}
#gb-videos-widget .gv-vinner.is-playing:hover .gv-play{opacity:1}
}
#gb-videos-widget .gv-play:focus-visible,
#gb-videos-widget .gv-mute:focus-visible,
#gb-videos-widget .gv-arrow:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
#gb-videos-widget .gv-ctrl{display:none;align-items:center;gap:18px;margin-top:6px}
#gb-videos-widget .gv-scrollable .gv-ctrl{display:flex}
#gb-videos-widget .gv-progress{flex:1;max-width:280px;height:3px;border-radius:2px;background:rgba(0,0,0,.15);position:relative;overflow:hidden}
#gb-videos-widget .gv-progress i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);border-radius:2px;transition:width .2s}
#gb-videos-widget .gv-count{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--g700);font-variant-numeric:tabular-nums}
#gb-videos-widget .gv-nav{display:flex;gap:10px;margin-left:auto}
#gb-videos-widget .gv-arrow{width:46px;height:46px;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
color:var(--char);background:rgba(0,0,0,.05);border:1.5px solid rgba(0,0,0,.25);transition:background .2s,color .2s,opacity .2s,border-color .2s}
#gb-videos-widget .gv-arrow svg{width:20px;height:20px}
#gb-videos-widget .gv-arrow:disabled{opacity:.35;cursor:default}
@media(hover:hover) and (pointer:fine){
#gb-videos-widget .gv-arrow:not(:disabled):hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
}
#gb-videos-widget .gv-marquee{overflow:hidden;padding:16px 0;background:var(--bg);border-top:1px solid rgba(0,0,0,.08);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
#gb-videos-widget .gv-mtrack{display:flex;width:max-content;white-space:nowrap;animation:gv-mslide 34s linear infinite}
#gb-videos-widget .gv-mtrack span{font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--g900);padding-right:30px}
#gb-videos-widget .gv-mtrack i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--g400);margin:0 26px 0 0;vertical-align:middle}
@keyframes gv-mslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:1100px){
#gb-videos-widget{--cols:3.15}
#gb-videos-widget .gv-section{padding:72px 0 60px}
}
@media(max-width:880px){
#gb-videos-widget{--pad:24px;--cols:2.35;--gap:16px}
#gb-videos-widget .gv-section{padding:56px 0 48px}
#gb-videos-widget .gv-track{margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
#gb-videos-widget .gv-card:last-child{margin-right:var(--pad)}
#gb-videos-widget .gv-vinner{border-radius:20px}
#gb-videos-widget .gv-scrollable .gv-card:not(.is-active) .gv-vinner{opacity:.55;transform:scale(.965)}
}
@media(max-width:560px){
#gb-videos-widget{--pad:20px;--cols:1.28;--gap:14px}
#gb-videos-widget .gv-section{padding:44px 0 40px}
#gb-videos-widget .gv-vinner{aspect-ratio:9/14.5}
#gb-videos-widget .gv-q{font-size:13.5px}
#gb-videos-widget .gv-ctrl{gap:14px}
#gb-videos-widget .gv-progress{max-width:none}
#gb-videos-widget .gv-arrow{width:42px;height:42px}
#gb-videos-widget .gv-play{width:58px;height:58px}
}
@media(max-width:380px){
#gb-videos-widget{--pad:16px;--cols:1.2}
#gb-videos-widget .gv-eyebrow{font-size:12px}
#gb-videos-widget .gv-title{font-size:23px}
#gb-videos-widget .gv-meta{padding:16px 14px 18px}
#gb-videos-widget .gv-q{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
#gb-videos-widget .gv-mtrack{animation:none}
#gb-videos-widget .gv-vinner,
#gb-videos-widget .gv-vinner video,
#gb-videos-widget .gv-play{transition:none}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-974d4b4 *//* ==========================================================
PROFILE STRIP — REALTOR SOCIAL CARDS (Black / White / Grey)
Paste into Elementor: Site Settings > Custom CSS (or Appearance >
Customize > Additional CSS). Everything is scoped under
#gb-profile-strip, so it can't leak out and theme styles can't leak in.
Fonts: Montserrat + Inter (the is in the HTML file).
Split out of the combined social-feed stylesheet so the post-card
carousel can be styled/edited independently of the partner-logo
marquee (see partner-logos.css). Class prefix changed gs- -> ps-
and the root id to #gb-profile-strip so both widgets can safely
sit on the same page without colliding.
Added: .ps-group — small grey line under the name for the
agency/group. Empty ones collapse automatically (:empty rule),
so blank cards don't show odd gaps.
Tweaks:
--cols post-strip cards visible per row (4 desktop, 3.15 tablet, 2.35, 2 phone)
--gap space between post-strip cards
--wrap content width (keep in sync with partner-logos.css / your hero: 1250px)
========================================================== */
#gb-profile-strip{--black:#000;--ink:#0b0b0b;--char:#161616;--g900:#262626;--g700:#404040;--g600:#6b6b6b;--g500:#737373;--g450:#8f8f8f;--g400:#a3a3a3;--g300:#c8c8c8;--g200:#e2e2e2;--g100:#f1f1f1;--white:#fff;
--font-display:'Montserrat','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--wrap:1250px;
--pad:max(24px,calc((100% - var(--wrap))/2));
--gap:20px;
--cols:4;
font-family:var(--font-body);line-height:1.5;text-align:left;position:relative;width:100%;
-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;}
/* ---- SECTION BACKGROUND ---- */
#gb-profile-strip{--section-bg:#e7e7dd}
/* ---- Theme / Elementor guards ---- */
#gb-profile-strip *,
#gb-profile-strip *::before,
#gb-profile-strip *::after{box-sizing:border-box}
#gb-profile-strip h2,
#gb-profile-strip h3,
#gb-profile-strip p{margin:0;padding:0;text-transform:none}
#gb-profile-strip a{text-decoration:none;box-shadow:none}
#gb-profile-strip img{max-width:none;margin:0;border:0;border-radius:0;box-shadow:none}
#gb-profile-strip .ps-i{width:16px;height:16px;flex:none;fill:currentColor;display:block}
#gb-profile-strip button{font:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit}
/* ---- Section ---- */
#gb-profile-strip .ps-wrap{width:100%;max-width:none;margin:0;padding-inline:var(--pad)}
#gb-profile-strip .ps-section{position:relative;overflow:hidden;color:var(--black);padding:84px 0 72px;
background-color:var(--section-bg);
background-image:
radial-gradient(70% 50% at 50% 0%,rgba(255,255,255,.95),transparent 70%),
radial-gradient(rgba(0,0,0,.09) 1px,transparent 1.3px);
background-size:auto,18px 18px;
border-bottom:1px solid var(--g200)}
/* ---- Heading (centered on every screen size) ---- */
#gb-profile-strip .ps-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:40px;text-align:center}
#gb-profile-strip .ps-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:6px 14px 6px 11px;border-radius:999px;
font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--g900);
background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.16)}
#gb-profile-strip .ps-eyebrow .ps-i{width:15px;height:15px}
#gb-profile-strip .ps-title{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3vw,40px);line-height:1.12;
letter-spacing:-.02em;color:var(--black);max-width:none;text-wrap:balance}
#gb-profile-strip .ps-title .soft{color:var(--g450);font-weight:700}
#gb-profile-strip .ps-headr{display:flex;flex-direction:column;align-items:center;gap:16px}
#gb-profile-strip .ps-side{max-width:340px;font-size:15px;line-height:1.65;color:var(--g600);text-align:center;padding-bottom:0}
/* ---- Carousel wrapper (no side arrows any more — track + dots) ---- */
#gb-profile-strip .ps-carousel{position:relative}
/* ---- Post strip ---- */
#gb-profile-strip .ps-track{position:relative;display:block;overflow-x:auto;overflow-y:hidden;padding:14px 4px 20px;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
#gb-profile-strip .ps-track::-webkit-scrollbar{display:none}
#gb-profile-strip .ps-track:focus-visible{outline:2px solid var(--black);outline-offset:4px;border-radius:12px}
#gb-profile-strip .ps-slides{display:flex;gap:var(--gap);width:100%}
#gb-profile-strip .ps-card,
#gb-profile-strip .ps-card:hover,
#gb-profile-strip .ps-card:focus{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));min-width:0;display:block;
color:var(--black);scroll-snap-align:start;scroll-snap-stop:always}
#gb-profile-strip .ps-card:focus-visible .ps-inner{outline:2px solid var(--black);outline-offset:3px}
#gb-profile-strip .ps-inner{position:relative;display:flex;flex-direction:column;height:100%;background:var(--white);
border:1px solid var(--g200);border-radius:22px;overflow:hidden;isolation:isolate;
box-shadow:0 24px 40px -30px rgba(0,0,0,.35);
transition:transform .35s ease,opacity .35s ease,border-color .3s,box-shadow .3s}
/* photo — always colour, on every breakpoint */
#gb-profile-strip .ps-post{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--char)}
#gb-profile-strip .ps-post img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
transform:scale(1.02);transition:transform .7s ease}
#gb-profile-strip .ps-post::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.42) 0,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 62%,rgba(0,0,0,.5) 100%)}
#gb-profile-strip .ps-plat{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;
padding:6px 12px 6px 9px;border-radius:999px;font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.02em;color:var(--white);
background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.4);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#gb-profile-strip .ps-plat .ps-i{width:13px;height:13px}
#gb-profile-strip .ps-open{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
color:var(--white);background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.4);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .25s,transform .25s,background .2s,color .2s,border-color .2s}
#gb-profile-strip .ps-open .ps-i{width:15px;height:15px}
#gb-profile-strip .ps-play{position:absolute;top:50%;left:50%;z-index:2;width:60px;height:60px;border-radius:50%;
transform:translate(-50%,-50%);display:grid;place-items:center;color:var(--white);
background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.7);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .25s,background .25s}
#gb-profile-strip .ps-play .ps-i{width:22px;height:22px}
/* broken post-photo fallback — the JS error handler adds .ps-broken to
.ps-post; this hides the (now-empty) broken img box and shows a
label instead of a silent blank card */
#gb-profile-strip .ps-post.ps-broken{background:var(--g100);display:flex;align-items:center;justify-content:center;text-align:center}
#gb-profile-strip .ps-post.ps-broken img{display:none}
#gb-profile-strip .ps-post.ps-broken::before{content:'Image unavailable';position:relative;z-index:2;
font-family:var(--font-body);font-size:12px;color:var(--g500);padding:0 20px}
#gb-profile-strip .ps-post.ps-broken::after{display:none}
/* card footer — name + group */
#gb-profile-strip .ps-body{display:flex;flex-direction:column;gap:4px;padding:16px 18px}
#gb-profile-strip .ps-name{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.01em;
color:var(--g700);display:flex;align-items:center;gap:6px}
#gb-profile-strip .ps-name::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--black);flex:none}
#gb-profile-strip .ps-group{font-family:var(--font-body);font-weight:500;font-size:12px;letter-spacing:.01em;
color:var(--g500);padding-left:12px}
#gb-profile-strip .ps-group:empty{display:none}
/* ---- Dot pagination ---- */
#gb-profile-strip .ps-dots{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px}
#gb-profile-strip .ps-dot{width:8px;height:8px;border-radius:999px;background:var(--g300);border:0;padding:0;
transition:background .25s,width .25s}
#gb-profile-strip .ps-dot:hover{background:var(--g500)}
#gb-profile-strip .ps-dot.is-active{width:24px;background:var(--black)}
#gb-profile-strip .ps-dot:focus-visible{outline:2px solid var(--black);outline-offset:3px}
/* ---- Footer row: CTA ---- */
#gb-profile-strip .ps-foot{display:flex;align-items:center;justify-content:center;margin-top:22px}
#gb-profile-strip .ps-cta,
#gb-profile-strip .ps-cta:hover,
#gb-profile-strip .ps-cta:focus{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:6px;
font:700 14.5px/1 var(--font-display);color:var(--white);background:var(--black);border:2px solid var(--black);
cursor:pointer;flex:none;transition:background .2s,border-color .2s}
#gb-profile-strip .ps-cta .ps-i{width:16px;height:16px;transition:transform .25s}
#gb-profile-strip .ps-cta:focus-visible{outline:3px solid var(--black);outline-offset:3px}
/* ---- One-time reveal (only when JS is running) ---- */
#gb-profile-strip.ps-js .ps-card{opacity:0;transform:translateY(22px);
transition:opacity .7s ease,transform .7s ease;transition-delay:calc(var(--i,0) * 90ms)}
#gb-profile-strip.ps-js .ps-card.is-in{opacity:1;transform:none}
/* ---- Hover (mouse only) ---- */
@media(hover:hover) and (pointer:fine){
#gb-profile-strip .ps-open{opacity:0;transform:translateY(-4px)}
#gb-profile-strip .ps-card:hover .ps-inner{transform:translateY(-6px);border-color:rgba(0,0,0,.4);box-shadow:0 38px 52px -28px rgba(0,0,0,.5)}
#gb-profile-strip .ps-card:hover .ps-post img{transform:scale(1.07)}
#gb-profile-strip .ps-card:hover .ps-open{opacity:1;transform:none;background:var(--white);color:var(--black);border-color:var(--white)}
#gb-profile-strip .ps-card:hover .ps-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(255,255,255,.26)}
#gb-profile-strip .ps-cta:hover{background:var(--g900);border-color:var(--g900)}
#gb-profile-strip .ps-cta:hover .ps-i{transform:translateX(4px)}
}
/* ---- Responsive ---- */
@media(max-width:1100px){
#gb-profile-strip{--cols:3.15}
#gb-profile-strip .ps-section{padding:72px 0 60px}
}
@media(max-width:880px){
#gb-profile-strip{--pad:24px;--cols:2.35;--gap:16px}
#gb-profile-strip .ps-section{padding:56px 0 48px}
#gb-profile-strip .ps-track{margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
#gb-profile-strip .ps-card:last-child{margin-right:var(--pad)}
#gb-profile-strip .ps-inner{border-radius:20px}
}
@media(max-width:560px){
#gb-profile-strip{--pad:20px;--cols:2;--gap:12px}
#gb-profile-strip .ps-section{padding:44px 0 40px}
}
@media(max-width:380px){
#gb-profile-strip{--pad:16px}
#gb-profile-strip .ps-eyebrow{font-size:12px}
#gb-profile-strip .ps-title{font-size:23px}
#gb-profile-strip .ps-side{font-size:14px}
#gb-profile-strip .ps-body{padding:14px 14px}
}
@media(prefers-reduced-motion:reduce){
#gb-profile-strip .ps-inner,
#gb-profile-strip .ps-post img,
#gb-profile-strip .ps-open,
#gb-profile-strip .ps-play,
#gb-profile-strip.ps-js .ps-card{transition:none}
#gb-profile-strip.ps-js .ps-card{opacity:1;transform:none}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e107c7d *//* ==========================================================
PARTNER LOGOS — INFINITE MARQUEE (Black / White / Grey)
Paste into Elementor: Site Settings > Custom CSS (or Appearance >
Customize > Additional CSS). Everything is scoped under
#gb-partner-logos, so it can't leak out and theme styles can't leak in.
Fonts: Montserrat + Inter (the is in the HTML file).
Split out of the combined social-feed stylesheet so this marquee can
be styled/edited independently of the post-card carousel (see
profile-strip.css). Class prefix changed gs- -> pl- and the root id
to #gb-partner-logos so both widgets can safely sit on the same page
without colliding.
THIS VERSION: mobile responsiveness tightened — logo-box min-width
added so cards never get squeezed thinner than the logo itself on
narrow screens, and the --pad/--pcols/gap steps below 560px and
380px were re-tuned to keep spacing even now that the strip holds
more logos (10 unique + duplicate set).
Tweaks:
--pcols logos visible per view (4 desktop, 3 laptop, 2.5 tablet, 2 phone)
--wrap content width (keep in sync with profile-strip.css / your hero: 1250px)
========================================================== */
#gb-partner-logos{--black:#000;--g900:#262626;--g600:#6b6b6b;--g500:#737373;--g300:#c8c8c8;--g200:#e2e2e2;--g100:#f1f1f1;--white:#fff;
--font-display:'Montserrat','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--wrap:1250px;
--pad:max(24px,calc((100% - var(--wrap))/2));
--pcols:4;
--pgap:16px;
font-family:var(--font-body);line-height:1.5;text-align:left;position:relative;width:100%;
-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;}
#gb-partner-logos{--section-bg:#e7e7dd}
/* ---- Theme / Elementor guards ---- */
#gb-partner-logos *,
#gb-partner-logos *::before,
#gb-partner-logos *::after{box-sizing:border-box}
#gb-partner-logos h3,
#gb-partner-logos p{margin:0;padding:0;text-transform:none}
#gb-partner-logos img{max-width:none;margin:0;border:0;border-radius:0;box-shadow:none}
#gb-partner-logos .pl-i{width:16px;height:16px;flex:none;fill:currentColor;display:block}
/* ---- Section ---- */
#gb-partner-logos .pl-wrap{width:100%;max-width:none;margin:0;padding-inline:var(--pad)}
#gb-partner-logos .pl-section{position:relative;overflow:hidden;color:var(--black);padding:56px 0 64px;
background-color:var(--section-bg);
background-image:
radial-gradient(70% 50% at 50% 0%,rgba(255,255,255,.95),transparent 70%),
radial-gradient(rgba(0,0,0,.09) 1px,transparent 1.3px);
background-size:auto,18px 18px;
border-bottom:1px solid var(--g200)}
/* ---- Trusted partners: heading + text ---- */
#gb-partner-logos .pl-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:6px 14px 6px 11px;border-radius:999px;
font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--g900);
background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.16)}
#gb-partner-logos .pl-eyebrow .pl-i{width:15px;height:15px}
#gb-partner-logos .pl-partners-head{max-width:640px;margin-inline:auto;text-align:center}
#gb-partner-logos .pl-partners-head .pl-eyebrow{margin-bottom:16px;margin-inline:auto}
#gb-partner-logos .pl-ptitle{font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.2vw,28px);line-height:1.22;
letter-spacing:-.01em;color:var(--black);margin-bottom:10px;text-wrap:balance}
#gb-partner-logos .pl-ptext{font-size:14.5px;line-height:1.65;color:var(--g600);max-width:52ch;margin-inline:auto}
/* ---- Trusted partners: infinite logo marquee ---- */
#gb-partner-logos .pl-marquee{overflow:hidden;margin-top:28px;padding:6px 0;
border-top:1px solid var(--g200);border-bottom:1px solid var(--g200);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
#gb-partner-logos .pl-mtrack{display:flex;align-items:center;gap:var(--pgap);width:max-content;animation:pl-mslide 32s linear infinite}
#gb-partner-logos .pl-plogo{flex:0 0 auto;
width:calc((100vw - (2 * var(--pad)) - ((var(--pcols) - 1) * var(--pgap))) / var(--pcols));
min-width:120px;min-height:52px;
display:flex;align-items:center;justify-content:center;padding:18px 22px;
background:var(--white);border:1px solid var(--g200);border-radius:14px}
#gb-partner-logos .pl-plogo img{display:block;height:52px;width:auto;max-width:100%;object-fit:contain;margin-inline:auto}
@keyframes pl-mslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* broken partner-logo fallback — the JS error handler adds
.pl-plogo--broken + a data-broken-label attribute (from the alt
text); shows a small dashed placeholder instead of a blank box */
#gb-partner-logos .pl-plogo.pl-plogo--broken{border-style:dashed;border-color:var(--g300);background:var(--g100)}
#gb-partner-logos .pl-plogo.pl-plogo--broken img{display:none}
#gb-partner-logos .pl-plogo.pl-plogo--broken::after{content:attr(data-broken-label);
font-family:var(--font-body);font-size:11px;line-height:1.3;color:var(--g500);text-align:center}
/* ---- Hover (mouse only) ---- */
@media(hover:hover) and (pointer:fine){
#gb-partner-logos .pl-marquee:hover .pl-mtrack{animation-play-state:paused}
}
/* ---- Responsive ---- */
@media(max-width:1100px){
#gb-partner-logos{--pcols:3}
#gb-partner-logos .pl-section{padding:48px 0 56px}
}
@media(max-width:880px){
#gb-partner-logos{--pad:24px;--pcols:2.5;--pgap:14px}
#gb-partner-logos .pl-section{padding:40px 0 48px}
#gb-partner-logos .pl-plogo{padding:18px 20px;min-width:110px}
#gb-partner-logos .pl-plogo img{height:46px}
}
@media(max-width:560px){
#gb-partner-logos{--pad:20px;--pcols:2.15;--pgap:12px}
#gb-partner-logos .pl-section{padding:32px 0 40px}
#gb-partner-logos .pl-plogo{padding:14px 14px;min-width:96px}
#gb-partner-logos .pl-plogo img{height:36px}
}
@media(max-width:380px){
#gb-partner-logos{--pad:16px;--pcols:1.9;--pgap:10px}
#gb-partner-logos .pl-ptitle{font-size:19px}
#gb-partner-logos .pl-ptext{font-size:13.5px}
#gb-partner-logos .pl-plogo{padding:12px 12px;min-width:84px}
#gb-partner-logos .pl-plogo img{height:30px}
}
@media(prefers-reduced-motion:reduce){
#gb-partner-logos .pl-mtrack{animation:none}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ef34ab0 *//* ==========================================================
ABOUT / FOUNDER (Black / White / Grey — light background)
Paste into Elementor: Site Settings > Custom CSS (or Appearance >
Customize > Additional CSS). Everything is scoped under
#gb-about-widget, so it can't leak out and theme styles can't leak in.
Fonts: Montserrat + Inter (the is in the HTML file).
No global.css tokens needed. Tokens match the hero, client stories
and social feed.
MOBILE FIX (this version):
- PHOTO DISAPPEARING: .ga-photo builds its height from a
`height:0; padding-top:122.2%` hack (an aspect-ratio trick) plus
a min-height fallback. On this site something with higher
specificity/!important (theme or page-builder reset, same
family of bug as the img fix below) was winning over the plain
(non-!important) height/padding-top/min-height, collapsing the
box to 0 tall on mobile — so the img inside had nothing to fill
and nothing rendered, not even the dark overlay or "Founder" tag.
Every sizing property on .ga-photo is now !important, at the
base rule AND at every breakpoint (900/560/380px) that resets
min-height, so it can't be collapsed by an outside rule again.
- CARD OVERFLOWING OFF-SCREEN: the mobile rule centered the card
with `left:50%; transform:translateX(-50%)`. If anything
upstream neutralizes `transform` (common in some theme
accessibility/reduced-motion resets) the card falls back to the
desktop `left:-20px`, and — combined with its `max-width` no
longer being the true limiting factor once transform is gone —
it can end up pinned near the right edge and clipped, which is
exactly what showed up on-device. Mobile centering now uses
`left:16px; right:16px; margin:0 auto; max-width:calc(100% - 32px)`
instead of transform, all `!important`, so it centers using only
box-model math nothing else can easily override, and it is
physically incapable of exceeding the frame width.
- BROKEN-IMAGE FALLBACK: new `.ga-broken` state (paired with the
JS onerror handler) shows a labelled grey box instead of a blank
gap if the photo URL ever fails to load, so a future issue is
obvious at a glance instead of looking identical to this bug.
- Founder signature moved out of the copy column into the floating
card on the photo (replacing the old "500+" stat card). New
.ga-card-av / .ga-card-tx classes style it as an avatar + name +
role row. It's left-aligned by default (flex row), including on
mobile — the old centered-text stat-card styling is gone.
- Desktop text sizes (ga-title, ga-text, ga-pt strong) and a few
vertical margins trimmed down a notch, and the signature row's
height it used to take up is gone, so the copy column's visual
length now sits much closer to the photo column instead of
overshooting it.
Tweaks:
--wrap content width (keep the same as your hero: 1250px)
========================================================== */
#gb-about-widget{--black:#000;--ink:#0b0b0b;--char:#161616;--g900:#262626;--g700:#404040;--g600:#6b6b6b;--g400:#a3a3a3;--g300:#c8c8c8;--g250:#d4d4d4;--g200:#e2e2e2;--white:#fff;--bg:#e7e7dd;
--font-display:'Montserrat','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--wrap:1250px;
--pad:max(24px,calc((100% - var(--wrap))/2));
font-family:var(--font-body);line-height:1.5;text-align:left;position:relative;width:100%;
-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;}
/* ---- Theme / Elementor guards ---- */
#gb-about-widget *,
#gb-about-widget *::before,
#gb-about-widget *::after{box-sizing:border-box}
#gb-about-widget h2,
#gb-about-widget p{margin:0;padding:0;text-transform:none}
#gb-about-widget img{max-width:none;margin:0;border:0;border-radius:0;box-shadow:none}
#gb-about-widget strong{font-weight:inherit}
/* ---- Section ---- */
#gb-about-widget .ga-wrap{width:100%;max-width:none;margin:0;padding-inline:var(--pad)}
#gb-about-widget .ga-section{position:relative;overflow:hidden;color:var(--char);padding:96px 0 88px;
background-color:var(--bg);
background-image:
radial-gradient(70% 50% at 50% 0%,rgba(255,255,255,.95),transparent 70%),
radial-gradient(rgba(0,0,0,.09) 1px,transparent 1.3px);
background-size:auto,18px 18px}
#gb-about-widget .ga-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
@media(min-width:901px){
#gb-about-widget .ga-grid{align-items:stretch}
#gb-about-widget .ga-frame{height:100%;min-height:460px}
#gb-about-widget .ga-photo{height:100% !important;padding-top:0 !important}
}
#gb-about-widget .ga-copy{padding-top:6px}
/* ---- Portrait ---- */
#gb-about-widget .ga-frame{position:relative !important;isolation:isolate;width:100%}
#gb-about-widget .ga-frame::before{content:'';position:absolute;inset:0;z-index:-1;transform:translate(18px,18px);
border:1px solid rgba(0,0,0,.15);border-radius:22px}
/* !important on every sizing property: this box's height comes from the
padding-top percentage hack below plus min-height as a hard floor —
both need to win over any theme/builder reset or the box collapses
to 0 tall and the photo (and its overlay/tag) disappears entirely,
which is what was happening on mobile */
#gb-about-widget .ga-photo{position:relative !important;display:block !important;width:100% !important;
height:0 !important;padding-top:122.2% !important;min-height:340px !important;
border-radius:22px;overflow:hidden;background:var(--char);
border:1px solid rgba(0,0,0,.14);box-shadow:0 30px 50px -30px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.06)}
/* !important: wins over theme/Elementor global img resets (e.g. img{height:auto!important})
that would otherwise collapse this absolutely-positioned cover image, mainly seen on mobile */
#gb-about-widget .ga-photo img{position:absolute !important;inset:0 !important;
width:100% !important;height:100% !important;max-width:none !important;
object-fit:cover !important;object-position:top center !important;display:block !important}
#gb-about-widget .ga-photo::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.4) 0,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 60%,rgba(0,0,0,.55) 100%)}
#gb-about-widget .ga-tag{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
padding:6px 12px 6px 9px;border-radius:999px;font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.02em;color:var(--white);
background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.4);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#gb-about-widget .ga-tag svg{width:13px;height:13px;flex:none}
/* broken-photo fallback — paired with the JS onerror handler, which
adds .ga-broken to .ga-photo if the image URL fails to load */
#gb-about-widget .ga-photo.ga-broken{background:var(--g200) !important}
#gb-about-widget .ga-photo.ga-broken img{display:none !important}
#gb-about-widget .ga-photo.ga-broken::after{display:none}
#gb-about-widget .ga-photo.ga-broken::before{content:'Photo unavailable';position:absolute;inset:0;z-index:2;
display:flex;align-items:center;justify-content:center;text-align:center;padding:0 24px;
font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--g600)}
/* ---- Floating founder-name card (was the "500+" stat card) ---- */
#gb-about-widget .ga-card{position:absolute;left:-20px;bottom:32px;z-index:3;max-width:240px;padding:14px 18px;border-radius:18px;
display:flex;align-items:center;gap:12px;text-align:left;
background:var(--white);color:var(--black);box-shadow:0 24px 40px -18px rgba(0,0,0,.35),0 0 0 6px rgba(0,0,0,.04)}
#gb-about-widget .ga-card-av{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.02em;color:var(--white);background:var(--ink)}
#gb-about-widget .ga-card-tx{min-width:0;display:block}
#gb-about-widget .ga-card-tx strong{display:block;font-family:var(--font-display);font-weight:700;font-size:14.5px;line-height:1.25;color:var(--ink);letter-spacing:-.005em;overflow-wrap:break-word}
#gb-about-widget .ga-card-tx span{display:block;margin-top:3px;font-size:11.5px;font-weight:500;line-height:1.35;color:var(--g600);overflow-wrap:break-word}
/* ---- Copy ---- */
#gb-about-widget .ga-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:6px 14px 6px 11px;border-radius:999px;white-space:nowrap;
font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--g700);
background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.16)}
#gb-about-widget .ga-eyebrow svg{width:15px;height:15px;flex:none}
#gb-about-widget .ga-title{font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.3vw,30px);line-height:1.18;
letter-spacing:-.02em;color:var(--ink);max-width:26ch;margin-bottom:18px;text-wrap:balance}
#gb-about-widget .ga-title .soft{color:var(--g600);font-weight:700}
#gb-about-widget .ga-text{font-size:15px;line-height:1.7;color:var(--g900);max-width:56ch;margin-bottom:12px}
/* ---- Numbers ---- */
#gb-about-widget .ga-pts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:26px;border-top:1px solid rgba(0,0,0,.14)}
#gb-about-widget .ga-pt{min-width:0;padding:20px 16px 0 26px;border-left:1px solid rgba(0,0,0,.14)}
#gb-about-widget .ga-pt:first-child{border-left:0;padding-left:0}
#gb-about-widget .ga-pt strong{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(18px,1.7vw,22px);
line-height:1.1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
#gb-about-widget .ga-pt span{display:block;margin-top:6px;font-size:13px;font-weight:500;line-height:1.35;color:var(--g600)}
/* ---- One-time reveal (only when JS is running) ---- */
#gb-about-widget.ga-js .ga-frame,
#gb-about-widget.ga-js .ga-copy > *{opacity:0;transform:translateY(18px)}
#gb-about-widget.ga-js.is-in .ga-frame,
#gb-about-widget.ga-js.is-in .ga-copy > *{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
#gb-about-widget.ga-js.is-in .ga-copy > *:nth-child(1){transition-delay:.2s}
#gb-about-widget.ga-js.is-in .ga-copy > *:nth-child(2){transition-delay:.3s}
#gb-about-widget.ga-js.is-in .ga-copy > *:nth-child(3){transition-delay:.4s}
#gb-about-widget.ga-js.is-in .ga-copy > *:nth-child(4){transition-delay:.5s}
#gb-about-widget.ga-js.is-in .ga-copy > *:nth-child(5){transition-delay:.6s}
#gb-about-widget.ga-js.is-in .ga-copy > *:nth-child(6){transition-delay:.7s}
/* ---- Responsive ---- */
@media(max-width:1100px){
#gb-about-widget .ga-section{padding:80px 0 72px}
#gb-about-widget .ga-grid{gap:56px}
}
@media(max-width:900px){
#gb-about-widget{--pad:24px}
#gb-about-widget .ga-section{padding:56px 0 52px}
#gb-about-widget .ga-grid{grid-template-columns:1fr;gap:44px}
#gb-about-widget .ga-copy{padding-top:0;text-align:center}
#gb-about-widget .ga-frame{max-width:380px;margin-inline:auto}
#gb-about-widget .ga-frame::before{transform:translate(10px,10px);border-radius:20px}
#gb-about-widget .ga-photo{border-radius:20px;min-height:400px !important}
/* Centering that does NOT rely on `transform` (some theme/accessibility
resets neutralize transforms, which previously left the card pinned
at the desktop `left:-20px` and clipped off the right edge). Using
left+right+auto-margin only, all !important, and max-width is a hard
`calc(100% - 32px)` so the card is physically unable to exceed the
frame's width regardless of what else is happening on the page. */
#gb-about-widget .ga-card{left:16px !important;right:16px !important;bottom:16px !important;top:auto !important;
transform:none !important;margin:0 auto !important;width:-moz-fit-content !important;width:fit-content !important;
max-width:calc(100% - 32px) !important;padding:12px 16px;border-radius:16px}
#gb-about-widget .ga-title{max-width:none;margin-inline:auto}
#gb-about-widget .ga-text{max-width:60ch;margin-inline:auto}
#gb-about-widget .ga-pt{text-align:center}
}
@media(max-width:560px){
#gb-about-widget{--pad:20px}
#gb-about-widget .ga-section{padding:44px 0 44px}
#gb-about-widget .ga-frame{max-width:none;margin-right:0}
#gb-about-widget .ga-photo{min-height:340px !important}
#gb-about-widget .ga-text{font-size:14.5px;line-height:1.68}
#gb-about-widget .ga-pt{padding:18px 8px 0 14px}
#gb-about-widget .ga-pt strong{font-size:clamp(17px,5vw,20px)}
#gb-about-widget .ga-pt span{font-size:12px}
}
@media(max-width:380px){
#gb-about-widget{--pad:16px}
#gb-about-widget .ga-eyebrow{font-size:12px}
#gb-about-widget .ga-title{font-size:20px}
#gb-about-widget .ga-photo{min-height:300px !important}
#gb-about-widget .ga-card{max-width:calc(100% - 32px) !important;padding:10px 14px;gap:10px}
#gb-about-widget .ga-card-av{width:32px;height:32px;font-size:11px}
#gb-about-widget .ga-card-tx strong{font-size:13px}
#gb-about-widget .ga-card-tx span{font-size:10.5px}
#gb-about-widget .ga-pt{padding-left:10px}
#gb-about-widget .ga-pt span{font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){
#gb-about-widget.ga-js .ga-frame,
#gb-about-widget.ga-js .ga-copy > *{opacity:1;transform:none;transition:none}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-36b6415 *//* ==========================================================
COMMUNITY — MEMBERSHIP TIERS (Black / White / Grey)
Paste into Elementor: Site Settings > Custom CSS (or Appearance >
Customize > Additional CSS). Everything is scoped under
#gb-community-widget (Hinglish) and #gb-community-en-widget (English),
so it can't leak out and theme styles can't leak in. One CSS file serves both.
Fonts: Montserrat + Inter (the is in the HTML file).
No global.css tokens needed. Tokens match the hero, client stories,
social feed, about and offer sections.
Tweaks:
--wrap content width (keep the same as your hero: 1250px)
.gc-names max-width sets how wide the four tier cards run
========================================================== */
:is(#gb-community-widget,#gb-community-en-widget){--black:#000;--g900:#262626;--g600:#6b6b6b;--g450:#8f8f8f;--g300:#c8c8c8;--g200:#e2e2e2;--g100:#f1f1f1;--white:#fff;
--font-display:'Montserrat','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--wrap:1250px;
--pad:max(24px,calc((100% - var(--wrap))/2));
font-family:var(--font-body);line-height:1.5;text-align:center;position:relative;width:100%;
-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;}
/* ---- SECTION BACKGROUND ----
Same colour token as the social-feed section, so the two sections
match. Option A — change the hex right here.
Option B — control it from your theme's Global CSS (loads after this
file, so a plain override works):
:is(#gb-community-widget,#gb-community-en-widget){ --section-bg:#111111; }
Either way, only this one variable needs to change. */
:is(#gb-community-widget,#gb-community-en-widget){--section-bg:#e7e7dd}
/* ---- Theme / Elementor guards ---- */
:is(#gb-community-widget,#gb-community-en-widget) *,
:is(#gb-community-widget,#gb-community-en-widget) *::before,
:is(#gb-community-widget,#gb-community-en-widget) *::after{box-sizing:border-box}
:is(#gb-community-widget,#gb-community-en-widget) h2,
:is(#gb-community-widget,#gb-community-en-widget) p{margin:0;padding:0;text-transform:none}
:is(#gb-community-widget,#gb-community-en-widget) ul{list-style:none;margin:0;padding:0}
:is(#gb-community-widget,#gb-community-en-widget) li{list-style:none;margin:0}
:is(#gb-community-widget,#gb-community-en-widget) a{text-decoration:none;box-shadow:none}
:is(#gb-community-widget,#gb-community-en-widget) strong{font-weight:inherit}
/* ---- Section ---- */
:is(#gb-community-widget,#gb-community-en-widget) .gc-wrap{width:100%;max-width:none;margin:0;padding-inline:var(--pad)}
:is(#gb-community-widget,#gb-community-en-widget) .gc-section{position:relative;overflow:hidden;color:var(--black);padding:84px 0 76px;
background-color:var(--section-bg);
background-image:
radial-gradient(70% 50% at 50% 0%,rgba(255,255,255,.95),transparent 70%),
radial-gradient(rgba(0,0,0,.09) 1px,transparent 1.3px);
background-size:auto,18px 18px;
border-bottom:1px solid var(--g200)}
:is(#gb-community-widget,#gb-community-en-widget) .gc-in{display:flex;flex-direction:column;align-items:center;text-align:center}
/* ---- Heading ---- */
:is(#gb-community-widget,#gb-community-en-widget) .gc-eyebrow{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;max-width:100%;
margin-bottom:18px;padding:6px 14px 6px 11px;border-radius:999px;
font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--g900);
background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.16)}
:is(#gb-community-widget,#gb-community-en-widget) .gc-eyebrow svg{width:15px;height:15px;flex:none}
:is(#gb-community-widget,#gb-community-en-widget) .gc-title{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2.4vw,32px);line-height:1.2;
letter-spacing:-.02em;color:var(--black);max-width:30ch;margin:0 auto;text-align:center;text-wrap:balance}
:is(#gb-community-widget,#gb-community-en-widget) .gc-title .soft{color:var(--g450);font-weight:700}
:is(#gb-community-widget,#gb-community-en-widget) .gc-lead{max-width:52ch;margin:18px auto 0;font-size:16px;line-height:1.7;color:var(--g600);text-align:center}
/* ---- Tiers: four steps, from "just looking" to "portfolio" ---- */
:is(#gb-community-widget,#gb-community-en-widget) .gc-names{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:100%;max-width:920px;margin:38px auto 36px}
:is(#gb-community-widget,#gb-community-en-widget) .gc-tier{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;padding:22px 14px 22px;
background:var(--white);border:1px solid var(--g200);border-radius:18px;
box-shadow:0 20px 36px -28px rgba(0,0,0,.35)}
:is(#gb-community-widget,#gb-community-en-widget) .gc-lvl{display:flex;gap:4px;margin-bottom:16px}
:is(#gb-community-widget,#gb-community-en-widget) .gc-lvl i{display:block;width:18px;height:4px;border-radius:2px;background:var(--g200)}
:is(#gb-community-widget,#gb-community-en-widget) .gc-lvl i.on{background:var(--black)}
:is(#gb-community-widget,#gb-community-en-widget) .gc-name{display:block;font-family:var(--font-display);font-weight:800;font-size:17px;line-height:1.2;letter-spacing:-.01em;color:var(--black)}
:is(#gb-community-widget,#gb-community-en-widget) .gc-desc{display:block;margin-top:6px;font-size:13px;font-weight:500;line-height:1.45;color:var(--g600)}
/* ---- CTA ---- */
:is(#gb-community-widget,#gb-community-en-widget) .gc-cta,
:is(#gb-community-widget,#gb-community-en-widget) .gc-cta:hover,
:is(#gb-community-widget,#gb-community-en-widget) .gc-cta:focus{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:6px;
font:700 14.5px/1 var(--font-display);color:var(--white);background:var(--black);border:2px solid var(--black);
cursor:pointer;transition:background .2s,border-color .2s}
:is(#gb-community-widget,#gb-community-en-widget) .gc-cta svg{width:16px;height:16px;transition:transform .25s}
:is(#gb-community-widget,#gb-community-en-widget) .gc-cta:focus-visible{outline:3px solid var(--black);outline-offset:3px}
/* ---- One-time reveal (only when JS is running) ---- */
:is(#gb-community-widget,#gb-community-en-widget).gc-js .gc-in > *{opacity:0;transform:translateY(18px)}
:is(#gb-community-widget,#gb-community-en-widget).gc-js.is-in .gc-in > *{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
:is(#gb-community-widget,#gb-community-en-widget).gc-js.is-in .gc-in > *:nth-child(1){transition-delay:.15s}
:is(#gb-community-widget,#gb-community-en-widget).gc-js.is-in .gc-in > *:nth-child(2){transition-delay:.25s}
:is(#gb-community-widget,#gb-community-en-widget).gc-js.is-in .gc-in > *:nth-child(3){transition-delay:.35s}
:is(#gb-community-widget,#gb-community-en-widget).gc-js.is-in .gc-in > *:nth-child(4){transition-delay:.45s}
:is(#gb-community-widget,#gb-community-en-widget).gc-js.is-in .gc-in > *:nth-child(5){transition-delay:.55s}
/* ---- Hover (mouse only) ---- */
@media(hover:hover) and (pointer:fine){
:is(#gb-community-widget,#gb-community-en-widget) .gc-cta:hover{background:var(--g900);border-color:var(--g900)}
:is(#gb-community-widget,#gb-community-en-widget) .gc-cta:hover svg{transform:translateX(4px)}
}
/* ---- Responsive ---- */
@media(max-width:1100px){
:is(#gb-community-widget,#gb-community-en-widget) .gc-section{padding:72px 0 64px}
}
@media(max-width:880px){
:is(#gb-community-widget,#gb-community-en-widget){--pad:24px}
:is(#gb-community-widget,#gb-community-en-widget) .gc-title{max-width:none;text-align:center}
:is(#gb-community-widget,#gb-community-en-widget) .gc-section{padding:56px 0 52px}
:is(#gb-community-widget,#gb-community-en-widget) .gc-names{grid-template-columns:1fr 1fr;gap:14px;max-width:460px;margin:30px auto 30px}
}
@media(max-width:560px){
:is(#gb-community-widget,#gb-community-en-widget){--pad:20px}
:is(#gb-community-widget,#gb-community-en-widget) .gc-section{padding:44px 0 44px}
:is(#gb-community-widget,#gb-community-en-widget) .gc-eyebrow{font-size:12px;padding:5px 12px 5px 10px}
:is(#gb-community-widget,#gb-community-en-widget) .gc-lead{font-size:15px;text-align:center}
:is(#gb-community-widget,#gb-community-en-widget) .gc-names{gap:12px}
:is(#gb-community-widget,#gb-community-en-widget) .gc-tier{padding:18px 10px 18px;border-radius:16px;text-align:center}
:is(#gb-community-widget,#gb-community-en-widget) .gc-name{font-size:16px}
:is(#gb-community-widget,#gb-community-en-widget) .gc-desc{font-size:12px}
:is(#gb-community-widget,#gb-community-en-widget) .gc-cta{width:100%}
}
@media(max-width:420px){
:is(#gb-community-widget,#gb-community-en-widget){--pad:16px}
:is(#gb-community-widget,#gb-community-en-widget) .gc-title{font-size:20px;max-width:none;text-align:center}
:is(#gb-community-widget,#gb-community-en-widget) .gc-names{grid-template-columns:1fr;max-width:320px}
}
@media(prefers-reduced-motion:reduce){
:is(#gb-community-widget,#gb-community-en-widget).gc-js .gc-in > *{opacity:1;transform:none;transition:none}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d2556a1 *//* ==========================================================
OFFER — Rs99 PRICING BAND (Black / White / Grey)
Paste into Elementor: Site Settings > Custom CSS (or Appearance >
Customize > Additional CSS). Everything is scoped under
#gb-offer-widget, so it can't leak out and theme styles can't leak in.
Fonts: Montserrat + Inter (the is in the HTML file).
No global.css tokens needed. Tokens match the hero, client stories,
social feed and about section.
Tweaks:
--wrap content width (keep the same as your hero: 1250px)
to flip the band to a light section, see the note at the bottom
========================================================== */
#gb-offer-widget{--black:#000;--ink:#0b0b0b;--g900:#262626;--g600:#6b6b6b;--g400:#a3a3a3;--g250:#d4d4d4;--g200:#e2e2e2;--g100:#f1f1f1;--white:#fff;
--font-display:'Montserrat','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--wrap:1250px;
--pad:max(24px,calc((100% - var(--wrap))/2));
font-family:var(--font-body);line-height:1.5;text-align:left;position:relative;width:100%;
-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;}
/* ---- Theme / Elementor guards ---- */
#gb-offer-widget *,
#gb-offer-widget *::before,
#gb-offer-widget *::after{box-sizing:border-box}
#gb-offer-widget h2,
#gb-offer-widget p{margin:0;padding:0;text-transform:none}
#gb-offer-widget ul{list-style:none;margin:0;padding:0}
#gb-offer-widget li{list-style:none;margin:0}
#gb-offer-widget a{text-decoration:none;box-shadow:none}
#gb-offer-widget s{text-decoration:line-through}
#gb-offer-widget b{font-weight:inherit}
/* ---- Section (spotlight sits behind the price card) ---- */
#gb-offer-widget .go-wrap{width:100%;max-width:none;margin:0;padding-inline:var(--pad)}
#gb-offer-widget .go-section{position:relative;overflow:hidden;color:var(--white);padding:96px 0 88px;
background-color:var(--ink);
background-image:
radial-gradient(55% 75% at 78% 50%,rgba(255,255,255,.11),transparent 70%),
radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.3px);
background-size:auto,20px 20px}
#gb-offer-widget .go-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:center}
/* ---- Left: pitch ---- */
#gb-offer-widget .go-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:6px 14px 6px 11px;border-radius:999px;
font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--g250);
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22)}
#gb-offer-widget .go-badge svg{width:16px;height:16px;flex:none}
#gb-offer-widget .go-title{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3.2vw,42px);line-height:1.1;
letter-spacing:-.02em;color:var(--white);max-width:17ch;text-wrap:balance}
#gb-offer-widget .go-title .soft{color:var(--g400);font-weight:700}
#gb-offer-widget .go-lead{margin-top:20px;max-width:50ch;font-size:16px;line-height:1.75;color:var(--g250)}
#gb-offer-widget .go-list{margin-top:28px;max-width:52ch}
#gb-offer-widget .go-list li{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-top:1px solid rgba(255,255,255,.14);
font-size:14.5px;line-height:1.5;color:var(--g250)}
#gb-offer-widget .go-list li:first-child{border-top:0}
#gb-offer-widget .go-tick{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--white);
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3)}
#gb-offer-widget .go-tick svg{width:12px;height:12px}
/* ---- Left: CTA buttons ---- */
#gb-offer-widget .go-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
#gb-offer-widget .go-actions-right{justify-content:flex-end}
#gb-offer-widget .go-btn-primary,
#gb-offer-widget .go-btn-primary:hover,
#gb-offer-widget .go-btn-primary:focus,
#gb-offer-widget .go-btn-secondary,
#gb-offer-widget .go-btn-secondary:hover,
#gb-offer-widget .go-btn-secondary:focus{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:6px;
font:700 14px/1 var(--font-display);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
#gb-offer-widget .go-btn-primary,
#gb-offer-widget .go-btn-primary:hover,
#gb-offer-widget .go-btn-primary:focus{color:var(--black);background:var(--white);border:2px solid var(--white)}
#gb-offer-widget .go-btn-secondary,
#gb-offer-widget .go-btn-secondary:hover,
#gb-offer-widget .go-btn-secondary:focus{color:var(--white);background:var(--g900);border:2px solid var(--g600);text-shadow:none;-webkit-font-smoothing:antialiased}
#gb-offer-widget .go-btn-primary svg,
#gb-offer-widget .go-btn-secondary svg{width:16px;height:16px;transition:transform .25s}
#gb-offer-widget .go-btn-primary:focus-visible,
#gb-offer-widget .go-btn-secondary:focus-visible{outline:3px solid var(--white);outline-offset:3px}
/* ---- Right: price card ---- */
#gb-offer-widget .go-card{position:relative;padding:40px 36px 36px;border-radius:22px;background:var(--white);color:var(--black);
box-shadow:0 40px 60px -30px #000,0 0 0 8px rgba(255,255,255,.06)}
#gb-offer-widget .go-ptag{display:flex;align-items:flex-start;gap:6px;color:var(--black)}
#gb-offer-widget .go-ptag .cur{font-family:var(--font-display);font-weight:600;font-size:27px;margin-top:12px;color:var(--g600)}
#gb-offer-widget .go-ptag .num{font-family:var(--font-display);font-weight:800;font-size:clamp(72px,8vw,108px);line-height:.85;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#gb-offer-widget .go-strike{margin-top:14px;font-size:13.5px;font-weight:500;color:var(--g600)}
#gb-offer-widget .go-strike s{margin-right:8px;color:var(--g600)}
#gb-offer-widget .go-meta{margin-top:20px;padding-top:20px;border-top:1px dashed var(--g250);font-size:13.5px;line-height:1.7;color:var(--g600)}
#gb-offer-widget .go-seats{margin:22px 0;padding:16px 18px;border-radius:16px;background:#f2f2f2;border:1px solid var(--g200)}
#gb-offer-widget .go-seats .row{display:flex;justify-content:space-between;align-items:baseline;gap:4px 10px;flex-wrap:wrap;margin-bottom:12px;
font-size:12.5px;font-weight:600;color:var(--g600)}
#gb-offer-widget .go-seats b{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--black)}
#gb-offer-widget .go-bar{position:relative;height:6px;border-radius:999px;background:var(--g200);overflow:hidden}
#gb-offer-widget .go-bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:var(--black);
transition:width 1.7s cubic-bezier(.2,.7,.3,1)}
#gb-offer-widget .go-cta,
#gb-offer-widget .go-cta:hover,
#gb-offer-widget .go-cta:focus{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:0 24px;border-radius:6px;
font:700 14.5px/1 var(--font-display);color:var(--white);background:var(--black);border:2px solid var(--black);
cursor:pointer;transition:background .2s,border-color .2s,color .2s}
#gb-offer-widget .go-cta svg{width:16px;height:16px;transition:transform .25s}
#gb-offer-widget .go-cta:focus-visible{outline:3px solid var(--black);outline-offset:3px}
#gb-offer-widget .go-card-actions{display:flex;flex-direction:row;gap:12px}
#gb-offer-widget .go-card-actions .go-cta{flex:1 1 0}
#gb-offer-widget .go-cta-outline,
#gb-offer-widget .go-cta-outline:hover,
#gb-offer-widget .go-cta-outline:focus{background:transparent;color:var(--black)}
/* ---- One-time reveal (only when JS is running) ---- */
#gb-offer-widget.go-js .go-l > *,
#gb-offer-widget.go-js .go-card{opacity:0;transform:translateY(18px)}
#gb-offer-widget.go-js.is-in .go-l > *,
#gb-offer-widget.go-js.is-in .go-card{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
#gb-offer-widget.go-js.is-in .go-l > *:nth-child(1){transition-delay:.2s}
#gb-offer-widget.go-js.is-in .go-l > *:nth-child(2){transition-delay:.3s}
#gb-offer-widget.go-js.is-in .go-l > *:nth-child(3){transition-delay:.4s}
#gb-offer-widget.go-js.is-in .go-l > *:nth-child(4){transition-delay:.5s}
#gb-offer-widget.go-js.is-in .go-l > *:nth-child(5){transition-delay:.6s}
#gb-offer-widget.go-js.is-in .go-card{transition-delay:.35s}
/* ---- Hover (mouse only) ---- */
@media(hover:hover) and (pointer:fine){
#gb-offer-widget .go-cta:hover{background:var(--g900);border-color:var(--g900)}
#gb-offer-widget .go-cta:hover svg{transform:translateX(4px)}
#gb-offer-widget .go-cta-outline:hover{background:var(--black);color:var(--white)}
#gb-offer-widget .go-btn-primary:hover{background:var(--g200);border-color:var(--g200)}
#gb-offer-widget .go-btn-secondary:hover{background:var(--g600);border-color:var(--g250)}
#gb-offer-widget .go-btn-primary:hover svg,
#gb-offer-widget .go-btn-secondary:hover svg{transform:translateX(4px)}
}
/* ---- Responsive ---- */
@media(max-width:1100px){
#gb-offer-widget .go-section{padding:80px 0 72px}
#gb-offer-widget .go-grid{gap:48px}
#gb-offer-widget .go-card{padding:34px 28px 30px}
}
@media(max-width:900px){
#gb-offer-widget{--pad:24px}
#gb-offer-widget .go-section{padding:56px 0 52px;
background-image:radial-gradient(80% 45% at 50% 82%,rgba(255,255,255,.11),transparent 70%),radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.3px)}
#gb-offer-widget .go-grid{grid-template-columns:1fr;gap:40px}
#gb-offer-widget .go-l{text-align:center}
#gb-offer-widget .go-title{max-width:none}
#gb-offer-widget .go-lead{max-width:none;margin-inline:auto}
#gb-offer-widget .go-list{max-width:none;text-align:left}
#gb-offer-widget .go-card{padding:32px 28px 28px}
#gb-offer-widget .go-card{text-align:center}
#gb-offer-widget .go-ptag{justify-content:center}
#gb-offer-widget .go-seats .row{flex-direction:column;align-items:center;gap:6px}
#gb-offer-widget .go-card-actions{justify-content:center}
}
@media(max-width:560px){
#gb-offer-widget{--pad:20px}
#gb-offer-widget .go-section{padding:44px 0 44px}
#gb-offer-widget .go-badge{font-size:12px;padding:5px 12px 5px 10px;margin-bottom:16px}
#gb-offer-widget .go-lead{font-size:15px}
#gb-offer-widget .go-list{margin-top:22px}
#gb-offer-widget .go-list li{font-size:13.5px;padding:12px 0}
#gb-offer-widget .go-actions{margin-top:26px}
#gb-offer-widget .go-btn-primary,
#gb-offer-widget .go-btn-secondary{flex:1 1 auto;min-height:48px;padding:0 18px;font-size:13.5px}
#gb-offer-widget .go-card{padding:28px 22px 24px;border-radius:20px}
#gb-offer-widget .go-ptag .cur{font-size:22px;margin-top:8px}
#gb-offer-widget .go-ptag .num{font-size:clamp(64px,20vw,84px)}
#gb-offer-widget .go-seats{padding:14px 16px}
#gb-offer-widget .go-card-actions{flex-direction:column}
}
@media(max-width:380px){
#gb-offer-widget{--pad:16px}
#gb-offer-widget .go-title{font-size:23px}
#gb-offer-widget .go-card{padding:24px 18px 20px}
#gb-offer-widget .go-strike,
#gb-offer-widget .go-meta{font-size:12.5px}
#gb-offer-widget .go-seats .row{font-size:11.5px}
#gb-offer-widget .go-btn-primary,
#gb-offer-widget .go-btn-secondary{width:100%}
}
@media(prefers-reduced-motion:reduce){
#gb-offer-widget.go-js .go-l > *,
#gb-offer-widget.go-js .go-card{opacity:1;transform:none;transition:none}
#gb-offer-widget .go-bar i{transition:none}
}
/* ==========================================================
OPTIONAL — light version (use if the band sits right after the dark
About section). Uncomment; the price card stays white with a soft
shadow and a light border.
==========================================================
#gb-offer-widget .go-card{border:1px solid var(--g200);box-shadow:0 30px 50px -30px rgba(0,0,0,.35)}
#gb-offer-widget .go-section{color:var(--black);background-color:#f2f2f2;
background-image:radial-gradient(70% 50% at 50% 0%,rgba(255,255,255,.95),transparent 70%),radial-gradient(rgba(0,0,0,.09) 1px,transparent 1.3px);background-size:auto,18px 18px}
#gb-offer-widget .go-title{color:var(--black)}
#gb-offer-widget .go-title .soft{color:#8f8f8f}
#gb-offer-widget .go-lead,#gb-offer-widget .go-list li{color:var(--g600)}
#gb-offer-widget .go-badge{color:var(--g900);background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.16)}
#gb-offer-widget .go-list li{border-top-color:var(--g200)}
#gb-offer-widget .go-tick{color:var(--white);background:var(--black);border-color:var(--black)}
*//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6387119 *//* ==========================================================
CTA BAND — WHATSAPP (Black / White / Grey) — LIGHT VERSION
Sits above a black footer, so the band is light with a dot grid.
Paste into Elementor: Site Settings > Custom CSS (or Appearance >
Customize > Additional CSS). Everything is scoped under
#gb-cta-widget, so it can't leak out and theme styles can't leak in.
Fonts: Montserrat + Inter (loaded in the site head or the HTML file).
No global.css tokens needed. Tokens match the other widgets.
THIS VERSION: on mobile/tablet (<=880px) the copy and button now
stack centered instead of left-aligned.
Tweaks:
--wrap content width (keep the same as your hero: 1250px)
========================================================== */
#gb-cta-widget{--black:#000;--g900:#262626;--g600:#6b6b6b;--g450:#8f8f8f;--g200:#e2e2e2;--white:#fff;
--font-display:'Montserrat','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--wrap:1250px;
--pad:max(24px,calc((100% - var(--wrap))/2));
font-family:var(--font-body);line-height:1.5;text-align:left;position:relative;width:100%;
-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;}
/* ---- SECTION BACKGROUND ----
Same colour token as the social-feed and community sections.
Option A — change the hex right here.
Option B — control it from your theme's Global CSS (loads after this
file, so a plain override works):
#gb-cta-widget{ --section-bg:#111111; }
Either way, only this one variable needs to change. */
#gb-cta-widget{--section-bg:#e7e7dd}
/* ---- Theme / Elementor guards ---- */
#gb-cta-widget *,
#gb-cta-widget *::before,
#gb-cta-widget *::after{box-sizing:border-box}
#gb-cta-widget h2,
#gb-cta-widget p{margin:0;padding:0;text-transform:none}
#gb-cta-widget a{text-decoration:none;box-shadow:none}
/* ---- Section (soft grey wash sits behind the button) ---- */
#gb-cta-widget .gk-wrap{width:100%;max-width:none;margin:0;padding-inline:var(--pad)}
#gb-cta-widget .gk-section{position:relative;overflow:hidden;color:var(--black);padding:68px 0;
background-color:var(--section-bg);
background-image:
radial-gradient(50% 120% at 88% 50%,rgba(0,0,0,.05),transparent 70%),
radial-gradient(rgba(0,0,0,.09) 1px,transparent 1.3px);
background-size:auto,18px 18px;
border-top:1px solid var(--g200)}
#gb-cta-widget .gk-in{display:flex;align-items:center;justify-content:space-between;gap:28px 48px;flex-wrap:wrap}
/* ---- Copy ---- */
#gb-cta-widget .gk-title{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3vw,40px);line-height:1.12;
letter-spacing:-.02em;color:var(--black);max-width:24ch;text-wrap:balance}
#gb-cta-widget .gk-title .soft{color:var(--g450);font-weight:700}
#gb-cta-widget .gk-sub{margin-top:14px;max-width:44ch;font-size:16px;line-height:1.65;color:var(--g600)}
/* ---- Button (solid black, like the other CTAs on light sections) ---- */
#gb-cta-widget .gk-btn,
#gb-cta-widget .gk-btn:hover,
#gb-cta-widget .gk-btn:focus{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 28px;border-radius:6px;flex:none;
font:700 15px/1 var(--font-display);color:var(--white);background:var(--black);border:2px solid var(--black);
cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
#gb-cta-widget .gk-btn svg{width:22px;height:22px;flex:none;transition:transform .25s}
#gb-cta-widget .gk-btn:focus-visible{outline:3px solid var(--black);outline-offset:3px}
/* ---- One-time reveal (only when JS is running) ---- */
#gb-cta-widget.gk-js .gk-copy,
#gb-cta-widget.gk-js .gk-btn{opacity:0;transform:translateY(18px)}
#gb-cta-widget.gk-js.is-in .gk-copy,
#gb-cta-widget.gk-js.is-in .gk-btn{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease,background .2s,border-color .2s}
#gb-cta-widget.gk-js.is-in .gk-copy{transition-delay:.15s}
#gb-cta-widget.gk-js.is-in .gk-btn{transition-delay:.35s,.35s,0s,0s}
/* ---- Hover (mouse only) ---- */
@media(hover:hover) and (pointer:fine){
#gb-cta-widget .gk-btn:hover{background:var(--g900);border-color:var(--g900)}
#gb-cta-widget .gk-btn:hover svg{transform:scale(1.12)}
}
/* ---- Responsive ---- */
@media(max-width:880px){
#gb-cta-widget{--pad:24px}
#gb-cta-widget .gk-section{padding:52px 0;
background-image:radial-gradient(80% 60% at 50% 100%,rgba(0,0,0,.05),transparent 70%),radial-gradient(rgba(0,0,0,.09) 1px,transparent 1.3px)}
#gb-cta-widget .gk-in{flex-direction:column;align-items:center;text-align:center;gap:24px}
#gb-cta-widget .gk-title{max-width:none;margin-inline:auto}
#gb-cta-widget .gk-sub{margin-inline:auto}
}
@media(max-width:560px){
#gb-cta-widget{--pad:20px}
#gb-cta-widget .gk-section{padding:44px 0}
#gb-cta-widget .gk-sub{font-size:15px}
#gb-cta-widget .gk-btn{width:100%}
}
@media(max-width:380px){
#gb-cta-widget{--pad:16px}
#gb-cta-widget .gk-title{font-size:23px}
#gb-cta-widget .gk-btn{padding:0 20px;font-size:14.5px}
}
@media(prefers-reduced-motion:reduce){
#gb-cta-widget.gk-js .gk-copy,
#gb-cta-widget.gk-js .gk-btn{opacity:1;transform:none;transition:none}
}/* End custom CSS */