/* =====================================================================
   CGAlive global styles  ·  wp-content/themes/divi-child/css/cga-global.css
   Moved out of Divi → Theme Options → Custom CSS on 5 Nov 2026.
   Loaded on every page by the child theme (functions.php, cga-global).
   Edit THIS file from now on; the version updates automatically.
   ===================================================================== */
:root{
	--primary-red: #d0232a;
	--primary-blue: #041a37;
	--primary-grey: #464646;
	--background1: #f4f4f4;
	--background2: #fbf9f8;
	--primary-border: #d9d9d9;
}

#menu-main-menu li{
	padding: 0px !important;
}
#menu-main-menu a{
	padding: 10px 20px !important;
}
#menu-main-menu a:hover{	
  border-radius: 30px !important;
  background: #ffdbdc !important;
	opacity: 1 !important;
}

#menu-main-menu .cst-gmp-btn a{
	background-color: var(--primary-red) !important;
	color: white !important;
	border-radius: 30px !important;
	border: 1px solid var(--primary-red) !important;
}

#menu-main-menu  .cst-gmp-btn a:hover{
	background-color: white !important;
	color: var(--primary-red) !important;
	opacity: 1 !important;
}
/*================================================================================*/
/*================================================================================*/
.grecaptcha-badge{
right: auto !important;
left: 0 !important;
visibility: hidden !important;
}
/*=====================================================================*/
.custom-head h1{
	font-size: clamp(2rem, 4vw, 4rem) !important;
	font-weight: 700;
	line-height: 1.4em;
	color: var(--primary-blue);
}

.heading h2{
	font-size: clamp(1rem, 10vw, 1.5rem) !important;
	font-weight: 600 !important;
	color: #041a37 !important;
}

.heading h3{
	font-size: clamp(0.8rem, 10vw, 1rem) !important;
	color: #d1232a !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
}

.running-text,
.running-text p{
	font-size: clamp(0.875rem, 3vw, 1.0rem) !important;
	font-weight: 400 !important;
	color: #666666 !important;
}

.cst-desc-cs{
	font-size: clamp(0.875rem, 3vw, 1.0rem) !important;
	font-weight: 400 !important;
	color: var(--primary-grey) !important;
}

/*===================================== blog-posts-css ========================================*/
.cst-meta-styles .et_pb_code_inner,
.cst-meta-styles .cst-post-author,
.cst-meta-styles .cst-cat-el a,
.cst-meta-styles .published{
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--primary-grey) !important;
	line-height: 1.4em !important;
	text-align: center !important;
}

.cst-meta-styles .cst-post-author span{
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--primary-grey) !important;
	line-height: 1.4em !important;
}

.blog-side-nav{
	background: var(--background2) !important;
}

.blog-post-heading h2{
	color: var(--primary-red) !important;
	font-weight: 600 !important;
	font-size: clamp(1.25rem, 4vw, 1.5rem) !important;
	line-height: 1.2em !important;
	padding: 0px !important;
}

.blog-post-heading h3{
	color: var(--primary-blue) !important;
	font-weight: 500 !important;
	font-size: clamp(1rem, 4vw, 1.4rem) !important;
	line-height: 1.6em !important;
	padding: 0px !important;
}

.blog-post-heading p{
	color: var(--primary-blue) !important;
	font-weight: 400 !important;
	font-size: clamp(0.75rem, 4vw, 0.875rem) !important;
	line-height: 1.2em !important;
}

.blog-running-text .et_pb_text_inner,
.blog-running-text p{
	color: #242424 !important;
	letter-spacing: -0.003em !important;
	font-family: "Source Serif 4", serif !important;
	font-size: 1.15rem !important;
	font-weight: 350 !important;
	line-height: 1.6em !important;
}

.blog-running-text strong{
	font-weight: 600 !important;
}

.blog-running-text ul{
    padding-bottom: 0px !important;
}

.blog-running-text li{
    font-size: 1rem !important;
	font-weight: 400 !important;
    line-height: 1.8em !important;
}

.blog-highlight-text{
	background-color: var(--background1) !important;
	border-radius: 15px !important;
	padding: 25px !important;
	margin-bottom: 15px !important;
	border-left: 1px solid var(--primary-border) !important;
	border-bottom: 1px solid var(--primary-border) !important;
}

.blog-highlight-text .et_pb_text_inner,
.blog-highlight-text p{
	font-family: "Source Serif 4", serif !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.8em !important;
}

.blog-highlight-text strong{
	font-weight: 600 !important;
}

.sp-text{
	color: var(--primary-blue) !important;
	font-weight: 600 !important;
}

.blog-highlight-text li{
    font-size: 1rem !important;
	font-weight: 400 !important;
    line-height: 1.8em !important;
	color: var(--primary-grey) !important;
}

.blog-highlight-text h3{
	color: var(--primary-blue) !important;
	font-weight: 500 !important;
	font-size: clamp(1rem, 4vw, 1.25rem) !important;
	line-height: 1.8em !important;
	padding: 0px !important;
}

.blog-post-heading{
	margin-top: 20px !important;
	margin-bottom: 20px !important;
}

.blog-running-text{
	margin-bottom: 20px !important;
}

.blog-faq .et_pb_toggle_content{
	font-family: "Source Serif 4", serif !important;
}

.blog-cst-table{
	border: 1px solid var(--primary-border) !important;
	border-radius: 10px !important;
	width: 100% !important;
	overflow: auto !important;
}

.blog-cst-table table{
	width: 100% !important;
	border: 0px !important;
}

.blog-cst-table table th:first-child,
.blog-cst-table table td:first-child{
	border-left-width: 0px !important;
}

.blog-cst-table table th:last-child,
.blog-cst-table table td:last-child{
	border-right-width: 0px !important;
}

.blog-cst-table table tr:first-child th,
.blog-cst-table table tr:first-child td{
	border-top-width: 0px !important;
}

.blog-cst-table table tr:last-child td{
	border-bottom-width: 0px !important;
}

.blog-cst-table th{
    font-size: clamp(0.875rem, 3vw, 1.0rem) !important;
	font-weight: 500 !important;
	text-align: start;
    color: var(--primary-blue) !important;
	background: var(--background1);
    padding: 10px !important;
    border: 1px solid var(--primary-border);
}

.blog-cst-table td{
	font-family: "Source Serif 4", serif !important;
    font-size: clamp(0.875rem, 3vw, 1.0rem) !important;
    color: var(--primary-grey) !important;
    padding: 10px !important;
    border: 1px solid var(--primary-border);
}

.color-palette-wrapper{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.color-palette{
    padding: 20px;
    border-radius: 100%;
    width: 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-size: 16px;
}

.cst-scorecard-blog-wrapper{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    align-items: center !important;
  }

  .cst-scorecard-blog{
    max-width: 250px;
    padding: 20px !important;
    border-radius: 15px !important;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.15) !important;
  }

  .cst-scorecard-blog h3{
    font-size: clamp(1.25rem, 4vw, 2rem) !important;
    font-weight: 700 !important;
    line-height: 1.4em !important;
    color: var(--primary-blue) !important;
    text-align: center !important;
  }

  .cst-scorecard-blog p{
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.6em !important;
    color: var(--primary-grey) !important;
    text-align: center !important;
  }

.timeline-nav{
height: fit-content;
display: flex;
align-self: flex-start;
border-left: 2px solid var(--primary-border) !important;
}

.timeline-nav ul{
	list-style: none !important;
	margin: 0px 0px 0px 15px;
	padding: 0;
}

.timeline-nav a{
	text-decoration: none;
	display: block;
	transition: all 50ms ease-in-out;
	margin-bottom: 40px;
}

.nav-item{
display: flex;
cursor: pointer;
position: relative;
transition: all 0.4s ease;
}
  
.dot{
position: absolute;
left: -22px;
top: 5px;
width: 12px;
height: 12px;
background: var(--primary-border);
border-radius: 50%;
border: 2px solid #ffffff;
transition: all 0.4s ease;
z-index: 2;
will-change: transform, background;
}
  
.text h3{
font-size: 16px;
font-weight: 600;
line-height: 1.4em;
color: rgba(4, 26, 55, 0.5);
margin-bottom: 10px;
padding: 0px;
transition: color 0.4s ease;
}

.text p{
font-family: "Source Serif 4", serif !important;
font-size: 13px;
font-weight: 400;
color: rgba(70, 70, 70, 0.6);
line-height: 1.4em;
margin: 0px;
padding: 0px;
transition: color 0.4s ease;
}
  
.nav-item.active .text h3 {
color: var(--primary-blue);
}

.nav-item.active .text p{
color: var(--primary-grey);
}

.nav-item.active .dot{
background: var(--primary-red);
transform: scale(1.3);
box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.1);
}

.cst-shine-btn-white{
	background: #ffffff !important;
	color: #D0202A;
	box-shadow: 0 8px 24px rgba(208, 32, 42, .28);
	position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 700;
	border: 1px solid #D0202A !important;
    border-radius: 999px;
    padding: 15px 30px;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), background .2s, box-shadow .2s, border-color .2s;
}

.cst-shine-btn-white:hover{
    background: #D0202A !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(208, 32, 42, .34);
}

.cst-shine-btn-white::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, #ffc8cb, transparent);
    transform: skewX(-20deg);
    animation: cghShine 6s ease-in-out 1.4s infinite;
}

.cst-shine-btn-red{
    background: #D0202A;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(208, 32, 42, .28);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 700;
    border-radius: 999px;
    padding: 15px 30px;
	cursor: pointer;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), background .2s, box-shadow .2s, border-color .2s;
}

.cst-shine-btn-red:hover {
    background: #A9161F;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(208, 32, 42, .34);
}

.cst-shine-btn-red::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    animation: cghShine 6s ease-in-out 1.4s infinite;
}

@keyframes cghShine { 0% { left: -60%; } 18%, 100% { left: 130%; } }

.cst-tools-title{
    font-size: clamp(38px, 5.2vw, 68px) !important;
    font-weight: 800 !important;
    letter-spacing: -.035em !important;
    line-height: 1.08 !important;
}

