/* ==========================================================================
   Guidors — homepage styles
   Loaded AFTER template.css and style-over.php. Never edit template.css.
   Everything here is prefixed .g- so nothing leaks into other pages.
   ========================================================================== */

:root{
    /* --primary / --primary-rgb are emitted by header.php from settings()->site_color.
       The fallbacks keep this file correct if that patch isn't applied yet. */
    --g-primary:      var(--primary, #006c7c);
    --g-primary-rgb:  var(--primary-rgb, 0, 108, 124);
    --g-accent:       #10a4ac;
    --g-deep:         #005a68;
    --g-ink:          #26282a;
    --g-muted:        #6c757d;
    --g-surface:      #f4f8f9;
    --g-line:         rgba(var(--g-primary-rgb), .14);
    --g-soft:         rgba(var(--g-primary-rgb), .07);
    --g-shadow:       0 4px 19px rgba(142, 151, 158, .15);
    --g-shadow-lift:  0 18px 44px rgba(var(--g-primary-rgb), .16);
    --g-card:         #fff;
    --g-ease:         cubic-bezier(.22, .61, .36, 1);
}

body.dark-mode{
    --g-ink:      #e8eced;
    --g-muted:    #9aa5a8;
    --g-surface:  #12191b;
    --g-card:     #172023;
    --g-line:     rgba(255,255,255,.10);
    --g-soft:     rgba(var(--g-primary-rgb), .16);
    --g-shadow:   0 4px 19px rgba(0,0,0,.4);
}


/* --------------------------------------------------------------------------
   1. Theme corrections
   template.css hardcodes the old blue in 108 places and green in the tabs.
   style-over.php recolours .btn-primary / .text-primary / .bg-primary but
   not the -soft variants, so those are fixed here.
   -------------------------------------------------------------------------- */

.bg-primary-soft{
    background-color: var(--g-soft) !important;
    color: var(--g-primary) !important;
}

.badge-primary-soft{
    background-color: var(--g-soft) !important;
    color: var(--g-primary) !important;
}

/* BUG FIX: template.css:17866 turns tile text #ddd on hover while
   template.css:18072 turns the tile background #fcfcfc — text vanished.
   Feature tiles keep their labels readable in brand color. */
.template-box:hover .template-box-text{
    color: var(--g-primary) !important;
}
.template-box:hover .template-box-title{
    color: var(--g-primary) !important;
}

/* .badge-square, .shadow-sms, .lift-sms, .bg-lights, .bg-grays and
   .navTopRight are referenced by the views but defined nowhere in
   template.css. Defining them here so the markup means something. */
.badge-square{ border-radius: 4px; padding: .45rem .7rem; font-weight: 500; letter-spacing: .04em; }
.shadow-sms{ box-shadow: var(--g-shadow); }
.lift-sms{ transition: transform 150ms linear; will-change: transform; }
.lift-sms:hover{ transform: translate3d(0, -3px, 0); }
.bg-lights{ background-color: var(--g-surface) !important; }
.bg-grays{ background-color: var(--g-surface) !important; }


/* --------------------------------------------------------------------------
   2. Type
   The face comes from settings()->site_font. The personality comes from
   size, weight and tracking — the one axis the brief leaves free.
   -------------------------------------------------------------------------- */

.g-display{
    font-weight: 700;
    letter-spacing: -.028em;
    line-height: 1.08;
    color: var(--g-ink);
    font-size: calc(2rem + 1.9vw);
}
@media (min-width: 1200px){ .g-display{ font-size: 3.6rem; } }

.g-display .g-em{
    color: var(--g-primary);
    position: relative;
    white-space: nowrap;
}

/* The clasp: the underline is the logo's arc, drawn under the emphasised word */
.g-display .g-em::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -.12em;
    height: .34em;
    background: no-repeat center/100% 100%
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 15C40 4 160 4 198 15' fill='none' stroke='%2310a4ac' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
    opacity: .85;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 700ms var(--g-ease) 260ms;
}
[dir="rtl"] .g-display .g-em::after{ transform-origin: right center; }
.g-in .g-em::after,
.g-hero__copy.g-in .g-em::after{ transform: scaleX(1); }

.g-lead{
    font-size: 1.15rem;
    line-height: 1.65;
    color: var(--g-muted);
}

.g-eyebrow{
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--g-primary);
    background: var(--g-soft);
    border-radius: 4px;
    padding: .4rem .7rem;
}

