/* ==========================================================================
   GAWAGI WEBSITE — ELEVATE v2  (2026-09-11)

   Built entirely on the brand blue #0463FA. Nothing here changes the page
   layout or rewrites existing copy: every rule adds motion, depth, image
   treatment and rhythm on top of the structure that is already there.

   Load order: bootstrap.min.css → style.css → gawagi-polish.css → THIS FILE.
   ========================================================================== */

:root {
    --ge-blue:      #0463FA;
    --ge-blue-700:  #0450CC;
    --ge-blue-400:  #4D95FF;
    --ge-blue-050:  #EFF5FF;
    --ge-ink:       #1B2C51;

    --ge-ease:   cubic-bezier(.4, 0, .2, 1);
    --ge-spring: cubic-bezier(.22, 1, .36, 1);

    --ge-sh-1: 0 2px 10px rgba(27, 44, 81, .05);
    --ge-sh-2: 0 14px 36px rgba(4, 99, 250, .11);
    --ge-sh-3: 0 26px 64px rgba(4, 99, 250, .20);
}

/* ==========================================================================
   1. TYPE AND RHYTHM — same words, easier to read
   ========================================================================== */
h1, h2, h3, h4,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    letter-spacing: -.022em;
}
.display-3, .display-4 { line-height: 1.1; }
.container-xxl p { line-height: 1.78; }

/* The pill above each section heading becomes a brand chip. */
p.d-inline-block.border.rounded-pill {
    border-color: rgba(4, 99, 250, .28) !important;
    background: var(--ge-blue-050);
    color: var(--ge-blue);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* A short brand rule under centred section headings, drawn on scroll. */
.text-center.mx-auto > h1::after {
    content: "";
    display: block;
    width: 58px;
    height: 3px;
    margin: 18px auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ge-blue), var(--ge-blue-400));
    transform: scaleX(0);
    transition: transform .65s var(--ge-spring) .12s;
}
.text-center.mx-auto.is-visible > h1::after { transform: scaleX(1); }

/* ==========================================================================
   2. SCROLL PROGRESS
   ========================================================================== */
.ge-progress {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 3px;
    z-index: 2000;
    pointer-events: none;
}
.ge-progress > span {
    display: block;
    height: 100%; width: 0;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, var(--ge-blue), var(--ge-blue-400));
    box-shadow: 0 0 12px rgba(4, 99, 250, .55);
}

/* ==========================================================================
   3. NAVIGATION
   ========================================================================== */
.navbar.sticky-top { transition: box-shadow .3s var(--ge-ease), background-color .3s var(--ge-ease); }
.navbar.sticky-top.shadow-on-scroll {
    background: rgba(255, 255, 255, .94) !important;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    box-shadow: var(--ge-sh-2);
}
.navbar-brand img { transition: transform .4s var(--ge-spring); }
.navbar-brand:hover img { transform: scale(1.06) rotate(-3deg); }

.navbar .navbar-nav .nav-link { border-radius: 8px; transition: all .25s var(--ge-ease); }
.navbar .navbar-nav .nav-link:hover { background: rgba(4, 99, 250, .06); }

.navbar a.btn.btn-primary { position: relative; overflow: hidden; }
.navbar a.btn.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.30) 50%, transparent 65%);
    transform: translateX(-125%);
    transition: transform .8s var(--ge-ease);
}
.navbar a.btn.btn-primary:hover::after { transform: translateX(125%); }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn {
    transition: transform .28s var(--ge-spring),
                box-shadow .3s var(--ge-ease),
                background-color .25s var(--ge-ease),
                color .25s var(--ge-ease),
                border-color .25s var(--ge-ease);
}
.btn.btn-primary:hover,
.btn.btn-outline-primary:hover,
.btn.btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: var(--ge-sh-3);
}
.btn.btn-primary:active { transform: translateY(-1px); }

.btn-square, .btn-sm-square, .btn-lg-square {
    transition: transform .3s var(--ge-spring), box-shadow .3s var(--ge-ease);
}
.btn-square:hover, .btn-sm-square:hover, .btn-lg-square:hover {
    transform: translateY(-3px) rotate(-5deg);
}

/* A soft ripple on click, drawn by gawagi-elevate.js. */
.ge-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    transform: scale(0);
    animation: ge-ripple .6s var(--ge-ease) forwards;
    pointer-events: none;
}
@keyframes ge-ripple {
    to { transform: scale(2.6); opacity: 0; }
}

a:focus-visible, .btn:focus-visible, .form-control:focus-visible, button:focus-visible {
    outline: 3px solid rgba(4, 99, 250, .38);
    outline-offset: 3px;
}

/* ==========================================================================
   5. HERO / HEADER BAND
   ========================================================================== */
.container-fluid.header.bg-primary { position: relative; overflow: hidden; }
.container-fluid.header.bg-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(760px 360px at 10% 12%, rgba(255,255,255,.12), transparent 62%),
        radial-gradient(600px 300px at 90% 85%, rgba(255,255,255,.08), transparent 60%);
    animation: ge-drift 22s var(--ge-ease) infinite alternate;
}
@keyframes ge-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(0, -16px, 0) scale(1.04); }
}