.cst-tools-desc{
  font-size: clamp(16px, 1.4vw, 19px) !important;
  color: #5a6275 !important;
  line-height: 1.6em !important;
}

/* ================================================================
   CGAlive · Web case study hero (Divi 5 native modules)
   ================================================================ */

/* Section */
.et_pb_section.cga-wh{position:relative;overflow:hidden;padding:70px 0 90px !important;
  background:radial-gradient(circle at 85% 20%,#ffe4d2 0%,rgba(255,228,210,0) 38%),
             radial-gradient(circle at 10% 90%,#e6f3ff 0%,rgba(230,243,255,0) 40%),#fbf9f8 !important}
.et_pb_section.cga-wh::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(4,26,55,.09) 1.6px,transparent 1.6px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%)}

/* Row + columns */
.cga-wh .et_pb_row.cga-wh__in{position:relative;display:flex !important;flex-wrap:nowrap;align-items:center;gap:56px;
  width:90%;max-width:1180px;margin:0 auto;padding:100px 0px 0px 0px !important}
.cga-wh .cga-wh__in > .et_pb_column{margin:0 !important;width:auto !important}
.cga-wh .et_pb_column.cga-wh__copy{flex:1 1 0;min-width:0;display:flex !important;flex-direction:row !important;flex-wrap:wrap;
  align-content:flex-start;align-items:flex-start;column-gap:12px;row-gap:0}
.cga-wh .cga-wh__copy > *{flex:0 0 100%}
.cga-wh .cga-wh__copy > .et_pb_button_module_wrapper,
.cga-wh .cga-wh__copy > .cga-wh__btn{flex:0 0 auto}
.cga-wh .et_pb_column.cga-wh__stage{flex:1.08 1 0;min-width:0;position:relative;padding:30px 0 40px 40px !important}
.cga-wh .et_pb_module{margin-bottom:0 !important}

/* Logo */
.cga-wh .cga-wh__logo{margin:0 0 22px !important;text-align:left}
.cga-wh .cga-wh__logo img{height:46px;width:auto;max-width:260px;object-fit:contain}

/* Tags */
.cga-wh .cga-wh__tagwrap{margin-bottom:20px !important}
.cga-wh ul.cga-wh__tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 !important;padding:0 !important;list-style:none !important}
.cga-wh ul.cga-wh__tags li{list-style:none;margin:0;background:#fff;color:#d0232a;font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;padding:7px 16px;border-radius:30px;box-shadow:0 0 20px rgba(0,0,0,.08);line-height:1.2}

/* Headline + intro */
.cga-wh .cga-wh__title h1{font-size:clamp(1.75rem,3.4vw,3rem) !important;font-weight:700 !important;line-height:1.25 !important;
  color:#041a37 !important;margin:0 0 18px !important;padding:0 !important;text-align:left}
.cga-wh .cga-wh__title h1 em{font-style:italic;color:#d0232a}
.cga-wh .cga-wh__title p.cga-wh__lead{font-size:17px;line-height:1.7;color:#666;margin:0 0 30px;max-width:520px;padding:0}

/* Buttons (class may sit on the module or its wrapper) */
.cga-wh a.cga-wh__btn, .cga-wh .cga-wh__btn a.et_pb_button,
.cga-wh .et_pb_button.cga-wh__btn{display:inline-block;padding:10px 30px !important;border-radius:30px !important;font-size:16px !important;
  font-weight:600 !important;text-transform:uppercase;line-height:1.5 !important;text-decoration:none;border:1px solid #d0232a !important;transition:.25s;margin:0 0 12px}
.cga-wh a.cga-wh__btn::after, .cga-wh .cga-wh__btn a.et_pb_button::after,
.cga-wh .et_pb_button.cga-wh__btn::after{display:none !important}
.cga-wh a.cga-wh__btn--red, .cga-wh .cga-wh__btn--red a.et_pb_button{background:#d0232a !important;color:#fff !important}
.cga-wh a.cga-wh__btn--line, .cga-wh .cga-wh__btn--line a.et_pb_button{background:#fff !important;color:#d0232a !important}
.cga-wh a.cga-wh__btn--red:hover, .cga-wh .cga-wh__btn--red a.et_pb_button:hover{background:#fff !important;color:#d0232a !important}
.cga-wh a.cga-wh__btn:hover, .cga-wh .cga-wh__btn a.et_pb_button:hover{box-shadow:-5px -5px 20px #ffd8c0,5px 5px 20px rgba(102,0,255,.25)}

/* Screenshots in browser frames */
.cga-wh .cga-wh__shot{position:relative;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 20px 50px rgba(4,26,55,.18);padding-top:34px !important;margin:0 !important}
.cga-wh .cga-wh__shot::before{content:"";position:absolute;top:0;left:0;right:0;height:34px;
  background:radial-gradient(circle at 19px 17px,#d0232a 5px,transparent 5.5px),
             radial-gradient(circle at 36px 17px,#dfdfdf 5px,transparent 5.5px),
             radial-gradient(circle at 53px 17px,#dfdfdf 5px,transparent 5.5px),#f4f4f4}
.cga-wh .cga-wh__shot .et_pb_image_wrap{display:block;width:100%}
.cga-wh .cga-wh__shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:left top}
.cga-wh .cga-wh__shot::after{position:absolute;top:46px;right:14px;z-index:3;background:#d0232a;color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:20px;line-height:1.3}
.cga-wh .cga-wh__shot--after::after{content:"After"}
.cga-wh .cga-wh__shot--live::after{content:"Live site"}
.cga-wh .cga-wh__shot--before{position:absolute !important;left:40px;bottom:0;width:44% !important;z-index:2;
  transform:rotate(-4deg);filter:grayscale(1) contrast(.9);opacity:.95;box-shadow:0 12px 30px rgba(4,26,55,.2)}
.cga-wh .cga-wh__shot--before img{aspect-ratio:16/11}
.cga-wh .cga-wh__shot--before::after{content:"Before";right:auto;left:10px;top:40px;background:#041a37}

/* Floating chip + badge (Code modules) */
.cga-wh .cga-wh__chip{position:absolute;top:0;right:40px;z-index:4;display:flex;align-items:center;gap:8px;background:#fff;border-radius:30px;
  padding:8px 16px 8px 8px;box-shadow:0 8px 24px rgba(4,26,55,.14);font-size:13px;font-weight:600;color:#041a37;line-height:1.3;
  animation:cga-wh-float 5s ease-in-out -2.5s infinite}
.cga-wh .cga-wh__chip i{width:26px;height:26px;border-radius:50%;background:#d0232a;display:grid;place-items:center;flex:none}
.cga-wh .cga-wh__badge{position:absolute;right:-14px;bottom:4px;z-index:4;display:flex;align-items:center;gap:12px;background:#fff;
  border-radius:14px;padding:12px 18px 12px 12px;box-shadow:0 10px 30px rgba(4,26,55,.18);animation:cga-wh-float 5s ease-in-out infinite}
.cga-wh .cga-wh__badge-ic{width:42px;height:42px;border-radius:12px;background:#e3f6ec;display:grid;place-items:center;flex:none}
.cga-wh .cga-wh__badge b{display:block;font-size:20px;font-weight:700;color:#041a37;line-height:1.1}
.cga-wh .cga-wh__badge span{font-size:12px;color:#666;line-height:1.3}
@keyframes cga-wh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.cga-wh .cga-wh__badge,.cga-wh .cga-wh__chip{animation:none}}

/* Tablet & mobile */
@media (max-width:980px){
  .et_pb_section.cga-wh{padding:50px 0 60px !important}
  .cga-wh .et_pb_row.cga-wh__in{flex-direction:column;align-items:stretch;gap:30px}
  .cga-wh .et_pb_column.cga-wh__stage{padding:24px 0 30px 20px !important;max-width:640px}
  .cga-wh .cga-wh__shot--before{left:20px}
}
@media (max-width:600px){
  .et_pb_section.cga-wh{padding:36px 0 44px !important}
  .cga-wh .et_pb_row.cga-wh__in{width:calc(100% - 32px)}
  .cga-wh .cga-wh__logo img{height:38px}
  .cga-wh .cga-wh__copy > .et_pb_button_module_wrapper, .cga-wh .cga-wh__copy > .cga-wh__btn{flex:0 0 100%}
  .cga-wh a.cga-wh__btn, .cga-wh .cga-wh__btn a.et_pb_button{display:block;text-align:center}
  .cga-wh .et_pb_column.cga-wh__stage{padding:20px 0 26px 10px !important}
  .cga-wh .cga-wh__shot--before{left:10px}
  .cga-wh .cga-wh__badge{right:-4px;padding:8px 12px 8px 8px}
  .cga-wh .cga-wh__badge b{font-size:16px}
  .cga-wh .cga-wh__chip{right:10px;font-size:12px}
}

/* =========================================================
   CGAlive · Service page heroes + Free Tools sections (Divi 5)
   Shared by: UI/UX, Web Design SEO & AEO, Brand & Logo, Digital Marketing

   Classes set in the layout:
   Sections : cga-hero  /  cga-tools (ID free-tools)
   Hero     : cga-grad, cga-grad-module (background glows),
              cga-eyebrow, cga-btns, cga-btn cga-btn-red,
              cga-link-cta (+ cga-arr), cga-trust
   Cards    : column cga-card (+ cga-card-feat), cga-ribbon,
              cga-card-top, cga-ico, cga-tag, cga-card-desc,
              cga-card-foot, cga-card-time, cga-go, cga-all
   ========================================================= */

/* ---------- Hero ---------- */
.cga-hero .et_pb_text p:last-child { padding-bottom: 0; }

.cga-eyebrow {
  display: inline-block;
  background: #fff;
  padding: 10px 30px !important;
  border-radius: 30px;
  box-shadow: 0 0 20px rgba(0,0,0,.1);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: #d0232a;
  text-transform: uppercase;
  letter-spacing: .12em;
  width: fit-content !important;
  margin-bottom: 20px;
}

.cga-hero h1 { letter-spacing: -.02em; padding-bottom: 0; }
.cga-hero h1 em { font-style: italic; color: #d0232a; }

.cga-btns-landing{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 32px;
}
.cga-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  border-radius: 30px;
  border: 1px solid #d0232a;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: background .2s, color .2s, box-shadow .2s;
}
/* Primary: red pill with a light "shine" sweeping across it */
.cga-btn-red {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #d0232a;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(208,35,42,.25);
}
.cga-btn-red::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  animation: cgaShine 3.2s ease-in-out infinite;
}
.cga-btn-red:hover {
  background: #fff;
  color: #d0232a !important;
  box-shadow: -5px -5px 20px #ffd8c0, 5px 5px 20px rgba(102,0,255,.25);
}
.cga-btn-red:hover::after { animation: none; opacity: 0; }
@keyframes cgaShine {
  0% { left: -75%; }
  45%, 100% { left: 130%; }
}

/* Secondary: text link with an arrow */
.cga-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #041a37 !important;
  text-decoration: none;
  transition: color .2s;
}
.cga-link-cta .cga-arr { color: #d0232a; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.cga-link-cta:hover { color: #d0232a !important; }
.cga-link-cta:hover .cga-arr { transform: translateX(4px); }

/* Trust bar: hairline + small caps */
.cga-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20px 0px 0px 0px !important;
  gap: 10px;
  border-top: 1px solid #dfdfdf;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a8f99;
}
.cga-trust strong { color: #041a37; font-weight: 700; }

/* ---------- Hero layering ----------
   Keeps the background effect behind the hero content. */
.cga-hero { position: relative; overflow: hidden; isolation: isolate; }
.cga-hero > .et_pb_row { position: relative; z-index: 2; }

/* ---------- Hero background: moving colour glows ----------
   Markup lives in a Code module ("Background gradient"); a tiny script
   moves it behind the hero content. Colour shifts every 1s. */
.cga-grad {
  position: absolute !important;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #F8F8F9;
}
.cga-grad i {
  position: absolute;
  width: 55vw;
  height: 55vw;
  max-width: 760px;
  max-height: 760px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .7;
  will-change: transform, filter;
}
.cga-grad i:nth-child(1) { left: -15%; top: -35%; background: #f7c9cb; animation: cgaB1 2s ease-in-out infinite alternate, cgaHue 1s ease-in-out infinite alternate; }
.cga-grad i:nth-child(2) { right: -18%; top: -10%; background: #cfe2f6; animation: cgaB2 2.3s ease-in-out infinite alternate, cgaHue 1s ease-in-out infinite alternate-reverse; }
.cga-grad i:nth-child(3) { left: 25%; bottom: -55%; background: #ffe0cc; animation: cgaB3 2.6s ease-in-out infinite alternate, cgaHue 1s ease-in-out infinite alternate; }
/* Soft clear area behind the headline */
.cga-grad::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 55% at 50% 46%, rgba(248,248,249,.85), rgba(248,248,249,0) 100%);
}
@keyframes cgaB1 { to { transform: translate(28vw, 20vh) scale(1.2); } }
@keyframes cgaB2 { to { transform: translate(-26vw, 26vh) scale(.85); } }
@keyframes cgaB3 { to { transform: translate(-18vw, -22vh) scale(1.25); } }
@keyframes cgaHue { to { filter: blur(70px) hue-rotate(70deg); } }
.cga-grad-module { margin: 0 !important; padding: 0 !important; height: 0; overflow: visible; }
@media (prefers-reduced-motion: reduce) {
  .cga-grad i { animation: none !important; }
}

/* ---------- Tool cards ---------- */
.cga-card {
  position: relative;
  overflow: visible !important;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .25s ease !important;
}
.cga-card .et_pb_module { margin-bottom: 0; }
.cga-card .et_pb_text p { padding-bottom: 0; }

/* "Start here" ribbon sitting on the top border */
.cga-ribbon {
  position: absolute !important;
  top: -13px;
  left: 22px;
  z-index: 2;
  width: auto !important;
  margin: 0 !important;
}
.cga-ribbon p {
  background: #136B3B;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 12px !important;
  border-radius: 999px;
}

/* Icon + tag row */
.cga-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.cga-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #E3F6EC;
  display: grid;
  place-items: center;
  flex: none;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.cga-card:hover .cga-ico { transform: rotate(-6deg) scale(1.06); }
#free-tools .cga-tag {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  background: #F1F2F5 !important;
  color: #666 !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
}
#free-tools .cga-card-feat .cga-tag { background: #E3F6EC !important; color: #136B3B !important; }

/* Footer pinned to the bottom so buttons line up across cards */
.cga-card-foot { margin-top: auto !important; }
.cga-card-foot p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 18px;
}
.cga-card-time { font-size: 13px; font-weight: 600; color: #666; }

.cga-go {
  white-space: nowrap;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  background: #fff;
  color: #136B3B;
  border: 1.5px solid rgba(31,163,91,.35);
  transition: background .2s, color .2s, border-color .2s;
}
.cga-card:hover .cga-go { background: #1FA35B; color: #fff; border-color: #1FA35B; }

.cga-card-feat .cga-go {
  background: #1FA35B;
  color: #fff;
  border-color: #1FA35B;
  padding: 12px 22px;
  font-size: 15px;
  box-shadow: 0 8px 20px rgba(31,163,91,.3);
}
.cga-card-feat:hover .cga-go { background: #136B3B; border-color: #136B3B; }

/* "See all 16 free tools" link */
.cga-all {
  font-size: 15px;
  font-weight: 700;
  color: #041a37;
  border-bottom: 2px solid #d0232a;
  padding-bottom: 2px;
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .cga-btn { width: 100%; }

  /* Cards 2 & 3 become compact rows */
  .cga-card:not(.cga-card-feat) {
    flex-direction: row !important;
    align-items: center !important;
    padding: 16px !important;
  }
  .cga-card:not(.cga-card-feat) .cga-tag,
  .cga-card:not(.cga-card-feat) .cga-card-desc,
  .cga-card:not(.cga-card-feat) .cga-card-time { display: none !important; }
  .cga-card:not(.cga-card-feat) .cga-card-top { margin: 0 12px 0 0; }
  .cga-card:not(.cga-card-feat) h3 { font-size: 16px !important; }
  .cga-card:not(.cga-card-feat) .cga-card-title { flex: 1; }
  .cga-card:not(.cga-card-feat) .cga-card-foot { margin-top: 0 !important; }
  .cga-card:not(.cga-card-feat) .cga-card-foot p { padding-top: 0; }
  .cga-card:not(.cga-card-feat) .cga-go { padding: 8px 12px; font-size: 13px; }
}

/* Touch devices: no lift on tap */
@media (hover: none) {
  .cga-card:hover { transform: none !important; }
}

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cga-card, .cga-ico, .cga-go, .cga-btn, .cga-link-cta, .cga-arr { transition: none !important; }
  .cga-btn-red::after { animation: none; display: none; }
  .cga-card:hover { transform: none !important; }
}
/*=============================================================================================*/
@media(max-width:700px){
	.timeline-nav{ position: relative; top: 0; width: 100%; margin-bottom: 50px; }
}
/*=============================================================================================*/
/* CGAlive · Logo case study global styles
   Shared by every logo case study page. Pages only carry class names. */
.cga-css-holder{padding:0!important}.cga-css-holder .et_pb_row{padding:0!important}
.et_pb_section [class*="cga-"]{font-family:"Noto Sans",system-ui,-apple-system,sans-serif}
.cga-head h2{margin-bottom:10px}.cga-head-c{max-width:960px;margin-left:auto!important;margin-right:auto!important}
.cga-quote{max-width:1100px;margin:0 auto 14px!important}
/* buttons (links inside Text modules) */
.cga-btns{display:flex;flex-wrap:wrap;gap:18px;margin:0;padding:0;justify-content: flex-start;}
a.cga-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 32px;border-radius:30px;font-size:16px;font-weight:600;text-transform:uppercase;line-height:1.3;border:1px solid #d0232a;text-decoration:none;transition:background .2s,color .2s,box-shadow .2s,transform .2s}
a.cga-btn:active{transform:scale(.97)}
a.cga-btn-red{background:#d0232a;color:#fff}a.cga-btn-red:hover{background:#fff;color:#d0232a;box-shadow:-5px -5px 20px #ffd8c0,5px 5px 20px rgba(102,0,255,.25)}
a.cga-btn-line{background:#fff;color:#d0232a}a.cga-btn-line:hover{background:#d0232a;color:#fff}
a.cga-btn-glow{background:#fff;color:#d0232a;font-size:14px;box-shadow:0 0 18px rgba(208,35,42,.35)}a.cga-btn-glow:hover{background:#d0232a;color:#fff}
/* hero */
.cga-kicker{display:inline-block;background:#fff;color:#d0232a!important;font-size:12px!important;font-weight:500;text-transform:uppercase;letter-spacing:.04em;padding:5px 20px !important;border-radius:30px;box-shadow:0 0 20px rgba(0,0,0,.1);margin-bottom:22px!important}
.cga-hero-text h1 em{font-style:italic;font-weight:700;color:#d0232a}
.cga-tag{font-size:clamp(18px,1.5vw,24px)!important;font-weight:500;color:#041a37!important;margin:20px 0 12px!important}
.cga-hero-mark img{filter:drop-shadow(0 26px 40px var(--cga-brand-glow,rgba(208,35,42,.3)))}

.cga-stage .et_pb_text{position:static}.cga-spec{position:absolute;font:600 10px/1 "Noto Sans",sans-serif!important;letter-spacing:.06em;text-transform:uppercase;color:#6B6F76!important;background:#fff;padding:6px 8px!important;border-radius:6px;border:1px solid #e6e8eb;margin:0!important}
.cga-spec-bl{left:12px;bottom:12px}.cga-spec-tr{right:12px;top:12px}
.cga-snap-cell+.cga-snap-cell{border-left:1px solid #dfdfdf}
.cga-snap-l{font-size:13px!important;text-transform:uppercase;letter-spacing:.02em;color:#464646!important;margin:0!important}
.cga-snap-v{font-size:18px!important;font-weight:600;color:#041a37!important;margin:6px 0 0!important}
@media(max-width:980px){.cga-snap-cell+.cga-snap-cell{border-left:0;border-top:1px solid #dfdfdf}.cga-stage{max-width:480px;margin:0 auto}}
/* lists */
ul.cga-x,ul.cga-ok{list-style:none!important;padding:0!important;margin:20px 0 0!important}
.cga-x li,.cga-ok li{position:relative;padding-left:38px!important;margin-bottom:16px}
.cga-x li::before,.cga-ok li::before{position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700}
.cga-x li::before{content:"\2715";color:#d0232a}.cga-ok li::before{content:"\2713";background:#1FA35B;color:#fff}
/* stats + why */
.cga-stat-n{font-size:clamp(34px,2.9vw,48px)!important;font-weight:700;color:#d0232a!important;line-height:1.1!important;margin-bottom:18px!important}
.cga-stat-n sub{font-size:.5em;font-weight:600;vertical-align:baseline;margin-left:2px;bottom:0}
.cga-why-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cga-why-foot p{font-size:clamp(18px,1.6vw,24px)!important;font-weight:500;color:#041a37!important;max-width:620px;line-height:1.5!important;margin:0!important}.cga-why-foot p span{color:#d0232a}
/* process */
.cga-step{transition:border-color .25s,box-shadow .25s,transform .25s}
.cga-step:hover{border-color:rgba(208,35,42,.45)!important;box-shadow:0 14px 30px rgba(208,35,42,.10);transform:translateY(-4px)}
.cga-step-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.cga-step-ic{width:44px;height:44px;margin-left:-7px;border-radius:12px;color:#d0232a;display:grid;place-items:center;transition:background .25s,color .25s,transform .25s}
.cga-step:hover .cga-step-ic{background:#FDE6E7;transform:rotate(-6deg)}
.cga-step-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#6B6F76;border:1px solid #e6e8eb;border-radius:999px;padding:4px 12px 4px 5px;line-height:1.4;background:#fff}
.cga-step-tag b{display:grid;place-items:center;min-width:24px;height:24px;border-radius:999px;background:#FDE6E7;color:#d0232a;font-size:12px;font-weight:700;letter-spacing:0}
.cga-step h3{padding-bottom:6px}
.cga-step-final .cga-step-ic{color:#1FA35B}
.cga-step-final:hover .cga-step-ic{background:#E3F6EC}
.cga-step-final .cga-step-tag{color:#136B3B;border-color:#9ED9B8;background:#fff}
.cga-step-final .cga-step-tag b{background:#1FA35B;color:#fff}
.cga-step-final:hover{border-color:#1FA35B!important;box-shadow:0 14px 30px rgba(31,163,91,.14)}
/* cards with art on top */
.cga-card .et_pb_module{margin-bottom:0!important}
.cga-card-img img{width:100%;height:250px;object-fit:cover;display:block;border-radius:0!important}
.cga-card-body{padding:28px 30px 32px!important}.cga-card-body p{margin-top:10px}
.cga-art{height:250px;display:grid;place-items:center;position:relative;overflow:hidden;background:#f4f4f4}
.cga-art-grid{height:320px;background:#fff url(https://cgalive.com/wp-content/uploads/yoloclb-construction-grid.svg) center/cover no-repeat}.cga-art-grid>img{width:58%;max-width:230px}
.cga-clear{position:relative;padding:34px;border:1.5px dashed #B04FD8}.cga-clear img{width:130px;display:block}
.cga-clear em{position:absolute;font:700 13px "Noto Sans",sans-serif;color:#B04FD8;font-style:normal}
.cga-clear .t{top:6px;left:50%;transform:translateX(-50%)}.cga-clear .b{bottom:6px;left:50%;transform:translateX(-50%)}.cga-clear .l{left:10px;top:50%;transform:translateY(-50%)}.cga-clear .r{right:10px;top:50%;transform:translateY(-50%)}
/* anatomy */
.cga-num{width:28px;height:28px;border-radius:50%;background:#d0232a;color:#fff!important;font-size:12px!important;font-weight:700;display:grid;place-items:center;margin-bottom:14px!important;padding:0!important;line-height:1!important}
.cga-anat{background:#fff;border:1px solid #e6e8eb;border-radius:14px;padding:28px 30px!important;transition:box-shadow .25s,border-color .25s}
.cga-anat:hover{border-color:rgba(208,35,42,.4);box-shadow:0 10px 26px rgba(208,35,42,.10)}
/* stress tests */
.cga-test{display:flex;gap:14px;align-items:flex-start}.cga-test p{margin-top:6px}
.cga-tick{flex:none;width:22px;height:22px;border-radius:50%;background:#1FA35B;color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;margin-top:2px}
.cga-browser{width:72%;background:#D9DCE2;border-radius:12px 12px 0 0;padding:8px 8px 0;align-self:end}
.cga-browser .tabs{display:flex;gap:6px}.cga-browser .tab{background:#fff;border-radius:8px 8px 0 0;padding:8px 12px;display:flex;align-items:center;gap:8px;font-size:11px;color:#333;white-space:nowrap;min-width:0}
.cga-browser .tab.dim{background:transparent;color:#777}.cga-browser .tab i{width:14px;height:14px;border-radius:50%;background:#bbb;flex:none}.cga-browser .tab img{width:16px;height:16px}.cga-browser .url{background:#fff;height:80px}
.cga-home{display:grid;grid-template-columns:repeat(4,48px);gap:12px;padding:18px;background:linear-gradient(160deg,#FDE6E7,#E4E8F2);border-radius:24px}
.cga-home i{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.85)}.cga-home i.me{background:#fff;display:grid;place-items:center;overflow:hidden}.cga-home i.me img{width:78%;max-width:none}
.cga-mono img{width:34%;filter:grayscale(1) contrast(3)}.cga-rev{background:#141414}.cga-rev img{width:34%;filter:grayscale(1) contrast(3) invert(1)}
.cga-squint img{width:40%;filter:blur(8px);transition:filter .4s}.cga-squint:hover img,.cga-squint:focus img{filter:none}
.cga-hint{position:absolute;top:18px;right:18px;background:#d0232a;color:#fff;font-size:11px;font-weight:600;padding:6px 12px;border-radius:999px}
/* brand system */
.cga-sw-n{font-size:16px!important;font-weight:600;margin:0!important;color:inherit!important}.cga-sw-h{font-size:13px!important;opacity:.85;margin:4px 0 0!important;color:inherit!important}
.cga-fig{position:relative;border-radius:20px;overflow:hidden;margin:0}.cga-fig img{width:100%;height:100%;object-fit:cover;display:block}
.cga-fig figcaption{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.92);font-size:12px;font-weight:600;color:#041a37;padding:5px 12px;border-radius:999px;opacity:0;transform:translateY(6px);transition:all .25s}
.cga-fig:hover figcaption{opacity:1;transform:none}
.cga-type{background:#F0EEEC;border-radius:20px;padding:34px!important}.cga-aa{font-size:clamp(56px,5vw,86px)!important;font-weight:800;color:var(--cga-brand,#d0232a)!important;line-height:1!important;letter-spacing:-.03em;margin-bottom:26px!important}
@media(max-width:980px){.cga-fig{height:300px!important}}
/* impact */
.cga-imp-n{font-size:clamp(40px,3.6vw,60px)!important;font-weight:600;color:#d0232a!important;line-height:1.1!important;margin-bottom:20px!important}
.cga-testi{display:flex;gap:44px;align-items:center;margin:0}
.cga-av{flex:none;width:100px;height:100px;border-radius:50%;background:#fff;border:1px solid rgba(208,35,42,.4);box-shadow:0 0 20px rgba(208,35,42,.25);display:grid;place-items:center;color:#d0232a;font-weight:600;font-size:24px}
.cga-testi blockquote{border:0!important;padding:0!important;margin:0!important;font-size:clamp(18px,1.6vw,24px);line-height:1.5;color:#041a37;font-style:normal}
.cga-testi cite{display:block;font-style:normal;font-size:15px;margin-top:20px;color:#464646}.cga-testi cite strong{color:#041a37}
@media(max-width:767px){.cga-testi{flex-direction:column;align-items:flex-start;gap:20px}.cga-av{width:72px;height:72px;font-size:20px}}
@media(prefers-reduced-motion:reduce){[class*="cga-"]{transition:none!important}}
.cga-stat-n,.cga-imp-n,.cga-aa,.cga-num{padding-bottom:0!important}
.cga-fig{background:#e9e9ec}

/* ===== Sections (padding + backgrounds) ===== */
.cga-sec{position:relative}
.cga-pt-40{padding-top:40px!important}.cga-pt-60{padding-top:60px!important}.cga-pt-70{padding-top:70px!important}.cga-pt-100{padding-top:100px!important}.cga-pt-110{padding-top:110px!important}
.cga-pb-60{padding-bottom:60px!important}.cga-pb-70{padding-bottom:70px!important}.cga-pb-100{padding-bottom:100px!important}
.cga-bg-grey{background-color:#f4f4f4!important}
.cga-hero{background:url(https://cgalive.com/wp-content/uploads/bg08261425.svg) center/cover no-repeat}
@media(max-width:767px){.cga-sec{padding-top:50px!important;padding-bottom:50px!important}}

/* ===== Typography (Text modules) ===== */
.et_pb_text.cga-t{font-size:16px;line-height:1.7em;color:#666;font-weight:400}
.et_pb_text.cga-t h1{font-size:clamp(1.75rem,4vw,3.6rem);font-weight:700;color:#041a37;line-height:1.3em}
.et_pb_text.cga-t h2{font-size:24px;font-weight:600;color:#041a37;line-height:1.4em}
.et_pb_text.cga-t h3{font-size:18px;font-weight:600;color:#041a37;line-height:1.4em}
.et_pb_text.cga-t h4{font-size:16px;font-weight:600;color:#041a37;line-height:1.4em}
@media(max-width:767px){.et_pb_text.cga-t:not(.cga-t-lead) h2{font-size:22px}}
.et_pb_text.cga-t-c,.et_pb_text.cga-t-c h1,.et_pb_text.cga-t-c h2,.et_pb_text.cga-t-c h3,.et_pb_text.cga-t-c h4{text-align:center}
.et_pb_text.cga-t-lead h2{font-size:clamp(24px,2.4vw,32px);line-height:1.35em}
.et_pb_text.cga-t-15{font-size:15px;line-height:1.6em;color:#464646}
.et_pb_text.cga-t-14{font-size:14px;line-height:1.6em;color:#464646}
.et_pb_text.cga-t-step h3{font-size:19px}
.et_pb_text.cga-t-navy{color:#041a37;line-height:1.6em}
.et_pb_text.cga-t-sw{font-size:13px;line-height:1.5em;color:inherit}

/* ===== Boxes, cards & columns ===== */
.cga-col-center{justify-content:center!important}
.cga-stage{aspect-ratio:1/1;position:relative;overflow:hidden;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='%23eef0f2' stroke-width='2'%3E%3Cpath d='M50 0V1000M0 50H1000'/%3E%3Cpath d='M100 0V1000M0 100H1000'/%3E%3Cpath d='M150 0V1000M0 150H1000'/%3E%3Cpath d='M200 0V1000M0 200H1000'/%3E%3Cpath d='M250 0V1000M0 250H1000'/%3E%3Cpath d='M300 0V1000M0 300H1000'/%3E%3Cpath d='M350 0V1000M0 350H1000'/%3E%3Cpath d='M400 0V1000M0 400H1000'/%3E%3Cpath d='M450 0V1000M0 450H1000'/%3E%3Cpath d='M500 0V1000M0 500H1000'/%3E%3Cpath d='M550 0V1000M0 550H1000'/%3E%3Cpath d='M600 0V1000M0 600H1000'/%3E%3Cpath d='M650 0V1000M0 650H1000'/%3E%3Cpath d='M700 0V1000M0 700H1000'/%3E%3Cpath d='M750 0V1000M0 750H1000'/%3E%3Cpath d='M800 0V1000M0 800H1000'/%3E%3Cpath d='M850 0V1000M0 850H1000'/%3E%3Cpath d='M900 0V1000M0 900H1000'/%3E%3Cpath d='M950 0V1000M0 950H1000'/%3E%3C/g%3E%3Cg fill='none' stroke='%23C27BE6' stroke-width='2.5' stroke-dasharray='9 7'%3E%3Crect x='140' y='140' width='720' height='720'/%3E%3Cpath d='M500 0V1000M0 500H1000'/%3E%3C/g%3E%3Cg fill='%231FA35B' font-family='Arial,sans-serif' font-size='30' font-weight='700' text-anchor='middle'%3E%3Ctext x='120' y='130'%3Ex%3C/text%3E%3Ctext x='880' y='130'%3Ex%3C/text%3E%3Ctext x='120' y='900'%3Ex%3C/text%3E%3Ctext x='880' y='900'%3Ex%3C/text%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;border:1px solid #e6e8eb;border-radius:20px}
.cga-snap{background:#f4f4f4;border:1px solid #e6e8eb;border-radius:20px;overflow:hidden}
.cga-snap-cell{padding:28px 34px!important}
.cga-box{border-radius:20px;padding:38px 34px!important}
.cga-box-grey{background:#f4f4f4}
.cga-box-ok{background:#fff;border:1.5px solid #1FA35B}
.cga-stat{background:#fff;border-radius:15px;padding:40px 30px!important}
.cga-banner{background:#fff;border-radius:20px;padding:44px 60px!important}
.cga-step{background:#fff;border:1px solid #dfdfdf;border-radius:20px;padding:28px 28px 30px!important}
.cga-step-final{background:#F2FBF6;border-color:#9ED9B8}
.cga-card{background:#fff;border:1px solid #e6e8eb;border-radius:14px;overflow:hidden;row-gap:0!important}
.cga-palette{border-radius:20px;overflow:hidden}
.cga-sw{justify-content:flex-end!important;padding:110px 30px 34px!important}
.cga-sw-dark{color:#fff}.cga-sw-light{color:#041a37}
.cga-bento-col{row-gap:40px!important}
.cga-fig-tall{height:490px}.cga-fig-short{height:350px}.cga-fig-xl{height:540px}
.cga-art-ruler{height:320px;display:flex!important;flex-direction:column;justify-content:center;align-items:stretch!important;justify-items:stretch!important;gap:30px;padding:16px 24px 0 44px;background-color:#fff;background-image:linear-gradient(#f1f2f4 1px,transparent 1px),linear-gradient(90deg,#f1f2f4 1px,transparent 1px);background-size:24px 24px}
.cga-art-ruler::before{content:"";position:absolute;left:44px;top:24px;bottom:24px;border-left:1.5px dashed #C27BE6}
.cga-ruler-row{display:flex;align-items:center;position:relative}
.cga-ruler-logo{position:relative;margin-right:auto;border-top:1.5px dashed #C27BE6;border-bottom:1.5px dashed #C27BE6;line-height:0}
.cga-ruler-logo::after{content:"";position:absolute;left:100%;width:1000px;top:-1.5px;bottom:-1.5px;border-top:1.5px dashed rgba(194,123,230,.35);border-bottom:1.5px dashed rgba(194,123,230,.35)}
.cga-ruler-logo img{display:block;width:auto!important;max-width:100%;object-fit:contain;object-position:left center;margin:0}
.cga-r48 img{height:48px!important}.cga-r32 img{height:32px!important}.cga-r24 img{height:24px!important}
.cga-ruler-lab{position:absolute;right:0;bottom:calc(100% + 3px);z-index:1;background:#fff;padding:1px 6px;border-radius:6px;white-space:nowrap;font-size:12px;font-weight:600;line-height:1.4;color:#6B6F76}
.cga-imp{background:#fff;border:1px solid #e6e8eb;border-radius:14px;padding:44px 34px!important}
.cga-quote-box{background:#f4f4f4;border-radius:20px;padding:56px 70px!important}
@media(max-width:767px){.cga-snap-cell,.cga-box,.cga-stat,.cga-banner,.cga-step,.cga-sw,.cga-imp,.cga-quote-box{padding:24px 22px!important}}

/* ===== Client brand colours (one line per case study; used by hero glow + "Aa" type card) ===== */
.cga-brand-yoloclb{--cga-brand:#EE2C3A;--cga-brand-glow:rgba(238,44,58,.35)}
.cga-brand-parathought{--cga-brand:#1E6FD9;--cga-brand-glow:rgba(30,111,217,.3)}
.cga-brand-vijaya{--cga-brand:#2E3192;--cga-brand-glow:rgba(46,49,146,.3)}
.cga-brand-trikona{--cga-brand:#F7941D;--cga-brand-glow:rgba(247,148,29,.3)}
.cga-brand-cloudreboot{--cga-brand:#1C75BC;--cga-brand-glow:rgba(28,117,188,.3)}
.cga-brand-finsta{--cga-brand:#1F5FAE;--cga-brand-glow:rgba(31,95,174,.3)}
.cga-brand-fipchain{--cga-brand:#0B3D91;--cga-brand-glow:rgba(11,61,145,.3)}
.cga-brand-24by7{--cga-brand:#0D2B6B;--cga-brand-glow:rgba(13,43,107,.3)}
.cga-brand-teacares{--cga-brand:#F47B20;--cga-brand-glow:rgba(244,123,32,.3)}
.cga-brand-woodie{--cga-brand:#5B2C83;--cga-brand-glow:rgba(91,44,131,.3)}
.cga-brand-aidizital{--cga-brand:#00A3AD;--cga-brand-glow:rgba(0,163,173,.3)}
.cga-brand-hema{--cga-brand:#4CAF50;--cga-brand-glow:rgba(76,175,80,.3)}
.cga-brand-courierabroad{--cga-brand:#1559B7;--cga-brand-glow:rgba(21,89,183,.3)}
.cga-brand-roboto360{--cga-brand:#0FA3A3;--cga-brand-glow:rgba(15,163,163,.3)}
.cga-brand-icit{--cga-brand:#14294F;--cga-brand-glow:rgba(20,41,79,.3)}
.cga-brand-guidizy{--cga-brand:#1565D8;--cga-brand-glow:rgba(21,101,216,.3)}
.cga-brand-gradx{--cga-brand:#3DBE5B;--cga-brand-glow:rgba(61,190,91,.3)}
.cga-brand-fortune5{--cga-brand:#C9A24A;--cga-brand-glow:rgba(201,162,74,.3)}
.cga-brand-pikateck{--cga-brand:#00C2B8;--cga-brand-glow:rgba(0,194,184,.3)}
/*======================================================================================*/
/* ---- Section + heading ---- */
.cga-cs-section { padding: 60px 0 !important; }
.cga-cs-heading-row { padding-bottom: 20px !important; }
.cga-cs-heading { text-align: center; }
.cga-cs-heading h3 { letter-spacing: 1.4px; }
.cga-cs-heading h2 { font-size: clamp(1.5rem, 3vw, 2.25rem) !important; font-weight: 700 !important; line-height: 1.2 !important; color: #041a37 !important; }

/* ---- Card (row) ---- */
.cga-cs-card {
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 24px;
  box-shadow: 0 4px 30px rgba(0,0,0,.05);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  padding: 6px !important;
  align-items: center;
  overflow: hidden;
}
.cga-cs-card .et_pb_column { margin-bottom: 0 !important; }

/* ---- Left art (code module) ---- */
.cga-css-art {
  position: relative; overflow: hidden; border-radius: 15px;
  aspect-ratio: 731 / 439; min-height: 320px;
  background:
    radial-gradient(ellipse 63% 62% at 56% 50%, rgba(230,15,42,.18) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(rgba(208,35,42,.07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(208,35,42,.07) 1px, transparent 1px) 0 0 / 24px 24px,
    #fdf3f3;
  font-family: 'Noto Sans', sans-serif;
}
.cga-css-ring {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 1px dashed rgba(208,35,42,.3); transform: translate(-50%,-50%);
}
.cga-css-ring.r1 { width: 250px; height: 250px; }
.cga-css-ring.r2 { width: 370px; height: 370px; animation: cgaSpin 60s linear infinite; }
.cga-css-hero {
  position: absolute; left: 50%; top: 50%; width: 38%; max-width: 275px; height: auto;
  transform: translate(-50%,-50%);
}
.cga-css-chip {
  position: absolute; display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 14px; padding: 8px 14px;
  box-shadow: 0 10px 26px rgba(4,26,55,.12);
  font-size: 13px; font-weight: 600; color: #041a37; line-height: 1.3; white-space: nowrap;
  animation: cgaFloat 4s ease-in-out infinite;
}
.cga-css-chip.c1 { left: 18%; top: 20%; }
.cga-css-chip.c2 { right: 18%; bottom: 14%; animation-delay: -2s; }
.cga-css-chip.c2 strong { font-size: 20px; font-weight: 900; color: #1fa35b; }
.cga-css-chip.c2 span { font-size: 11px; font-weight: 400; color: #464646; line-height: 1.25; }
.cga-css-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff5a5f; box-shadow: 0 0 0 4px #ffe1e2; }
.cga-css-yolo {
  position: absolute; left: 21px; bottom: 23px;
  background: #fff; border: 1px solid #e6e8eb; border-radius: 6px; padding: 5px 9px;
  font-size: 10px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: #6b6f76;
}
@keyframes cgaFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes cgaSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cga-css-chip, .cga-css-ring.r2 { animation: none; } }

/* ---- Right content ---- */
.cga-cs-content { position: relative; padding: 30px 40px 30px 20px !important; }
.cga-cs-mark { position: absolute !important; top: 30px; right: 40px; width: 100px; margin: 0 !important; }
.cga-cs-pill {
  display: inline-block; padding: 10px 16px 8px; border-radius: 9999px;
  background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 4px 30px rgba(0,0,0,.05);
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #d0232a; line-height: 1;
}
.cga-cs-intro { max-width: 450px; }
.cga-cs-intro .cga-cs-title {
  margin: 16px 0 14px; padding: 0;
  font-size: 20px; font-weight: 600; line-height: 1.5; color: #464646;
}
.cga-cs-intro .cga-cs-title em { font-style: italic; font-weight: 600; }
.cga-cs-intro p { font-size: 14px; line-height: 1.5; color: #464646; }

.cga-cs-meta .et_pb_text_inner { display: flex; gap: 25px; flex-wrap: wrap; }
.cga-cs-meta-box {
  flex: 1 1 200px; max-width: 225px; padding: 10px 15px;
  background: #fbfbfb; border: 1px solid #f2f2f2; border-radius: 10px;
}
.cga-cs-meta-box span { display: block; font-size: 12px; text-transform: uppercase; color: #828282; }
.cga-cs-meta-box strong { display: block; font-size: 16px; font-weight: 600; color: #041a37; }

.cga-cs-cta { margin-top: 15px; }
   /* arrow only on this button; base .redBtn unchanged */

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .cga-cs-content { padding: 20px !important; }
  .cga-cs-mark { width: 70px; top: 20px; right: 20px; }
  .cga-cs-intro { max-width: calc(100% - 80px); }
}
@media (max-width: 767px) {
  .cga-css-art { aspect-ratio: auto; min-height: 340px; }
  .cga-css-ring.r1 { width: 200px; height: 200px; }
  .cga-css-ring.r2 { width: 290px; height: 290px; }
  .cga-css-hero { width: 60%; }
  .cga-css-chip.c1 { left: 6%; top: 8%; }
  .cga-css-chip.c2 { right: 6%; bottom: 8%; }
  .cga-cs-intro { max-width: 100%; }
  .cga-cs-mark { position: relative !important; top: auto; right: auto; width: 64px; margin-bottom: 15px !important; }
}

/* ==========================================================
   Variant: Digital Marketing / stats (Orion Movers)
   Adds to the shared .cga-cs-* card styles above.
   ========================================================== */

/* Art: grey grid with blue (top-left) + pink (bottom-right) washes */
.cga-dmcs-art {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 50px 20px;
  background:
    radial-gradient(ellipse 45% 45% at 15% 10%, rgba(59,130,246,.10) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 45% 45% at 85% 90%, rgba(238,44,58,.08) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(rgba(4,26,55,.07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(4,26,55,.07) 1px, transparent 1px) 0 0 / 24px 24px,
    #fff;
}
.cga-dmcs-logo { width: 130px; height: auto; }

/* Corner spec tags (reusable on any art panel) */
.cga-css-spec {
  position: absolute; background: #fff; border: 1px solid #e6e8eb; border-radius: 6px; padding: 4px 8px;
  font-size: 9px; font-weight: 600; letter-spacing: .54px; text-transform: uppercase; color: #6b6f76; line-height: 1.4;
}
.cga-css-spec.tr { top: 16px; right: 16px; }
.cga-css-spec.bl { bottom: 16px; left: 16px; }

/* CPC metric card */
.cga-dmcs-cpc {
  width: min(387px, 100%); background: #fff; border-radius: 14px; padding: 20px 22px 18px;
  box-shadow: 0 10px 30px rgba(4,26,55,.10);
}
.cga-dmcs-label { display: block; font-size: 16px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: #6b6f76; }
.cga-dmcs-nums { display: flex; align-items: center; gap: 16px; margin: 6px 0 10px; }
.cga-dmcs-nums s { font-size: 24px; font-weight: 600; color: #a3a7ad; }
.cga-dmcs-nums strong { font-size: 48px; font-weight: 700; line-height: 1.1; color: #041a37; }
.cga-dmcs-pill { background: #e3f6ec; color: #136b3b; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 12px; }
.cga-dmcs-line { display: block; width: 100%; height: 50px; }
.cga-dmcs-line path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: cgaDraw 1.6s ease-out .3s forwards; }
@keyframes cgaDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .cga-dmcs-line path { animation: none; stroke-dashoffset: 0; } }

/* Logo mark without the red circular glow */
.cga-cs-mark--plain img { border-radius: 0; box-shadow: none; }

/* Stats boxes: value on top (red), label below */
.cga-cs-stats .et_pb_text_inner { gap: 20px; }
.cga-cs-stats .cga-cs-meta-box { flex: 1 1 150px; max-width: 185px; }
.cga-cs-stats .cga-cs-meta-box strong { font-size: 16px; font-weight: 700; color: #d0232a; }
.cga-cs-stats .cga-cs-meta-box span { font-size: 12px; text-transform: none; color: #828282; }

@media (max-width: 767px) {
  .cga-dmcs-art { min-height: 0; padding: 50px 14px; }
  .cga-dmcs-nums strong { font-size: 38px; }
  .cga-cs-stats .cga-cs-meta-box { max-width: none; }
}
/*===========================================================================================*/
/* ==========================================================
   CGAlive – Homepage "Our Promise" · Deal the Deck
   Scoped to .cga-promise (section) and .cga-deck (Code module)
   ========================================================== */
.cga-promise{
	overflow:hidden;
}
.cst-card-hpg{--navy:#041a37;--red:#d0232a;--txt:#464646;--title:#1a1c1c;position:relative;font-family:'Noto Sans',sans-serif;text-align:center}
.cst-card-hpg-list{margin:0!important;padding:0!important;list-style:none!important;height:460px !important;position:relative !important;}

/* Card */
.cst-deck-hpg .cst-card-hpg{--a:0deg;--x:0px;--y:0px;--lift:0px;
  position:absolute;left:50%;bottom:-40px;width:220px;height:400px;margin:0 0 0 -110px!important;padding:16px!important;box-sizing:border-box;
  list-style:none!important;border:1px solid var(--bd);border-radius:18px;background:var(--bg);outline:none;cursor:default;
  transform:translate(var(--x),var(--y)) rotate(var(--a)) translateY(var(--lift));
  transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s,box-shadow .3s,border-color .3s}
.cst-card-hpg:nth-child(1){--bg:#edfdee;--bd:#cfeed2;--ac:#22a32f}
.cst-card-hpg:nth-child(2){--bg:#e7f7fc;--bd:#c9e8f2;--ac:#1a7fa3}
.cst-card-hpg:nth-child(3){--bg:#fdeaea;--bd:#f3c9c9;--ac:#d0232a}
.cst-card-hpg:nth-child(4){--bg:#fdf6e6;--bd:#f1e2bd;--ac:#b8860b}
.cst-card-hpg:nth-child(5){--bg:#eef0fc;--bd:#d5dbf5;--ac:#3b55d9}
.cst-card-hpg-icon{height:110px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;transition:transform .5s}
.cst-card-hpg-icon img{width:80px;height:80px;display:block}
.cst-card-hpgnum{
	position:absolute !important;
	top:24px !important;
	left:26px !important;
	font-size:12px !important;
	font-weight:600 !important;
	letter-spacing:1px !important;
	color:var(--ac) !important;
}
.cst-card-hpg h3{margin:18px 0 8px;padding:0;font-family:inherit;font-size:18px;font-weight:500;line-height:1.35;letter-spacing:.3px;
  text-transform:uppercase;color:var(--title);transform:rotate(calc(-1 * var(--a)));transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.cst-card-hpg p{margin:0;padding:0;font-size:14px;line-height:1.6;color:var(--txt);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}

/* Desktop hover / keyboard focus: lift, straighten, reveal description */
.cst-card-hpg:hover,.cst-card-hpg:focus-visible{--a:0deg!important;--lift:-100px;z-index:30!important;box-shadow:0 18px 40px rgba(4,26,55,.14)}
.cst-card-hpg:hover p,.cst-card-hpg:focus-visible p{opacity:1;transform:none}
.cst-card-hpg:hover .cst-card-hpg-icon{transform:scale(1.04)}
.cst-card-hpg:focus-visible{border-color:var(--ac)}

/* Deal-in animation (only once JS is running, so content is never hidden without it) */
.cst-deck-hpg.cga-js:not(.is-in) .cga-card{--x:0px!important;--y:0px!important;--a:0deg!important;--lift:80px;opacity:0}
.cst-deck-hpg.is-in:not(.dealt) .cga-card{transition-delay:var(--d)}

.cst-deck-hpg-ctrls{display:none}
.cst-deck-hpg .cga-sr{position:absolute!important;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Smaller laptops / landscape tablets: scale the fan so no card is cut off */
@media (min-width:900px) and (max-width:1279px){.cst-deck-hpg-stage{height:402px}}
@media (min-width:900px) and (max-width:1023px){.cst-deck-hpg-stage{height:353px}}

/* Phones & portrait tablets: one card at a time with prev / next */
@media (max-width:899px){
  .cst-deck-hpg-stage{height:360px;margin-top:24px;overflow:visible;-webkit-mask-image:none;mask-image:none;touch-action:pan-y}
  .cst-deck-hpg .cst-card-hpg{top:10px;bottom:auto;width:260px;max-width:76vw;height:340px;margin:0!important;padding:14px!important;cursor:pointer;
    transform:translateX(calc(-50% + var(--off) * 58%)) rotate(calc(var(--off) * 6deg)) scale(var(--sc,1))!important}
  .cst-card-hpg:not(.is-active){--sc:.86}
  .cst-card-hpg.is-active{box-shadow:0 12px 30px rgba(4,26,55,.12)}
  .cst-card-hpg.is-far{opacity:0!important;pointer-events:none}
  .cst-card-hpg h3{font-size:18px;transform:none}
  .cst-card-hpg.is-active p{opacity:1;transform:none;transition-delay:.15s}
  .cst-card-hpg:not(.is-active) p{opacity:0;transform:translateY(8px)}
  .cst-deck-hpg-ctrls{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:6px}
  .cst-deck-hpg-ctrls button{width:44px;height:44px;padding:0;border-radius:50%;border:1px solid #dfdfdf;background:#fff;color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center}
  .cst-deck-hpg-ctrls button:active,.cst-deck-hpg-ctrls button:focus-visible{border-color:var(--red);color:var(--red)}
  .cga-dots{display:flex;align-items:center;gap:6px;padding:0 6px}
  .cga-dots i{width:8px;height:8px;border-radius:4px;background:#dfdfdf;transition:width .3s,background .3s}
  .cga-dots i.on{width:22px;background:var(--red)}
}
@media (prefers-reduced-motion:reduce){
  .cst-deck-hpg .cst-card-hpg *{transition:none!important}
}
/*===========================================================================================*/
/* ==========================================================
   CGAlive – Homepage "Not Your Typical Agency" · Expanding Panels
   .cga-x  = the Divi section (soft drifting background)
   .hpgcx-wrap = the Code module (panels)
   ========================================================== */

/* Panels */
.hpgcx-wrap{--navy:#041a37;--txt:#464646;font-family:'Noto Sans',sans-serif;margin-top:36px}
.hpgcx-wrap .hpgcx-list{list-style:none!important;margin:0!important;padding:0!important;display:flex;gap:14px;height:300px}
.hpgcx-wrap .hpgcx{flex:1 1 0;min-width:0;position:relative;overflow:hidden;margin:0!important;padding:0!important;list-style:none!important;
  border-radius:18px;border:1px solid var(--bd);cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(170deg,#fff 0%,var(--tint) 115%);
  transition:flex .65s cubic-bezier(.25,.8,.25,1),border-color .4s,transform .7s,opacity .7s}
li.hpgcx::before{
	content: none !important;
	display: none !important;
}
.hpgcx-wrap .hpgcx:nth-child(1){--tint:#e6efff;--bd:#cfdcf7;--ac:#2f6fed;--i:0}
.hpgcx-wrap .hpgcx:nth-child(2){--tint:#fff1db;--bd:#f5dfb8;--ac:#d98a0f;--i:1}
.hpgcx-wrap .hpgcx:nth-child(3){--tint:#fde6ee;--bd:#f5cad9;--ac:#d63a72;--i:2}
.hpgcx-wrap .hpgcx:nth-child(4){--tint:#e3f6ec;--bd:#c4e8d3;--ac:#1FA35B;--i:3}
.hpgcx-wrap .hpgcx.open{flex:2 1 0}
.hpgcx-wrap .hpgcx:focus-visible{border-color:var(--ac)}
.hpgcx-wrap .hpgcx-in{position:relative;z-index:1;height:100%;box-sizing:border-box;padding:24px;display:flex;flex-direction:column}

/* Icon: lifts on hover; on expand springs up, tilts, then floats gently */
.hpgcx-wrap .hpgcx-ico{width:84px;height:84px;flex:0 0 84px;display:flex;align-items:center;justify-content:flex-start;transform-origin:30% 70%;transition:transform .8s cubic-bezier(.3,1.45,.45,1)}
.hpgcx-wrap .hpgcx-ico img{width:84px;height:84px;display:block;max-width:none}
.hpgcx-wrap .hpgcx:hover:not(.open) .hpgcx-ico{transform:translateY(-3px)}
.hpgcx-wrap .hpgcx.open .hpgcx-ico{transform:translateY(-6px) scale(1.14) rotate(-7deg)}
.hpgcx-wrap .hpgcx.open .hpgcx-ico img{animation:hpgcxFloat 3.2s ease-in-out .8s infinite alternate}
@keyframes hpgcxFloat{from{transform:translateY(0) rotate(0)}to{transform:translateY(-6px) rotate(3deg)}}

/* Large faded icon behind an open panel */
.hpgcx-wrap .hpgcx-art{position:absolute;right:-30px;bottom:-40px;width:210px;height:210px;opacity:0;transform:rotate(-18deg) scale(.6);transition:opacity .5s,transform .8s cubic-bezier(.2,.8,.2,1);pointer-events:none;z-index:0}
.hpgcx-wrap .hpgcx-art img{width:100%;height:100%;max-width:none}
.hpgcx-wrap .hpgcx.open .hpgcx-art{opacity:.16;transform:rotate(-8deg) scale(1);transition-delay:.15s}

/* Slim arrow: hints the panel expands to the right */
.hpgcx-wrap .hpgcx-go{position:absolute;top:32px;right:22px;width:34px;height:9px;color:#a3a9b4;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1),color .3s}
.hpgcx-wrap .hpgcx-go svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.hpgcx-wrap .hpgcx:hover .hpgcx-go{color:var(--navy);transform:translateX(4px)}
.hpgcx-wrap .hpgcx.open .hpgcx-go{opacity:0;transform:translateX(14px)}

/* Text */
.hpgcx-wrap .hpgcx-txt{margin-top:18px}
.hpgcx-wrap .hpgcx-num{display:block;margin-bottom:6px;font-size:11px;font-weight:600;letter-spacing:1.5px;line-height:1.4;color:var(--ac);opacity:.75}
.hpgcx-wrap .hpgcx h3{margin:0;padding:0!important;font-family:inherit;font-size:16.5px;font-weight:600;line-height:1.35;color:#1a1c1c}
.hpgcx-wrap .hpgcx h3 span{display:block;white-space:nowrap}   /* two locked lines: no re-wrap while panels resize */
@media (min-width:960px) and (max-width:1099px){.hpgcx-wrap .hpgcx h3{font-size:14.5px}.hpgcx-wrap .hpgcx-in{padding:20px}}
.hpgcx-wrap .hpgcx-back{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1)}
.hpgcx-wrap .hpgcx-back>div{overflow:hidden}
.hpgcx-wrap .hpgcx.open .hpgcx-back{grid-template-rows:1fr}
/* description is laid out at the open-panel width (set by the script), so the growing panel only uncovers it */
.hpgcx-wrap .hpgcx-back p{margin:0;padding:12px 0 0!important;width:var(--pw,360px);font-size:15px;line-height:1.65;color:var(--txt)}
/* line-by-line "typed" reveal behind a soft edge */
.hpgcx-wrap .hpgcx-line{display:block;-webkit-mask-image:linear-gradient(90deg,#000 42%,transparent 58%);mask-image:linear-gradient(90deg,#000 42%,transparent 58%);
  -webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;opacity:0;
  transition:-webkit-mask-position .2s ease-in,mask-position .2s ease-in,opacity .2s ease-in}
.hpgcx-wrap .hpgcx.open .hpgcx-line{-webkit-mask-position:0 0;mask-position:0 0;opacity:1;
  transition:-webkit-mask-position .5s cubic-bezier(.3,.6,.3,1),mask-position .5s cubic-bezier(.3,.6,.3,1),opacity .25s ease-out;transition-delay:calc(.3s + var(--l) * 110ms)}

/* Entrance (only once the script runs, so nothing is hidden without it) */
.hpgcx-wrap.hpgcx-js:not(.is-in) .hpgcx{opacity:0;transform:translateY(60px)}
.hpgcx-wrap.is-in:not(.done) .hpgcx{transition-delay:calc(var(--i) * 110ms)}

/* Phones & tablets: tap-to-expand stack */
@media (max-width:959px){
  .hpgcx-wrap{margin-top:28px}
  .hpgcx-wrap .hpgcx-list{flex-direction:column;height:auto;gap:12px}
  .hpgcx-wrap .hpgcx,.hpgcx-wrap .hpgcx.open{flex:none}
  .hpgcx-wrap .hpgcx-in{padding:16px 52px 16px 16px}
  .hpgcx-wrap .hpgcx-head{display:flex;align-items:center;gap:14px}
  .hpgcx-wrap .hpgcx-ico{width:60px;height:60px;flex:0 0 60px}.hpgcx-wrap .hpgcx-ico img{width:60px;height:60px}
  .hpgcx-wrap .hpgcx-txt{margin:0}
  .hpgcx-wrap .hpgcx h3{font-size:17px}
  .hpgcx-wrap .hpgcx h3 span{display:inline;white-space:normal}
  .hpgcx-wrap .hpgcx-back p{width:auto;font-size:14.5px}
  .hpgcx-wrap .hpgcx-go{top:42px;right:10px;width:26px;transform:rotate(90deg)}
  .hpgcx-wrap .hpgcx:hover .hpgcx-go{transform:rotate(90deg)}
  .hpgcx-wrap .hpgcx.open .hpgcx-go{opacity:1;color:var(--navy);transform:rotate(-90deg)}
  .hpgcx-wrap .hpgcx-art{width:150px;height:150px;right:-24px;bottom:-30px}
}
@media (min-width:960px){.hpgcx-wrap .hpgcx-head{display:contents}}

/* Fix: stacked columns collapsing on tablet/mobile */
@media (max-width:980px){
  .cga-wh .cga-wh__in > .et_pb_column{flex:0 0 auto !important;width:100% !important;min-height:0 !important}
  .cga-wh .cga-wh__stage > .et_pb_module:not(.cga-wh__shot--before){flex:0 0 auto !important}
}
/* Fix: full-width stacked buttons on phones */
@media (max-width:600px){
  .cga-wh a.et_pb_button.cga-wh__btn{display:block !important;width:100% !important;max-width:none !important;
    box-sizing:border-box;text-align:center;margin:0 0 12px !important}
}
/*========================================================================================*/
/* ==========================================================
   CGAlive author page (/author/moen-ediga/)
   Reuses existing global classes: .heading, .redBtn
   New classes are all prefixed .cga-author-
   ========================================================== */

/* ---- Section spacing & backgrounds ---- */
.et_pb_section.cga-author-hero,
.et_pb_section.cga-author-story-sec,
.et_pb_section.cga-author-alt,
.et_pb_section.cga-author-plain,
.et_pb_section.cga-author-cta { padding: 60px 0 !important; }
.et_pb_section.cga-author-stats-sec { padding: 20px 0 0 !important; }
.cga-author-alt { background: #fbf9f8 !important; }
.cga-author-cta { background: radial-gradient(#ffe4d2 0%, #fff 70%) !important; text-align: center; }

/* ---- Hero ---- */
.cga-author-hero-row { align-items: center; }
.cga-author-pill { display: inline-block; background: #fff; font-size: 12px; font-weight: 500; color: #d0232a; padding: 10px 30px; border-radius: 30px; box-shadow: 0 0 20px rgba(0,0,0,.1); }
.cga-author-hero h1 { font-weight: 700; font-size: clamp(1.75rem, 4vw, 3.6rem); line-height: 1.3; color: #041a37; margin: 16px 0 4px; padding: 0; }
.cga-author-role { font-size: 18px; font-weight: 600; color: #041a37; margin-bottom: 14px; }
.cga-author-role em { color: #d0232a; }
.cga-author-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.cga-author-cta .cga-author-btns { justify-content: center; }
/* ---- Stats sentence ---- */
.cga-author-stats { text-align: center; padding: 60px 30px; border-radius: 20px;
  background: radial-gradient(ellipse at 20% 0%, #ffe4d2 0%, transparent 55%), radial-gradient(ellipse at 85% 100%, #e6f1ff 0%, transparent 60%), #fff; }
.cga-author-stats p { max-width: 900px; margin: 0 auto; padding: 0; font-size: clamp(1.4rem, 3.2vw, 2.4rem); font-weight: 600; line-height: 1.45; color: #041a37; }
.cga-author-stats b { color: #d0232a; font-weight: 800; font-size: 1.15em; white-space: nowrap; }
.cga-author-stats small { display: block; margin-top: 18px; font-size: 14px; font-weight: 500; color: #666; }

/* ---- Story + pull-quote ---- */
.cga-author-story { align-items: center; }
.cga-author-quote { margin: 0; border: 0; padding: 40px; border-radius: 15px; background: radial-gradient(#ffe4d2 0%, #fff 70%);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; line-height: 1.4; color: #041a37; }
.cga-author-quote em { color: #d0232a; }

/* ---- Cards (services, work, awards) ---- */
.cga-author-cards { align-items: stretch; }
.et_pb_column.cga-author-card { background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.1); padding: 20px !important; transition: transform .25s; }
.et_pb_column.cga-author-card:hover { transform: translateY(-4px); }
.cga-author-card h4 { font-size: 16px; font-weight: 600; color: #041a37; margin-bottom: 6px; padding: 0; }
.cga-author-card p { font-size: 14px; line-height: 1.6; color: #464646; margin: 0 0 10px; padding: 0; }
.cga-author-more { font-size: 14px; font-weight: 600; color: #d0232a !important; text-decoration: underline; }
.cga-author-metric { display: inline-block; font-size: 12px; font-weight: 600; color: #136B3B; background: #E3F6EC; border-radius: 30px; padding: 4px 12px; margin-bottom: 10px; }
.cga-author-badge { display: block; font-size: 12px; font-weight: 600; color: #d0232a; text-transform: uppercase; margin-bottom: 6px; }

/* ---- Latest articles ---- */
.cga-author-all { text-align: center; margin-top: 10px; }
/* ---- Mobile ---- */
@media (max-width: 980px) {
  .cga-author-quote { padding: 28px; }
}
@media (max-width: 480px) {
  .cga-author-stats { padding: 40px 20px; }
}
/*====================================================================================*/

/* ===== Author hero: gradient ring (4 Nov 2026) ===== */
.cga-author-hero { position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 12% 30%, #ffe4d2 0%, rgba(255,228,210,0) 32%),
    radial-gradient(circle at 88% 15%, #e3efff 0%, rgba(227,239,255,0) 35%),
    radial-gradient(#f3faff 50%, #fff 80%) !important; }
.cga-author-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(4,26,55,.08) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%); mask-image: linear-gradient(90deg, #000 0%, transparent 55%); }
.cga-author-hero .et_pb_row { position: relative; z-index: 1; }
.cga-author-frame { position: relative; display: block; width: 100%; max-width: 200px; margin: 0 auto; padding: 7px;
  border-radius: 50%; background: conic-gradient(from 210deg, #d0232a, #ffb38a, #ffe4d2, #d0232a);
  box-shadow: 0 14px 40px rgba(208,35,42,.18); line-height: 0; }
.cga-author-frame .cga-author-photo { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 1 / 1;
  object-fit: contain; background: #fff; border: 4px solid #fff; border-radius: 50%; box-shadow: none; }
@media (max-width: 980px) {
  .cga-author-frame { max-width: 170px; }
  .cga-author-hero .et_pb_text_inner { text-align: center; }
  .cga-author-btns { justify-content: center; }
  .cga-author-hero::before { -webkit-mask-image: linear-gradient(180deg, #000, transparent 50%); mask-image: linear-gradient(180deg, #000, transparent 50%); }
}

/* Author hero: bio size + mobile spacing */
.cga-author-hero .et_pb_text_inner > p:not([class]) { font-size: 18px; line-height: 1.7; }
@media (max-width: 980px) {
  .et_pb_section.cga-author-hero { padding: 24px 0 40px !important; }
  .et_pb_section.cga-author-hero .et_pb_row.cga-author-hero-row { padding-top: 70px !important; padding-bottom: 0 !important; row-gap: 24px; }
  .cga-author-hero .et_pb_text_inner > p:not([class]) { font-size: 16px; }
}

/* Author hero: "Meet the author" pill overlapping the bottom of the ring */
.cga-author-photo-wrap { position: relative; display: block; max-width: 200px; margin: 0 auto; text-align: center; }
.cga-author-photo-wrap .cga-author-frame { margin: 0; }
.cga-author-photo-wrap .cga-author-pill { display: table; position: relative; z-index: 2; margin: -30px auto 0; white-space: nowrap; line-height: 1.4; }
.cga-author-hero h1 { margin-top: 0 !important; }
@media (max-width: 980px) {
  .cga-author-photo-wrap { max-width: 170px; }
}

/* Author page: centred section headings (story section is 2-column, so it stays left) */
.et_pb_section.cga-author-alt .heading,
.et_pb_section.cga-author-plain .heading,
.et_pb_section.cga-author-cta .heading { text-align: center; margin-left: auto; margin-right: auto; }

.et_pb_section.cga-author-cta .et_pb_text_inner,
.et_pb_section.cga-author-cta .et_pb_text_inner p { text-align: center; }
@media (max-width: 980px) {
  .cga-author-photo-wrap .cga-author-pill { margin-top: -20px; }
}

/* Logo case studies: no entrance animation on the hero (5 Nov 2026).
   It is the first thing visitors see, so it should paint straight away (faster LCP).
   Animations further down these pages are unchanged. */
.cga-hero.cga-sec .et_animated,
.cga-hero.cga-sec.et_animated { opacity: 1 !important; animation: none !important; }


/* Service page heroes: glow positions fixed in px (based on the ~700px hero) instead of % of the hero height (5 Nov 2026).
   With % positions, the glows jumped whenever the hero text reflowed as the web font loaded (CLS up to 0.25).
   Same look, but now independent of the hero height. */
.cga-grad i:nth-child(1) { top: -245px; }
.cga-grad i:nth-child(2) { top: -70px; }
.cga-grad i:nth-child(3) { bottom: auto; top: calc(1085px - min(55vw, 760px)); }

/* Case study templates (logo, web, digital marketing, UI/UX): the Theme Builder wrapper around the post content (5 Nov 2026).
   Divi puts these rules in its deferred CSS, which loads after the first paint. Until it arrived, the whole page sat
   50px lower and 75px narrower, then jumped into place (mobile CLS 0.17–1.0). Same values, now applied from the first paint.
   Only matches a first body section that holds the Post Content module, so the Trends template is unaffected. */
.et_pb_section_0_tb_body.et_pb_section:has(.et_pb_post_content_0_tb_body),
.et_pb_section_0_tb_body .et_pb_post_content_0_tb_body { margin: 0; padding: 0; }
.et_pb_row_0_tb_body.et_pb_row:has(.et_pb_post_content_0_tb_body) { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; }
.et_pb_row .et_pb_column_0_tb_body.et_pb_column:has(.et_pb_post_content_0_tb_body) { margin-top: 0; margin-bottom: 0; margin-right: 0 !important; margin-left: 0; padding: 0; }