.g-section-title{
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--g-ink);
    font-size: calc(1.5rem + .7vw);
}


/* --------------------------------------------------------------------------
   3. Hero
   Replaces .bsection — hero-bg.png is gone, the arc motif takes its place.
   -------------------------------------------------------------------------- */

.g-hero{
    position: relative;
    z-index: 5;
    overflow: visible;
    background: linear-gradient(180deg, var(--g-surface) 0%, transparent 62%);
}

.g-hero__arc{
    position: absolute;
    top: -14%;
    left: 0;
    width: 100%;
    max-width: none;
    transform: none;
    pointer-events: none;
    z-index: 0;
    opacity: .5;
}
.g-hero__arc path{
    fill: none;
    stroke: var(--g-primary);
    stroke-width: 1.2;
    opacity: .22;
}
.g-hero__arc .g-arc-fill{
    fill: var(--g-soft);
    stroke: none;
}

.g-hero > .container{ position: relative; z-index: 1; }


/* Tabs — sliding indicator instead of the green/blue hardcoded borders */
.g-tabs-wrap{
    position: relative;
    margin-bottom: 2.5rem;
}
.g-tabs.nav-tabs{
    border-bottom: 1px solid var(--g-line);
    margin-bottom: 0;
}
.g-tabs .nav-item{ margin-left: 0; }
.g-tabs .nav-link{
    border: 0 !important;
    background: transparent;
    color: var(--g-muted);
    font-weight: 600;
    font-size: 15px;
    padding: .6rem 0;
    margin-right: 2rem;
    transition: color 200ms var(--g-ease);
}
[dir="rtl"] .g-tabs .nav-link{ margin-right: 0; margin-left: 2rem; }
.g-tabs .nav-link:hover{ color: var(--g-ink); }
.g-tabs .nav-link.active,
.g-tabs .nav-link.show{
    color: var(--g-primary) !important;
    border: 0 !important;
    background: transparent !important;
}
.g-tabs__ink{
    position: absolute;
    bottom: -1px;
    height: 2px;
    background: var(--g-primary);
    border-radius: 2px;
    transition: transform 420ms var(--g-ease), width 420ms var(--g-ease);
    will-change: transform, width;
}


/* --------------------------------------------------------------------------
   4. Signature element — the booking moment
   A live card that plays one real interaction: pick a day, take a slot,
   confirm. Motion that demonstrates the product instead of decorating it.
   -------------------------------------------------------------------------- */

.g-stage{
    position: relative;
    padding: 1rem 0 2rem;
    min-height: 380px;
}

.g-booking{
    position: relative;
    z-index: 3;
    background: var(--g-card);
    border: 1px solid var(--g-line);
    border-radius: 16px;
    box-shadow: var(--g-shadow-lift);
    padding: 1.25rem;
    max-width: 360px;
    margin: 0 auto;
}

.g-booking__head{
    display: flex;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--g-line);
}

.g-booking__meta{ min-width: 0; }
[dir="ltr"] .g-booking__meta{ margin-left: .75rem; }
[dir="rtl"] .g-booking__meta{ margin-right: .75rem; }

.g-booking__name{
    font-weight: 600;
    font-size: 15px;
    color: var(--g-ink);
    margin: 0;
    display: flex;
    align-items: center;
}
.g-booking__role{
    font-size: 13px;
    color: var(--g-muted);
    margin: 0;
}

.g-verified{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    margin-left: .35rem;
    border-radius: 50%;
    background: var(--g-primary);
    color: #fff;
    font-size: 9px;
    flex: 0 0 auto;
}
[dir="rtl"] .g-verified{ margin-left: 0; margin-right: .35rem; }

.g-booking__days{
    display: flex;
    justify-content: space-between;
    padding: 1rem 0 .75rem;
}
.g-day{
    flex: 1 1 0;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--g-muted);
    padding: .4rem .1rem;
    border-radius: 8px;
    transition: background-color 260ms var(--g-ease), color 260ms var(--g-ease);
}
.g-day small{ display: block; font-size: 10px; font-weight: 500; opacity: .7; }
.g-day.is-on{
    background: var(--g-soft);
    color: var(--g-primary);
}