/* A faint medical cross watermark, pure CSS, behind the hero copy. */
.container-fluid.header.bg-primary::after {
    content: "";
    position: absolute;
    right: -50px; top: -50px;
    width: 260px; height: 260px;
    pointer-events: none;
    opacity: .07;
    background:
        linear-gradient(#fff, #fff) center/70px 210px no-repeat,
        linear-gradient(#fff, #fff) center/210px 70px no-repeat;
    animation: ge-spin 70s linear infinite;
}
@keyframes ge-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.mission-vision-slider .slide-item {
    transition: opacity .6s var(--ge-ease), transform .6s var(--ge-spring);
}
.slide-indicators .indicator {
    transition: width .35s var(--ge-spring), background-color .35s var(--ge-ease), opacity .3s;
    cursor: pointer;
}
.slide-indicators .indicator.active { width: 28px; }

.container-fluid.header .border-start { transition: transform .3s var(--ge-spring); }
.container-fluid.header .border-start:hover { transform: translateX(5px); }

.custom-carousel img { transition: transform 1.2s var(--ge-ease); }
.carousel-nav { transition: transform .3s var(--ge-spring), background-color .3s var(--ge-ease), box-shadow .3s; }
.carousel-nav:hover { transform: scale(1.14); box-shadow: var(--ge-sh-2); }

/* ==========================================================================
   6. PAGE HEADER on inner pages — readable text over the photo
   ========================================================================== */
.page-header { position: relative; overflow: hidden; }
.page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
                rgba(4, 99, 250, .86) 0%,
                rgba(4, 80, 204, .74) 55%,
                rgba(27, 44, 81, .62) 100%);
}
.page-header::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(700px 320px at 18% 22%, rgba(255,255,255,.14), transparent 64%);
    animation: ge-drift 26s var(--ge-ease) infinite alternate;
}
.page-header > * { position: relative; z-index: 1; }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.6); }

/* ==========================================================================
   7. CARDS — services, team, testimonials
   ========================================================================== */
.service-item, .team-item, .testimonial-item {
    position: relative;
    overflow: hidden;
    transition: transform .4s var(--ge-spring), box-shadow .4s var(--ge-ease), background-color .35s var(--ge-ease);
    will-change: transform;
}
.service-item::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--ge-blue), var(--ge-blue-400));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .45s var(--ge-spring);
}
.service-item:hover::before { transform: scaleY(1); }
.service-item:hover, .team-item:hover, .testimonial-item:hover {
    transform: translateY(-9px);
    box-shadow: var(--ge-sh-3);
    background-color: #fff !important;
}

/* The round icon badge fills with brand blue on hover. */
.service-item .rounded-circle {
    transition: transform .45s var(--ge-spring), background-color .35s var(--ge-ease), box-shadow .35s var(--ge-ease);
}
.service-item:hover .rounded-circle {
    transform: translateY(-4px) scale(1.08);
    background: var(--ge-blue) !important;
    box-shadow: 0 12px 26px rgba(4, 99, 250, .32);
}
.service-item .rounded-circle i { transition: color .3s var(--ge-ease); }
.service-item:hover .rounded-circle i { color: #fff !important; }

/* ==========================================================================
   8. IMAGES — crop cleanly, zoom slowly, arrive gently
   ========================================================================== */
.ge-frame {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: var(--ge-sh-2);
}
.ge-frame img { display: block; width: 100%; transition: transform 1s var(--ge-ease); }
.ge-frame:hover img { transform: scale(1.06); }
.ge-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 52%, rgba(4, 99, 250, .34) 100%);
    opacity: 0;
    transition: opacity .45s var(--ge-ease);
    pointer-events: none;
}
.ge-frame:hover::after { opacity: 1; }

.img-fluid.rounded, .about img { transition: transform .8s var(--ge-ease); }

/* Captions that fade up out of the frame. */
.ge-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 16px 18px;
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    transform: translateY(10px);
    opacity: 0;
    transition: transform .45s var(--ge-spring), opacity .45s var(--ge-ease);
}
.ge-frame:hover .ge-caption { transform: none; opacity: 1; }

/* ==========================================================================
   9. FACILITY GALLERY
   ========================================================================== */
.ge-gallery {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 190px;
}
.ge-gallery > .ge-frame { height: 100%; cursor: zoom-in; }
.ge-gallery > .ge-frame img { height: 100%; object-fit: cover; }
.ge-gallery > .ge-frame.is-wide { grid-column: span 2; }
.ge-gallery > .ge-frame.is-tall { grid-row: span 2; }

@media (max-width: 991.98px) {
    .ge-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
}
@media (max-width: 575.98px) {
    .ge-gallery { grid-template-columns: 1fr; grid-auto-rows: 200px; }
    .ge-gallery > .ge-frame.is-wide,
    .ge-gallery > .ge-frame.is-tall { grid-column: auto; grid-row: auto; }
}

/* Lightbox opened by gawagi-elevate.js */
.ge-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(11, 26, 56, .88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ge-ease), visibility 0s linear .3s;
}
.ge-lightbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.ge-lightbox img {
    max-width: min(1100px, 94vw);
    max-height: 86vh;
    border-radius: 14px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
    transform: scale(.94);
    transition: transform .4s var(--ge-spring);
}
.ge-lightbox.is-open img { transform: none; }
.ge-lightbox button {
    position: absolute;
    top: 20px; right: 24px;
    width: 44px; height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .25s var(--ge-ease), transform .25s var(--ge-spring);
}
.ge-lightbox button:hover { background: var(--ge-blue); transform: rotate(90deg); }

/* ==========================================================================
   10. BLUE FEATURE BAND
   ========================================================================== */
.bg-primary.overflow-hidden { position: relative; }
.bg-primary.overflow-hidden::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(700px 320px at 12% 14%, rgba(255,255,255,.11), transparent 62%),
        radial-gradient(560px 280px at 88% 82%, rgba(255,255,255,.07), transparent 60%);
    animation: ge-drift 24s var(--ge-ease) infinite alternate;
}

