/* * Glaricx Design System * Single source of truth for brand tokens, derived from the Glaricx V9 logo. * Primary brand color = #4BCD3E (logo green). Enqueued via the child theme functions.php. */ /* ---- Self-hosted brand font: Poppins (perf + GDPR; no external Google Fonts) ---- */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.woff2') format('woff2'); } :root { /* ---- Brand green (anchored on logo #4BCD3E) ---- */ --g-green-50: #F0FBEF; --g-green-100: #DCF6DA; --g-green-200: #B9EEB5; --g-green-300: #93E48B; --g-green-400: #6CDA62; --g-green-500: #4BCD3E; /* brand */ --g-green-600: #38B42D; /* hover / deeper */ --g-green-700: #298F1F; --g-green-800: #1E7416; /* accessible green text/links on white */ --g-green-900: #145210; --g-brand: var(--g-green-500); --g-brand-hover: var(--g-green-600); /* ---- Ink & neutrals (faint cool-green undertone for cohesion) ---- */ --g-ink-950: #0B120E; --g-ink-900: #0F1A14; --g-ink-800: #18241D; --g-ink-700: #25332B; --g-ink-600: #3A4A40; --g-ink-500: #586860; --g-ink-400: #7E8C84; --g-ink-300: #A8B2AC; --g-ink-200: #CDD5D0; --g-ink-100: #E7ECE9; --g-ink-50: #F5F8F6; --g-white: #FFFFFF; /* ---- Secondary accent (use sparingly: gradients, secondary highlights) ---- */ --g-teal-500: #12B5A5; --g-teal-600: #0E9A8C; /* ---- Semantic ---- */ --g-success: #2FAE33; --g-warning: #E8A317; --g-error: #E5484D; --g-info: #2D74E8; /* ---- Surface & text roles ---- */ --g-bg: var(--g-white); --g-bg-subtle: var(--g-ink-50); --g-bg-dark: var(--g-ink-950); --g-text: var(--g-ink-800); --g-text-strong: var(--g-ink-950); --g-text-muted: var(--g-ink-500); --g-text-on-dark:#E9F3EC; --g-border: var(--g-ink-200); --g-link: var(--g-green-800); --g-link-hover: var(--g-green-900); /* ---- CTA (dark text on brand green = AA-accessible + modern) ---- */ --g-cta-bg: var(--g-green-500); --g-cta-bg-hover: var(--g-green-600); --g-cta-text: var(--g-ink-950); /* ---- Typography (self-hosted in the performance pass) ---- */ --g-font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --g-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --g-fs-base: 1.0625rem; /* 17px */ --g-lh-body: 1.7; --g-lh-heading: 1.12; --g-fw-heading: 700; /* ---- Radius / shadow / layout ---- */ --g-radius-sm: 8px; --g-radius: 12px; --g-radius-lg: 20px; --g-shadow-sm: 0 1px 2px rgba(11,18,14,.06), 0 1px 3px rgba(11,18,14,.08); --g-shadow: 0 4px 16px rgba(11,18,14,.08); --g-shadow-lg: 0 18px 48px rgba(11,18,14,.14); --g-container: 1200px; --g-gutter: clamp(1rem, 4vw, 2.5rem); } /* ========================================================= Base ========================================================= */ body { font-family: var(--g-font-body); font-size: var(--g-fs-base); line-height: var(--g-lh-body); color: var(--g-text); background: var(--g-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4, .et_pb_module h5, .et_pb_module h6 { font-family: var(--g-font-heading); color: var(--g-text-strong); line-height: var(--g-lh-heading); font-weight: var(--g-fw-heading); letter-spacing: -0.02em; } a { color: var(--g-link); text-decoration: none; } a:hover { color: var(--g-link-hover); } /* Force the brand font onto Divi nav + form controls too */ button, input, select, textarea, #et-top-navigation, #top-menu li a, .et_pb_menu a, .et_pb_button { font-family: var(--g-font-body); } /* Brand helpers */ .g-text-brand { color: var(--g-brand) !important; } .g-bg-brand { background-color: var(--g-brand) !important; color: var(--g-cta-text) !important; } .g-bg-dark { background-color: var(--g-bg-dark) !important; color: var(--g-text-on-dark) !important; } .g-bg-subtle { background-color: var(--g-bg-subtle) !important; } /* ========================================================= Divi overrides — primary button = brand green + dark text ========================================================= */ .et_pb_button, a.et_pb_button { background-color: var(--g-cta-bg); color: var(--g-cta-text) !important; border: 0; border-radius: var(--g-radius-sm); font-family: var(--g-font-heading); font-weight: 600; letter-spacing: 0; padding: .9em 1.9em !important; transition: background-color .2s ease, box-shadow .2s ease, color .2s ease; } /* Hover = colour + subtle shadow only. No transform/size change, so button corners never flicker. */ .et_pb_button:hover { background-color: var(--g-cta-bg-hover) !important; color: var(--g-cta-text) !important; box-shadow: 0 8px 20px rgba(75,205,62,.30); } /* Remove Divi's hover arrow icon that shifts button width */ .et_pb_button:before, .et_pb_button:after { display: none !important; } /* Secondary / ghost button: add class "g-btn-ghost" to a Divi button */ .et_pb_button.g-btn-ghost { background: transparent; color: var(--g-text-strong) !important; box-shadow: inset 0 0 0 2px var(--g-border); } .et_pb_button.g-btn-ghost:hover { background: transparent !important; color: var(--g-brand) !important; box-shadow: inset 0 0 0 2px var(--g-brand); } /* ========================================================= Layout helpers (used by the injected Divi layouts) ========================================================= */ /* Hero: branded background + CTAs on one line + responsive headline */ .g-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #F7FBF8 0%, #ffffff 100%) !important; } .g-hero::before { content: ""; position: absolute; top: -160px; right: -120px; width: 440px; height: 440px; background: radial-gradient(circle, rgba(75,205,62,.07), rgba(75,205,62,0) 70%); pointer-events: none; z-index: 0; } .g-hero > .et_pb_row { position: relative; z-index: 1; } .g-hero canvas.g-hero-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; z-index: 0; pointer-events: none; } .g-hero .et_pb_button_module_wrapper { display: inline-block; vertical-align: top; margin: 6px 12px 6px 0; } .g-hero .et_pb_button { margin: 0 !important; } @media (max-width: 980px) { .g-hero h1 { font-size: 34px !important; } } @media (max-width: 600px) { .g-hero h1 { font-size: 25px !important; word-break: normal; overflow-wrap: break-word; } .g-hero .et_pb_button_module_wrapper { display: block; margin-right: 0; } } /* ---- Mobile / tablet: restore side padding on full-width rows + scale long headings ---- */ @media (max-width: 980px) { .et_pb_section > .et_pb_row { padding-left: 22px !important; padding-right: 22px !important; box-sizing: border-box; } } @media (max-width: 600px) { .et_pb_section > .et_pb_row { padding-left: 16px !important; padding-right: 16px !important; } .et_pb_text h2 { font-size: 26px !important; line-height: 1.22 !important; } .g-stats-sec h2 { font-size: 22px !important; } .section-label { font-size: 18px; } html, body { overflow-x: hidden; } } /* Global phone fix: force Divi columns to stack full-width (injected layouts don't always get Divi's phone CSS) */ @media (max-width: 767px) { .et_pb_section .et_pb_column:not(.et_pb_column_empty) { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; } } /* Standardized section label (Issue 1) */ .section-label { display: block; font-family: var(--g-font-heading); font-size: 22px; font-weight: 700; color: #1E7416; letter-spacing: 1px; line-height: 1.25; text-transform: uppercase; margin: 0 0 16px; } .g-bg-dark .section-label { color: #4BCD3E; } /* Why clients choose us */ .g-why .section-label { text-align: center; } .g-why-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin: 0 0 26px; } .g-why-col h2 { font-size: 27px; line-height: 1.25; margin: 0 0 12px; color: #0B120E; } .g-why-col p { color: #3A4A40; font-size: 16px; line-height: 1.6; margin: 0; } .g-why-note { margin: 14px 0 0 !important; font-weight: 600 !important; color: #1E7416 !important; font-size: 14.5px !important; } .g-why-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .g-why-card { background: #F7FBF8; border: 1px solid #E7ECE9; border-radius: 14px; padding: 24px 22px; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease; } .g-why-card:hover { transform: translateY(-5px); border-color: var(--g-brand); background: #fff; box-shadow: 0 16px 34px rgba(75,205,62,.18); } .g-why-icon { transition: background-color .2s ease; } .g-why-icon svg { transition: stroke .2s ease; } .g-why-card:hover .g-why-icon { background: var(--g-brand); } .g-why-card:hover .g-why-icon svg { stroke: #ffffff; } .g-why-icon { display: inline-flex; width: 56px; height: 56px; border-radius: 12px; background: #EAF9E8; align-items: center; justify-content: center; margin-bottom: 14px; } .g-why-card h3 { font-size: 17px; margin: 0 0 8px; color: #0B120E; min-height: 44px; } .g-why-card p { color: #586860; font-size: 14px; line-height: 1.55; margin: 0; } @media (max-width: 980px) { .g-why-cards { grid-template-columns: repeat(2, 1fr); } .g-why-intro { gap: 30px; } } @media (max-width: 600px) { .g-why-intro { grid-template-columns: 1fr; gap: 22px; margin-bottom: 20px; } .g-why-cards { grid-template-columns: 1fr; } .g-why-col h2 { font-size: 23px; } .g-why-card h3 { min-height: 0; } } /* Our services */ .g-services-head { text-align: center; max-width: 720px; margin: 0 auto; } .g-services-head h2 { font-size: 34px; line-height: 1.2; margin: 0 0 12px; color: #0B120E; } .g-services-sub { font-size: 17px; line-height: 1.6; color: #3A4A40; margin: 0; } .g-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 32px 0 0; } .g-service-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #E7ECE9; border-radius: 14px; padding: 24px 22px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .g-service-card:hover { transform: translateY(-5px); border-color: var(--g-brand); box-shadow: 0 16px 34px rgba(75,205,62,.16); } .g-svc-icon { display: inline-flex; width: 48px; height: 48px; border-radius: 11px; background: #EAF9E8; align-items: center; justify-content: center; margin-bottom: 14px; transition: background-color .2s ease; } .g-svc-icon svg { transition: stroke .2s ease; } .g-service-card:hover .g-svc-icon { background: var(--g-brand); } .g-service-card:hover .g-svc-icon svg { stroke: #ffffff; } .g-service-card h3 { font-size: 18px; margin: 0 0 7px; color: #0B120E; } .g-service-card p { font-size: 14px; line-height: 1.5; color: #586860; margin: 0; } .g-services-all { text-align: center; margin-top: 30px; } .g-outline-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border: 2px solid var(--g-border); border-radius: 10px; font-family: var(--g-font-heading); font-weight: 600; font-size: 15px; color: #0B120E; text-decoration: none; transition: border-color .2s ease, color .2s ease; } .g-outline-btn:hover { border-color: var(--g-brand); color: #1E7416; } @media (max-width: 980px) { .g-services-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .g-services-grid { grid-template-columns: 1fr; } .g-services-head h2 { font-size: 26px; } } /* Industries we serve */ .g-ind-head { text-align: center; max-width: 760px; margin: 0 auto; } .g-ind-head h2 { font-size: 34px; line-height: 1.2; margin: 0 0 12px; color: #0B120E; } .g-ind-sub { font-size: 17px; line-height: 1.6; color: #3A4A40; margin: 0; } .g-ind-value { font-size: 14.5px; line-height: 1.55; color: #1E7416; font-weight: 600; margin: 12px auto 0; max-width: 680px; } .g-ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 32px 0 0; } .g-ind-card { background: #F7FBF8; border: 1px solid #E7ECE9; border-radius: 14px; padding: 24px 22px; display: flex; flex-direction: column; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .g-ind-card:hover { transform: translateY(-5px); border-color: var(--g-brand); box-shadow: 0 16px 34px rgba(75,205,62,.16); } .g-ind-icon { display: inline-flex; width: 48px; height: 48px; border-radius: 11px; background: #EAF9E8; align-items: center; justify-content: center; margin-bottom: 14px; transition: background-color .2s ease; } .g-ind-icon svg { transition: stroke .2s ease; } .g-ind-card:hover .g-ind-icon { background: var(--g-brand); } .g-ind-card:hover .g-ind-icon svg { stroke: #ffffff; } .g-ind-card h3 { font-size: 18px; margin: 0 0 7px; color: #0B120E; } .g-ind-card p { font-size: 14px; line-height: 1.5; color: #586860; margin: 0; } .g-ind-foot { text-align: center; margin: 24px 0 0; font-size: 15px; color: #586860; font-weight: 500; } @media (max-width: 980px) { .g-ind-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .g-ind-grid { grid-template-columns: 1fr; } .g-ind-head h2 { font-size: 26px; } } /* Proof, not promises (case studies) */ .g-proof-head { text-align: center; max-width: 720px; margin: 0 auto; } .g-proof-head h2 { font-size: 34px; line-height: 1.2; margin: 0 0 12px; color: #0B120E; } .g-proof-sub { font-size: 17px; line-height: 1.6; color: #3A4A40; margin: 0; } .g-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0 0; } .g-proof-card { display: flex; flex-direction: column; background: #0B120E; border: 1px solid #1A241E; border-radius: 16px; padding: 28px 26px; transition: transform .2s ease, box-shadow .2s ease; } .g-proof-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(11,18,14,.28); } .g-proof-tag { display: block; color: #4BCD3E; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 8px; } .g-proof-card h3 { color: #ffffff; font-size: 19px; line-height: 1.25; margin: 0 0 16px; } .g-proof-row { margin: 0 0 12px; } .g-proof-row .lbl, .g-proof-outcome .lbl { display: block; color: #8FA398; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 3px; } .g-proof-row p { color: #E9F3EC; font-size: 14px; line-height: 1.45; margin: 0; } .g-proof-outcome { margin-top: auto; padding-top: 16px; border-top: 1px solid #1F2C25; } .g-proof-outcome .metric { display: block; color: #4BCD3E; font-family: var(--g-font-heading); font-weight: 800; font-size: 30px; line-height: 1.1; } .g-proof-outcome p { color: #CDD5D0; font-size: 13px; line-height: 1.4; margin: 4px 0 0; } .g-proof-all { text-align: center; margin-top: 30px; } /* What you can expect (light feature row, 2-line tiles) */ .g-expect-head { text-align: center; max-width: 720px; margin: 0 auto; } .g-expect-head h2 { font-size: 34px; line-height: 1.2; margin: 0 0 12px; color: #0B120E; } .g-expect-sub { font-size: 17px; line-height: 1.6; color: #3A4A40; margin: 0; } .g-expect-row { display: flex; flex-wrap: wrap; justify-content: center; margin: 32px 0 0; } .g-expect-item { flex: 1 1 0; min-width: 178px; max-width: 224px; text-align: center; padding: 6px 24px; position: relative; } .g-expect-item + .g-expect-item::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: #E7ECE9; } .g-ec-icon { display: inline-flex; width: 48px; height: 48px; border-radius: 11px; background: #EAF9E8; align-items: center; justify-content: center; margin-bottom: 14px; transition: background-color .2s ease; } .g-ec-icon svg { transition: stroke .2s ease; } .g-expect-item:hover .g-ec-icon { background: var(--g-brand); } .g-expect-item:hover .g-ec-icon svg { stroke: #ffffff; } .g-expect-item h3 { font-size: 16px; margin: 0 0 6px; color: #0B120E; min-height: 40px; display: flex; align-items: center; justify-content: center; } .g-expect-item p { font-size: 13.5px; line-height: 1.5; color: #586860; margin: 0; } @media (max-width: 980px) { .g-expect-item { flex: 0 0 33.333%; max-width: none; padding: 16px 18px; } .g-expect-item + .g-expect-item::before { display: none; } } @media (max-width: 600px) { .g-expect-item { flex: 0 0 50%; } .g-expect-head h2 { font-size: 26px; } } /* Our process — delivery ecosystem */ .g-proc-head { text-align: center; max-width: 720px; margin: 0 auto; } .g-proc-head h2 { font-size: 27px; line-height: 1.2; margin: 0 0 9px; color: #0B120E; } .g-proc-sub { font-size: 17px; line-height: 1.6; color: #3A4A40; margin: 0; } .g-proc { position: relative; width: 100%; max-width: 720px; margin: 20px auto 0; aspect-ratio: 1 / 0.56; } .g-proc-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; } .g-proc-lines line { stroke: rgba(75,205,62,.45); stroke-width: .35; stroke-dasharray: 1.4 1.8; } .g-proc-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 122px; height: 122px; border-radius: 50%; background: linear-gradient(135deg, #4BCD3E, #34B528); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 18px 44px rgba(75,205,62,.4); z-index: 3; animation: g-breathe 3.6s ease-in-out infinite; } .g-proc-center .t { font-family: var(--g-font-heading); font-weight: 800; font-size: 15px; letter-spacing: .4px; line-height: 1.1; } .g-proc-center .s { font-size: 8.5px; opacity: .9; margin-top: 7px; text-transform: uppercase; letter-spacing: .09em; } @keyframes g-breathe { 0%,100% { box-shadow: 0 16px 40px rgba(75,205,62,.32); } 50% { box-shadow: 0 18px 62px rgba(75,205,62,.55); } } .g-proc-node { position: absolute; transform: translate(-50%,-50%); width: 114px; background: #fff; border: 1px solid #E7ECE9; border-radius: 12px; padding: 10px 8px 9px; text-align: center; box-shadow: 0 10px 24px rgba(11,18,14,.08); z-index: 2; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .g-proc-node:hover { border-color: var(--g-brand); box-shadow: 0 16px 34px rgba(75,205,62,.26); z-index: 6; } .g-proc-node .ico { display: inline-flex; width: 34px; height: 34px; border-radius: 9px; background: #EAF9E8; align-items: center; justify-content: center; margin-bottom: 6px; transition: background-color .2s ease; } .g-proc-node .ico svg { transition: stroke .2s ease; } .g-proc-node:hover .ico { background: var(--g-brand); } .g-proc-node:hover .ico svg { stroke: #ffffff; } .g-proc-node .ttl { display: block; font-family: var(--g-font-heading); font-weight: 700; font-size: 12.5px; color: #0B120E; } .g-proc-desc { display: block; font-size: 12px; line-height: 1.4; color: #586860; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .25s ease, opacity .2s ease, margin-top .2s ease; } .g-proc-node:hover .g-proc-desc { max-height: 64px; opacity: 1; margin-top: 7px; } .g-proc .n1 { top: 11%; left: 50%; } .g-proc .n2 { top: 26%; left: 80%; } .g-proc .n3 { top: 58%; left: 87%; } .g-proc .n4 { top: 84%; left: 66%; } .g-proc .n5 { top: 84%; left: 34%; } .g-proc .n6 { top: 58%; left: 13%; } .g-proc .n7 { top: 26%; left: 20%; } /* scroll reveal (only when JS adds .g-proc--anim; safe fallback = visible) */ .g-proc--anim .g-proc-node, .g-proc--anim .g-proc-center, .g-proc--anim .g-proc-lines { opacity: 0; } .g-proc--anim.is-in .g-proc-lines { opacity: 1; transition: opacity .6s ease; } .g-proc--anim.is-in .g-proc-node { opacity: 1; transition: opacity .5s ease; } .g-proc--anim.is-in .g-proc-center { opacity: 1; transition: opacity .5s ease .55s; } .g-proc--anim.is-in .n1 { transition-delay: .12s; } .g-proc--anim.is-in .n2 { transition-delay: .18s; } .g-proc--anim.is-in .n3 { transition-delay: .24s; } .g-proc--anim.is-in .n4 { transition-delay: .30s; } .g-proc--anim.is-in .n5 { transition-delay: .36s; } .g-proc--anim.is-in .n6 { transition-delay: .42s; } .g-proc--anim.is-in .n7 { transition-delay: .48s; } @media (max-width: 900px) { .g-proc { aspect-ratio: auto; max-width: 440px; display: flex; flex-direction: column; gap: 12px; } .g-proc-lines { display: none; } .g-proc-center { position: static; transform: none; width: 150px; height: 150px; margin: 0 auto 6px; animation: none; } .g-proc-node { position: static; transform: none; width: 100%; } .g-proc-desc { max-height: none; opacity: 1; margin-top: 7px; overflow: visible; } .g-proc--anim .g-proc-node, .g-proc--anim .g-proc-center, .g-proc--anim .g-proc-lines { opacity: 1; } .g-proc-head h2 { font-size: 26px; } } /* Our process — connected journey (chevron path) */ .g-journey-head { text-align: center; max-width: 720px; margin: 0 auto; } .g-journey-head h2 { font-size: 34px; line-height: 1.2; margin: 0 0 12px; color: #0B120E; } .g-journey-sub { font-size: 17px; line-height: 1.6; color: #3A4A40; margin: 0; } .g-journey { display: flex; align-items: stretch; justify-content: center; gap: 14px; margin: 44px 0 0; position: relative; } .g-journey::before { content: ""; position: absolute; top: 44px; left: 6%; right: 6%; height: 3px; background: linear-gradient(90deg, rgba(75,205,62,.4), #4BCD3E); border-radius: 3px; z-index: 2; } .g-journey::after { content: ""; position: absolute; top: 39.5px; right: 4.6%; width: 0; height: 0; border-left: 10px solid #4BCD3E; border-top: 6px solid transparent; border-bottom: 6px solid transparent; z-index: 2; } .g-jn { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border: 1px solid #E7ECE9; border-radius: 14px; padding: 20px 12px 16px; box-shadow: 0 8px 22px rgba(11,18,14,.07); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .g-jn:hover { transform: translateY(-5px); border-color: var(--g-brand); box-shadow: 0 16px 34px rgba(75,205,62,.22); } .g-jn .ico { position: relative; z-index: 3; display: inline-flex; width: 48px; height: 48px; border-radius: 50%; background: #EAF9E8; align-items: center; justify-content: center; margin-bottom: 12px; flex: 0 0 auto; box-shadow: 0 0 0 6px #fff; transition: background-color .2s ease; } .g-jn .ico svg { transition: stroke .2s ease; } .g-jn:hover .ico { background: var(--g-brand); } .g-jn:hover .ico svg { stroke: #ffffff; } .g-jn h4 { font-family: var(--g-font-heading); font-size: 14.5px; font-weight: 700; margin: 0 0 5px; color: #0B120E; } .g-jn p { font-size: 12px; line-height: 1.4; color: #586860; margin: 0; } .g-journey--anim .g-jn { opacity: 0; } .g-journey--anim .g-journey::before { transform: scaleX(0); transform-origin: left center; } .g-journey--anim .g-journey::after { opacity: 0; } .g-journey--anim.is-in .g-journey::before { transform: scaleX(1); transition: transform 1s ease; } .g-journey--anim.is-in .g-journey::after { opacity: 1; transition: opacity .3s ease .95s; } .g-journey--anim.is-in .g-jn { opacity: 1; transition: opacity .45s ease; } .g-journey--anim.is-in .g-jn:nth-child(1) { transition-delay: .15s; } .g-journey--anim.is-in .g-jn:nth-child(2) { transition-delay: .25s; } .g-journey--anim.is-in .g-jn:nth-child(3) { transition-delay: .35s; } .g-journey--anim.is-in .g-jn:nth-child(4) { transition-delay: .45s; } .g-journey--anim.is-in .g-jn:nth-child(5) { transition-delay: .55s; } .g-journey--anim.is-in .g-jn:nth-child(6) { transition-delay: .65s; } .g-journey--anim.is-in .g-jn:nth-child(7) { transition-delay: .75s; } @media (max-width: 900px) { .g-journey { flex-direction: column; align-items: stretch; gap: 0; max-width: 460px; margin: 32px auto 0; } .g-journey::before { top: 31px; bottom: 31px; left: 39px; right: auto; width: 3px; height: auto; background: linear-gradient(180deg, rgba(75,205,62,.4), #4BCD3E); transform-origin: top center; } .g-journey::after { top: auto; bottom: 20px; left: 34px; right: auto; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid #4BCD3E; border-bottom: 0; } .g-journey--anim .g-journey::before { transform: scaleY(0); } .g-journey--anim.is-in .g-journey::before { transform: scaleY(1); } .g-jn { flex-direction: row; align-items: center; text-align: left; gap: 14px; padding: 14px 16px; margin-bottom: 14px; } .g-jn .ico { margin-bottom: 0; } .g-journey--anim .g-jn { opacity: 1; } .g-journey-head h2 { font-size: 26px; } } /* Flexible engagement models */ .g-engage-head { text-align: center; max-width: 720px; margin: 0 auto; } .g-engage-head h2 { font-size: 34px; line-height: 1.2; margin: 0 0 12px; color: #0B120E; } .g-engage-sub { font-size: 17px; line-height: 1.6; color: #3A4A40; margin: 0; } .g-engage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 40px 0 0; align-items: stretch; } .g-engage-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #E7ECE9; border-radius: 16px; padding: 30px 26px; box-shadow: 0 8px 24px rgba(11,18,14,.06); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .g-engage-card:hover { transform: translateY(-5px); border-color: var(--g-brand); box-shadow: 0 18px 38px rgba(75,205,62,.18); } .g-engage-card .ico, .g-engage-card svg { transition: background-color .2s ease, stroke .2s ease; } .g-engage-card:hover .ico { background: var(--g-brand); } .g-engage-card:hover .ico svg { stroke: #ffffff; } .g-btn-fill svg, .g-outline-btn svg { width: 18px; height: 18px; flex: 0 0 auto; } .g-engage-card.feat { border: 2px solid var(--g-brand); box-shadow: 0 18px 44px rgba(75,205,62,.18); } .g-engage-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--g-brand); color: #0B120E; font-family: var(--g-font-heading); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; padding: 5px 14px; border-radius: 999px; white-space: nowrap; } .g-engage-card .ico { display: inline-flex; width: 50px; height: 50px; border-radius: 12px; background: #EAF9E8; align-items: center; justify-content: center; margin-bottom: 16px; } .g-engage-card h3 { font-size: 20px; margin: 0 0 8px; color: #0B120E; } .g-engage-card p { font-size: 15px; line-height: 1.55; color: #586860; margin: 0; } .g-engage-cta { text-align: center; margin-top: 36px; } .g-btn-fill { display: inline-flex; align-items: center; gap: 8px; padding: 14px 30px; border-radius: 10px; background: var(--g-brand); color: #0B120E !important; font-family: var(--g-font-heading); font-weight: 700; font-size: 15px; text-decoration: none; transition: background-color .2s ease, box-shadow .2s ease; } .g-btn-fill:hover { background: var(--g-brand-hover); box-shadow: 0 10px 24px rgba(75,205,62,.3); color: #0B120E !important; } @media (max-width: 900px) { .g-engage-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; gap: 28px; } } @media (max-width: 600px) { .g-engage-head h2 { font-size: 26px; } } /* Technologies we work with */ .g-tech-head { text-align: center; max-width: 720px; margin: 0 auto; } .g-tech-head h2 { font-size: 34px; line-height: 1.2; margin: 0 0 12px; color: #0B120E; } .g-tech-sub { font-size: 17px; line-height: 1.6; color: #3A4A40; margin: 0; } /* vertical tabbed tech (nextgensoft-style) */ .g-techtab { display: flex; max-width: 1000px; margin: 34px auto 0; background: #fff; border: 1px solid #E7ECE9; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(11,18,14,.06); } .g-tt-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .g-techtab-nav { flex: 0 0 234px; display: flex; flex-direction: column; background: #F8FBF9; border-right: 1px solid #E7ECE9; padding: 12px 0; } .g-techtab-nav label { display: block; padding: 14px 24px; font-family: var(--g-font-heading); font-weight: 600; font-size: 15px; color: #586860; cursor: pointer; border-left: 3px solid transparent; transition: color .15s ease, background-color .15s ease, border-color .15s ease; } .g-techtab-nav label:hover { color: #0B120E; background: rgba(75,205,62,.06); } .g-techtab-panels { flex: 1; padding: 30px 34px; } .g-tt-panel { display: none; } .g-tt-phead { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .g-tt-phead .ico { display: inline-flex; width: 42px; height: 42px; border-radius: 10px; background: #EAF9E8; align-items: center; justify-content: center; flex: 0 0 auto; } .g-tt-phead h3 { font-size: 20px; margin: 0; color: #0B120E; } .g-tt-panel > p { color: #586860; font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; } .g-tech-pills { display: flex; flex-wrap: wrap; gap: 9px; } .g-tech-pills span { background: #F5F8F6; color: #3A4A40; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 10px; border: 1px solid #E7ECE9; cursor: default; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .g-tech-pills span:hover { background: #EAF9E8; border-color: var(--g-brand); color: #1E7416; } .g-tech-foot { text-align: center; margin: 26px 0 0; font-size: 15px; font-weight: 600; color: #1E7416; } #gtt1:checked ~ .g-techtab-nav label[for="gtt1"], #gtt2:checked ~ .g-techtab-nav label[for="gtt2"], #gtt3:checked ~ .g-techtab-nav label[for="gtt3"], #gtt4:checked ~ .g-techtab-nav label[for="gtt4"], #gtt5:checked ~ .g-techtab-nav label[for="gtt5"], #gtt6:checked ~ .g-techtab-nav label[for="gtt6"], #gtt7:checked ~ .g-techtab-nav label[for="gtt7"] { color: #0B120E; border-left-color: var(--g-brand); background: rgba(75,205,62,.09); } #gtt1:checked ~ .g-techtab-panels .p1, #gtt2:checked ~ .g-techtab-panels .p2, #gtt3:checked ~ .g-techtab-panels .p3, #gtt4:checked ~ .g-techtab-panels .p4, #gtt5:checked ~ .g-techtab-panels .p5, #gtt6:checked ~ .g-techtab-panels .p6, #gtt7:checked ~ .g-techtab-panels .p7 { display: block; } /* sub-group logo blocks */ .g-tt-groups { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px 16px; } .g-tt-group { display: flex; align-items: flex-start; gap: 13px; padding: 12px; border-radius: 10px; transition: background-color .15s ease; } .g-tt-group:hover { background: #F1F8EF; } .g-tt-glogo { flex: 0 0 auto; position: relative; width: 40px; height: 40px; border-radius: 9px; background: #F5F8F6; border: 1px solid #E7ECE9; transition: border-color .2s ease, background-color .2s ease; } .g-tt-glogo img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 24px; height: 24px; object-fit: contain; transition: opacity .25s ease; } .g-tt-glogo .clr { opacity: 0; } .g-tt-group:hover .g-tt-glogo { background: #fff; border-color: var(--g-brand); } .g-tt-group:hover .g-tt-glogo .mono { opacity: 0; } .g-tt-group:hover .g-tt-glogo .clr { opacity: 1; } .g-tt-gtext { flex: 1; min-width: 0; } .g-tt-gtext h4 { font-size: 14.5px; font-weight: 700; margin: 0 0 3px; color: #0B120E; } .g-tt-gtext p { font-size: 12.5px; line-height: 1.5; color: #586860; margin: 0; } /* Section intros: widen so titles fit on one line + balanced wrapping (no orphan words, better width use) */ .g-services-head, .g-engage-head, .g-tech-head, .g-proc-head, .g-proof-head, .g-expect-head, .g-ind-head, .g-journey-head { max-width: 1000px; } .g-services-head h2, .g-engage-head h2, .g-tech-head h2, .g-proc-head h2, .g-proof-head h2, .g-expect-head h2, .g-ind-head h2, .g-journey-head h2, .g-why-col h2, .g-stats-sec h2 { text-wrap: balance; } .g-services-sub, .g-engage-sub, .g-tech-sub, .g-proc-sub, .g-proof-sub, .g-expect-sub, .g-ind-sub, .g-journey-sub, .g-tst-sub { max-width: none; margin-left: auto; margin-right: auto; text-wrap: pretty; font-size: 15.5px; } /* Testimonials */ .g-tst-head { text-align: center; max-width: 1000px; margin: 0 auto; } .g-tst-head h2 { font-size: 34px; line-height: 1.2; margin: 0 0 12px; color: #0B120E; text-wrap: balance; } .g-tst-sub { font-size: 17px; line-height: 1.6; color: #3A4A40; margin: 0 auto; } .g-tst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 38px 0 0; align-items: stretch; } .g-tst-card { display: flex; flex-direction: column; background: #F7FBF8; border: 1px solid #E7ECE9; border-radius: 16px; padding: 26px 26px 22px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .g-tst-card:hover { transform: translateY(-5px); border-color: var(--g-brand); box-shadow: 0 16px 34px rgba(75,205,62,.16); } .g-tst-quote { display: block; font-family: var(--g-font-heading); font-size: 46px; line-height: .8; color: var(--g-brand); height: 26px; } .g-tst-text { font-size: 15.5px; line-height: 1.6; color: #2C3A33; margin: 0 0 18px; flex: 1; } .g-tst-foot { display: flex; align-items: center; gap: 13px; padding-top: 16px; border-top: 1px solid #E7ECE9; } .g-tst-av { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: #EAF9E8; color: #1E7416; font-family: var(--g-font-heading); font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; } .g-tst-meta { flex: 1; min-width: 0; } .g-tst-meta .nm { font-size: 14px; font-weight: 700; color: #0B120E; margin: 0; } .g-tst-meta .rl { font-size: 12.5px; color: #586860; margin: 0; } .g-tst-li { flex: 0 0 auto; color: #1E7416; display: inline-flex; transition: color .2s ease; } .g-tst-li:hover { color: var(--g-brand); } .g-tst--anim .g-tst-card { opacity: 0; } .g-tst--anim.is-in .g-tst-card { opacity: 1; transition: opacity .5s ease; } .g-tst--anim.is-in .g-tst-card:nth-child(1) { transition-delay: .05s; } .g-tst--anim.is-in .g-tst-card:nth-child(2) { transition-delay: .2s; } .g-tst--anim.is-in .g-tst-card:nth-child(3) { transition-delay: .35s; } @media (max-width: 900px) { .g-tst-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } } @media (max-width: 600px) { .g-tst-head h2 { font-size: 26px; } } /* Client testimonials — large rotating featured quote */ /* Client Voice — rotating testimonial: media-left when a client logo/image is available, full-width otherwise. Grid-stack track auto-sizes to the tallest slide (no absolute overlap, no JS height, so nav dots never collide). */ .g-tw-head { text-align: center; max-width: 1000px; margin: 0 auto; } .g-tw-head h2 { font-size: 34px; line-height: 1.2; margin: 0 0 12px; color: #0B120E; text-wrap: balance; } .g-tw-sub { font-size: 17px; line-height: 1.6; color: #3A4A40; margin: 0 auto; max-width: 980px; text-wrap: pretty; } .g-tw-stage { display: flex; align-items: center; gap: 20px; max-width: 1080px; margin: 18px auto 0; } .g-tw-arrow { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #E7ECE9; background: #fff; color: #1E7416; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; } .g-tw-arrow:hover { border-color: var(--g-brand); background: #EAF9E8; } /* grid-stack: every slide shares one cell, so the track is as tall as the tallest slide and inactive slides never overflow onto the dots */ .g-tw-track { flex: 1 1 auto; min-width: 0; display: grid; } .g-tw-item { grid-area: 1 / 1; margin: 0; border: 0; padding: 0; background: none; opacity: 0; visibility: hidden; transition: opacity .5s ease; pointer-events: none; text-align: left; } .g-tw-item.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .g-tw-body { display: flex; flex-direction: column; } .g-tw-mark { display: block; font-family: var(--g-font-heading); font-size: 56px; line-height: 1; color: var(--g-brand); margin: 0 0 -6px; } .g-tw-q { font-size: 16px; line-height: 1.65; font-weight: 400; color: #1A2520; margin: 0 0 20px; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; } .g-tw-by { display: flex; flex-direction: column; gap: 1px; } .g-tw-by .nm { font-family: var(--g-font-heading); font-weight: 700; font-size: 16px; color: #0B120E; } .g-tw-by .rl { font-size: 13.5px; color: #586860; } .g-tw-rate { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .g-tw-rate .g-tw-stars { color: var(--g-brand); letter-spacing: 2px; font-size: 15px; line-height: 1; } .g-tw-rate .g-tw-raten { font-size: 12.5px; font-weight: 700; color: #586860; } /* two-column when the slide carries a client logo / image */ .g-tw-item.has-media { display: grid; grid-template-columns: 230px 1fr; gap: 46px; align-items: start; } .g-tw-media { display: flex; align-items: center; justify-content: center; padding: 26px; background: #F7FBF8; border: 1px solid #E7ECE9; border-radius: 18px; min-height: 160px; } .g-tw-media.is-dark { background: #0B120E; border-color: #1A241E; } .g-tw-media img { max-width: 100%; max-height: 118px; width: auto; height: auto; display: block; } .g-tw-dots { display: flex; justify-content: center; gap: 9px; margin-top: 16px; } .g-tw-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: #D4DDD7; cursor: pointer; padding: 0; transition: background-color .2s ease, width .2s ease; } .g-tw-dot.is-active { background: var(--g-brand); width: 24px; border-radius: 5px; } @media (max-width: 820px) { .g-tw-item.has-media { grid-template-columns: 1fr; gap: 22px; } .g-tw-media { max-width: 220px; margin: 0 auto; } } @media (max-width: 700px) { .g-tw-q { font-size: 15.5px; text-align: left; hyphens: manual; } .g-tw-stage { gap: 10px; } .g-tw-arrow { width: 40px; height: 40px; } .g-tw-head h2 { font-size: 26px; } } /* FAQ — 2-column accordion */ .g-faq-head { text-align: center; max-width: 1000px; margin: 0 auto; } .g-faq-head h2 { font-size: 34px; line-height: 1.2; margin: 0 0 12px; color: #0B120E; text-wrap: balance; } .g-faq-sub { font-size: 17px; line-height: 1.6; color: #3A4A40; margin: 0 auto; max-width: 980px; text-wrap: pretty; } .g-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; margin: 36px auto 0; max-width: 980px; align-items: start; } .g-faq-col { display: flex; flex-direction: column; gap: 14px; } .g-faq-item { background: #fff; border: 1px solid #E7ECE9; border-radius: 12px; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } .g-faq-item.is-open { border-color: var(--g-brand); background: #F7FBF8; box-shadow: 0 10px 26px rgba(75,205,62,.10); } .g-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left; background: none; border: 0; cursor: pointer; padding: 17px 20px; font-family: var(--g-font-heading); font-weight: 600; font-size: 15.5px; color: #0B120E; } .g-faq-ic { position: relative; width: 18px; height: 18px; flex: 0 0 auto; } .g-faq-ic::before, .g-faq-ic::after { content: ""; position: absolute; background: #1E7416; border-radius: 2px; transition: transform .25s ease, opacity .25s ease; } .g-faq-ic::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); } .g-faq-ic::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); } .g-faq-item.is-open .g-faq-ic::after { transform: translateX(-50%) rotate(90deg); opacity: 0; } .g-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .g-faq-a p { margin: 0; padding: 0 20px 18px; font-size: 14px; line-height: 1.6; color: #586860; } @media (max-width: 760px) { .g-faq-grid { grid-template-columns: 1fr; max-width: 560px; gap: 14px; } .g-faq-head h2 { font-size: 26px; } } /* Final CTA (green section) */ .g-cta { text-align: center; max-width: 760px; margin: 0 auto; } .g-cta-label { color: #0B3D08 !important; } .g-cta-title { font-size: 38px; line-height: 1.15; margin: 0 0 14px; color: #0B120E; text-wrap: balance; } .g-cta-sub { font-size: 18px; line-height: 1.6; color: #0B3D08; margin: 0 auto 28px; max-width: 660px; text-wrap: pretty; } .g-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .g-btn-dark { display: inline-flex; align-items: center; gap: 9px; padding: 14px 28px; border-radius: 10px; background: #0B120E; color: #fff !important; font-family: var(--g-font-heading); font-weight: 700; font-size: 15px; text-decoration: none; transition: background-color .2s ease, box-shadow .2s ease; } .g-btn-dark:hover { background: #1A2A20; box-shadow: 0 10px 24px rgba(11,18,14,.25); color: #fff !important; } .g-btn-ghost-dark { display: inline-flex; align-items: center; gap: 9px; padding: 14px 28px; border-radius: 10px; background: transparent; color: #0B120E !important; border: 2px solid rgba(11,18,14,.45); font-family: var(--g-font-heading); font-weight: 700; font-size: 15px; text-decoration: none; transition: border-color .2s ease, background-color .2s ease; } .g-btn-ghost-dark:hover { border-color: #0B120E; background: rgba(11,18,14,.06); color: #0B120E !important; } .g-btn-dark svg, .g-btn-ghost-dark svg { width: 18px; height: 18px; flex: 0 0 auto; } @media (max-width: 600px) { .g-cta-title { font-size: 27px; } .g-btn-dark, .g-btn-ghost-dark { width: 100%; justify-content: center; } } @media (max-width: 600px) { .g-tt-groups { grid-template-columns: 1fr; } } @media (max-width: 760px) { .g-techtab { flex-direction: column; } .g-techtab-nav { flex: none; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid #E7ECE9; padding: 0; } .g-techtab-nav label { border-left: none; white-space: nowrap; padding: 13px 16px; font-size: 14px; } .g-techtab-panels { padding: 24px 20px; } .g-tech-head h2 { font-size: 26px; } } @media (max-width: 980px) { .g-proof-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } } @media (max-width: 600px) { .g-proof-head h2 { font-size: 26px; } } /* Hero rotating word + custom icon CTAs */ .g-rot { display: inline-block; transition: opacity .42s ease, transform .42s ease; will-change: opacity, transform; } .g-hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; } .g-hero-cta { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border-radius: 10px; font-family: var(--g-font-heading); font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; transition: background-color .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease; } .g-hero-cta svg { width: 18px; height: 18px; flex: 0 0 auto; } .g-hero-cta--primary { background: var(--g-brand); color: #0B120E !important; } .g-hero-cta--primary:hover { background: var(--g-brand-hover); box-shadow: 0 10px 24px rgba(75,205,62,.32); } .g-hero-cta--ghost { background: #fff; color: #0B120E !important; border: 2px solid var(--g-border); } .g-hero-cta--ghost:hover { border-color: var(--g-brand); color: var(--g-brand) !important; } @media (max-width: 600px) { .g-hero-cta { width: 100%; justify-content: center; } } /* Hero trust badge */ .g-hero-badge { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; padding: 10px 18px; background: rgba(75,205,62,.08); border: 1px solid rgba(75,205,62,.22); border-radius: 999px; } .g-hero-badge > span:not(.g-hero-badge-dot) { font-family: var(--g-font-heading); font-weight: 700; font-size: 13.5px; letter-spacing: .01em; color: #1E7416; } .g-hero-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--g-brand); display: inline-block; } /* Hero technology ecosystem hub */ .g-eco { position: relative; width: 100%; max-width: 470px; margin: 0 auto; aspect-ratio: 1 / 1; } .g-eco-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; } .g-eco-lines line { stroke: rgba(75,205,62,.5); stroke-width: .4; stroke-dasharray: 1.6 1.8; } .g-eco-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 118px; height: 118px; border-radius: 50%; background: linear-gradient(135deg, #4BCD3E, #34B528); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--g-font-heading); font-weight: 800; font-size: 17px; letter-spacing: .5px; box-shadow: 0 16px 36px rgba(75,205,62,.4); z-index: 2; } .g-eco-node { position: absolute; transform: translate(-50%,-50%); width: 112px; padding: 11px 9px; background: #fff; border: 1px solid #E7ECE9; border-radius: 13px; box-shadow: 0 10px 24px rgba(11,18,14,.08); display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; font-family: var(--g-font-heading); font-size: 12.5px; font-weight: 600; line-height: 1.25; color: #0B120E; z-index: 3; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .g-eco-node svg { flex: 0 0 auto; } .g-eco-node:hover { transform: translate(-50%,-50%) scale(1.08); box-shadow: 0 16px 32px rgba(75,205,62,.24); border-color: var(--g-brand); } .g-eco .n1 { top: 10%; left: 50%; } .g-eco .n2 { top: 24%; left: 78%; } .g-eco .n3 { top: 50%; left: 87%; } .g-eco .n4 { top: 76%; left: 78%; } .g-eco .n5 { top: 90%; left: 50%; } .g-eco .n6 { top: 76%; left: 22%; } .g-eco .n7 { top: 50%; left: 13%; } .g-eco .n8 { top: 24%; left: 22%; } @media (max-width: 980px) { .g-eco { max-width: 410px; margin-top: 24px; } } @media (max-width: 600px) { .g-eco { max-width: 340px; } .g-eco-node { width: 90px; font-size: 11px; padding: 8px 6px; } .g-eco-core { width: 96px; height: 96px; font-size: 14px; } } /* By the numbers — animated counters */ .g-stats-sec { border-top: 1px solid rgba(75,205,62,.16); } .g-stats-sec .g-stats { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 30px 56px; margin-top: 30px; } .g-stat { text-align: center; min-width: 150px; } .g-stat-num { display: flex; align-items: baseline; justify-content: center; min-height: 56px; } .g-stat-num span { font-family: var(--g-font-heading); font-weight: 800; color: var(--g-brand); line-height: 1; font-size: 54px; } .g-stat p { color: #CDD5D0; font-size: 16px; margin: 10px 0 0; font-weight: 500; } @media (max-width: 600px) { .g-stat-num span { font-size: 40px; } .g-stat-num { min-height: 42px; } .g-stats-sec .g-stats { gap: 26px 36px; } .g-stat { min-width: 120px; } } /* Leadership & Delivery Excellence — compact trust card */ .g-leader { display: flex; gap: 28px; align-items: center; max-width: 900px; margin: 0 auto; background: #0B120E; border-radius: 18px; padding: 34px 38px; } .g-leader-avatar { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 16px; background: #16241D; border: 1px solid #25332B; color: #4BCD3E; font-family: var(--g-font-heading); font-weight: 800; font-size: 34px; display: flex; align-items: center; justify-content: center; } .g-leader-body { flex: 1; } .g-leader-body h3 { color: #fff; font-size: 24px; margin: 0 0 2px; } .g-leader-role { color: #4BCD3E; font-weight: 700; font-size: 15px; margin: 0 0 6px; } .g-leader-creds { color: #9FB0A6; font-size: 13.5px; font-weight: 600; letter-spacing: .02em; margin: 0 0 12px; } .g-leader-bio { color: #E9F3EC; font-size: 15px; line-height: 1.6; margin: 0 0 16px; } .g-leader-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .g-leader-pills span { background: #16241D; color: #4BCD3E; font-weight: 700; border-radius: 999px; padding: 6px 13px; font-size: 12.5px; } .g-leader-cta { color: #4BCD3E; font-weight: 700; font-size: 14.5px; } .g-leader-cta:hover { color: #fff; } @media (max-width: 680px) { .g-leader { flex-direction: column; text-align: center; padding: 28px 22px; } .g-leader-pills { justify-content: center; } } /* Contact Form 7 — application/contact form fields styled to match the site */ .wpcf7-form p { margin: 0 0 16px; } .wpcf7-form label { display: block; font-weight: 600; color: #0B120E; font-size: 14px; line-height: 1.5; } .wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-file) { width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid var(--g-border); border-radius: 8px; font-family: var(--g-font-body); font-size: 15px; background: #fff; color: var(--g-text); } .wpcf7-form textarea.wpcf7-form-control { min-height: 120px; } .wpcf7-form .wpcf7-file { display: block; margin-top: 8px; font-size: 14px; } .wpcf7-form input:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--g-brand); box-shadow: 0 0 0 3px rgba(75,205,62,.15); } .wpcf7-form .wpcf7-submit { width: auto; background: var(--g-brand); color: #0B120E; border: 0; border-radius: 10px; padding: 14px 30px; font-family: var(--g-font-heading); font-weight: 700; font-size: 16px; cursor: pointer; transition: background-color .2s ease, box-shadow .2s ease; } .wpcf7-form .wpcf7-submit:hover { background: var(--g-brand-hover); box-shadow: 0 8px 20px rgba(75,205,62,.3); } .wpcf7-spinner { margin-left: 10px; } /* Service cards */ .g-card { transition: box-shadow .25s ease; } .g-card:hover { box-shadow: var(--g-shadow-lg); } .g-card h3 a { transition: color .2s ease; } .g-card h3 a:hover { color: var(--g-brand) !important; } /* Primary button placed on a green section -> ink bg + white text */ .g-btn-on-green.et_pb_button, .g-btn-on-green a.et_pb_button { background-color: var(--g-ink-950); color: #fff !important; } .g-btn-on-green.et_pb_button:hover { background-color: var(--g-ink-800) !important; color: #fff !important; } /* ========================================================= Site footer (child-theme footer.php override) ========================================================= */ #main-footer.g-footer { background: var(--g-ink-950); padding: 66px 0 0; } .g-footer-grid { display: grid; grid-template-columns: 1.5fr 1.35fr 0.82fr 1.18fr; gap: 30px; } .g-ft-office a { color: var(--g-ink-200); } .g-ft-addr { color: var(--g-ink-300); font-size: 14px; line-height: 1.6; margin: 0 0 12px; max-width: 230px; } .g-ft-mini { color: var(--g-ink-400); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 12px 0 2px; } .g-ft-office .g-ft-phone { color: #fff; font-weight: 700; font-size: 16px; } .g-ft-office .g-ft-phone:hover { color: var(--g-brand); } .g-ft-cta { display: inline-flex !important; align-items: center; gap: 8px; white-space: nowrap; background: var(--g-brand); color: #0B120E !important; font-weight: 700; font-size: 13.5px; padding: 11px 16px; border-radius: 9px; line-height: 1; margin-top: 2px; transition: background .2s, transform .12s, box-shadow .2s; } .g-ft-cta svg { flex: 0 0 17px; } .g-ft-cta svg { width: 17px; height: 17px; } .g-ft-cta:hover { background: #3bb52f; color: #0B120E !important; transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(75,205,62,.6); } .g-footer-contact { margin: 2px 0 4px; } .g-footer-contact a { color: var(--g-ink-200); font-size: 14px; } .g-footer-contact a:hover { color: var(--g-brand); } .g-footer-cred { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #9FE89A; background: rgba(75,205,62,.12); border: 1px solid rgba(75,205,62,.28); border-radius: 999px; padding: 5px 13px; } .g-footer-trust { border-top: 1px solid rgba(255,255,255,.08); padding: 24px 0; } .g-ft-label { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--g-ink-400); font-weight: 700; margin: 0 0 14px; } .g-ft-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .g-ft-pill { font-size: 12.5px; font-weight: 600; color: #CDD5D0; background: rgba(75,205,62,.10); border: 1px solid rgba(75,205,62,.22); border-radius: 999px; padding: 7px 15px; } @media (max-width: 980px) { .g-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } } @media (max-width: 560px) { .g-footer-grid { grid-template-columns: 1fr; gap: 26px; } } /* Process flow diagram */ .g-flow { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 6px; } .g-flow-step { display: flex; flex-direction: column; align-items: center; text-align: center; width: 130px; } .g-flow-num { width: 54px; height: 54px; border-radius: 50%; background: var(--g-brand); color: #0B120E; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(75,205,62,.28); } .g-flow-label { margin-top: 10px; font-weight: 700; color: #0B120E; font-size: 15px; } .g-flow-desc { color: #586860; font-size: 12.5px; margin-top: 2px; line-height: 1.35; } .g-flow-arrow { color: var(--g-brand); font-size: 22px; font-weight: 700; align-self: flex-start; margin-top: 14px; } @media (max-width: 900px) { .g-flow-arrow { display: none; } .g-flow-step { width: 30%; margin-bottom: 18px; } } @media (max-width: 560px) { .g-flow-step { width: 46%; } } .g-footer-logo { height: 40px; width: auto; margin-bottom: 16px; } .g-footer-brand p { color: var(--g-ink-300); font-size: 14px; line-height: 1.65; max-width: 320px; margin: 0; } .g-footer-col h4 { color: #fff; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 14px; } .g-footer-col a, .g-footer-col span { display: block; color: var(--g-ink-300); font-size: 15px; line-height: 1.95; text-decoration: none; } .g-footer-col a:hover { color: var(--g-brand); } .g-footer-col .g-footer-cta { color: var(--g-brand); font-weight: 600; margin-top: 8px; } #main-footer #footer-bottom { background: transparent; margin-top: 44px; border-top: 1px solid var(--g-ink-800); padding: 18px 0; } #main-footer #footer-bottom #footer-info { color: var(--g-ink-400); font-size: 13px; padding: 0; } #main-footer #footer-bottom #footer-info a { color: var(--g-ink-300); } #main-footer #footer-bottom #footer-info a:hover { color: var(--g-brand); } /* ========================================================= Header logo sizing ========================================================= */ #main-header #logo { max-height: 46px; width: auto; } @media (max-width: 980px) { #main-header #logo { max-height: 40px; } } /* Constant-height sticky header: the scrolled (fixed) state matches the normal state, slightly taller. Divi shrinks via #et-top-navigation padding-top (33->20px) + menu-link padding-bottom (33->20px); we equalise both. */ #main-header #logo, .et-fixed-header #logo { max-height: 46px !important; width: auto; } .et_header_style_left #et-top-navigation, .et_header_style_left .et-fixed-header #et-top-navigation { padding-top: 36px !important; } .et_header_style_left #et-top-navigation nav > ul > li:not(.g-nav-cta) > a, .et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li:not(.g-nav-cta) > a { padding-bottom: 36px !important; } /* Keep the Contact Us CTA a normal-size button, vertically centred in the taller header */ #top-menu li.g-nav-cta { display: inline-flex; align-items: center; } #top-menu li.g-nav-cta a { padding: 11px 20px !important; } /* Primary menu: brand-colored hover + active item */ #top-menu li a:hover { color: var(--g-brand); } #top-menu li.current-menu-item > a, #top-menu li.current_page_item > a, #top-menu li.current-menu-ancestor > a { color: var(--g-brand); } /* Remove the header search icon (not needed) */ #et_search_icon, #et_top_search { display: none !important; } /* Nav "Book a call" CTA button */ #top-menu li.g-nav-cta { margin-left: 14px; } #top-menu li.g-nav-cta a { background: var(--g-brand); color: var(--g-ink-950) !important; border-radius: 8px; padding: 9px 18px !important; font-weight: 700; transition: background-color .2s ease, box-shadow .2s ease; } #top-menu li.g-nav-cta a:hover { background: var(--g-brand-hover); color: var(--g-ink-950) !important; box-shadow: 0 8px 20px rgba(75,205,62,.30); opacity: 1; } /* Calendly inline embed */ .calendly-inline-widget { border-radius: 14px; overflow: hidden; box-shadow: var(--g-shadow); background: #fff; } /* ========================================================= Tighter vertical rhythm — reduce white space ========================================================= */ .et_pb_section { padding-top: 38px !important; padding-bottom: 42px !important; } .g-hero { padding-top: 20px !important; padding-bottom: 36px !important; } .g-trustbar { padding-top: 26px !important; padding-bottom: 26px !important; } /* Kill Divi's default 2% row padding at section edges (explicit per-row custom paddings still win — Divi emits those later in the cascade) */ .et_pb_row { padding-top: 10px; padding-bottom: 10px; } .et_pb_section > .et_pb_row:first-child { padding-top: 0; } .et_pb_section > .et_pb_row:last-child { padding-bottom: 0; } /* No dead space between the last section and the footer */ #left-area { padding-bottom: 0 !important; } #main-content .container { padding-bottom: 0 !important; } #main-content article { margin-bottom: 0 !important; padding-bottom: 0 !important; } .et_pb_section:last-child { margin-bottom: 0 !important; } #main-content .entry-content, .et-l.et-l--post, .et_builder_inner_content { margin-bottom: 0 !important; padding-bottom: 0 !important; } #main-content, #et-main-area { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* (grid-completion rules moved to end of file so they win the cascade) */ @media (max-width: 980px) { .et_pb_section { padding-top: 32px !important; padding-bottom: 34px !important; } .g-hero { padding-top: 24px !important; padding-bottom: 30px !important; } } /* ========================================================= Mega-menu: clean 4-column grid + service icons ========================================================= */ #top-menu li.mega-menu > ul.sub-menu { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 2px 34px; padding: 22px 34px !important; width: 1180px !important; max-width: calc(100vw - 40px) !important; box-sizing: border-box; } #top-menu li.mega-menu > ul.sub-menu > li { width: auto !important; float: none !important; margin: 0 !important; border: 0 !important; } #top-menu li.mega-menu > ul.sub-menu > li > a { display: flex !important; align-items: center; white-space: nowrap; padding: 9px 0 !important; line-height: 1.3; font-size: 14.5px !important; } #top-menu li.mega-menu > ul.sub-menu > li > a .gx-mi-ico { margin-top: 2px; } /* Mega-menu CTA panel (injected, spans all columns at the bottom) */ #top-menu li.mega-menu > ul.sub-menu > li.gx-mega-cta { grid-column: 1 / -1 !important; grid-row: 5 / 6 !important; width: auto !important; margin: 14px 0 0 !important; padding: 16px 0 0 !important; border-top: 1px solid #E7ECE9; } .gx-mega-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .gx-mega-cta-txt strong { display: block; color: #0B120E; font-size: 15px; } .gx-mega-cta-txt span { color: #586860; font-size: 13px; } #top-menu li.mega-menu > ul.sub-menu > li.gx-mega-cta a.gx-mega-cta-btn { background: var(--g-brand); color: #0B120E !important; font-weight: 700; font-size: 14px; padding: 11px 20px !important; border-radius: 8px; white-space: nowrap; transition: background-color .2s ease; } #top-menu li.mega-menu > ul.sub-menu > li.gx-mega-cta a.gx-mega-cta-btn:hover { background: var(--g-brand-hover); color: #0B120E !important; } .gx-mi-ico { display: inline-flex; align-items: center; flex: 0 0 auto; } .gx-mi-ico svg { width: 18px; height: 18px; margin-right: 10px; } /* (Top-level nav icons removed — only the mega-menu service icons remain.) */ /* ========================================================= Accessibility — visible keyboard focus ========================================================= */ a:focus-visible, button:focus-visible, .et_pb_button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--g-brand); outline-offset: 2px; border-radius: 2px; } /* Footer social icons + address */ .g-footer-social { display: flex; gap: 14px; margin: 18px 0 12px; } .g-footer-social a { color: #9FB0A6; display: inline-flex; transition: color .2s ease; } .g-footer-social a:hover { color: var(--g-brand); } .g-footer-addr { color: #7E8C84; font-size: 13px; margin: 0; } /* ============ FINAL CTA: split copy + inline form (green) ============ */ .g-cta-split{display:grid;grid-template-columns:1fr 1.08fr;gap:40px;align-items:center;max-width:1160px;margin:0 auto;text-align:left;} .g-cta-split .g-cta-label{color:#0B3D08 !important;} .g-cta-split .g-cta-title{font-size:29px;line-height:1.14;margin:2px 0 9px;color:#08230A;text-wrap:balance;} .g-cta-split .g-cta-sub{font-size:15px;line-height:1.55;color:#0B3D08;margin:0 0 14px;max-width:440px;} .g-cta-points{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:11px;} .g-cta-points li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:#08230A;} .g-cta-points .g-ck{width:20px;height:20px;flex:0 0 20px;color:#0B120E;background:rgba(255,255,255,.55);border-radius:50%;padding:3px;box-sizing:border-box;} .g-cta-alt{margin:0;} .g-cta-alt a{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:#08230A;text-decoration:none;border-bottom:2px solid rgba(8,35,10,.3);padding-bottom:2px;transition:border-color .2s,gap .2s;} .g-cta-alt a:hover{border-color:#08230A;gap:11px;} .g-cta-alt .g-ar{width:17px;height:17px;} .g-cta-formcard{background:#fff;border-radius:16px;padding:20px 22px 18px;box-shadow:0 24px 60px -22px rgba(0,0,0,.35);} .g-cf-title{font-size:18px;font-weight:700;color:#0B120E;margin:0 0 9px;} .g-cf .g-cf-row{margin:0 0 8px;} .g-cf-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .g-cf-label{display:block;font-size:13px;font-weight:600;color:#0B120E;margin:0 0 4px;} .g-cf-label span{color:#34a128;} .g-cf-input,.g-cf-textarea{width:100%;font:inherit;font-size:15px;color:#0B120E;background:#F6F8F6;border:1.5px solid #E2E8E2;border-radius:10px;padding:9px 12px;transition:border-color .18s,background .18s,box-shadow .18s;box-sizing:border-box;} .g-cf-input:focus,.g-cf-textarea:focus{outline:none;border-color:#4BCD3E;background:#fff;box-shadow:0 0 0 3px rgba(75,205,62,.15);} .g-cf-textarea{height:60px;min-height:60px;resize:vertical;} select.g-cf-input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23556655' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:38px;cursor:pointer;} .g-cf-submit{margin-top:12px;} .g-cf-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;font:inherit;font-size:16px;font-weight:700;color:#fff;background:#0B120E;border:0;border-radius:10px;padding:11px 22px;cursor:pointer;transition:background .2s,transform .12s,box-shadow .2s;} .g-cf-btn:hover{background:#1a2b1f;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);transform:translateY(-1px);} .g-cf-btn:active{transform:none;} .g-cta-formcard .wpcf7-spinner{margin:8px auto 0;display:block;} .g-cta-formcard .wpcf7-not-valid-tip{color:#c0271a;font-size:12.5px;margin-top:4px;} .g-cta-formcard .wpcf7-response-output{margin:14px 0 0 !important;padding:11px 14px !important;border-radius:9px;font-size:14px;border-width:1.5px;} .g-cta-formcard .cf-turnstile,.g-cta-formcard .cf7-turnstile{margin:4px 0 2px;} .wpcf7-form.invalid .wpcf7-response-output{background:#fdecea;border-color:#f5c2bc !important;color:#7a1c12;} .wpcf7-form.sent .wpcf7-response-output{background:#eaf7e8;border-color:#bfe6b8 !important;color:#1E7416;} @media(max-width:900px){.g-cta-split{grid-template-columns:1fr;gap:30px;max-width:560px;}.g-cta-split .g-cta-sub,.g-cta-points{max-width:none;}} @media(max-width:480px){.g-cta-formcard{padding:24px 20px;}.g-cf-grid2{grid-template-columns:1fr;gap:0;}.g-cf-grid2 .g-cf-row{margin-bottom:14px;}} /* CTA form submit: force dark over any global/Divi green button style */ .g-cta-formcard .g-cf-btn,.g-cta-formcard input.wpcf7-submit{background:#0B120E !important;color:#fff !important;border:0 !important;} .g-cta-formcard .g-cf-btn:hover,.g-cta-formcard input.wpcf7-submit:hover{background:#1a2b1f !important;} .g-footer-col .g-ft-cta { margin-top: 14px; } #top-menu li.mega-menu > ul.sub-menu > li.gx-mega-cta a.gx-mega-cta-btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;} #top-menu li.mega-menu > ul.sub-menu > li.gx-mega-cta a.gx-mega-cta-btn svg{width:17px;height:17px;flex:0 0 17px;} /* Divi core sets #top-menu li li a{width:200px} — that clipped the mega-menu CTA. Let the button size to its own text (padding included) on every menu link we control. */ #top-menu li.mega-menu > ul.sub-menu li a, #top-menu li.mega-menu > ul.sub-menu > li.gx-mega-cta a.gx-mega-cta-btn{ width: auto !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box; flex: 0 0 auto; } /* Force-compact the homepage CF7 form (override Divi form defaults) */ .g-cta-sec .et_pb_row, .g-cta-sec .et_pb_column { padding-top: 0 !important; padding-bottom: 0 !important; } .g-cta-formcard .g-cf-input { height: 40px !important; padding: 7px 12px !important; } .g-cta-formcard select.g-cf-input { height: 40px !important; } .g-cta-formcard .g-cf-textarea { height: 84px !important; min-height: 84px !important; } .g-cta-formcard .g-cf-row { margin: 0 0 7px !important; } .g-cta-formcard p { margin: 0 !important; } .g-cta-formcard .g-cf-label { margin: 0 0 3px !important; } .g-cta-formcard .g-cf-title { margin: 0 0 8px !important; } .g-cta-formcard .g-cf-submit { margin-top: 8px !important; } .g-cta-formcard .g-cf-btn { padding: 10px 22px !important; } .g-cta-formcard .wpcf7-form-control { margin-bottom: 0 !important; } /* ===================== WHO WE ARE PAGE ===================== */ .g-ab-head{max-width:1080px;margin:0 auto 22px;text-align:center;} .g-ab-head h2{font-size:30px;line-height:1.18;margin:8px 0 0;color:#0B120E;text-wrap:balance;} .g-ab-hero{max-width:1040px;margin:0 auto;text-align:center;} /* contact page: left-aligned, wider hero to match the other pages (scoped) */ body.page-id-9 .g-ab-hero{text-align:left;max-width:1120px;} body.page-id-9 .g-ab-hero h1{font-size:44px;} body.page-id-9 .g-ab-hero p{max-width:none;margin:0;} .g-ab-hero h1{font-size:44px;line-height:1.12;margin:12px 0 16px;color:#0B120E;font-weight:800;text-wrap:balance;} .g-ab-hero .section-label{color:#1E7416;} .g-ab-hero p{font-size:18px;line-height:1.6;color:#42504a;max-width:860px;margin:0 auto;text-wrap:pretty;} /* Our story */ .g-story-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:48px;align-items:center;max-width:1160px;margin:0 auto;} .g-story-copy h2{font-size:32px;line-height:1.18;margin:6px 0 16px;color:#0B120E;text-wrap:balance;} .g-story-copy p{font-size:16px;line-height:1.7;color:#4a5751;margin:0 0 14px;} .g-story-copy p:last-child{margin-bottom:0;} .g-story-facts{display:grid;gap:16px;background:#fff;border:1px solid #E6ECE7;border-radius:18px;padding:28px;box-shadow:0 20px 50px -30px rgba(0,0,0,.2);} .g-story-fact{display:flex;gap:13px;align-items:flex-start;} .g-story-fact .ic{width:38px;height:38px;border-radius:10px;background:rgba(75,205,62,.12);display:flex;align-items:center;justify-content:center;flex:0 0 38px;} .g-story-fact .ic svg{width:20px;height:20px;color:#1E7416;} .g-story-fact b{display:block;color:#0B120E;font-size:15px;margin-bottom:1px;} .g-story-fact span{color:#5a6862;font-size:13px;line-height:1.4;} /* Mission / Vision */ .g-mv{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1080px;margin:0 auto;} .g-mv-card{border-radius:18px;padding:34px;border:1px solid #E6ECE7;background:#fff;} .g-mv-card.dark{background:#0B120E;border-color:#0B120E;} .g-mv-card .ic{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(75,205,62,.14);margin-bottom:16px;} .g-mv-card .ic svg{width:25px;height:25px;color:#1E7416;} .g-mv-card.dark .ic svg{color:#4BCD3E;} .g-mv-card h3{font-size:21px;margin:0 0 9px;color:#0B120E;} .g-mv-card.dark h3{color:#fff;} .g-mv-card p{font-size:16.5px;line-height:1.6;color:#4a5751;margin:0;} .g-mv-card.dark p{color:#c9d3cd;} /* Why pillars */ .g-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1180px;margin:0 auto;} .g-pillar{background:#fff;border:1px solid #E6ECE7;border-radius:16px;padding:26px;transition:transform .2s,box-shadow .2s,border-color .2s;} .g-pillar:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(0,0,0,.22);border-color:rgba(75,205,62,.55);} .g-pillar .ic{width:44px;height:44px;border-radius:11px;background:rgba(75,205,62,.12);display:flex;align-items:center;justify-content:center;margin-bottom:15px;transition:background .2s;} .g-pillar:hover .ic{background:var(--g-brand);} .g-pillar .ic svg{width:23px;height:23px;color:#1E7416;transition:color .2s;} .g-pillar:hover .ic svg{color:#0B120E;} .g-pillar h3{font-size:17px;margin:0 0 7px;color:#0B120E;} .g-pillar p{font-size:14px;line-height:1.55;color:#5a6862;margin:0;} /* Leadership */ .g-lead{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:center;max-width:1000px;margin:0 auto;background:#0B120E;border-radius:22px;padding:40px;} .g-lead-photo{aspect-ratio:1/1;border-radius:18px;background:linear-gradient(135deg,#143a10,#0B120E);border:1px solid rgba(75,205,62,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#4BCD3E;} .g-lead-photo .mp{font-size:54px;font-weight:800;letter-spacing:1px;} .g-lead-photo .ph{font-size:10px;color:#7d8b84;margin-top:6px;text-transform:uppercase;letter-spacing:.12em;} .g-lead-info h3{font-size:24px;margin:0 0 3px;color:#fff;} .g-lead-info .rl{color:#4BCD3E;font-weight:600;font-size:15px;margin:0 0 14px;} .g-lead-info p{color:#c9d3cd;font-size:15.5px;line-height:1.65;margin:0 0 16px;} .g-lead-pills{display:flex;flex-wrap:wrap;gap:8px;} .g-lead-pill{font-size:12.5px;font-weight:700;color:#9FE89A;background:rgba(75,205,62,.12);border:1px solid rgba(75,205,62,.3);border-radius:999px;padding:6px 14px;} /* Journey timeline */ .g-tl{display:flex;max-width:1160px;margin:0 auto;} .g-tl-item{flex:1;text-align:center;position:relative;padding-top:54px;} .g-tl-item::before{content:"";position:absolute;top:19px;left:0;width:100%;height:3px;background:#D7E6D4;} .g-tl-item:first-child::before{left:50%;width:50%;} .g-tl-item:last-child::before{width:50%;} .g-tl-yr{position:absolute;top:6px;left:50%;transform:translateX(-50%);padding:5px 13px;border-radius:999px;background:var(--g-brand);color:#0B120E;font-weight:800;font-size:14px;box-shadow:0 4px 12px rgba(75,205,62,.35);} .g-tl-item h4{font-size:15px;margin:0 10px 5px;color:#0B120E;} .g-tl-item p{font-size:12.5px;line-height:1.45;color:#5a6862;margin:0 10px;} /* Core values */ .g-vals{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;max-width:1180px;margin:0 auto;} .g-val{text-align:center;} .g-val .ic{width:54px;height:54px;border-radius:50%;background:rgba(75,205,62,.12);display:flex;align-items:center;justify-content:center;margin:0 auto 13px;} .g-val .ic svg{width:25px;height:25px;color:#1E7416;} .g-val h4{font-size:16px;margin:0 0 5px;color:#0B120E;} .g-val p{font-size:13px;line-height:1.5;color:#5a6862;margin:0;} /* About CTA band */ .g-ab-cta{text-align:center;max-width:760px;margin:0 auto;} .g-ab-cta h2{font-size:32px;line-height:1.15;margin:0 0 12px;color:#08230A;text-wrap:balance;} .g-ab-cta p{font-size:16px;color:#0B3D08;margin:0 0 22px;} .g-ab-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} @media(max-width:900px){.g-story-grid{grid-template-columns:1fr;gap:30px;}.g-mv{grid-template-columns:1fr;}.g-pillars{grid-template-columns:1fr 1fr;}.g-lead{grid-template-columns:1fr;gap:26px;text-align:center;padding:30px;}.g-lead-photo{max-width:200px;margin:0 auto;}.g-lead-pills{justify-content:center;}.g-tl{flex-wrap:wrap;}.g-tl-item{flex:0 0 50%;padding-top:48px;margin-bottom:22px;}.g-tl-item::before{display:none;}.g-vals{grid-template-columns:1fr 1fr 1fr;}} @media(max-width:600px){.g-ab-hero h1{font-size:32px;}.g-pillars{grid-template-columns:1fr;}.g-tl-item{flex:0 0 100%;}.g-vals{grid-template-columns:1fr 1fr;}} /* CF7 turnstile wrapper */ .g-cta-formcard .g-cf-ts{margin:2px 0 10px;} /* Calendly popup: let Calendly's own widget.css size/scroll the modal; only guarantee it sits above the sticky header. */ .calendly-overlay{z-index:2147483000 !important;} /* ===== WHO WE ARE v2 (repositioning) ===== */ .g-ab-stats{display:flex;justify-content:center;flex-wrap:wrap;max-width:980px;margin:30px auto 0;border:1px solid #E6ECE7;border-radius:16px;background:#fff;box-shadow:0 18px 50px -30px rgba(0,0,0,.18);overflow:hidden;} .g-ab-stat{flex:1;min-width:170px;text-align:center;padding:20px 16px;border-right:1px solid #EEF2EF;} .g-ab-stat:last-child{border-right:0;} .g-ab-stat .n{font-size:28px;font-weight:800;color:#1E7416;line-height:1.05;} .g-ab-stat .l{display:block;margin-top:6px;font-size:12.5px;color:#52605a;font-weight:600;} @media(max-width:760px){.g-ab-stat{flex:0 0 50%;border-bottom:1px solid #EEF2EF;}.g-ab-stat:nth-child(2n){border-right:0;}} /* Why we started */ .g-start{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;max-width:1140px;margin:0 auto;} .g-start h2{font-size:30px;line-height:1.18;margin:6px 0 14px;color:#0B120E;text-wrap:balance;} .g-start p{font-size:16px;line-height:1.7;color:#4a5751;margin:0;} .g-start-probs{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .g-start-prob{display:flex;gap:11px;align-items:center;background:#fff;border:1px solid #E6ECE7;border-radius:12px;padding:15px;} .g-start-prob svg{width:19px;height:19px;color:#c0392b;flex:0 0 19px;} .g-start-prob span{font-size:14px;font-weight:600;color:#33403a;} /* Dual leadership */ .g-leads{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1080px;margin:0 auto;} .g-leadc{background:#0B120E;border-radius:20px;padding:30px;} .g-leadc-top{display:flex;gap:18px;align-items:center;margin-bottom:18px;} .g-leadc-photo{width:80px;height:80px;flex:0 0 80px;border-radius:16px;background:linear-gradient(135deg,#143a10,#0B120E);border:1px solid rgba(75,205,62,.3);display:flex;align-items:center;justify-content:center;color:#4BCD3E;font-weight:800;font-size:24px;} .g-leadc h3{font-size:20px;margin:0 0 2px;color:#fff;} .g-leadc .rl{color:#4BCD3E;font-weight:600;font-size:14px;margin:0;} .g-leadc ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;} .g-leadc li{display:flex;gap:9px;align-items:flex-start;color:#c9d3cd;font-size:14px;line-height:1.4;} .g-leadc li svg{width:16px;height:16px;color:#4BCD3E;flex:0 0 16px;margin-top:2px;} /* Strengths matrix */ .g-matrix{max-width:720px;margin:32px auto 0;border:1px solid #E6ECE7;border-radius:16px;overflow:hidden;background:#fff;} .g-matrix table{width:100%;border-collapse:collapse;} .g-matrix th,.g-matrix td{padding:13px 18px;text-align:left;font-size:14.5px;border-bottom:1px solid #EEF2EF;} .g-matrix thead th{background:#F5F8F6;color:#0B120E;font-weight:700;} .g-matrix th.c,.g-matrix td.c{text-align:center;width:110px;} .g-matrix tbody tr:last-child td{border-bottom:0;} .g-matrix td.area{color:#33403a;font-weight:600;} .g-matrix .yes{color:#1E7416;font-weight:800;font-size:16px;} /* Philosophy band */ .g-phil{max-width:1080px;margin:0 auto;text-align:center;} .g-phil h2{font-size:30px;line-height:1.2;margin:8px 0 16px;color:#fff;text-wrap:balance;} .g-phil p{font-size:17px;line-height:1.65;color:#c9d3cd;max-width:1000px;margin:0 auto;} /* Credentials */ .g-creds{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:900px;margin:0 auto;} .g-cred{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #E6ECE7;border-radius:999px;padding:11px 20px;font-weight:700;font-size:14px;color:#0B120E;} .g-cred svg{width:18px;height:18px;color:#1E7416;flex:0 0 18px;} /* 6-pillar grid */ .g-pillars{grid-template-columns:repeat(3,1fr);} @media(max-width:900px){.g-start{grid-template-columns:1fr;gap:26px;}.g-leads{grid-template-columns:1fr;}.g-pillars{grid-template-columns:1fr 1fr;}} @media(max-width:600px){.g-start-probs{grid-template-columns:1fr;}.g-pillars{grid-template-columns:1fr;}.g-matrix th,.g-matrix td{padding:11px 12px;font-size:13px;}} /* ===== Footer v3 (contact in brand col + right-side CTA/social) ===== */ .g-ft-loc{display:flex;align-items:center;gap:9px;margin:18px 0 8px;color:#fff;font-weight:700;font-size:14px;letter-spacing:.05em;} .g-ft-flag{width:23px;height:15px;border-radius:2px;flex:0 0 23px;box-shadow:0 0 0 1px rgba(255,255,255,.15);} .g-footer-brand .g-ft-addr{color:var(--g-ink-300);font-size:13.5px;line-height:1.6;margin:0 0 14px;max-width:240px;} .g-footer-brand .g-ft-mini{color:var(--g-brand);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px;} .g-ft-contact{display:flex;align-items:center;gap:9px;color:var(--g-ink-200);font-size:14px;margin:0 0 8px;text-decoration:none;} .g-ft-contact svg{width:16px;height:16px;flex:0 0 16px;color:var(--g-brand);} .g-ft-contact:hover{color:var(--g-brand);} .g-footer-right{display:flex;flex-direction:column;align-items:flex-start;gap:9px;} .g-footer-right .g-ft-cta{margin-top:2px;} .g-ft-follow{color:#fff;font-size:14px;font-weight:600;line-height:1.45;margin:0 0 12px;} .g-footer-right .g-footer-social{margin:0;} @media (max-width: 980px){ .g-footer-right{align-items:flex-start;} } /* ===== WHO WE ARE v3: light leadership + photos + light philosophy ===== */ .g-ab-hero-cta{margin:22px 0 4px;} .g-leadc{background:#fff !important;border:1px solid #E6ECE7 !important;box-shadow:0 18px 44px -28px rgba(0,0,0,.18);} .g-leadc h3{color:#0B120E;} .g-leadc .rl{color:#1E7416;} .g-leadc-photo{width:88px;height:88px;flex:0 0 88px;border-radius:50%;object-fit:cover;border:2px solid #E6ECE7;background:#F5F8F6;} .g-leadc .bio{color:#4a5751;font-size:14px;line-height:1.62;margin:0 0 14px;} .g-leadc .tags{display:flex;flex-wrap:wrap;gap:7px;} .g-leadc .tag{font-size:11.5px;font-weight:600;color:#1E7416;background:rgba(75,205,62,.10);border:1px solid rgba(75,205,62,.22);border-radius:999px;padding:5px 10px;} .g-phil h2{color:#0B120E !important;} .g-phil p{color:#4a5751 !important;} /* Footer v4: contact above CTA (right col) + follow-us strip below grid */ .g-footer-right .g-ft-mini{margin:0 0 4px;} .g-footer-right .g-ft-contact{margin:0;} .g-footer-right .g-ft-cta{margin-top:14px;} .g-footer-brand{grid-row:1 / 3;}.g-ft-follow-row{grid-column:2 / 4;grid-row:2;align-self:start;margin:0;padding:0;border:0;} .g-ft-follow-row .g-footer-social{margin:0;} @media (max-width: 980px){ .g-footer-brand{grid-row:auto;grid-column:auto;} .g-ft-follow-row{grid-column:1 / -1;grid-row:auto;border-top:1px solid rgba(255,255,255,.09);margin-top:6px;padding-top:20px;} } /* WWA hero split (nextgensoft-style: text left, prominent stats right) */ .g-ab-herowrap{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center;max-width:1100px;margin:0 auto;text-align:left;} .g-ab-hero-l h1{font-size:43px;line-height:1.1;margin:12px 0 16px;color:#0B120E;text-wrap:balance;} .g-ab-hero-l p.sub{font-size:17px;line-height:1.6;color:#42504a;margin:0 0 24px;max-width:520px;} .g-ab-hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .g-ab-statbox{background:#fff;border:1px solid #E6ECE7;border-radius:16px;padding:22px;box-shadow:0 16px 40px -28px rgba(0,0,0,.2);} .g-ab-statbox .n{font-size:34px;font-weight:800;color:#1E7416;line-height:1;} .g-ab-statbox .l{margin-top:8px;font-size:13px;color:#52605a;font-weight:600;line-height:1.35;} @media(max-width:900px){.g-ab-herowrap{grid-template-columns:1fr;gap:30px;text-align:center;}.g-ab-hero-l p.sub{margin-left:auto;margin-right:auto;}.g-ab-hero-stats{max-width:440px;margin:0 auto;}} @media(max-width:480px){.g-ab-hero-l h1{font-size:31px;}} .g-ab-sub{text-align:center;font-size:15.5px;line-height:1.55;color:#52605a;max-width:980px;margin:10px auto 0;} /* ===================== WHO WE ARE v4 — full redesign (page 8) ===================== */ /* Heading scale (+~10%) + a touch more breathing room */ body.page-id-8 .g-ab-head{margin-bottom:30px;} body.page-id-8 .g-ab-head h2{font-size:34px;letter-spacing:-.01em;} body.page-id-8 .g-ab-sub{font-size:16px;} /* 2 — Our story: vertical timeline + narrative */ .g-story2{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:start;max-width:1160px;margin:0 auto;} .g-tl2{position:relative;} .g-tl2-step{position:relative;padding:0 0 24px 42px;} .g-tl2-step:last-child{padding-bottom:0;} .g-tl2-step::before{content:"";position:absolute;left:12px;top:7px;bottom:-7px;width:2px;background:#D7E6D4;} .g-tl2-step:last-child::before{display:none;} .g-tl2-dot{position:absolute;left:4px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--g-brand);box-shadow:0 0 0 4px rgba(75,205,62,.12);} .g-tl2-step.is-now .g-tl2-dot{background:var(--g-brand);} .g-tl2-yr{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#1E7416;} .g-tl2-step h4{font-size:17px;margin:3px 0 3px;color:#0B120E;} .g-tl2-step p{font-size:14px;line-height:1.55;color:#5a6862;margin:0;} .g-story-nar h2{font-size:30px;line-height:1.18;margin:0 0 14px;color:#0B120E;text-wrap:balance;} .g-story-nar>p{font-size:16.5px;line-height:1.7;color:#4a5751;margin:0 0 22px;} .g-story-hl{display:grid;gap:14px;} .g-story-hl .row{display:flex;gap:13px;align-items:flex-start;} .g-story-hl .ic{width:40px;height:40px;border-radius:11px;background:rgba(75,205,62,.12);display:flex;align-items:center;justify-content:center;flex:0 0 40px;} .g-story-hl .ic svg{width:21px;height:21px;color:#1E7416;} .g-story-hl b{display:block;color:#0B120E;font-size:15px;} .g-story-hl span{color:#5a6862;font-size:13.5px;line-height:1.45;} /* 3 — Mission & Vision: flow connector + 40/60 split */ .g-mvflow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px;max-width:760px;margin:0 auto 26px;} .g-mvflow .n{font-size:12.5px;font-weight:700;color:#33403a;background:#fff;border:1px solid #E6ECE7;border-radius:999px;padding:8px 16px;} .g-mvflow .n.on{background:var(--g-brand);border-color:var(--g-brand);color:#0B120E;} .g-mvflow .ar{color:#9bbf95;margin:0 9px;font-weight:800;} .g-mv2{display:grid;grid-template-columns:2fr 3fr;gap:24px;max-width:1080px;margin:0 auto;align-items:stretch;} .g-mv2 .g-mv-card{display:flex;flex-direction:column;justify-content:center;} /* 4 — Leadership: full-width alternating rows */ .g-lead2{display:grid;gap:22px;max-width:1120px;margin:0 auto;} .g-lrow{display:grid;grid-template-columns:290px 1fr;gap:42px;align-items:center;background:#fff;border:1px solid #E6ECE7;border-radius:22px;padding:34px;box-shadow:0 22px 54px -34px rgba(0,0,0,.2);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;} .g-lrow:hover{transform:translateY(-5px);box-shadow:0 34px 66px -34px rgba(11,18,14,.34);border-color:rgba(75,205,62,.45);} .g-lrow:nth-child(even){grid-template-columns:1fr 290px;} .g-lrow:nth-child(even) .g-lmedia{order:2;} .g-lmedia{overflow:hidden;border-radius:18px;} .g-lphoto{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px;border:1px solid #E6ECE7;background:#F5F8F6;display:block;transition:transform .5s ease;} .g-lrow:hover .g-lphoto{transform:scale(1.04);} .g-lbody .rl{color:#1E7416;font-weight:700;font-size:12.5px;margin:0 0 3px;text-transform:uppercase;letter-spacing:.07em;} .g-lbody h3{font-size:24px;margin:0 0 12px;color:#0B120E;display:flex;align-items:center;gap:10px;} .g-li{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:rgba(75,205,62,.12);color:#1E7416;text-decoration:none;transition:background .2s,color .2s,transform .2s;} .g-li:hover{background:var(--g-brand);color:#0B120E;transform:translateY(-1px);} .g-li svg{width:16px;height:16px;} .g-lbody .exp{color:#4a5751;font-size:15px;line-height:1.68;margin:0 0 14px;} .g-lcred-txt{font-size:12.5px;font-style:italic;color:#8a978f;margin:0;line-height:1.5;} .g-lcred-txt b{font-style:normal;font-weight:700;color:#6b7770;} .g-lquote{border-left:3px solid var(--g-brand);padding:3px 0 3px 16px;margin:0 0 18px;color:#0B120E;font-size:16.5px;line-height:1.5;font-style:italic;} .g-lmeta{display:grid;grid-template-columns:1fr 1fr;gap:20px;} .g-lmeta .lbl{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8a978f;margin:0 0 8px;} .g-ltags{display:flex;flex-wrap:wrap;gap:7px;} .g-ltag{font-size:12px;font-weight:600;color:#1E7416;background:rgba(75,205,62,.10);border:1px solid rgba(75,205,62,.22);border-radius:999px;padding:5px 11px;} .g-lcreds{display:flex;flex-wrap:wrap;gap:7px;} .g-lcred{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#0B120E;background:#F5F8F6;border:1px solid #E6ECE7;border-radius:8px;padding:6px 11px;} .g-lcred svg{width:14px;height:14px;color:#1E7416;flex:0 0 14px;} /* 5 — How we work: horizontal process flow */ .g-how{display:grid;grid-template-columns:repeat(5,1fr);gap:0;max-width:1180px;margin:0 auto;} .g-how-step{position:relative;text-align:center;padding:0 14px;} .g-how-step:not(:last-child)::before{content:"";position:absolute;top:29px;left:calc(50% + 36px);right:calc(-50% + 36px);height:2px;background:#D7E6D4;z-index:0;} .g-how-step:not(:last-child)::after{content:"";position:absolute;top:25px;right:calc(-50% + 30px);width:8px;height:8px;border-top:2px solid #9bbf95;border-right:2px solid #9bbf95;transform:rotate(45deg);z-index:1;} .g-how-ic{width:58px;height:58px;border-radius:16px;background:#fff;border:1px solid #E6ECE7;box-shadow:0 12px 30px -18px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;position:relative;z-index:2;} .g-how-ic svg{width:26px;height:26px;color:#1E7416;} .g-how-num{font-size:12px;font-weight:800;color:#4BCD3E;letter-spacing:.12em;} .g-how-step h4{font-size:16px;margin:4px 0 6px;color:#0B120E;} .g-how-step p{font-size:13.5px;line-height:1.5;color:#5a6862;margin:0;} /* 6 — Why: 6 cards with a 2x feature (About page — namespaced g-abwhy* to avoid colliding with the homepage's own .g-why-* "Why clients choose us" section) */ .g-abwhy{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:20px;max-width:1180px;margin:0 auto;} .g-abwhy-card{background:#fff;border:1px solid #E6ECE7;border-radius:16px;padding:24px;transition:transform .2s,box-shadow .2s,border-color .2s;} .g-abwhy-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(0,0,0,.22);border-color:rgba(75,205,62,.55);} .g-abwhy-card .ic{width:44px;height:44px;border-radius:11px;background:rgba(75,205,62,.12);display:flex;align-items:center;justify-content:center;margin-bottom:14px;transition:background .2s;} .g-abwhy-card:hover .ic{background:var(--g-brand);} .g-abwhy-card .ic svg{width:23px;height:23px;color:#1E7416;transition:color .2s;} .g-abwhy-card:hover .ic svg{color:#0B120E;} .g-abwhy-card h3{font-size:16.5px;margin:0 0 6px;color:#0B120E;} .g-abwhy-card p{font-size:13.5px;line-height:1.55;color:#5a6862;margin:0;} .g-abwhy-card--feature{grid-column:1 / 3;grid-row:1 / 3;background:linear-gradient(135deg,#0B120E,#12261a);border-color:#0B120E;display:flex;flex-direction:column;justify-content:center;padding:38px;} .g-abwhy-card--feature,.g-abwhy-card--feature:hover{background:linear-gradient(135deg,#0B120E,#12261a);} .g-abwhy-card--feature:hover{transform:none;border-color:#0B120E;box-shadow:0 24px 60px -34px rgba(0,0,0,.4);} .g-abwhy-card--feature .ic{width:58px;height:58px;background:rgba(75,205,62,.18);} .g-abwhy-card--feature .ic svg{width:29px;height:29px;color:#4BCD3E;} .g-abwhy-card--feature:hover .ic{background:rgba(75,205,62,.28);} .g-abwhy-card--feature:hover .ic svg{color:#4BCD3E;} .g-abwhy-card--feature h3{font-size:27px;margin:0 0 12px;color:#fff;line-height:1.12;} .g-abwhy-card--feature p{font-size:16px;line-height:1.6;color:#c9d3cd;text-wrap:pretty;} /* 8 — Values as a connected journey */ .g-vj{display:grid;grid-template-columns:repeat(5,1fr);gap:0;max-width:1180px;margin:0 auto;} .g-vj-step{position:relative;text-align:center;padding:0 12px;} .g-vj-step:not(:last-child)::before{content:"";position:absolute;top:32px;left:calc(50% + 38px);right:calc(-50% + 38px);height:2px;background:#cfe3ca;z-index:0;} .g-vj-ic{width:64px;height:64px;border-radius:50%;background:#fff;border:2px solid var(--g-brand);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;position:relative;z-index:2;box-shadow:0 0 0 5px rgba(75,205,62,.10);} .g-vj-ic svg{width:27px;height:27px;color:#1E7416;} .g-vj-step h4{font-size:15.5px;margin:0 0 5px;color:#0B120E;} .g-vj-step p{font-size:13px;line-height:1.5;color:#5a6862;margin:0;} @media(max-width:900px){ .g-story2{grid-template-columns:1fr;gap:34px;} .g-mv2{grid-template-columns:1fr;} .g-lrow,.g-lrow:nth-child(even){grid-template-columns:1fr;gap:24px;} .g-lrow:nth-child(even) .g-lmedia{order:0;} .g-lphoto{max-width:220px;} .g-lmeta{grid-template-columns:1fr 1fr;} .g-how{grid-template-columns:1fr 1fr 1fr;row-gap:30px;} .g-how-step:not(:last-child)::before,.g-how-step:not(:last-child)::after{display:none;} .g-abwhy{grid-template-columns:1fr 1fr;} .g-abwhy-card--feature{grid-column:1 / 3;grid-row:auto;} .g-vj{grid-template-columns:1fr 1fr 1fr;row-gap:28px;} .g-vj-step:not(:last-child)::before{display:none;} } @media(max-width:600px){ body.page-id-8 .g-ab-head h2{font-size:27px;} .g-how{grid-template-columns:1fr 1fr;} .g-abwhy{grid-template-columns:1fr;} .g-abwhy-card--feature{grid-column:1 / -1;} .g-vj{grid-template-columns:1fr 1fr;} .g-lmeta{grid-template-columns:1fr;} } /* WWA hero stat hub (homepage-eco style, stats orbiting a core) */ .g-stathub{position:relative;width:100%;max-width:460px;margin:0 auto;aspect-ratio:1/1;} .g-stathub-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;} .g-stathub-lines line{stroke:rgba(75,205,62,.45);stroke-width:.5;stroke-dasharray:1.6 1.8;} .g-stathub-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:116px;height:116px;border-radius:50%;background:linear-gradient(135deg,#4BCD3E,#34B528);color:#fff;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 16px 36px rgba(75,205,62,.4);font-weight:800;font-size:17px;letter-spacing:.5px;} .g-stathub-node{position:absolute;transform:translate(-50%,-50%);background:#fff;border:1px solid #E6ECE7;border-radius:14px;padding:12px 14px;box-shadow:0 14px 32px -16px rgba(0,0,0,.28);text-align:center;z-index:3;width:130px;} .g-stathub-node b{display:block;font-size:23px;font-weight:800;color:#1E7416;line-height:1;} .g-stathub-node span{display:block;margin-top:4px;font-size:11.5px;color:#52605a;font-weight:600;line-height:1.3;} .g-stathub .p1{top:8%;left:50%;}.g-stathub .p2{top:50%;left:82%;}.g-stathub .p3{top:92%;left:50%;}.g-stathub .p4{top:50%;left:18%;} @media(max-width:980px){.g-stathub{max-width:420px;margin-top:26px;}} @media(max-width:600px){.g-stathub{max-width:320px;}.g-stathub-node{width:104px;padding:9px 10px;}.g-stathub-node b{font-size:19px;}.g-stathub-core{width:94px;height:94px;font-size:14px;}} /* ================= SERVICE PAGE COMPONENTS ================= */ /* Challenges */ .g-chal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1160px;margin:0 auto;} .g-chal-item{display:flex;gap:13px;align-items:center;background:#fff;border:1px solid #E6ECE7;border-radius:14px;padding:18px 20px;} .g-chal-item svg{width:22px;height:22px;color:#c0392b;flex:0 0 22px;} .g-chal-item span{font-size:15px;font-weight:600;color:#33403a;line-height:1.4;} /* Tech groups */ .g-techgrp{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1160px;margin:0 auto;} .g-techgrp-item{background:#fff;border:1px solid #E6ECE7;border-radius:14px;padding:20px 22px;} .g-techgrp-item .h{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:#1E7416;font-weight:800;margin:0 0 7px;} .g-techgrp-item p{font-size:15px;color:#33403a;margin:0;font-weight:600;line-height:1.5;} /* Industries chips */ .g-indchips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:1040px;margin:0 auto;} .g-indchip{background:#fff;border:1px solid #E6ECE7;border-radius:999px;padding:11px 22px;font-weight:600;font-size:15px;color:#0B120E;display:flex;align-items:center;gap:9px;} .g-indchip svg{width:17px;height:17px;color:#1E7416;flex:0 0 17px;} /* Success stories */ .g-scards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1160px;margin:0 auto;} .g-scard{background:#fff;border:1px solid #E6ECE7;border-radius:16px;padding:26px;box-shadow:0 16px 40px -28px rgba(0,0,0,.18);} .g-scard .tag{font-size:12px;font-weight:700;color:#1E7416;text-transform:uppercase;letter-spacing:.05em;} .g-scard h3{font-size:18px;margin:9px 0 12px;color:#0B120E;line-height:1.3;} .g-scard .metric{display:flex;align-items:center;gap:9px;font-size:14.5px;color:#4a5751;font-weight:600;} .g-scard .metric svg{width:18px;height:18px;color:#1E7416;flex:0 0 18px;} @media(max-width:900px){.g-chal,.g-techgrp{grid-template-columns:1fr 1fr;}.g-scards{grid-template-columns:1fr;max-width:560px;}} @media(max-width:600px){.g-chal,.g-techgrp{grid-template-columns:1fr;}} /* ===== AI page v3: layered hero, benefits checklist, why split ===== */ .g-chal-item svg{color:#1E7416 !important;} .g-aistack{display:flex;flex-direction:column;gap:12px;max-width:380px;margin:0 auto;} .g-aistack-layer{background:#fff;border:1px solid #E6ECE7;border-left:4px solid var(--g-brand);border-radius:12px;padding:15px 18px;box-shadow:0 14px 34px -24px rgba(0,0,0,.28);} .g-aistack-layer b{display:block;font-size:15px;color:#0B120E;} .g-aistack-layer span{font-size:13px;color:#52605a;} /* AI copilot hero mockup (ai-solutions) — on-brand product visual, no stock imagery */ .g-aicopilot{max-width:404px;margin:0 auto;background:#fff;border:1px solid #E6ECE7;border-radius:16px;box-shadow:0 34px 66px -34px rgba(11,18,14,.4);overflow:hidden;animation:g-aico-float 6.5s ease-in-out infinite;} .g-aico-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(180deg,#F5F8F6,#EDF2EE);border-bottom:1px solid #E6ECE7;} .g-aico-dots{display:inline-flex;gap:5px;} .g-aico-dots i{width:9px;height:9px;border-radius:50%;background:#E6ECE7;} .g-aico-dots i:nth-child(1){background:#F5A524;} .g-aico-dots i:nth-child(3){background:var(--g-brand);} .g-aico-title{font-family:var(--g-font-heading);font-weight:700;font-size:13.5px;color:#0B120E;letter-spacing:.01em;} .g-aico-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#1E7416;text-transform:uppercase;letter-spacing:.08em;} .g-aico-live i{width:7px;height:7px;border-radius:50%;background:var(--g-brand);animation:g-aico-pulse 2s ease-out infinite;} .g-aico-body{padding:18px 16px 15px;display:flex;flex-direction:column;gap:13px;} .g-aico-msg{display:flex;gap:9px;} .g-aico-user{justify-content:flex-end;} .g-aico-bubble{max-width:84%;padding:11px 14px;font-size:13.5px;line-height:1.5;} .g-aico-user .g-aico-bubble{background:#EAF7E8;color:#233028;border-radius:14px 14px 4px 14px;} .g-aico-av{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--g-brand),#1E7416);display:flex;align-items:center;justify-content:center;} .g-aico-av svg{width:16px;height:16px;fill:#fff;} .g-aico-ans{background:#fff;border:1px solid #E6ECE7;border-radius:14px 14px 14px 4px;box-shadow:0 12px 26px -20px rgba(0,0,0,.35);} .g-aico-ans p{margin:0;color:#233028;} .g-aico-ans b{color:#1E7416;font-weight:800;} .g-aico-src{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:1px dashed #E6ECE7;} .g-aico-src span{font-size:11px;font-weight:600;color:#586860;background:#F5F8F6;border:1px solid #E6ECE7;border-radius:6px;padding:3px 8px;} .g-aico-src span:first-child{color:#1E7416;background:#EAF7E8;border-color:#CBEBC5;} .g-aico-typing{display:inline-flex;gap:5px;align-items:center;padding:11px 14px;background:#fff;border:1px solid #E6ECE7;border-radius:14px;width:fit-content;} .g-aico-typing i{width:7px;height:7px;border-radius:50%;background:#B7C2B8;animation:g-aico-bounce 1.3s infinite ease-in-out;} .g-aico-typing i:nth-child(2){animation-delay:.18s;} .g-aico-typing i:nth-child(3){animation-delay:.36s;} .g-aico-foot{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;background:#F5F8F6;border-top:1px solid #E6ECE7;} .g-aico-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#0B120E;background:#fff;border:1px solid #E6ECE7;border-radius:999px;padding:5px 12px;} @keyframes g-aico-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}} @keyframes g-aico-pulse{0%{box-shadow:0 0 0 0 rgba(75,205,62,.55);}70%{box-shadow:0 0 0 7px rgba(75,205,62,0);}100%{box-shadow:0 0 0 0 rgba(75,205,62,0);}} @keyframes g-aico-bounce{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-5px);opacity:1;}} @media(prefers-reduced-motion:reduce){.g-aicopilot{animation:none;}.g-aico-live i,.g-aico-typing i{animation:none;}} @media(max-width:900px){.g-aicopilot{max-width:404px;margin-top:26px;}} .g-check2{display:grid;grid-template-columns:1fr 1fr;gap:16px 44px;max-width:1080px;margin:0 auto;} .g-check2-item{display:flex;gap:13px;align-items:flex-start;} .g-check2-item svg{width:26px;height:26px;color:#1E7416;flex:0 0 26px;background:rgba(75,205,62,.12);border-radius:50%;padding:5px;box-sizing:border-box;margin-top:1px;} .g-check2-item b{display:block;font-size:16px;color:#0B120E;} .g-check2-item span{font-size:14px;color:#52605a;line-height:1.5;} .g-whysplit{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start;max-width:1160px;margin:0 auto;} .g-whysplit-l h2{font-size:29px;line-height:1.2;margin:6px 0 14px;color:#0B120E;text-wrap:balance;} .g-whysplit-l p{font-size:16px;line-height:1.65;color:#4a5751;margin:0;} .g-whysplit-r{display:grid;gap:18px;} .g-whyrow{display:flex;gap:14px;align-items:flex-start;} .g-whyrow .ic{width:42px;height:42px;flex:0 0 42px;border-radius:11px;background:rgba(75,205,62,.12);display:flex;align-items:center;justify-content:center;} .g-whyrow .ic svg{width:22px;height:22px;color:#1E7416;} .g-whyrow b{display:block;font-size:16px;color:#0B120E;margin-bottom:2px;} .g-whyrow span{font-size:14px;color:#52605a;line-height:1.5;} @media(max-width:900px){.g-check2{grid-template-columns:1fr;}.g-whysplit{grid-template-columns:1fr;gap:28px;}.g-aistack{max-width:340px;margin-top:24px;}} /* homepage hero — Capabilities->Outcomes ecosystem hub (interactive, see home-hero.js) */ .g-hhero-root{position:relative;width:100%;max-width:480px;margin:0 auto;box-sizing:border-box;background:transparent;border:none;box-shadow:none;} .g-hhero{display:block;width:100%;height:440px;} @media(max-width:900px){.g-hhero-root{margin-top:24px;}.g-hhero{height:412px;}} /* About hero — vertical Business Growth Journey canvas (see about-growth.js) */ .g-grow-root{position:relative;width:100%;max-width:440px;margin:0 auto;box-sizing:border-box;background:transparent;border:none;box-shadow:none;} .g-grow{display:block;width:100%;height:440px;} @media(max-width:900px){.g-grow-root{margin-top:24px;max-width:400px;}.g-grow{height:420px;}} /* service hero — animated "stack" canvas panel (data-driven, see svc-hero-stack.js) */ .g-svcstack-root{position:relative;width:100%;max-width:420px;margin:0 auto;box-sizing:border-box;border:1px solid #E6ECE7;border-radius:16px;background:#fff;box-shadow:0 24px 48px -28px rgba(11,18,14,.22),0 2px 8px -3px rgba(11,18,14,.06);overflow:hidden;} .g-svcstack{display:block;width:100%;height:430px;} @media(max-width:900px){.g-svcstack-root{margin-top:24px;}.g-svcstack{height:400px;}} /* Tech stack: icon + pill cards (no comma lists) */ .g-techstack{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1160px;margin:0 auto;} .g-techcard{background:#fff;border:1px solid #E6ECE7;border-radius:16px;padding:20px 22px;} .g-techcard-h{display:flex;align-items:center;gap:11px;font-size:14.5px;font-weight:800;color:#0B120E;margin:0 0 14px;} .g-techcard-h .ic{width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:rgba(75,205,62,.12);display:flex;align-items:center;justify-content:center;} .g-techcard-h .ic svg{width:18px;height:18px;color:#1E7416;} .g-techpills{display:flex;flex-wrap:wrap;gap:8px;} .g-techpill{font-size:13px;font-weight:600;color:#33403a;background:#F5F8F6;border:1px solid #E6ECE7;border-radius:999px;padding:6px 13px;} @media(max-width:900px){.g-techstack{grid-template-columns:1fr 1fr;}} @media(max-width:600px){.g-techstack{grid-template-columns:1fr;}} /* Insights (blog) listing */ .g-insights-sec .et_pb_blog_grid .et_pb_post{background:#fff;border:1px solid #E6ECE7;border-radius:14px;padding:24px 24px 20px;box-shadow:0 14px 36px -26px rgba(0,0,0,.2);margin-bottom:26px;} .g-insights-sec .et_pb_post .entry-title{font-size:18px;line-height:1.3;margin:0 0 8px;} .g-insights-sec .et_pb_post .entry-title a{color:#0B120E;} .g-insights-sec .et_pb_post .entry-title a:hover{color:var(--g-brand);} .g-insights-sec .et_pb_post .post-meta{font-size:12.5px;color:#7E8C84;margin-bottom:10px;} .g-insights-sec .et_pb_post .post-meta a{color:#7E8C84;} .g-insights-sec .et_pb_post .post-content,.g-insights-sec .et_pb_post .post-content p{font-size:14px;color:#52605a;line-height:1.55;} /* No sidebars site-wide (insights listing + single posts) */ body.et_right_sidebar #sidebar, body.et_left_sidebar #sidebar { display: none !important; } body.et_right_sidebar #left-area, body.et_left_sidebar #left-area { width: 100% !important; padding-right: 0 !important; padding-left: 0 !important; } /* ===================== CONTACT PAGE ===================== */ .g-contact-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:46px;align-items:start;max-width:1140px;margin:0 auto;} .g-cinfo h2{font-size:25px;line-height:1.2;margin:0 0 9px;color:#0B120E;text-wrap:balance;} .g-cinfo-lead{font-size:15.5px;line-height:1.6;color:#4a5751;margin:0 0 26px;max-width:430px;} .g-cinfo-rows{display:grid;gap:16px;} .g-cinfo-row{display:flex;gap:14px;align-items:flex-start;} .g-cinfo-row .ic{width:46px;height:46px;flex:0 0 46px;border-radius:12px;background:rgba(75,205,62,.12);display:flex;align-items:center;justify-content:center;} .g-cinfo-row .ic svg{width:21px;height:21px;color:#1E7416;} .g-cinfo-row .t b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:#7E8C84;font-weight:800;margin-bottom:3px;} .g-cinfo-row .t a,.g-cinfo-row .t span{font-size:15.5px;color:#0B120E;font-weight:600;line-height:1.5;text-decoration:none;} .g-cinfo-row .t a:hover{color:#1E7416;} .g-cbook{display:inline-flex;align-items:center;gap:9px;margin-top:26px;padding:13px 24px;border-radius:10px;background:var(--g-brand);color:#0B120E !important;font-family:var(--g-font-heading);font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;transition:background .2s,box-shadow .2s;} .g-cbook:hover{background:var(--g-brand-hover);box-shadow:0 10px 24px rgba(75,205,62,.3);color:#0B120E !important;} .g-cbook svg{width:18px;height:18px;flex:0 0 18px;} .g-csocial{display:flex;gap:13px;margin-top:22px;} .g-csocial a{width:40px;height:40px;border-radius:10px;border:1px solid #E6ECE7;background:#fff;color:#1E7416;display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s,color .2s;} .g-csocial a:hover{border-color:var(--g-brand);background:#EAF9E8;} @media(max-width:900px){.g-contact-grid{grid-template-columns:1fr;gap:34px;max-width:560px;}.g-cinfo-lead{max-width:none;}} /* What happens next (light numbered steps) */ .g-next{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1000px;margin:0 auto;} .g-next-step{background:#fff;border:1px solid #E6ECE7;border-radius:16px;padding:24px;} .g-next-num{width:38px;height:38px;border-radius:10px;background:var(--g-brand);color:#0B120E;font-family:var(--g-font-heading);font-weight:800;font-size:17px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:13px;} .g-next-step h3{font-size:17px;margin:0 0 6px;color:#0B120E;} .g-next-step p{font-size:14px;line-height:1.6;color:#52605a;margin:0;} @media(max-width:760px){.g-next{grid-template-columns:1fr;max-width:460px;}} /* ===================== CAREERS: open roles ===================== */ .g-roles{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1080px;margin:0 auto;} .g-role{display:flex;flex-direction:column;background:#fff;border:1px solid #E6ECE7;border-radius:16px;padding:26px 28px;box-shadow:0 16px 40px -30px rgba(0,0,0,.18);transition:transform .2s,box-shadow .2s,border-color .2s;} .g-role:hover{transform:translateY(-4px);border-color:rgba(75,205,62,.55);box-shadow:0 22px 48px -28px rgba(75,205,62,.4);} .g-role-top{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px;} .g-role .ic{width:46px;height:46px;flex:0 0 46px;border-radius:12px;background:rgba(75,205,62,.12);display:flex;align-items:center;justify-content:center;} .g-role .ic svg{width:23px;height:23px;color:#1E7416;} .g-role h3{font-size:19px;margin:0 0 3px;color:#0B120E;line-height:1.25;} .g-role .meta{font-size:12.5px;font-weight:700;color:#1E7416;margin:0;letter-spacing:.01em;} .g-role p{font-size:14.5px;line-height:1.6;color:#4a5751;margin:0 0 16px;} .g-role .apply{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--g-font-heading);font-weight:700;font-size:14.5px;color:#1E7416;transition:gap .2s,color .2s;} .g-role .apply svg{width:16px;height:16px;} .g-role .apply:hover{gap:11px;color:#0B120E;} @media(max-width:760px){.g-roles{grid-template-columns:1fr;max-width:480px;}} /* Application form card (CF7 #133) */ .g-formwrap{max-width:680px;margin:0 auto;background:#fff;border:1px solid #E6ECE7;border-radius:18px;padding:30px 34px;box-shadow:0 20px 50px -32px rgba(0,0,0,.2);} @media(max-width:600px){.g-formwrap{padding:24px 20px;}} /* ===================== SUCCESS STORIES: case-study zig-zag rows ===================== */ .g-cases{display:grid;gap:26px;max-width:1160px;margin:0 auto;} .g-case{display:grid;grid-template-columns:1.4fr .6fr;gap:42px;align-items:center;background:#fff;border:1px solid #E6ECE7;border-radius:20px;padding:34px 38px;box-shadow:0 22px 56px -38px rgba(0,0,0,.22);} .g-case:nth-child(even){grid-template-columns:.6fr 1.4fr;} .g-case:nth-child(even) .g-case-copy{order:2;} .g-case:nth-child(even) .g-case-metric{order:1;} .g-case-tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#1E7416;background:rgba(75,205,62,.10);border:1px solid rgba(75,205,62,.22);border-radius:999px;padding:5px 13px;margin:0 0 13px;} .g-case-copy h3{font-size:23px;line-height:1.22;margin:0 0 16px;color:#0B120E;text-wrap:balance;} .g-case-block{margin:0 0 13px;} .g-case-block:last-child{margin-bottom:0;} .g-case-block .lbl{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#7E8C84;margin:0 0 3px;} .g-case-block .lbl svg{width:15px;height:15px;color:#1E7416;flex:0 0 15px;} .g-case-block p{font-size:14.5px;line-height:1.6;color:#4a5751;margin:0;} .g-case-metric{background:linear-gradient(150deg,#0B120E,#16241D);border-radius:18px;padding:32px 26px;text-align:center;} .g-case-metric .ico{width:48px;height:48px;border-radius:13px;background:rgba(75,205,62,.14);display:inline-flex;align-items:center;justify-content:center;margin:0 0 16px;} .g-case-metric .ico svg{width:24px;height:24px;color:#4BCD3E;} .g-case-metric .n{display:block;font-family:var(--g-font-heading);font-weight:800;font-size:30px;line-height:1.1;color:#4BCD3E;} .g-case-metric .c{display:block;margin-top:9px;font-size:13.5px;color:#CDD5D0;line-height:1.5;} @media(max-width:900px){.g-case,.g-case:nth-child(even){grid-template-columns:1fr;gap:24px;padding:26px 22px;}.g-case:nth-child(even) .g-case-copy{order:1;}.g-case:nth-child(even) .g-case-metric{order:2;}.g-case-copy h3{font-size:20px;}} /* Case-study capability checklist (inside g-case-block) */ .g-case-list{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:7px;} .g-case-list li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:#4a5751;line-height:1.5;} .g-case-list li svg{width:15px;height:15px;color:#1E7416;flex:0 0 15px;margin-top:3px;} .g-case-list b{color:#0B120E;} /* Testimonials: two-card centered variant + pending-approval flag (dev) */ .g-tst-grid--two{grid-template-columns:repeat(2,1fr);max-width:920px;margin-left:auto;margin-right:auto;} .g-tst-pending{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8a6d00;background:#FFF6DC;border:1px solid #F0DFA3;border-radius:999px;padding:4px 11px;margin-bottom:10px;} @media(max-width:900px){.g-tst-grid--two{grid-template-columns:1fr;max-width:480px;}} /* ================= CASE-STUDY HUB (filterable) ================= */ .g-hub-head{max-width:1080px;margin:0 auto 6px;text-align:center;} .g-hub-head h2{font-size:30px;line-height:1.18;margin:8px 0 10px;color:#0B120E;text-wrap:balance;} .g-hub-head h1{font-size:38px;line-height:1.14;margin:8px 0 22px;color:#0B120E;text-wrap:balance;} /* Card v2: icon left + coloured title right, clamped rows for equal heights */ .g-hubcard-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;min-height:52px;} .g-hubcard-head .ico{width:44px;height:44px;flex:0 0 44px;border-radius:11px;background:rgba(75,205,62,.12);display:flex;align-items:center;justify-content:center;} .g-hubcard-head .ico svg{width:21px;height:21px;color:#1E7416;} .g-hubcard-head h3{font-size:16px;line-height:1.32;margin:0;color:#1E7416;} .g-hubcard--h .prem{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:63px;} .g-hubcard--h .g-hubcard-metric{min-height:56px;align-items:center;} .g-hero .g-hub-count{max-width:920px;} /* Service-page success-stories grid: centers 1-3 cards */ .g-hub-grid--svc{grid-template-columns:repeat(auto-fit,minmax(300px,360px));justify-content:center;} /* ===== Case-study: solution snapshot table ===== */ .g-snap{max-width:920px;margin:0 auto;background:#fff;border:1px solid #E6ECE7;border-radius:16px;overflow:hidden;box-shadow:0 18px 44px -32px rgba(0,0,0,.2);} .g-snap-row{display:grid;grid-template-columns:240px 1fr;border-bottom:1px solid #EEF2EF;} .g-snap-row:last-child{border-bottom:0;} .g-snap-row .k{padding:13px 22px;font-weight:700;font-size:13.5px;color:#0B120E;background:#F7FBF8;display:flex;align-items:center;gap:9px;} .g-snap-row .k svg{width:16px;height:16px;color:#1E7416;flex:0 0 16px;} .g-snap-row .v{padding:13px 22px;font-size:14.5px;color:#4a5751;line-height:1.55;} @media(max-width:640px){.g-snap-row{grid-template-columns:1fr;}.g-snap-row .k{background:#F1F8EF;padding-bottom:6px;}.g-snap-row .v{padding-top:6px;}} /* ===== Before / After transformation ===== */ .g-baw{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1020px;margin:0 auto;} .g-baw-col{border-radius:16px;padding:26px 28px;border:1px solid #E6ECE7;background:#fff;} .g-baw-col.is-after{background:#F1F8EF;border-color:rgba(75,205,62,.45);} .g-baw-col h3{font-size:15px;margin:0 0 16px;color:#0B120E;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:9px;} .g-baw-col h3 svg{width:18px;height:18px;flex:0 0 18px;} .g-baw-col.is-before h3 svg{color:#9aa8a1;} .g-baw-col.is-after h3 svg{color:#1E7416;} .g-baw-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;} .g-baw-col li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:#4a5751;} .g-baw-col li svg{width:15px;height:15px;flex:0 0 15px;margin-top:3px;} .g-baw-col.is-before li svg{color:#9aa8a1;} .g-baw-col.is-after li{color:#33403a;font-weight:500;} .g-baw-col.is-after li svg{color:#1E7416;} @media(max-width:760px){.g-baw{grid-template-columns:1fr;}} /* ===== Related-service chips (links) ===== */ .g-relsvc{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:900px;margin:0 auto;} .g-relsvc a{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #E6ECE7;border-radius:999px;padding:11px 20px;font-weight:600;font-size:14.5px;color:#0B120E;text-decoration:none;transition:border-color .2s,color .2s,transform .2s;} .g-relsvc a:hover{border-color:var(--g-brand);color:#1E7416;transform:translateY(-2px);} .g-relsvc a svg{width:16px;height:16px;color:#1E7416;flex:0 0 16px;} /* ===== Per-case CTA band (dark, sits above the contact form) ===== */ .g-case-cta{max-width:940px;margin:0 auto;text-align:center;} .g-case-cta h2{font-size:31px;line-height:1.16;margin:8px 0 12px;color:#fff;text-wrap:balance;} .g-case-cta p{font-size:16.5px;line-height:1.65;color:#c9d3cd;margin:0 auto 26px;max-width:760px;text-wrap:pretty;} .g-case-cta .section-label{color:#4BCD3E;} .g-case-cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;} .g-case-cta-row a{display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border-radius:10px;font-family:var(--g-font-heading);font-weight:700;font-size:15px;text-decoration:none;transition:background .2s,box-shadow .2s,border-color .2s,transform .12s;} .g-case-cta-row a svg{width:18px;height:18px;flex:0 0 18px;} .g-case-cta-row .cta-primary{background:var(--g-brand);color:#0B120E !important;} .g-case-cta-row .cta-primary:hover{background:var(--g-brand-hover);box-shadow:0 12px 26px -10px rgba(75,205,62,.5);transform:translateY(-1px);} .g-case-cta-row .cta-secondary{background:transparent;color:#fff !important;border:2px solid rgba(255,255,255,.35);} .g-case-cta-row .cta-secondary:hover{border-color:var(--g-brand);color:#9FE89A !important;transform:translateY(-1px);} @media(max-width:600px){.g-case-cta h2{font-size:24px;}.g-case-cta-row a{width:100%;justify-content:center;}} /* ===== Capability groups (pill lists, no long descriptions) ===== */ .g-capgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1180px;margin:0 auto;} .g-capcard{background:#fff;border:1px solid #E6ECE7;border-radius:16px;padding:24px 26px;transition:transform .2s,border-color .2s,box-shadow .2s;} .g-capcard:hover{transform:translateY(-4px);border-color:rgba(75,205,62,.5);box-shadow:0 20px 44px -28px rgba(75,205,62,.28);} .g-capcard-h{display:flex;align-items:center;gap:12px;margin:0 0 14px;} .g-capcard-h .ic{width:44px;height:44px;flex:0 0 44px;border-radius:11px;background:rgba(75,205,62,.12);display:flex;align-items:center;justify-content:center;} .g-capcard-h .ic svg{width:22px;height:22px;color:#1E7416;} .g-capcard-h h3{font-size:16.5px;margin:0;color:#0B120E;line-height:1.3;} .g-capcard ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;} .g-capcard li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:#4a5751;line-height:1.5;} .g-capcard li svg{width:15px;height:15px;color:#1E7416;flex:0 0 15px;margin-top:3px;} @media(max-width:900px){.g-capgrid{grid-template-columns:1fr 1fr;}} @media(max-width:600px){.g-capgrid{grid-template-columns:1fr;}} /* ===== Roadmap / future enhancements ===== */ .g-road{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1080px;margin:0 auto;} .g-road-item{display:flex;gap:11px;align-items:flex-start;background:#fff;border:1px dashed #cfe0cb;border-radius:12px;padding:15px 18px;} .g-road-item svg{width:17px;height:17px;color:#1E7416;flex:0 0 17px;margin-top:2px;} .g-road-item span{font-size:14px;color:#4a5751;line-height:1.5;} @media(max-width:900px){.g-road{grid-template-columns:1fr 1fr;}} @media(max-width:600px){.g-road{grid-template-columns:1fr;}} /* ===== Case-study banner (themed SVG) — card top + detail hero ===== */ .g-hubcard{padding:0;overflow:hidden;} .g-hubcard-banner{position:relative;display:block;height:150px;overflow:hidden;background:#0B120E;} .g-hubcard-banner svg{position:absolute;inset:0;width:100%;height:100%;display:block;} .g-hubcard-banner--diag{height:176px;} @media(max-width:600px){.g-hubcard-banner--diag{height:150px;}} .g-hubcard-banner .g-hubcard-tagchip{position:absolute;left:16px;bottom:14px;z-index:2;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#0B120E;background:var(--g-brand);border-radius:999px;padding:5px 12px;box-shadow:0 6px 16px -6px rgba(0,0,0,.5);} .g-hubcard-body{padding:20px 22px 18px;display:flex;flex-direction:column;flex:1;} .g-hubcard-body h3{font-size:17px;line-height:1.3;margin:0 0 9px;color:#0B120E;} .g-hubcard:hover .g-hubcard-body h3{color:#1E7416;} .g-hubcard--h .g-hubcard-body .prem{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:63px;} .g-hubcard-banner svg .gb-float{animation:gb-bob 6s ease-in-out infinite;transform-origin:center;} @keyframes gb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} /* Detail-page hero banner (wide) */ .g-csd-banner{position:relative;height:260px;border-radius:20px;overflow:hidden;max-width:1000px;margin:0 auto 26px;background:#0B120E;box-shadow:0 22px 56px -34px rgba(0,0,0,.5);} .g-csd-banner svg{position:absolute;inset:0;width:100%;height:100%;} @media(max-width:600px){.g-csd-banner{height:190px;}.g-hubcard-banner{height:130px;}} /* ========================================================= Card alignment — every card IDENTICAL size; incomplete last rows are centred symmetrically (no stretching, no empty gap at the row edge). Flex with a fixed 3-across basis. ========================================================= */ .g-pillars { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; } .g-pillars > .g-pillar { flex: 0 0 calc((100% - 44px) / 3); max-width: calc((100% - 44px) / 3); box-sizing: border-box; } .g-chal { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; } .g-chal > .g-chal-item { flex: 0 0 calc((100% - 36px) / 3); max-width: calc((100% - 36px) / 3); box-sizing: border-box; } .g-fl-caps { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .g-fl-caps > .g-fl-cap { flex: 0 0 calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); box-sizing: border-box; } @media (max-width: 900px) { .g-pillars > .g-pillar { flex-basis: calc((100% - 22px) / 2); max-width: calc((100% - 22px) / 2); } .g-chal > .g-chal-item { flex-basis: calc((100% - 18px) / 2); max-width: calc((100% - 18px) / 2); } .g-fl-caps > .g-fl-cap { flex-basis: 100%; max-width: 100%; } } @media (max-width: 600px) { .g-pillars > .g-pillar, .g-chal > .g-chal-item { flex-basis: 100%; max-width: 100%; } } .g-hub-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:0 0 20px;font-size:13px;color:#52605a;} .g-hub-legend span{display:inline-flex;align-items:center;gap:7px;} .g-hub-filters{max-width:1180px;margin:0 auto 26px;display:grid;gap:10px;} .g-hubf-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px;} .g-hubf-label{flex:0 0 92px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#7E8C84;} .g-hubf-chip{font:inherit;font-size:13px;font-weight:600;color:#33403a;background:#fff;border:1px solid #E6ECE7;border-radius:999px;padding:7px 14px;cursor:pointer;transition:border-color .15s,background .15s,color .15s;} .g-hubf-chip:hover{border-color:var(--g-brand);color:#1E7416;} .g-hubf-chip.is-on{background:var(--g-brand);border-color:var(--g-brand);color:#0B120E;} .g-hub-count{max-width:1180px;margin:0 auto 14px;font-size:13.5px;font-weight:600;color:#52605a;} .g-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1180px;margin:0 auto;align-items:stretch;} .g-hubcard .prem{flex-grow:1;} /* Dropdown filters */ .g-hub-dd-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:960px;margin:0 auto 18px;} .g-hubf-dd{display:flex;flex-direction:column;gap:6px;} .g-hubf-dd>span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#7E8C84;} .g-hubf-dd select{appearance:none;-webkit-appearance:none;font:inherit;font-size:14.5px;font-weight:600;color:#0B120E;background:#fff;border:1.5px solid #E2E8E2;border-radius:10px;padding:11px 38px 11px 14px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23556655' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;transition:border-color .18s,box-shadow .18s;} .g-hubf-dd select:focus{outline:none;border-color:#4BCD3E;box-shadow:0 0 0 3px rgba(75,205,62,.15);} @media(max-width:640px){.g-hub-dd-row{grid-template-columns:1fr;}} /* Case-study detail pages */ .g-csd-hero{max-width:860px;margin:0 auto;text-align:center;} .g-csd-hero .g-hub-badge{display:inline-block;margin-bottom:14px;} .g-csd-hero h1{font-size:38px;line-height:1.14;margin:0 0 14px;color:#0B120E;text-wrap:balance;} .g-csd-hero p{font-size:17px;line-height:1.62;color:#42504a;margin:0 auto;max-width:720px;text-wrap:pretty;} .g-csd-hero .g-hubcard-tags{justify-content:center;margin:18px 0 0;} .g-csd-back{text-align:center;margin:30px 0 0;} /* ===== Flagship case study (long-form) ===== */ .g-fl-intro{max-width:900px;margin:0 auto;text-align:center;} .g-fl-intro h2{font-size:29px;line-height:1.2;margin:8px 0 14px;color:#0B120E;text-wrap:balance;} .g-fl-intro p{font-size:16.5px;line-height:1.7;color:#4a5751;margin:0 auto;max-width:820px;text-wrap:pretty;} .g-fl-statrow{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:1080px;margin:26px auto 0;} .g-fl-stat{flex:1 1 190px;max-width:250px;background:#fff;border:1px solid #E6ECE7;border-radius:14px;padding:20px 18px;text-align:center;box-shadow:0 14px 36px -28px rgba(0,0,0,.2);} .g-fl-stat b{display:block;font-size:24px;font-weight:800;color:#1E7416;line-height:1.1;} .g-fl-stat span{display:block;margin-top:6px;font-size:13px;color:#52605a;line-height:1.4;} /* Capability groups (icon + title + pill list) */ .g-fl-caps{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1160px;margin:0 auto;} .g-fl-cap{background:#fff;border:1px solid #E6ECE7;border-radius:16px;padding:24px 26px;transition:transform .2s,border-color .2s,box-shadow .2s;} .g-fl-cap:hover{transform:translateY(-4px);border-color:rgba(75,205,62,.5);box-shadow:0 20px 44px -28px rgba(75,205,62,.28);} .g-fl-cap-h{display:flex;align-items:center;gap:12px;margin:0 0 8px;} .g-fl-cap-h .ico{width:44px;height:44px;flex:0 0 44px;border-radius:11px;background:rgba(75,205,62,.12);display:flex;align-items:center;justify-content:center;} .g-fl-cap-h .ico svg{width:22px;height:22px;color:#1E7416;} .g-fl-cap-h h3{font-size:18px;margin:0;color:#0B120E;} .g-fl-cap>p{font-size:14.5px;line-height:1.6;color:#52605a;margin:0 0 14px;} .g-fl-pills{display:flex;flex-wrap:wrap;gap:8px;} .g-fl-pills span{font-size:12.5px;font-weight:600;color:#33403a;background:#F5F8F6;border:1px solid #E6ECE7;border-radius:999px;padding:6px 12px;} @media(max-width:820px){.g-fl-caps{grid-template-columns:1fr;}} /* Frameworks marquee grid */ .g-fl-frameworks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:1000px;margin:0 auto;} .g-fl-fw{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #E6ECE7;border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:700;color:#0B120E;} .g-fl-fw svg{width:15px;height:15px;color:#1E7416;flex:0 0 15px;} .g-fl-fw small{font-weight:500;color:#7E8C84;font-size:12px;} /* Journey / lifecycle (numbered horizontal) */ .g-fl-flow{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:1180px;margin:0 auto;} .g-fl-step{background:#fff;border:1px solid #E6ECE7;border-radius:14px;padding:20px 16px;text-align:center;position:relative;} .g-fl-step .num{width:34px;height:34px;border-radius:9px;background:var(--g-brand);color:#0B120E;font-family:var(--g-font-heading);font-weight:800;font-size:15px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:11px;} .g-fl-step h4{font-size:14.5px;margin:0 0 5px;color:#0B120E;} .g-fl-step p{font-size:12.5px;line-height:1.45;color:#5a6862;margin:0;} @media(max-width:980px){.g-fl-flow{grid-template-columns:repeat(3,1fr);}} @media(max-width:560px){.g-fl-flow{grid-template-columns:1fr 1fr;}.g-fl-caps{grid-template-columns:1fr;}} .g-hubcard{background:#fff;border:1px solid #E6ECE7;border-radius:16px;padding:22px 22px 16px;display:flex;flex-direction:column;box-shadow:0 14px 36px -28px rgba(0,0,0,.2);transition:transform .2s,border-color .2s,box-shadow .2s;} .g-hubcard:hover{transform:translateY(-4px);border-color:rgba(75,205,62,.55);box-shadow:0 20px 44px -26px rgba(75,205,62,.35);} .g-hubcard.is-hidden{display:none;} .g-hubcard-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px;} .g-hub-badge{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:4px 11px;} .g-hub-badge--real{color:#1E7416;background:rgba(75,205,62,.12);border:1px solid rgba(75,205,62,.3);} .g-hub-badge--scenario{color:#4A5A82;background:#EEF2FA;border:1px solid #D8E0F0;} .g-hub-badge--product{color:#8a6d00;background:#FFF6DC;border:1px solid #F0DFA3;} .g-hubcard-top .ico{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:rgba(75,205,62,.12);display:flex;align-items:center;justify-content:center;} .g-hubcard-top .ico svg{width:19px;height:19px;color:#1E7416;} .g-hubcard h3{font-size:16.5px;line-height:1.3;margin:0 0 7px;color:#0B120E;} .g-hubcard .prem{font-size:13.5px;line-height:1.55;color:#52605a;margin:0 0 13px;} .g-hubcard-metric{display:flex;align-items:baseline;gap:9px;padding:10px 14px;background:#F5F8F6;border-radius:11px;margin:0 0 12px;} .g-hubcard-metric b{font-size:19px;font-weight:800;color:#1E7416;white-space:nowrap;} .g-hubcard-metric span{font-size:12px;color:#52605a;line-height:1.35;} .g-hubcard-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;} .g-hubcard-tags span{font-size:11px;font-weight:600;color:#33403a;background:#F5F8F6;border:1px solid #E6ECE7;border-radius:999px;padding:4px 10px;} .g-hubcard-more{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:700;color:#1E7416;background:none;border:0;padding:4px 0;cursor:pointer;} .g-hubcard-more svg{width:14px;height:14px;transition:transform .2s;} .g-hubcard.is-open .g-hubcard-more svg{transform:rotate(180deg);} .g-hubcard-detail{max-height:0;overflow:hidden;transition:max-height .3s ease;} .g-hubcard.is-open .g-hubcard-detail{max-height:900px;} .g-hubcard-detail .blk{padding-top:12px;} .g-hubcard-detail .blk b{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#7E8C84;margin:0 0 3px;} .g-hubcard-detail .blk p{font-size:13px;line-height:1.6;color:#4a5751;margin:0;} @media(max-width:980px){.g-hub-grid{grid-template-columns:1fr 1fr;}} @media(max-width:640px){.g-hub-grid{grid-template-columns:1fr;}.g-hubf-label{flex-basis:100%;}} /* Footer gap: kill every remaining bottom-spacing candidate (Divi deferred CSS uses !important late in cascade) */ .et_pb_pagebuilder_layout .et_pb_post, article.et_pb_post, body #page-container #main-content article { margin-bottom: 0 !important; padding-bottom: 0 !important; } #main-footer { margin-top: 0 !important; } #page-container { padding-bottom: 0 !important; margin-bottom: 0 !important; } html, body { background: #ffffff; } body #et-main-area { padding-bottom: 0 !important; } /* Footer gap, final: zero every bottom-spacing candidate with force; body stays white over customizer value */ html, body { background: #ffffff !important; } body #page-container, body #et-main-area, body #main-content, body #main-content article, body .et_builder_inner_content, body .et-l--post, body .entry-content { margin-bottom: 0 !important; padding-bottom: 0 !important; } body #main-footer { margin-top: 0 !important; } /* Footer gap root cause: Divi ::after spacer/clearfix below the content */ body #main-content::after, body #main-content::before, body #et-main-area::after, body #page-container::after, body #main-content article::after, body .entry-content::after, body #left-area::after { padding: 0 !important; margin: 0 !important; height: 0 !important; min-height: 0 !important; display: block; } /* et-boc builder wrapper spacing */ .et-db #et-boc, .et-db #et-boc .et-l, body #et-boc, body #et-boc .et-l--post, body #et-boc .et_builder_inner_content { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* CTA form internal rhythm: no phantom spinner space; tight, even Turnstile block */ .g-cta-formcard .wpcf7-spinner { display: none; } .g-cta-formcard form.submitting .wpcf7-spinner { display: block; margin: 8px auto 0; } .g-cta-formcard .g-cf-ts { margin: 4px 0 0 !important; } .g-cta-formcard .cf-turnstile-br { display: none; } .g-cta-formcard .g-cf-ts p:empty { display: none; } .g-cta-formcard .g-cf-submit { margin-top: 14px !important; } /* ===================== SERVICES HUB (page 6) — full-width, equal cards, distinct layouts ===================== */ body.page-id-6 .g-svc-head{max-width:1240px;margin:0 auto 30px;text-align:center;} body.page-id-6 .g-svc-head h2{font-size:34px;line-height:1.16;margin:0 0 10px;color:#0B120E;letter-spacing:-.01em;text-wrap:balance;} body.page-id-6 .g-svc-head p{font-size:16.5px;line-height:1.6;color:#4a5751;max-width:none;margin:0 auto;} /* goals — horizontal cards (icon left, label right), background-change hover */ body.page-id-6 .g-goals{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1180px;margin:0 auto;} body.page-id-6 .g-goal{display:flex;gap:16px;align-items:stretch;background:#fff;border:1px solid #E6ECE7;border-radius:16px;padding:24px;transition:transform .22s,box-shadow .22s,border-color .22s,background .22s;} body.page-id-6 .g-goal:hover{transform:translateY(-4px);box-shadow:0 26px 52px -26px rgba(11,18,14,.5);border-color:#0B120E;background:linear-gradient(135deg,#0B120E,#12261a);} body.page-id-6 .g-goal .ic{width:46px;height:46px;flex:0 0 46px;border-radius:12px;background:rgba(75,205,62,.12);display:flex;align-items:center;justify-content:center;transition:background .22s;} body.page-id-6 .g-goal:hover .ic{background:rgba(75,205,62,.22);} body.page-id-6 .g-goal .ic svg{width:23px;height:23px;color:#1E7416;transition:color .22s;} body.page-id-6 .g-goal:hover .ic svg{color:#4BCD3E;} body.page-id-6 .g-goal-tx{display:flex;flex-direction:column;min-width:0;} body.page-id-6 .g-goal h3{font-size:18px;margin:0 0 5px;} body.page-id-6 .g-goal h3 a{color:#0B120E;text-decoration:none;transition:color .22s;} body.page-id-6 .g-goal:hover h3 a{color:#fff;} body.page-id-6 .g-goal-tx>p{font-size:14px;line-height:1.55;color:#5a6862;margin:0 0 14px;transition:color .22s;} body.page-id-6 .g-goal:hover .g-goal-tx>p{color:#c3ccc7;} body.page-id-6 .g-goal .lnk{margin-top:auto;color:#1E7416;font-weight:700;font-size:14px;line-height:1.4;text-decoration:none;transition:color .22s;} body.page-id-6 .g-goal:hover .lnk{color:#4BCD3E;} body.page-id-6 .g-goal .lnk svg{width:15px;height:15px;display:inline-block;vertical-align:-2px;margin-left:5px;transition:transform .22s;} body.page-id-6 .g-goal:hover .lnk svg{transform:translateX(3px);} /* all services — horizontal icon cards (2 col), equal height */ body.page-id-6 .g-allsvc{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1180px;margin:0 auto;} body.page-id-6 .g-svc-row{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid #E6ECE7;border-radius:14px;padding:20px 22px;text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s;} body.page-id-6 .g-svc-row:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(0,0,0,.22);border-color:rgba(75,205,62,.55);} body.page-id-6 .g-svc-row .ic{width:48px;height:48px;flex:0 0 48px;border-radius:12px;background:rgba(75,205,62,.12);display:flex;align-items:center;justify-content:center;transition:background .2s;} body.page-id-6 .g-svc-row:hover .ic{background:var(--g-brand);} body.page-id-6 .g-svc-row .ic svg{width:24px;height:24px;color:#1E7416;transition:color .2s;} body.page-id-6 .g-svc-row:hover .ic svg{color:#0B120E;} body.page-id-6 .g-svc-row .tx{min-width:0;} body.page-id-6 .g-svc-row h3{font-size:16.5px;margin:0 0 3px;color:#0B120E;} body.page-id-6 .g-svc-row p{font-size:13.5px;line-height:1.45;color:#5a6862;margin:0;} body.page-id-6 .g-svc-row .go{margin-left:auto;color:#1E7416;flex:0 0 auto;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s;} body.page-id-6 .g-svc-row:hover .go{opacity:1;transform:translateX(0);} body.page-id-6 .g-svc-row .go svg{width:18px;height:18px;} /* ways to work — numbered cards, equal height */ body.page-id-6 .g-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1180px;margin:0 auto;} body.page-id-6 .g-way{background:#fff;border:1px solid #E6ECE7;border-radius:16px;padding:26px 26px 24px;transition:transform .2s,box-shadow .2s,border-color .2s;} body.page-id-6 .g-way:hover{transform:translateY(-4px);box-shadow:0 20px 44px -24px rgba(0,0,0,.22);border-color:rgba(75,205,62,.5);} body.page-id-6 .g-way .num{font-size:34px;font-weight:800;line-height:1;color:rgba(75,205,62,.30);margin:0 0 12px;letter-spacing:-.02em;} body.page-id-6 .g-way h3{font-size:19px;margin:0 0 8px;color:#0B120E;} body.page-id-6 .g-way p{font-size:14.5px;line-height:1.55;color:#5a6862;margin:0;} @media(max-width:980px){body.page-id-6 .g-goals,body.page-id-6 .g-ways{grid-template-columns:1fr 1fr;}} @media(max-width:760px){body.page-id-6 .g-goals,body.page-id-6 .g-allsvc,body.page-id-6 .g-ways{grid-template-columns:1fr;}body.page-id-6 .g-svc-head h2{font-size:28px;}} /* ===================== INSIGHTS detail (single post) themed hero ===================== */ .single-post .et_post_meta_wrapper{display:none;} .single-post .entry-content{max-width:1100px;margin-left:auto;margin-right:auto;} .single-post .entry-content>p{font-size:16.5px;line-height:1.75;color:#2f3a34;} .single-post .entry-content h2{font-size:25px;margin:34px 0 12px;color:#0B120E;} .single-post .entry-content h3{font-size:19px;margin:26px 0 8px;color:#0B120E;} .single-post .entry-content li{font-size:16px;line-height:1.7;color:#2f3a34;} .g-insd-hero{margin:4px 0 30px;} .g-insd-banner{position:relative;aspect-ratio:1024/380;border-radius:18px;overflow:hidden;background:#0B120E;box-shadow:0 26px 60px -34px rgba(11,18,14,.45);} .g-insd-banner svg{position:absolute;inset:0;width:100%;height:100%;display:block;} .g-insd-head{padding:22px 2px 0;} .g-insd-chip{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#0B120E;background:var(--g-brand);border-radius:999px;padding:6px 13px;text-decoration:none;margin:0 0 14px;} .g-insd-title{font-size:34px;line-height:1.16;font-weight:800;color:#0B120E;margin:0 0 12px;letter-spacing:-.01em;} .g-insd-meta{font-size:13.5px;color:#7E8C84;font-weight:600;margin:0;} @media(max-width:600px){.g-insd-title{font-size:26px;}} .g-insd-ig{margin:34px 0;border-radius:14px;overflow:hidden;box-shadow:0 20px 44px -28px rgba(11,18,14,.22);} .g-insd-ig svg{width:100%;height:auto;display:block;} /* single post: full width (kill Divi sidebar + vertical divider), clean bottom spacing */ .single-post #main-content .container:before{display:none !important;} .single-post #sidebar{display:none !important;} .single-post #left-area{width:100% !important;padding:0 0 64px !important;} .single-post .et_post_meta_wrapper,.single-post .post-meta,.single-post .comment-navigation,.single-post #comment-wrap,.single-post .nav-single{display:none !important;} .single-post .entry-content{padding-bottom:8px;} /* insights listing: compact Topic + Sort filter, card author/date meta */ .g-ins-filter{display:flex;gap:12px 18px;justify-content:center;align-items:center;flex-wrap:wrap;max-width:980px;margin:0 auto 6px;} .g-ins-filter .g-hubf-dd{flex:0 0 auto;flex-direction:row;align-items:center;gap:8px;max-width:none;} .g-ins-filter .g-hubf-dd>span{margin:0;white-space:nowrap;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#7E8C84;} .g-ins-filter select{padding-top:9px;padding-bottom:9px;} .g-ins-filter input[type="date"]{font:inherit;font-size:14px;font-weight:600;color:#0B120E;background:#fff;border:1.5px solid #E2E8E2;border-radius:10px;padding:8px 11px;cursor:pointer;} .g-ins-filter input[type="date"]:focus{outline:none;border-color:#4BCD3E;box-shadow:0 0 0 3px rgba(75,205,62,.15);} .g-ins-meta{font-size:12px;color:#8a978f;font-weight:600;margin:0 0 10px;letter-spacing:.01em;} /* Capability + tech grids: uniform size, incomplete final row centred. Must stay at the END of this file so it wins over the earlier grid rules. */ .g-capgrid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: stretch; } .g-capgrid > .g-capcard { flex: 0 0 calc((100% - 40px) / 3); max-width: calc((100% - 40px) / 3); box-sizing: border-box; } .g-techstack { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: stretch; } .g-techstack > .g-techcard { flex: 0 0 calc((100% - 36px) / 3); max-width: calc((100% - 36px) / 3); box-sizing: border-box; } @media (max-width: 980px) { .g-capgrid > .g-capcard, .g-techstack > .g-techcard { flex-basis: calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); } } @media (max-width: 640px) { .g-capgrid > .g-capcard, .g-techstack > .g-techcard { flex-basis: 100%; max-width: 100%; } } /* ── Success-story cards: full-bleed banner, tight rhythm, title-as-link ── Must stay at the END of this file: an earlier rule sets .g-hubcard padding to 22px, which double-padded the body and pushed the banner off the edges. */ .g-hubcard { position: relative; padding: 0 !important; overflow: hidden; } /* banner bleeds to the card edge, no gutter */ .g-hubcard-banner { display: block; height: 158px; margin: 0; border-radius: 0; } .g-hubcard-banner svg { border-radius: 0; } /* one consistent gutter on every side of the text block */ .g-hubcard-body { padding: 18px 20px 20px !important; gap: 0; } /* title carries the link; the whole card is clickable via the stretched anchor */ .g-hubcard-body h3 { font-size: 17px; line-height: 1.34; margin: 0 0 8px; } .g-hubcard-link { color: #0B120E; text-decoration: none; } .g-hubcard-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .g-hubcard:hover .g-hubcard-link, .g-hubcard-link:focus-visible { color: #1E7416; } .g-hubcard-link:focus-visible { outline: 2px solid var(--g-brand); outline-offset: 3px; } /* description: even rag, clean truncation, no mid-word cut */ .g-hubcard .prem { font-size: 13.5px; line-height: 1.6; color: #52605a; margin: 0 0 12px; text-wrap: pretty; overflow-wrap: break-word; } .g-hubcard--h .prem, .g-hubcard--h .g-hubcard-body .prem { -webkit-line-clamp: 3; min-height: 0; } /* metric: quieter — a scan anchor, not a headline */ .g-hubcard-metric { display: block; padding: 0; background: none; border-radius: 0; margin: 0 0 12px; min-height: 0 !important; } .g-hubcard-metric b { font-size: 14px; font-weight: 800; color: #1E7416; white-space: normal; } .g-hubcard-metric b::after { content: " — "; color: #9AA8A1; font-weight: 600; } .g-hubcard-metric span { font-size: 13px; color: #52605a; line-height: 1.5; } /* chips drawn from the filter taxonomy, so they always match the filters above */ .g-hubcard-tags { gap: 6px; margin: 0 0 14px; } /* affordance only — the title is the single real link on the card */ .g-hubcard-more { margin-top: auto; color: #1E7416; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; } .g-hubcard:hover .g-hubcard-more svg { transform: translateX(3px); } .g-hubcard-more svg { transition: transform .2s; } /* ══ Success-story DETAIL pages ══════════════════════════════════════════════ Scoped with :has(.g-csd-hero) so only story detail pages are affected. Every content row is locked to the SAME container as the site header/footer (Divi .container = 80% / max 1080px), so content never overflows the site margin, and inner blocks fill that width so paragraphs are not left narrow. Must stay at the END of this file. */ :root { --g-csd-w: 1080px; } /* = Divi .container used by header & footer */ /* 1 ── hero: full-width banner background, copy aligned to the container ─────── */ body:has(.g-csd-hero) .et_pb_section.g-hero { position: relative; overflow: hidden; background: #0B120E !important; padding-top: 0 !important; padding-bottom: 0 !important; } body:has(.g-csd-hero) .et_pb_section.g-hero > .et_pb_row { width: 80% !important; max-width: var(--g-csd-w) !important; padding: 0 !important; position: relative; z-index: 2; } .g-csd-banner { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; max-width: none; margin: 0; border-radius: 0; z-index: 0; } .g-csd-banner svg { width: 100%; height: 100%; display: block; object-fit: cover; } /* Overlay lives on the banner's OWN ::after (the section's ::before is already used by the base .g-hero corner-glow). It sits above the artwork, below the copy (row is z-index:2). Dark under the copy column on the left, fading to near-transparent on the right so the artwork still reads — a smooth wash, never a boxed patch. */ .g-csd-banner::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(6,11,9,.96) 0%, rgba(6,11,9,.93) 46%, rgba(6,11,9,.84) 60%, rgba(6,11,9,.5) 80%, rgba(6,11,9,.18) 100%), linear-gradient(180deg, rgba(6,11,9,.18) 0%, rgba(6,11,9,.18) 100%); } .g-csd-hero { position: relative; z-index: 2; text-align: left; padding: 58px 0 54px; max-width: 660px; margin: 0; /* left-aligned to the container, not centered */ } .g-csd-hero .section-label { color: var(--g-brand); } .g-csd-hero h1 { color: #fff; font-size: 40px; line-height: 1.16; margin: 8px 0 14px; text-wrap: balance; text-shadow: 0 2px 20px rgba(0,0,0,.5); } .g-csd-hero > p { color: #DCE6E0; font-size: 16.5px; line-height: 1.66; margin: 0 0 20px; max-width: 600px; text-shadow: 0 1px 12px rgba(0,0,0,.45); } .g-csd-hero .g-hubcard-tags { justify-content: flex-start; margin: 0; } .g-csd-hero .g-hubcard-tags span { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); color: #EAF2EC; } /* 2 ── every content row aligns to the header/footer container ──────────────── */ body:has(.g-csd-hero) .et_pb_row { width: 80% !important; max-width: var(--g-csd-w) !important; } /* inner blocks fill the row (no inner cap that leaves paragraphs narrow/offset) */ body:has(.g-csd-hero) .g-fl-intro, body:has(.g-csd-hero) .g-snap, body:has(.g-csd-hero) .g-baw, body:has(.g-csd-hero) .g-check2, body:has(.g-csd-hero) .g-capgrid, body:has(.g-csd-hero) .g-techstack, body:has(.g-csd-hero) .g-indchips, body:has(.g-csd-hero) .g-whysplit, body:has(.g-csd-hero) .g-fl-statrow, body:has(.g-csd-hero) .g-relsvc { max-width: 100% !important; } /* headings/subheads stay a touch narrower for readability, centered */ body:has(.g-csd-hero) .g-ab-head { max-width: 840px; margin-left: auto; margin-right: auto; } /* 3 ── justified body copy filling the width; headings centered ─────────────── */ /* the intro paragraph blocks are capped + centered in the base CSS (max-width 820, margin:0 auto) — release them so they fill the container and justify cleanly */ body:has(.g-csd-hero) .g-fl-intro p { max-width: 100%; margin: 0 0 15px; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; } body:has(.g-csd-hero) .g-fl-intro p:last-child { margin-bottom: 0; } body:has(.g-csd-hero) .g-whysplit-l p { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; } @media (max-width: 980px) { body:has(.g-csd-hero) .et_pb_section.g-hero > .et_pb_row, body:has(.g-csd-hero) .et_pb_row { width: 90% !important; } .g-csd-hero { padding: 48px 0 44px; max-width: 100%; } .g-csd-hero h1 { font-size: 30px; } /* on stacked mobile the copy spans full width — darken top-to-bottom instead */ .g-csd-banner::after { background: linear-gradient(180deg, rgba(6,11,9,.82) 0%, rgba(6,11,9,.7) 55%, rgba(6,11,9,.88) 100%); } } @media (max-width: 640px) { body:has(.g-csd-hero) .g-fl-intro p, body:has(.g-csd-hero) .g-whysplit-l p { text-align: left; hyphens: manual; } } /* Homepage success-story cards: clickable title + read-story affordance */ .g-proof-card { position: relative; } .g-proof-card h3 a.g-proof-link { color: #fff; text-decoration: none; } .g-proof-card h3 a.g-proof-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .g-proof-card:hover h3 a.g-proof-link { color: var(--g-brand); } .g-proof-more { margin-top: 18px; display: inline-flex; align-items: center; gap: 7px; color: var(--g-brand); font-weight: 700; font-size: 13px; text-decoration: none; } .g-proof-more svg { width: 14px; height: 14px; transition: transform .2s ease; } .g-proof-card:hover .g-proof-more svg { transform: translateX(3px); } /* ── Site-wide content alignment ───────────────────────────────────────────── Every builder row is capped to the SAME width as the Divi .container used by the header and footer (content_width default = 1080px), so page content lines up with the header/footer margin instead of overflowing it. Inner blocks with larger max-widths are naturally constrained by the row, so this one cap aligns the whole site. Story detail pages already target this width via --g-csd-w. */ .et-l .et_pb_row, .et-l .et_pb_row_inner { max-width: 1080px !important; } /* Opportunities — compact interactive icon tiles (replaces the sparse check-pill grid). Fills the width, incomplete rows centre, hover = lift + green border + filled icon. Scoped to .g-opps so the shared .g-chal (story why-change) is untouched. */ .g-opps { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 1120px; margin: 0 auto; } .g-opps .g-opp { flex: 1 1 190px; max-width: 222px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 13px; background: #fff; border: 1px solid #E6ECE7; border-radius: 16px; padding: 24px 18px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .g-opps .g-opp:hover { transform: translateY(-5px); border-color: var(--g-brand); box-shadow: 0 16px 34px -20px rgba(75,205,62,.42); } .g-opps .g-opp .ic { width: 50px; height: 50px; border-radius: 14px; background: rgba(75,205,62,.12); color: #1E7416; display: flex; align-items: center; justify-content: center; transition: background-color .2s ease, color .2s ease; } .g-opps .g-opp:hover .ic { background: var(--g-brand); color: #0B120E; } .g-opps .g-opp .ic svg { width: 24px; height: 24px; } .g-opps .g-opp span { font-size: 14px; font-weight: 700; color: #0B120E; line-height: 1.36; } @media (max-width: 820px) { .g-opps .g-opp { flex-basis: calc(50% - 8px); max-width: none; } } @media (max-width: 520px) { .g-opps .g-opp { flex-basis: 100%; } } /* "What we do" capabilities — restructured from the .g-pillars block cards. Icon chip sits BESIDE the title (title clamped to 2 lines); one-line description below. Per-card accent colour (set inline via --accent/--accentBg/--accentShadow). A single trailing orphan becomes a full-width feature strip (.g-cap--wide) so the grid never leaves one card alone. */ .g-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1080px; margin: 0 auto; } .g-cap { --accent: #1E7416; --accentBg: rgba(75,205,62,.12); --accentShadow: rgba(75,205,62,.42); background: #fff; border: 1px solid #E6ECE7; border-radius: 16px; padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .g-cap:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 18px 38px -22px var(--accentShadow); } .g-cap-hd { display: flex; align-items: center; gap: 14px; } .g-cap-ic { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 14px; background: var(--accentBg); color: var(--accent); display: flex; align-items: center; justify-content: center; transition: background-color .2s ease, color .2s ease; } .g-cap:hover .g-cap-ic { background: var(--accent); color: #fff; } .g-cap-ic svg { width: 25px; height: 25px; } .g-cap-hd h3 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.25; color: #0B120E; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .g-cap-d { margin: 0; color: #59685E; font-size: 14.5px; line-height: 1.5; } /* full-width feature strip for a single trailing orphan */ .g-cap--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 20px; background: linear-gradient(100deg, rgba(75,205,62,.06), rgba(255,255,255,0) 60%); } .g-cap--wide .g-cap-hd { flex: 0 0 auto; width: 340px; } .g-cap--wide .g-cap-d { flex: 1; font-size: 15px; } @media (max-width: 900px) { .g-caps { grid-template-columns: repeat(2, 1fr); } .g-cap--wide { flex-direction: column; align-items: flex-start; gap: 12px; } .g-cap--wide .g-cap-hd { width: auto; } } @media (max-width: 560px) { .g-caps { grid-template-columns: 1fr; } } /* "Use cases / solutions we build" — a numbered solution LIST (deliberately NOT the .g-caps card grid, so capabilities vs. use-cases read as two different things). Two columns of hairline-separated rows; hover nudges the row + green wash. */ .g-solset { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; max-width: 1060px; margin: 0 auto; } .g-sol { display: flex; gap: 18px; align-items: baseline; padding: 22px 12px; border-top: 1px solid #E4EBE6; transition: padding-left .2s ease, background-color .2s ease; } .g-sol:hover { background: linear-gradient(90deg, rgba(75,205,62,.07), rgba(255,255,255,0) 70%); padding-left: 18px; } .g-sol .n { flex: 0 0 auto; font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--g-brand, #4BCD3E); font-variant-numeric: tabular-nums; padding-top: 4px; } .g-sol .tx h3 { margin: 0 0 3px; font-size: 16.5px; font-weight: 800; line-height: 1.25; color: #0B120E; } .g-sol .tx p { margin: 0; font-size: 14px; line-height: 1.5; color: #59685E; } @media (max-width: 760px) { .g-solset { grid-template-columns: 1fr; column-gap: 0; } } /* "Architecture & Stack" — a contained LAYERED panel (not the .g-techstack card grid, not the .g-caps cards, not the .g-solset list). Full-width rows: category (icon + label) left, tech pills right, hairline-separated with a soft zebra tint so it reads as an architecture "stack". Fills the width, removes the card whitespace. */ .g-arch { max-width: 1080px; margin: 0 auto; border: 1px solid #E4EBE6; border-radius: 16px; overflow: hidden; background: #fff; } .g-arch-row { display: flex; align-items: center; gap: 22px; padding: 16px 24px; } .g-arch-row:not(:first-child) { border-top: 1px solid #EAF1EC; } .g-arch-row:nth-child(even) { background: #F6FBF4; } .g-arch-cat { flex: 0 0 230px; display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 800; color: #0B120E; } .g-arch-cat .ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; background: rgba(75,205,62,.12); color: #1E7416; display: flex; align-items: center; justify-content: center; } .g-arch-cat .ic svg { width: 20px; height: 20px; } .g-arch-tags { display: flex; flex-wrap: wrap; gap: 8px; } .g-arch-tags span { background: #fff; border: 1px solid #DCE6DE; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: #3A4A40; transition: border-color .15s ease, color .15s ease; } .g-arch-tags span:hover { border-color: var(--g-brand, #4BCD3E); color: #1E7416; } @media (max-width: 720px) { .g-arch-row { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px; } .g-arch-cat { flex-basis: auto; } } /* "Responsible AI" — an open assurance BAR (not boxed cards): 5 hairline-divided columns, icon-top + title + one line, filling the width evenly (no orphan row). Distinct from the contained .g-arch panel and the .g-caps cards. */ .g-assure { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 1140px; margin: 0 auto; } .g-assure-item { padding: 6px 24px; text-align: center; } .g-assure-item + .g-assure-item { border-left: 1px solid #E6ECE7; } .g-assure-item .ic { width: 48px; height: 48px; border-radius: 13px; background: rgba(75,205,62,.12); color: #1E7416; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; transition: background-color .2s ease, color .2s ease; } .g-assure-item:hover .ic { background: var(--g-brand, #4BCD3E); color: #fff; } .g-assure-item .ic svg { width: 23px; height: 23px; } .g-assure-item h3 { font-size: 15px; font-weight: 800; color: #0B120E; margin: 0 0 6px; line-height: 1.25; } .g-assure-item p { font-size: 13px; line-height: 1.5; color: #59685E; margin: 0; } @media (max-width: 860px) { .g-assure { grid-template-columns: repeat(2, 1fr); row-gap: 28px; } .g-assure-item { border-left: none; } .g-assure-item:nth-child(odd) { border-right: 1px solid #E6ECE7; } } @media (max-width: 520px) { .g-assure { grid-template-columns: 1fr; } .g-assure-item:nth-child(odd) { border-right: none; } } /* Freelancer verified-rating badge shown in a Client Voice media panel (Jennifer's slide): gives her the same media-left layout as the logo slides, without a low-res photo. */ .g-tw-media .g-fl-badge { text-align: center; } .g-fl-badge .g-fl-stars { color: var(--g-brand, #4BCD3E); font-size: 23px; letter-spacing: 3px; line-height: 1; } .g-fl-badge .g-fl-score { font-size: 44px; font-weight: 800; color: #0B120E; line-height: 1; margin: 9px 0 5px; } .g-fl-badge .g-fl-src { font-size: 12px; font-weight: 700; color: #59685E; } .g-fl-badge .g-fl-src b { color: #1E7416; font-weight: 800; } /* Anonymous identity mark for the media panel — used on testimonials with no name/logo so every Client Voice slide shares the same media-left two-column structure. */ .g-tw-media .g-anon { display: flex; flex-direction: column; align-items: center; gap: 13px; text-align: center; } .g-anon .g-anon-ic { width: 66px; height: 66px; border-radius: 50%; background: rgba(75,205,62,.12); color: #1E7416; display: flex; align-items: center; justify-content: center; } .g-anon .g-anon-ic svg { width: 30px; height: 30px; } .g-anon .g-anon-l { font-size: 15px; font-weight: 800; color: #0B120E; letter-spacing: .02em; } .g-anon .g-anon-s { font-size: 12px; font-weight: 600; color: #59685E; margin-top: -6px; } /* rounded corners on Client Voice logo tiles (visible on solid-background logos like Amba's blue lockup; no effect on transparent PNGs). */ .g-tw-media img { border-radius: 10px; } /* "Why clients choose us" — centered section heading (H2) matching the other homepage section headings, sitting above the split value-prop columns. */ .g-why-head { text-align: center; max-width: 1000px; margin: 0 auto 34px; } .g-why-head h2 { font-size: 34px; line-height: 1.2; margin: 0; color: #0B120E; text-wrap: balance; } /* ============ 13-brand story page (page-id 347) review changes ============ */ /* recolour section labels + balance the split (whysplit) sections — scoped to this page */ body:has(.g-csd-hero) .section-label { color: #1E7416; } body:has(.g-csd-hero) .g-whysplit { align-items: center; } /* service pages: balance the two-block (center left heading/intro against the right rows). Per-page scope, kept separate from story scope. */ body.page-id-53 .g-whysplit, body.page-id-14 .g-whysplit, body.page-id-15 .g-whysplit, body.page-id-16 .g-whysplit, body.page-id-140 .g-whysplit, body.page-id-141 .g-whysplit, body.page-id-142 .g-whysplit, body.page-id-20 .g-whysplit, body.page-id-60 .g-whysplit, body.page-id-135 .g-whysplit { align-items: center; } /* Delivery snapshot -> even 3x2 stat band */ .g-statband { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1000px; margin: 0 auto; border: 1px solid #E4EBE6; border-radius: 16px; overflow: hidden; background: #fff; } .g-statband .s { padding: 26px 20px; text-align: center; } .g-statband .s:nth-child(n+4) { border-top: 1px solid #EAF1EC; } .g-statband .s:not(:nth-child(3n+1)) { border-left: 1px solid #EAF1EC; } .g-statband .s b { display: block; font-family: var(--g-font-heading); font-size: 30px; font-weight: 800; color: #1E7416; line-height: 1.1; } .g-statband .s span { display: block; margin-top: 6px; font-size: 13.5px; color: #586860; } @media (max-width: 720px) { .g-statband { grid-template-columns: 1fr; } .g-statband .s { border-left: none; border-top: 1px solid #EAF1EC; } .g-statband .s:first-child { border-top: none; } } /* Similar challenges -> prominent icon tiles (4x2) */ .g-chtiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1080px; margin: 0 auto; } .g-chtiles .t { display: flex; align-items: center; gap: 12px; padding: 18px; border: 1px solid #E6ECE7; border-radius: 14px; background: #fff; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .g-chtiles .t:hover { transform: translateY(-4px); border-color: var(--g-brand, #4BCD3E); box-shadow: 0 14px 30px -18px rgba(75,205,62,.4); } .g-chtiles .t .ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: rgba(75,205,62,.12); color: #1E7416; display: flex; align-items: center; justify-content: center; } .g-chtiles .t .ic svg { width: 19px; height: 19px; } .g-chtiles .t b { font-size: 14px; font-weight: 700; color: #0B120E; line-height: 1.3; } @media (max-width: 900px) { .g-chtiles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .g-chtiles { grid-template-columns: 1fr; } } /* Related services -> prominent link tiles (arrow + name), grouped Primary/Supporting */ .g-svctiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 1000px; margin: 0 auto; } .g-svctiles a { display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px; border: 1px solid #E6ECE7; border-radius: 12px; background: #fff; font-weight: 700; font-size: 15px; color: #0B120E; text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .g-svctiles a:hover { transform: translateY(-3px); border-color: var(--g-brand, #4BCD3E); box-shadow: 0 12px 26px -16px rgba(75,205,62,.42); } .g-svctiles a svg { width: 18px; height: 18px; color: #1E7416; flex: 0 0 auto; } /* Why change was necessary -> numbered, even two-column list (replaces the 3+3+1 cards) */ .g-chnum { column-count: 2; column-gap: 50px; max-width: 1040px; margin: 0 auto; } .g-chnum .r { break-inside: avoid; display: flex; gap: 14px; align-items: baseline; margin-bottom: 18px; } .g-chnum .r .n { flex: 0 0 auto; font-family: var(--g-font-heading); font-weight: 800; font-size: 13px; color: #1E7416; font-variant-numeric: tabular-nums; letter-spacing: .04em; } .g-chnum .r .tx { font-size: 15px; line-height: 1.5; color: #3A4A40; } @media (max-width: 700px) { .g-chnum { column-count: 1; } } /* ---- 13-brand (347): uniform section titles + reworked Why-change / Related-services ---- */ /* one section-title style: H2, left, dark ink, same size (beats .g-whysplit-l h2 via page scope) */ body:has(.g-csd-hero) .g-sd-h { font-family: var(--g-font-heading); font-size: 26px; line-height: 1.25; font-weight: 800; color: #0B120E; text-align: left; text-transform: none; letter-spacing: 0; margin: 0 0 22px; } /* Why change -> balanced 2-column cards with a green left accent */ .g-chwrap { column-count: 2; column-gap: 18px; max-width: 1000px; margin: 0 auto; } .g-chwrap .c { break-inside: avoid; margin: 0 0 14px; padding: 15px 18px; border: 1px solid #E6ECE7; border-left: 3px solid var(--g-brand, #4BCD3E); border-radius: 10px; background: #fff; font-size: 14.5px; line-height: 1.5; color: #3A4A40; } @media (max-width: 700px) { .g-chwrap { column-count: 1; } } /* Related services -> clean link rows (name left, arrow right, hairline dividers) */ .g-relrows { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 820px; margin: 0 auto; } .g-relrows a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid #E0E8E2; border-radius: 999px; background: #fff; text-decoration: none; color: #0B120E; font-weight: 600; font-size: 14px; transition: border-color .2s ease, color .2s ease, transform .2s ease; } .g-relrows a:hover { border-color: var(--g-brand, #4BCD3E); color: #1E7416; transform: translateY(-2px); } .g-relrows a svg { width: 15px; height: 15px; color: #1E7416; flex: 0 0 auto; }