.g-slots{ display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: .5rem; }
.g-slot{
    position: relative;
    overflow: hidden;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--g-ink);
    background: var(--g-surface);
    border: 1px solid var(--g-line);
    border-radius: 8px;
    padding: .55rem .2rem;
    transition: color 240ms var(--g-ease), border-color 240ms var(--g-ease);
}
.g-slot::before{
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 100%;
    background: var(--g-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 480ms var(--g-ease);
}
[dir="rtl"] .g-slot::before{ transform-origin: right center; }
.g-slot span{ position: relative; z-index: 1; }
.g-slot.is-taken{ color: #fff; border-color: var(--g-primary); }
.g-slot.is-taken::before{ transform: scaleX(1); }

.g-booking__foot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--g-line);
}
.g-booking__price{ font-size: 13px; color: var(--g-muted); margin: 0; }
.g-booking__price b{ color: var(--g-ink); font-size: 15px; }

.g-booking__cta{
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    padding: .45rem .95rem;
    background: var(--g-primary);
    color: #fff;
    border: 0;
    transition: background-color 200ms var(--g-ease), transform 200ms var(--g-ease);
}
.g-booking__cta:hover{ background: var(--g-deep); color: #fff; transform: translateY(-1px); }

/* Confirmation overlay — the payoff of the sequence */
.g-confirm{
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translate(-50%, 10px);
    display: inline-flex;
    align-items: center;
    background: var(--g-ink);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    border-radius: 999px;
    padding: .45rem .9rem;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms var(--g-ease), transform 300ms var(--g-ease);
}
.g-confirm i{ margin-right: .4rem; color: var(--g-accent); }
[dir="rtl"] .g-confirm i{ margin-right: 0; margin-left: .4rem; }
.g-confirm.is-on{ opacity: 1; transform: translate(-50%, 0); }


/* --------------------------------------------------------------------------
   5. Avatar arc
   Guidors sitting on the logo's curve. Uses the theme's own
   .home-image-sm / -md / -lg sizes so nothing new is invented.
   -------------------------------------------------------------------------- */

.g-arc{
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.g-arc__line{
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
}
.g-arc__line path{
    fill: none;
    stroke: var(--g-accent);
    stroke-width: 1;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    opacity: .45;
}
.g-in .g-arc__line path{
    transition: stroke-dashoffset 1600ms var(--g-ease) 300ms;
    stroke-dashoffset: 0;
}

.g-avatar{
    position: absolute;
    border-radius: 50%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: 0 8px 22px rgba(var(--g-primary-rgb), .18);
    border: 3px solid var(--g-card);
    opacity: 0;
    transform: scale(.7);
}
.g-in .g-avatar{
    animation: g-pop 620ms var(--g-ease) forwards;
    animation-delay: calc(var(--g-i, 0) * 110ms + 200ms);
}
@keyframes g-pop{ to{ opacity: 1; transform: scale(1); } }

/* Placeholder identity — a system mark, never a face that pretends to be real.
   Swaps itself out the moment get_random_mentors() returns images. */
.g-avatar--ph{
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, var(--g-primary) 0%, var(--g-accent) 100%);
    color: #fff;
}
.g-avatar--ph i{ font-size: 22px; opacity: .92; line-height: 1; }
.home-image-lg.g-avatar--ph i{ font-size: 46px; }
.home-image-md.g-avatar--ph i{ font-size: 32px; }
.home-image-sm.g-avatar--ph i{ font-size: 24px; }
.g-booking__face.g-avatar--ph i{ font-size: 20px; }

.g-avatar--1{ top: 4%;  left: 4%;  }
.g-avatar--2{ top: 30%; left: -4%; }
.g-avatar--3{ top: 62%; left: 10%; }
.g-avatar--4{ top: 8%;  right: 6%; }
.g-avatar--5{ top: 58%; right: 0;  }

@media (max-width: 991.98px){
    .g-stage{ min-height: 0; padding-top: 2.5rem; }
    .g-arc{ display: none; }
    .g-booking{ max-width: 340px; }
}


/* --------------------------------------------------------------------------
   6. Trust strip — real counts from the controller, counted up once
   -------------------------------------------------------------------------- */

.g-stats{
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--g-line);
    border-bottom: 1px solid var(--g-line);
    background: var(--g-card);
}
.g-stat{ padding: 1.75rem .5rem; text-align: center; }
.g-stat__n{
    font-size: calc(1.5rem + .6vw);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--g-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.g-stat__l{
    font-size: 13px;
    color: var(--g-muted);
    margin: .45rem 0 0;
    letter-spacing: .02em;
}
@media (min-width: 768px){
    .g-stat + .g-stat{ border-left: 1px solid var(--g-line); }
    [dir="rtl"] .g-stat + .g-stat{ border-left: 0; border-right: 1px solid var(--g-line); }
}


/* --------------------------------------------------------------------------
   7. Connect / Learn / Grow — the three steps ride the arc
   Numbering is used because this genuinely is a sequence.
   -------------------------------------------------------------------------- */

.g-path{ position: relative; }
.g-path__line{
    position: absolute;
    top: 46px; left: 0;
    width: 100%; height: 90px;
    pointer-events: none;
    display: none;
}
@media (min-width: 992px){ .g-path__line{ display: block; } }
.g-path__line path{
    fill: none;
    stroke: var(--g-accent);
    stroke-width: 1.5;
    stroke-dasharray: 6 8;
    stroke-dashoffset: 800;
    opacity: .55;
}
.g-in .g-path__line path{
    transition: stroke-dashoffset 1800ms linear;
    stroke-dashoffset: 0;
}

.g-step{ text-align: center; position: relative; z-index: 1; }
.g-step__n{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: var(--g-card);
    border: 1px solid var(--g-line);
    color: var(--g-primary);
    font-weight: 700;
    font-size: 15px;
    box-shadow: var(--g-shadow);
    transition: transform 260ms var(--g-ease), background-color 260ms var(--g-ease), color 260ms var(--g-ease);
}
.g-step:hover .g-step__n{
    background: var(--g-primary);
    color: #fff;
    transform: translateY(-4px);
}
.g-step__t{
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--g-ink);
    margin: 1rem 0 .4rem;
    font-size: 1.15rem;
}
.g-step__d{ color: var(--g-muted); font-size: 14px; margin: 0; }