/* ==========================================================================
   11. STAT ROW
   ========================================================================== */
[data-toggle="counter-up"], .ge-count { font-variant-numeric: tabular-nums; }

.ge-stat {
    height: 100%;
    padding: 24px 18px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(4, 99, 250, .10);
    box-shadow: var(--ge-sh-1);
    text-align: center;
    transition: transform .35s var(--ge-spring), box-shadow .35s var(--ge-ease), border-color .3s;
}
.ge-stat:hover {
    transform: translateY(-7px);
    box-shadow: var(--ge-sh-2);
    border-color: rgba(4, 99, 250, .25);
}
.ge-stat i { font-size: 1.75rem; color: var(--ge-blue); }
.ge-stat strong {
    display: block;
    margin-top: 12px;
    font-size: 1.95rem;
    font-weight: 800;
    color: var(--ge-ink);
    line-height: 1.1;
}
.ge-stat span {
    display: block;
    margin-top: 4px;
    font-size: .82rem;
    font-weight: 600;
    color: #667085;
}

/* ==========================================================================
   12. FORMS
   ========================================================================== */
.form-control, .form-select {
    transition: border-color .25s var(--ge-ease), box-shadow .25s var(--ge-ease);
}
.form-control:focus, .form-select:focus {
    border-color: var(--ge-blue);
    box-shadow: 0 0 0 4px rgba(4, 99, 250, .13);
}

/* ==========================================================================
   13. FOOTER AND BACK TO TOP
   ========================================================================== */
.footer .btn.btn-link { transition: transform .28s var(--ge-spring), color .25s var(--ge-ease); }
.footer .btn.btn-link:hover { transform: translateX(6px); }

.footer .btn-social {
    transition: transform .35s var(--ge-spring), background-color .3s var(--ge-ease),
                border-color .3s var(--ge-ease), color .3s var(--ge-ease);
}
.footer .btn-social:hover {
    transform: translateY(-5px) scale(1.07);
    background: var(--ge-blue);
    border-color: var(--ge-blue);
    color: #fff;
}

.back-to-top { transition: transform .3s var(--ge-spring), box-shadow .3s var(--ge-ease); }
.back-to-top:hover { transform: translateY(-5px); box-shadow: var(--ge-sh-3); }

/* ==========================================================================
   14. REVEAL ON SCROLL
   ========================================================================== */
.ge-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .75s var(--ge-ease), transform .75s var(--ge-spring);
    will-change: opacity, transform;
}
.ge-reveal.is-visible { opacity: 1; transform: none; }

.ge-reveal[data-ge-delay="1"] { transition-delay: .08s; }
.ge-reveal[data-ge-delay="2"] { transition-delay: .16s; }
.ge-reveal[data-ge-delay="3"] { transition-delay: .24s; }
.ge-reveal[data-ge-delay="4"] { transition-delay: .32s; }
.ge-reveal[data-ge-delay="5"] { transition-delay: .40s; }

.ge-reveal-img {
    opacity: 0;
    transform: scale(1.05);
    transition: opacity .9s var(--ge-ease), transform 1.1s var(--ge-spring);
}
.ge-reveal-img.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   15. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .ge-reveal, .ge-reveal-img { opacity: 1; transform: none; }
    .text-center.mx-auto > h1::after { transform: scaleX(1); }
}

/* ==========================================================================
   16. LANGUAGE DROPDOWN — same pattern as the staff system
   Flags are fully percent-encoded; a raw '#' in a data URI truncates the SVG
   and the flag renders as an empty box.
   ========================================================================== */
.ge-flag {
    display: inline-block;
    width: 21px;
    height: 14px;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1px rgba(16, 24, 40, .14);
    flex-shrink: 0;
    vertical-align: -2px;
}
.ge-flag-gb { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2040%22%3E%3CclipPath%20id%3D%22c%22%3E%3Cpath%20d%3D%22M0%200h60v40H0z%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url%28%23c%29%22%3E%3Cpath%20fill%3D%22%23012169%22%20d%3D%22M0%200h60v40H0z%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-width%3D%228%22%20d%3D%22M0%200l60%2040M60%200L0%2040%22%2F%3E%3Cpath%20stroke%3D%22%23C8102E%22%20stroke-width%3D%224%22%20d%3D%22M0%200l60%2040M60%200L0%2040%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-width%3D%2213%22%20d%3D%22M30%200v40M0%2020h60%22%2F%3E%3Cpath%20stroke%3D%22%23C8102E%22%20stroke-width%3D%228%22%20d%3D%22M30%200v40M0%2020h60%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.ge-flag-tz { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2040%22%3E%3CclipPath%20id%3D%22t%22%3E%3Cpath%20d%3D%22M0%200h60v40H0z%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url%28%23t%29%22%3E%3Cpath%20fill%3D%22%231EB53A%22%20d%3D%22M0%200h60v40H0z%22%2F%3E%3Cpath%20fill%3D%22%2300A3DD%22%20d%3D%22M60%2040L0%2040%2060%200z%22%2F%3E%3Cpath%20stroke%3D%22%23FCD116%22%20stroke-width%3D%2214%22%20d%3D%22M0%2040L60%200%22%2F%3E%3Cpath%20stroke%3D%22%23000000%22%20stroke-width%3D%229%22%20d%3D%22M0%2040L60%200%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

.ge-lang { position: relative; display: inline-block; }

.ge-lang .ge-lang-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(16, 24, 40, .12);
    border-radius: 10px;
    background: #fff;
    color: var(--ge-ink, #1B2C51);
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
    transition: background-color .2s var(--ge-ease), border-color .2s var(--ge-ease);
}
.ge-lang .ge-lang-chip:hover { background: var(--ge-blue-050); border-color: rgba(4,99,250,.30); }
.ge-lang .ge-lang-code { letter-spacing: .05em; }
.ge-lang .ge-lang-caret { font-size: .62rem; opacity: .55; transition: transform .25s var(--ge-ease); }
.ge-lang.is-open .ge-lang-caret { transform: rotate(180deg); }

/* Opened by a few lines of our own script, so it never depends on which
   Bootstrap version a page happens to load. */
.ge-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1200;
    min-width: 214px;
    padding: 6px;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, .10);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(16, 24, 40, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s var(--ge-ease), transform .2s var(--ge-spring), visibility 0s linear .2s;
}
.ge-lang.is-open .ge-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}
.ge-lang-header {
    display: block;
    padding: 8px 10px 6px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #667085;
}
.ge-lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ge-ink, #1B2C51);
    text-decoration: none;
}
.ge-lang-item:hover { background: var(--ge-blue-050); color: var(--ge-blue); }
.ge-lang-item.is-active { background: var(--ge-blue-050); color: var(--ge-blue); }
.ge-lang-item .fa-check { margin-left: auto; }

@media (max-width: 820px) {
    .ge-lang { width: 100%; }
    .ge-lang .ge-lang-chip { width: 100%; justify-content: center; }
    .ge-lang-menu { left: 0; right: 0; }
}

/* ==========================================================================
   17. EYEBROW + ACCENT HEADINGS
   ========================================================================== */
.ge-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ge-blue);
}
.ge-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--ge-blue);
}
.ge-section-title { font-weight: 800; letter-spacing: -.025em; line-height: 1.15; position: relative; }
.ge-section-title em { font-style: italic; color: var(--ge-blue); }
.ge-lead { color: #667085; font-size: 1.03rem; line-height: 1.8; }

/* ==========================================================================
   18. NUMBERED REASON LIST
   ========================================================================== */
.ge-reasons { display: grid; gap: 22px; }
.ge-reason { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.ge-reason .ge-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--ge-blue-050);
    color: var(--ge-blue);
    font-weight: 800;
    font-size: 1.05rem;
    transition: transform .35s var(--ge-spring), background-color .3s var(--ge-ease), color .3s var(--ge-ease);
}
.ge-reason:hover .ge-num { background: var(--ge-blue); color: #fff; transform: translateY(-4px) scale(1.05); }
.ge-reason h5 { font-weight: 800; margin-bottom: 6px; }
.ge-reason p { color: #667085; margin-bottom: 0; line-height: 1.7; }

/* Experience badge that sits over a photo. */
.ge-badge {
    position: absolute;
    right: -14px;
    bottom: -14px;
    z-index: 3;
    padding: 20px 24px;
    border-radius: 18px;
    background: var(--ge-blue);
    color: #fff;
    box-shadow: 0 22px 46px rgba(4, 99, 250, .34);
    text-align: center;
}
.ge-badge strong { display: block; font-size: 2rem; font-weight: 800; line-height: 1; }
.ge-badge span { display: block; margin-top: 4px; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }

/* ==========================================================================
   19. TESTIMONIALS
   ========================================================================== */
.ge-quote {
    height: 100%;
    padding: 28px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, .07);
    box-shadow: var(--ge-sh-1);
    transition: transform .35s var(--ge-spring), box-shadow .35s var(--ge-ease), border-color .3s;
}
.ge-quote:hover { transform: translateY(-7px); box-shadow: var(--ge-sh-2); border-color: rgba(4, 99, 250, .22); }
.ge-quote > i { color: rgba(4, 99, 250, .25); font-size: 1.6rem; }
.ge-quote p { margin: 14px 0 20px; color: #344054; line-height: 1.75; }
.ge-quote .ge-who { display: flex; align-items: center; gap: 12px; }
.ge-quote .ge-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--ge-blue);
    color: #fff;
    font-weight: 800;
    font-size: .85rem;
    flex-shrink: 0;
}
.ge-quote .ge-who strong { display: block; font-size: .92rem; }
.ge-quote .ge-who span { display: block; font-size: .78rem; color: #667085; }
.ge-stars { color: #F5A524; font-size: .82rem; letter-spacing: 2px; }

/* ==========================================================================
   20. FAQ ACCORDION
   ========================================================================== */
.ge-faq { border: 1px solid rgba(16, 24, 40, .09); border-radius: 16px; overflow: hidden; background: #fff; }
.ge-faq + .ge-faq { margin-top: 14px; }
.ge-faq > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 20px 22px;
    border: 0;
    background: #fff;
    text-align: left;
    font-weight: 700;
    color: var(--ge-ink);
    cursor: pointer;
    transition: background-color .25s var(--ge-ease), color .25s var(--ge-ease);
}
.ge-faq > button:hover { background: var(--ge-blue-050); color: var(--ge-blue); }
.ge-faq > button i { color: var(--ge-blue); transition: transform .35s var(--ge-spring); flex-shrink: 0; }
.ge-faq.is-open > button { background: var(--ge-blue-050); color: var(--ge-blue); }
.ge-faq.is-open > button i { transform: rotate(45deg); }
.ge-faq .ge-answer { max-height: 0; overflow: hidden; transition: max-height .4s var(--ge-ease); }
.ge-faq .ge-answer > div { padding: 0 22px 22px; color: #667085; line-height: 1.78; }

/* ==========================================================================
   21. CTA BAND
   ========================================================================== */
.ge-cta {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 56px 44px;
    background: linear-gradient(130deg, var(--ge-blue) 0%, var(--ge-blue-700) 62%, #0A3A96 100%);
    color: #fff;
}
.ge-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(620px 300px at 10% 15%, rgba(255,255,255,.14), transparent 62%),
        radial-gradient(520px 260px at 92% 88%, rgba(255,255,255,.09), transparent 60%);
    animation: ge-drift 20s var(--ge-ease) infinite alternate;
}
.ge-cta > * { position: relative; z-index: 1; }
.ge-cta h2 { font-weight: 800; letter-spacing: -.025em; }
.ge-cta p { opacity: .92; margin-bottom: 0; }

/* ==========================================================================
   22. TRUST MARQUEE
   ========================================================================== */
.ge-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ge-marquee > div { display: flex; gap: 46px; width: max-content; animation: ge-marquee 32s linear infinite; }
.ge-marquee:hover > div { animation-play-state: paused; }
.ge-marquee span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: .92rem;
    color: #667085;
    white-space: nowrap;
}
.ge-marquee span i { color: var(--ge-blue); }
@keyframes ge-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ==========================================================================
   23. AUTH PAGES
   ========================================================================== */
.ge-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--ge-blue) 0%, var(--ge-blue-700) 55%, #072C73 100%);
}
.ge-auth::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(760px 360px at 12% 14%, rgba(255,255,255,.13), transparent 62%),
        radial-gradient(620px 300px at 88% 86%, rgba(255,255,255,.09), transparent 60%);
    animation: ge-drift 24s var(--ge-ease) infinite alternate;
}
.ge-auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    padding: 40px 44px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 34px 80px rgba(3, 33, 92, .34);
    animation: ge-rise .7s var(--ge-spring) both;
}
@keyframes ge-rise {
    from { opacity: 0; transform: translateY(24px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
.ge-auth-card .ge-auth-logo { width: 76px; height: 76px; object-fit: contain; }
.ge-auth-card h1 { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.ge-auth-card .form-control { padding: 12px 14px; border-radius: 11px; }
.ge-auth-card .btn { padding: 12px; border-radius: 11px; font-weight: 700; }
.ge-auth-back { position: relative; z-index: 1; }
.ge-auth-back a { color: rgba(255,255,255,.92); font-weight: 600; text-decoration: none; }
.ge-auth-back a:hover { color: #fff; text-decoration: underline; }

/* ==========================================================================
   24. FEEDBACK PAGES
   The forms sit on plain grey cards. This lifts them onto proper surfaces
   without moving a single field.
   ========================================================================== */
.card.border-0.bg-light {
    background: #fff !important;
    border: 1px solid rgba(16, 24, 40, .08) !important;
    border-radius: 18px;
    box-shadow: var(--ge-sh-1);
    transition: transform .35s var(--ge-spring), box-shadow .35s var(--ge-ease), border-color .3s;
}
.card.border-0.bg-light:hover {
    box-shadow: var(--ge-sh-2);
    border-color: rgba(4, 99, 250, .20) !important;
}
.card.border-0.bg-light .card-body { padding: 26px; }

/* Rating radios read as pressable chips rather than bare dots. */
.form-check-inline .form-check-input { cursor: pointer; }
.form-check-input:checked { background-color: var(--ge-blue); border-color: var(--ge-blue); }
.form-check-input:focus { border-color: var(--ge-blue); box-shadow: 0 0 0 4px rgba(4, 99, 250, .14); }
.form-check-label { cursor: pointer; }

/* The star row on feedback pages. */
.rating-star, .star-rating label { transition: transform .25s var(--ge-spring), color .25s var(--ge-ease); }
.rating-star:hover, .star-rating label:hover { transform: scale(1.22); }

textarea.form-control { min-height: 130px; }

/* Buttons on the feedback forms match the rest of the site. */
.language-form .btn, #quickFeedbackForm .btn { border-radius: 11px; font-weight: 700; }

/* The unit beside a counted number sits smaller and lighter, so a tile reading
   "7 days" is not twice the height of one reading "6". */
.ge-stat strong .ge-unit {
    font-size: .92rem;
    font-weight: 700;
    color: #667085;
    margin-left: 6px;
    letter-spacing: .01em;
}
.ge-stat strong { display: flex; align-items: baseline; justify-content: center; gap: 2px; }

/* ==========================================================================
   25. QUICK FEEDBACK
   The language selector was rendered by Django's `as_p` inside a flex row,
   which stacked the label, the radio and its text on top of each other. It is
   now two plain buttons.
   ========================================================================== */
.qf-lang {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, .08);
    border-radius: 16px;
    box-shadow: var(--ge-sh-1);
}
.qf-lang-label {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #667085;
    margin-right: 4px;
}
.qf-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid rgba(16, 24, 40, .12);
    font-weight: 700;
    font-size: .88rem;
    color: var(--ge-ink);
    text-decoration: none;
    transition: all .22s var(--ge-ease);
}
.qf-lang-btn:hover { border-color: rgba(4, 99, 250, .35); background: var(--ge-blue-050); }
.qf-lang-btn.is-active {
    background: var(--ge-blue);
    border-color: var(--ge-blue);
    color: #fff;
}

/* Other ways to send feedback */
.qf-channels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.qf-channel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 26px 18px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, .08);
    box-shadow: var(--ge-sh-1);
    text-decoration: none;
    color: var(--ge-ink);
    transition: transform .32s var(--ge-spring), box-shadow .32s var(--ge-ease), border-color .3s;
}
.qf-channel:hover {
    transform: translateY(-7px);
    box-shadow: var(--ge-sh-2);
    border-color: rgba(4, 99, 250, .25);
    color: var(--ge-ink);
}
.qf-channel i {
    font-size: 1.6rem;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 8px;
    transition: transform .35s var(--ge-spring);
}
.qf-channel:hover i { transform: scale(1.1); }
.qf-channel strong { font-size: .98rem; font-weight: 800; }
.qf-channel span { font-size: .86rem; color: #344054; }
.qf-channel small { font-size: .76rem; color: #667085; }

.qf-channel-call i   { background: rgba(4, 99, 250, .10);  color: var(--ge-blue); }
.qf-channel-sms i    { background: rgba(245, 165, 36, .14); color: #B54708; }
.qf-channel-wa i     { background: rgba(37, 211, 102, .14); color: #128C7E; }
.qf-channel-detail i { background: rgba(27, 44, 81, .09);   color: var(--ge-ink); }

@media (max-width: 991.98px) { .qf-channels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .qf-channels { grid-template-columns: 1fr; } }

/* ==========================================================================
   26. RESPONSIVENESS — the public site on a small phone
   ========================================================================== */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

@media (max-width: 767.98px) {
    .display-1 { font-size: 2.4rem; }
    .display-2 { font-size: 2.1rem; }
    .display-3 { font-size: 1.9rem; }
    .display-4 { font-size: 1.65rem; }
    .display-5 { font-size: 1.45rem; }
    .display-6 { font-size: 1.25rem; }

    .container-xxl { padding-left: 16px; padding-right: 16px; }
    .py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

    .ge-section-title { font-size: 1.45rem; }
    .ge-reason { grid-template-columns: 46px 1fr; gap: 14px; }
    .ge-reason .ge-num { width: 46px; height: 46px; font-size: .92rem; border-radius: 13px; }

    .ge-cta { padding: 34px 22px; border-radius: 18px; }
    .ge-cta h2 { font-size: 1.4rem; }
    .ge-cta .text-lg-end { text-align: left !important; }

    .ge-badge { right: 8px; bottom: -10px; padding: 14px 18px; }
    .ge-badge strong { font-size: 1.5rem; }

    .ge-stat { padding: 18px 12px; }
    .ge-stat strong { font-size: 1.5rem; }
    .ge-stat i { font-size: 1.4rem; }

    .ge-quote { padding: 20px; }
    .ge-faq > button { padding: 16px; font-size: .94rem; }
    .ge-faq .ge-answer > div { padding: 0 16px 18px; }

    .ge-marquee > div { gap: 28px; }
    .ge-lightbox { padding: 12px; }
    .ge-lightbox button { top: 10px; right: 12px; }
}

@media (max-width: 400px) {
    .display-1, .display-2, .display-3 { font-size: 1.75rem; }
    .btn { font-size: .86rem; padding-left: 16px; padding-right: 16px; }
    .qf-lang { padding: 11px; }
    .qf-lang-btn { flex: 1 1 auto; justify-content: center; }
    .ge-gallery { grid-auto-rows: 170px; }
}

/* Installed on a phone: keep content clear of the notch and the home bar. */
@media (display-mode: standalone) {
    .site-header { padding-top: env(safe-area-inset-top, 0px); }
    body { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* The language chip sits on the same row as the menu links, aligned to them,
   rather than dropping below or floating at a different height. */
.site-menu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.site-menu .ge-lang { display: inline-flex; align-items: center; margin-left: 6px; }
.site-menu .ge-lang .ge-lang-chip { min-height: 38px; }
.site-header .header-inner { align-items: center; }

/* ==========================================================================
   27. DETAILED FEEDBACK FORM
   It was a wall of identical radio rows on grey cards. One question per card,
   a face scale, and a progress bar so the length is never a surprise.
   ========================================================================== */
.fb-progress {
    position: sticky;
    top: 86px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 18px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(16, 24, 40, .08);
    border-radius: 14px;
    box-shadow: var(--ge-sh-1);
}
.fb-progress-bar {
    flex: 1;
    height: 7px;
    border-radius: 99px;
    background: rgba(4, 99, 250, .12);
    overflow: hidden;
}
.fb-progress-bar > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--ge-blue), var(--ge-blue-400));
    transition: width .35s var(--ge-spring);
}
.fb-progress small { white-space: nowrap; font-weight: 700; }

.fb-legend {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 22px;
    padding: 0 4px;
    font-size: .84rem;
    font-weight: 600;
    color: #667085;
}
.fb-legend i { margin-right: 6px; font-size: 1rem; }

.fb-question {
    padding: 22px;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, .08);
    border-radius: 18px;
    box-shadow: var(--ge-sh-1);
    transition: border-color .25s var(--ge-ease), box-shadow .3s var(--ge-ease), transform .3s var(--ge-spring);
}
.fb-question:hover { box-shadow: var(--ge-sh-2); }
.fb-question.is-answered { border-color: rgba(18, 183, 106, .4); }
.fb-question.has-error { border-color: rgba(240, 68, 56, .5); }

.fb-question-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.fb-number {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--ge-blue-050);
    color: var(--ge-blue);
    font-weight: 800;
    font-size: .84rem;
    transition: background-color .25s var(--ge-ease), color .25s var(--ge-ease);
}
.fb-question.is-answered .fb-number { background: #12B76A; color: #fff; }
.fb-label { font-weight: 700; color: var(--ge-ink); line-height: 1.5; }

/* The scale reads like a survey card: the number on top, a short word beneath.
   The old version printed the full choice label ("4 - Somewhat Below Average")
   inside a narrow box, so the text wrapped to three lines and the row lost its
   shape. */
.fb-scale { display: grid; gap: 8px; }
.fb-scale-5  { grid-template-columns: repeat(5, 1fr); }
.fb-scale-10 { grid-template-columns: repeat(10, 1fr); }

.fb-dot { position: relative; cursor: pointer; margin: 0; }
.fb-dot input { position: absolute; opacity: 0; width: 0; height: 0; }

.fb-dot > .fb-dot-num,
.fb-dot > .fb-dot-text { display: block; text-align: center; }

.fb-dot > .fb-dot-num {
    height: 46px;
    line-height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(16, 24, 40, .14);
    background: #fff;
    font-weight: 800;
    font-size: 1rem;
    color: #475467;
    transition: all .2s var(--ge-ease);
}
.fb-dot > .fb-dot-text {
    margin-top: 6px;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.25;
    color: #98A2B3;
    min-height: 2.5em;
}
.fb-dot:hover > .fb-dot-num {
    border-color: var(--ge-blue);
    color: var(--ge-blue);
    transform: translateY(-2px);
}
.fb-dot input:checked + .fb-dot-face + .fb-dot-num,
.fb-dot input:checked + .fb-dot-num {
    background: var(--ge-blue);
    border-color: var(--ge-blue);
    color: #fff;
    box-shadow: 0 8px 18px rgba(4, 99, 250, .28);
}
.fb-dot input:checked ~ .fb-dot-text { color: var(--ge-ink); font-weight: 700; }
.fb-dot input:focus-visible + * { outline: 3px solid rgba(4, 99, 250, .35); outline-offset: 2px; }

/* Low scores red, middling amber, high green, on both scales. */
.fb-scale-5 .fb-dot:nth-child(1) input:checked ~ .fb-dot-num,
.fb-scale-5 .fb-dot:nth-child(2) input:checked ~ .fb-dot-num,
.fb-scale-10 .fb-dot:nth-child(-n+3) input:checked ~ .fb-dot-num {
    background: #F04438; border-color: #F04438; box-shadow: 0 8px 18px rgba(240,68,56,.26);
}
.fb-scale-5 .fb-dot:nth-child(3) input:checked ~ .fb-dot-num,
.fb-scale-10 .fb-dot:nth-child(n+4):nth-child(-n+6) input:checked ~ .fb-dot-num {
    background: #F5A524; border-color: #F5A524; box-shadow: 0 8px 18px rgba(245,165,36,.26);
}
.fb-scale-5 .fb-dot:nth-child(n+4) input:checked ~ .fb-dot-num,
.fb-scale-10 .fb-dot:nth-child(n+8) input:checked ~ .fb-dot-num {
    background: #12B76A; border-color: #12B76A; box-shadow: 0 8px 18px rgba(18,183,106,.26);
}

/* A ten-point row cannot fit a phone, so it wraps into two rows of five. */
@media (max-width: 767.98px) {
    .fb-scale-10 { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 420px) {
    .fb-scale-5, .fb-scale-10 { grid-template-columns: repeat(5, 1fr); gap: 6px; }
    .fb-dot > .fb-dot-num { height: 40px; line-height: 40px; font-size: .92rem; }
    .fb-dot > .fb-dot-text { font-size: .6rem; min-height: 3em; }
}

.fb-error { margin-top: 10px; font-size: .85rem; color: #B42318; font-weight: 600; }

.fb-submit { text-align: center; padding-top: 10px; }
.fb-quick-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--ge-blue);
    text-decoration: none;
}
.fb-quick-link i { transition: transform .28s var(--ge-spring); }
.fb-quick-link:hover i { transform: translateX(5px); }

@media (max-width: 575.98px) {
    .fb-progress { top: 72px; padding: 10px 12px; }
    .fb-question { padding: 16px; border-radius: 14px; }
    .fb-dot { min-width: 38px; }
    .fb-dot > span { height: 40px; font-size: .86rem; }
    .fb-legend { font-size: .76rem; }
}

/* Why-choose tiles: an icon above the number, each in its own colour, so the
   block reads as four distinct reasons rather than a numbered list. */
.ge-reason .ge-num {
    flex-direction: column;
    gap: 2px;
    width: 62px;
    height: 62px;
}
.ge-reason .ge-num i { font-size: 1.05rem; }
.ge-reason .ge-num b { font-size: .7rem; letter-spacing: .06em; opacity: .8; }
.ge-num-blue   { background: rgba(4, 99, 250, .12) !important;  color: #0463FA !important; }
.ge-num-green  { background: rgba(18, 183, 106, .13) !important; color: #12B76A !important; }
.ge-num-amber  { background: rgba(245, 165, 36, .16) !important; color: #B54708 !important; }
.ge-num-purple { background: rgba(122, 90, 248, .13) !important; color: #7A5AF8 !important; }
.ge-reason:hover .ge-num-blue   { background: #0463FA !important; color: #fff !important; }
.ge-reason:hover .ge-num-green  { background: #12B76A !important; color: #fff !important; }
.ge-reason:hover .ge-num-amber  { background: #F5A524 !important; color: #fff !important; }
.ge-reason:hover .ge-num-purple { background: #7A5AF8 !important; color: #fff !important; }

/* The stat tiles take the same palette instead of four identical blues. */
.ge-stat:nth-child(1) i, .col-6:nth-child(1) .ge-stat i { color: #0463FA; }
.row > [class*="col"]:nth-child(2) .ge-stat i { color: #12B76A; }
.row > [class*="col"]:nth-child(3) .ge-stat i { color: #F5A524; }
.row > [class*="col"]:nth-child(4) .ge-stat i { color: #7A5AF8; }

/* Service tiles cycle the same colours on their icon badges. */
.service-item:nth-child(4n+2):hover .rounded-circle { background: #12B76A !important; box-shadow: 0 12px 26px rgba(18,183,106,.3); }
.service-item:nth-child(4n+3):hover .rounded-circle { background: #F5A524 !important; box-shadow: 0 12px 26px rgba(245,165,36,.3); }
.service-item:nth-child(4n+4):hover .rounded-circle { background: #7A5AF8 !important; box-shadow: 0 12px 26px rgba(122,90,248,.3); }

/* The language chip belongs on the same baseline as HOME / ABOUT / SERVICE,
   not raised above them. This is the Bootstrap navbar on the public site. */
.navbar .navbar-nav { align-items: center; }
.navbar .navbar-nav .ge-lang { display: inline-flex; align-items: center; margin-left: 10px; }
.navbar .navbar-nav .ge-lang .ge-lang-chip {
    min-height: 40px;
    padding: 8px 14px;
    font-size: .84rem;
}
.navbar .navbar-nav .nav-link { display: inline-flex; align-items: center; min-height: 40px; }

@media (max-width: 991.98px) {
    .navbar .navbar-nav { align-items: stretch; }
    .navbar .navbar-nav .ge-lang { margin: 10px 0 0; width: 100%; }
    .navbar .navbar-nav .ge-lang .ge-lang-chip { width: 100%; justify-content: center; }
}

/* Login card: as wide as it was when it carried the language row, and the
   "back to the website" link sits above the card rather than trailing below. */
.ge-auth-card { max-width: 560px; }
.ge-auth-back { margin-bottom: 20px; margin-top: 0 !important; }

/* ==========================================================================
   28. RICHER SURFACE — beyond the original site
   The live site is clean but flat: white bands, one blue, and WOW fades. These
   add depth without changing a single word or colour token.
   ========================================================================== */

/* Alternating bands get a faint tint and a hairline, so sections separate
   without a hard rule across the page. */
.container-xxl.py-5:nth-of-type(even) { position: relative; }
.container-xxl.py-5 + .container-xxl.py-5::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    width: 72px; height: 2px;
    margin-left: -36px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(4, 99, 250, .35), transparent);
}

/* A soft blue glow sits behind every section heading. */
.text-center.mx-auto > h1 { position: relative; }
.text-center.mx-auto > h1::before {
    content: "";
    position: absolute;
    top: -26px; left: 50%;
    width: 190px; height: 90px;
    margin-left: -95px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(4, 99, 250, .10), transparent);
    z-index: -1;
    pointer-events: none;
}

/* Hero photos drift very slowly, the way a documentary still does. */
.header-carousel .owl-carousel-item img,
.custom-carousel img {
    animation: ge-kenburns 24s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes ge-kenburns {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to   { transform: scale(1.07) translate3d(-1.2%, -1%, 0); }
}

/* Service tiles get a light sweep as the cursor arrives. */
.service-item::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(4, 99, 250, .07) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: transform .9s var(--ge-ease);
}
.service-item:hover::after { transform: translateX(120%); }

/* Buttons in the blue bands invert cleanly rather than going grey. */
.bg-primary .btn-light:hover,
.ge-cta .btn-light:hover { background: #fff; color: var(--ge-blue); }
.ge-cta .btn-outline-light:hover { background: rgba(255,255,255,.16); color: #fff; }

/* The footer lifts out of flat dark with a brand rule and warmer links. */
.footer { position: relative; }
.footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ge-blue), var(--ge-blue-400), var(--ge-blue));
}
.footer h5 { position: relative; padding-bottom: 10px; }
.footer h5::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 34px; height: 2px;
    border-radius: 2px;
    background: var(--ge-blue-400);
}

/* Back-to-top becomes a progress ring that fills as the page is read. */
.back-to-top { position: fixed; }

/* Anything that scrolls into view and is not WOW-managed still animates. */
.wow { visibility: hidden; }
.wow.animated { visibility: visible; }

/* Cards raise their photo slightly as the whole card lifts, so the two move
   together rather than the image sliding inside a static frame. */
.service-item:hover img,
.team-item:hover img { transform: scale(1.06) translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .header-carousel .owl-carousel-item img,
    .custom-carousel img { animation: none; }
    .wow { visibility: visible !important; }
}

/* The reading-progress ring drawn inside the back-to-top button. */
.back-to-top { position: fixed; overflow: visible; }
.back-to-top .ge-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    z-index: -1;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
    pointer-events: none;
}

/* The Why Choose Us photograph stays natural and still beside the blue band;
   its frame preserves a useful crop at every responsive width. */
.feature .position-relative > img[src*="why-choose-us"] {
    object-fit: cover;
    object-position: center;
    animation: none;
    transition: transform 1.1s var(--ge-ease);
}
.feature .position-relative:hover > img[src*="why-choose-us"] { transform: scale(1.04); }

.ge-frame img[src*="why-choose-us"] { aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 991.98px) {
    .feature .position-relative > img[src*="why-choose-us"] { position: static !important; height: 320px; }
}