/* --------------------------------------------------------------------------
   7b. Connect / Learn / Grow — visual columns
   -------------------------------------------------------------------------- */

.g-clg__card{
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--g-card);
    border: 1px solid var(--g-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(var(--g-primary-rgb), .04);
    transition: transform 220ms var(--g-ease), box-shadow 220ms var(--g-ease), border-color 220ms var(--g-ease);
}
.g-clg__card:hover{
    transform: translateY(-4px);
    border-color: rgba(var(--g-primary-rgb), .28);
    box-shadow: var(--g-shadow-lift);
}
.g-clg__media{
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--g-surface);
    overflow: hidden;
}
.g-clg__media img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
}
.g-clg__body{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.35rem 1.3rem 1.45rem;
}
.g-clg__n{
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--g-primary);
    margin-bottom: .35rem;
}
.g-clg__body h3{
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--g-ink);
    margin: 0 0 .45rem;
}
.g-clg__body p{
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--g-muted);
}


/* --------------------------------------------------------------------------
   8. Cards — pointer-tracked sheen. Cheap, and it reads expensive.
   -------------------------------------------------------------------------- */

.g-sheen{ position: relative; overflow: hidden; }
.g-sheen::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 260ms var(--g-ease);
    background: radial-gradient(
        220px circle at var(--g-mx, 50%) var(--g-my, 50%),
        rgba(var(--g-primary-rgb), .10),
        transparent 62%
    );
}
.g-sheen:hover::after{ opacity: 1; }

.g-cat{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 1.2rem .85rem 1rem;
    background: var(--g-card);
    border: 1px solid var(--g-line);
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(var(--g-primary-rgb), .04);
    text-decoration: none !important;
    color: inherit;
    transition: transform 200ms var(--g-ease), border-color 200ms var(--g-ease), box-shadow 200ms var(--g-ease);
}
.g-cat:hover,
.g-cat:focus{
    color: inherit;
    text-decoration: none !important;
    transform: translateY(-4px);
    border-color: rgba(var(--g-primary-rgb), .38);
    box-shadow: var(--g-shadow-lift);
}
.g-cat__icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: .8rem;
    border-radius: 14px;
    background: var(--g-soft);
    color: var(--g-primary);
    font-size: 1.35rem;
    line-height: 1;
    transition: background-color 200ms var(--g-ease), color 200ms var(--g-ease), transform 200ms var(--g-ease);
}
.g-cat:hover .g-cat__icon{
    background: var(--g-primary);
    color: #fff;
    transform: translateY(-2px);
}
.g-cat__name{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
    margin: 0 0 .55rem;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--g-ink);
}
.g-cat__n{
    margin-top: auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--g-primary);
    background: var(--g-soft);
    border-radius: 999px;
    padding: .22rem .7rem;
}


/* --------------------------------------------------------------------------
   9. Guidor band — the mentor-facing side, in the logo's darker teal
   -------------------------------------------------------------------------- */

.g-band{
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--g-deep) 0%, var(--g-primary) 55%, var(--g-accent) 140%);
    color: #fff;
    border-radius: 20px;
}
.g-band__arc{
    position: absolute;
    right: -8%; bottom: -46%;
    width: 60%;
    opacity: .16;
    pointer-events: none;
}
[dir="rtl"] .g-band__arc{ right: auto; left: -8%; transform: scaleX(-1); }
.g-band__arc path{ fill: none; stroke: #fff; stroke-width: 2; }
.g-band h2{ color: #fff; font-weight: 700; letter-spacing: -.02em; }
.g-band p{ color: rgba(255,255,255,.82); }
.g-band .g-band__cta{
    background: #fff;
    color: var(--g-primary);
    font-weight: 600;
    border-radius: 8px;
    padding: .7rem 1.5rem;
    display: inline-flex;
    align-items: center;
    transition: transform 200ms var(--g-ease), box-shadow 200ms var(--g-ease);
}
.g-band .g-band__cta:hover{
    color: var(--g-deep);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,.2);
}
.g-band__point{
    display: flex;
    align-items: flex-start;
    color: rgba(255,255,255,.9);
    font-size: 14px;
}
.g-band__point i{ margin-top: 2px; color: #fff; opacity: .75; }
[dir="ltr"] .g-band__point i{ margin-right: .6rem; }
[dir="rtl"] .g-band__point i{ margin-left: .6rem; }


/* --------------------------------------------------------------------------
   10. Section divider — the same arc, all the way down the page
   -------------------------------------------------------------------------- */

.g-rule{
    display: block;
    width: 100%;
    height: 34px;
    overflow: hidden;
}
.g-rule path{
    fill: none;
    stroke: var(--g-line);
    stroke-width: 1.5;
}


/* --------------------------------------------------------------------------
   11. Scroll reveal
   Scoped to .g-js so the page is fully visible if JS never runs.
   -------------------------------------------------------------------------- */

.g-js [data-g-reveal]{
    opacity: 0;
    transform: translateY(20px);
}
.g-js [data-g-reveal].g-in{
    opacity: 1;
    transform: none;
    transition: opacity 620ms var(--g-ease), transform 620ms var(--g-ease);
    transition-delay: calc(var(--g-i, 0) * 80ms);
}


/* --------------------------------------------------------------------------
   12. Search — inherits style-search.css, brand hover only
   -------------------------------------------------------------------------- */

.g-search{
    position: relative;
    z-index: 40;
}
.g-search .home-search{
    border-radius: 14px;
    box-shadow: var(--g-shadow-lift);
    width: 100%;
    overflow: visible;
    z-index: 40;
}
.g-search .home-search form{ overflow: visible; }
.g-search .nice-select.open{ z-index: 50; }
.g-search .nice-select .list{
    z-index: 50 !important;
    overflow-y: auto !important;
    max-height: 280px;
}
.g-search .home-search:focus-within{ border-color: var(--g-primary); }
.g-search .form-control-feedback{ color: var(--g-primary) !important; }


/* --------------------------------------------------------------------------
   13. Quality floor
   -------------------------------------------------------------------------- */

.g-hero a:focus-visible,
.g-band a:focus-visible,
.g-tabs .nav-link:focus-visible,
.g-booking__cta:focus-visible{
    outline: 2px solid var(--g-accent);
    outline-offset: 3px;
    border-radius: 4px;
}
.g-cat:focus-visible{
    outline: 2px solid var(--g-accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
    .g-js [data-g-reveal],
    .g-js [data-g-reveal].g-in{
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .g-avatar{ opacity: 1; transform: none; animation: none !important; }
    .g-arc__line path,
    .g-path__line path{ stroke-dashoffset: 0 !important; transition: none !important; }
    .g-display .g-em::after{ transform: scaleX(1) !important; transition: none !important; }
    .g-tabs__ink{ transition: none !important; }
    .g-slot::before,
    .g-confirm,
    .g-day{ transition: none !important; }
}