@charset "utf-8";
/* ============================================================================
   gdl_motion.css  —  the GDL site-wide motion layer
   ----------------------------------------------------------------------------
   Written 17 September 2026.

   One file, loaded from header.php, that gives every page on the site the same
   small amount of movement: things fade and rise into place, cards lift under
   the cursor, menus open instead of snapping, a red bar runs across the top
   while a page loads, and figures that changed since the last refresh are
   ringed in red for a couple of seconds.

   NOTHING IN HERE HIDES ANYTHING BY ITSELF.
   Everything that starts invisible is behind either .gdl-pre (put on <html> by
   the inline script in header.php, and taken off again after 900ms whether or
   not gdl_motion.js ever loads) or .gdl-r (put on by gdl_motion.js, which only
   ever adds it to elements it is about to animate). If the JavaScript file is
   missing, blocked or broken, the worst that happens is the page appears
   without animation. It can never be left blank.

   Colours are the site's own: #CE122D red, #F16377 light red, #111 black.

   26 September 2026 — version 2. The "showcase" look chosen at Admin >
   System Settings > Page Animation (see gdl_motion.js): cards arriving one
   after another, headings in order, a red circuit trace under the section
   titles, photos settling in, arrows that nudge on hover and a back-to-top
   button. Plus the look of three working parts — photos that fade one into
   the next, a strip of cards to swipe through, and a before / after photo
   to drag — parts 9 to 11. Anything new is marked (v2).
   ========================================================================== */

:root {
    --gdl-ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
    --gdl-in:    380ms;
    --gdl-rise:  14px;
    --gdl-in-s:  600ms;     /* (v2) cards in showcase  */
    --gdl-rise-s: 22px;
    --gdl-in-h:  520ms;     /* (v2) headings and the hero words */
    --gdl-rise-h: 12px;
    --gdl-red:   #CE122D;
    --gdl-red-2: #F16377;
}


/* ============================================================================
   1.  PRE-HIDE
   ----------------------------------------------------------------------------
   header.php adds .gdl-pre to <html> before the page paints, so content that
   is about to animate does not flash up at full opacity first. The same inline
   script removes it after 900ms no matter what, and gdl_motion.js removes it
   the moment it has taken over.

   KEEP THIS SELECTOR LIST IDENTICAL TO `CANDIDATES` IN gdl_motion.js.
   ========================================================================== */

html.gdl-pre [class*="hero"],
html.gdl-pre [class*="card"],
html.gdl-pre [class*="-wrap"],
html.gdl-pre [class*="page-header"],
html.gdl-pre .container,
html.gdl-pre .boxinside,
html.gdl-pre welcome    > div,
html.gdl-pre home       > div,
html.gdl-pre services   > div,
html.gdl-pre team       > div,
html.gdl-pre portfolio  > div,
html.gdl-pre careers    > div,
html.gdl-pre contact    > div,
html.gdl-pre noaccess   > div {
    opacity: 0;
}


/* ============================================================================
   2.  ENTRANCES
   ----------------------------------------------------------------------------
   .gdl-r  = "this one is going to be revealed" (added by JS, holds it hidden)
   .gdl-f  = fade only, no movement — used for full-width bands whose layout
             relies on negative margins, and for anything holding a map, a
             canvas or an iframe, where a transform can upset the contents
   .gdl-in = go
   JS strips all three off again once the transition has finished, so nothing
   is left carrying a transform or a will-change.
   ========================================================================== */

html.gdl-motion .gdl-r {
    opacity: 0;
    transform: translateY(var(--gdl-rise));
    will-change: opacity, transform;
}

html.gdl-motion .gdl-r.gdl-f {
    transform: none;
    will-change: opacity;
}

html.gdl-motion .gdl-r.gdl-in {
    opacity: 1;
    transform: none;
    transition: opacity var(--gdl-in) var(--gdl-ease),
                transform var(--gdl-in) var(--gdl-ease);
}

/* (v2) Showcase. .gdl-s = a card (rises a little further, a little slower),
   .gdl-h = a heading line or a word in the hero (rises a little less). */
html.gdl-motion .gdl-r.gdl-s:not(.gdl-f) { transform: translateY(var(--gdl-rise-s)); }
html.gdl-motion .gdl-r.gdl-h:not(.gdl-f) { transform: translateY(var(--gdl-rise-h)); }

html.gdl-motion .gdl-r.gdl-s.gdl-in {
    transform: none;
    transition: opacity var(--gdl-in-s) var(--gdl-ease),
                transform var(--gdl-in-s) var(--gdl-ease);
}
html.gdl-motion .gdl-r.gdl-h.gdl-in {
    transform: none;
    transition: opacity var(--gdl-in-h) var(--gdl-ease),
                transform var(--gdl-in-h) var(--gdl-ease);
}

/* (v2) A photo in a card settles in from a very slight zoom as the card
   arrives. The card around it keeps the photo inside its own edges. */
@keyframes gdl-settle {
    from { opacity: 0; transform: scale(1.07); }
    to   { opacity: 1; transform: scale(1); }
}
html.gdl-motion .gdl-r.gdl-in .gdl-ph {
    animation: gdl-settle 1100ms var(--gdl-ease) both;
}


/* ============================================================================
   3.  HOVER
   ----------------------------------------------------------------------------
   Only on real pointers — on a phone :hover sticks after a tap and the card
   would stay lifted.
   ========================================================================== */

/* Cards. 17 September 2026 — these used to rise 3px under the cursor and it
   looked messy, so nothing moves now: the shadow deepens a little and that is
   all. To take even that away, delete the .gdl-lift:hover rule below. */
@media (hover: hover) {

    html.gdl-motion .gdl-lift {
        transition: box-shadow 180ms var(--gdl-ease);
    }

    html.gdl-motion .gdl-lift:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    }

    /* Buttons. Excludes the nav bar's own buttons, which have their own look. */
    html.gdl-motion button:not(.dropbtn):not(.submenu-btn):hover,
    html.gdl-motion input[type="submit"]:hover,
    html.gdl-motion input[type="reset"]:hover,
    html.gdl-motion input[type="button"]:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
    }

    /* Table rows. background-image is used rather than background-color so the
       tint sits ON TOP of whatever the row already has — striping, status
       colours, inline styles, even page rules marked !important — instead of
       replacing it. Only tables JS has identified as data tables get this. */
    html.gdl-motion table.gdl-rows > tbody > tr:hover > td {
        background-image: linear-gradient(rgba(206, 18, 45, 0.06),
                                          rgba(206, 18, 45, 0.06));
    }
}

/* Colour changes ease rather than snap. Safe everywhere, touch included. */
html.gdl-motion button:not(.dropbtn):not(.submenu-btn),
html.gdl-motion input[type="submit"],
html.gdl-motion input[type="reset"],
html.gdl-motion input[type="button"] {
    transition: background-color 170ms ease,
                color 170ms ease,
                box-shadow 180ms var(--gdl-ease),
                transform 110ms var(--gdl-ease);
}

html.gdl-motion button:not(.dropbtn):not(.submenu-btn):active,
html.gdl-motion input[type="submit"]:active,
html.gdl-motion input[type="reset"]:active,
html.gdl-motion input[type="button"]:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    transition-duration: 60ms;
}

/* Links and form fields. The menu bar is deliberately left out — see part 4. */
html.gdl-motion a { transition: color 150ms ease, background-color 150ms ease; }

html.gdl-motion .navbar a,
html.gdl-motion .dropdown-content a,
html.gdl-motion .dropdown-submenu-content a {
    transition: none;
}

html.gdl-motion input[type="text"],
html.gdl-motion input[type="password"],
html.gdl-motion input[type="number"],
html.gdl-motion input[type="date"],
html.gdl-motion input[type="time"],
html.gdl-motion input[type="email"],
html.gdl-motion input[type="tel"],
html.gdl-motion input[type="search"],
html.gdl-motion select,
html.gdl-motion textarea {
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

html.gdl-motion input[type="text"]:focus,
html.gdl-motion input[type="password"]:focus,
html.gdl-motion input[type="number"]:focus,
html.gdl-motion input[type="date"]:focus,
html.gdl-motion input[type="time"]:focus,
html.gdl-motion input[type="email"]:focus,
html.gdl-motion input[type="tel"]:focus,
html.gdl-motion input[type="search"]:focus,
html.gdl-motion select:focus,
html.gdl-motion textarea:focus {
    box-shadow: 0 0 0 3px rgba(206, 18, 45, 0.16);
}


/* ============================================================================
   4.  THE MENU BAR
   ----------------------------------------------------------------------------
   17 September 2026 — the menus are left exactly as main.css has them. The
   first version of this file animated them open and put position:relative on
   .dropdown so a red underline could be hung off it. That relative was a
   mistake: .dropdown-content is absolutely positioned, and below 1049px
   main.css gives it `min-width: 100%; left: 0` so the panel spans the whole
   menu bar. Making .dropdown the containing block re-pointed that 100% at the
   button instead, and the panels collapsed to the width of their own button —
   1024px wide down to 138px, and on a phone 390px down to 71px.

   So: no animation on the panels, no transitions on the bar, and nothing on
   .dropdown at all. The only thing left is the red underline, and it now hangs
   off the .dropbtn itself. That is safe because the button is a SIBLING of
   .dropdown-content, not its parent — making the button a containing block
   cannot reach the panel. Do not put position on .dropdown again.
   ========================================================================== */

/* A hairline of red under the menu button whose panel is open, so you can see
   at a glance which menu you are in. */
html.gdl-motion .navbar .dropbtn {
    position: relative;   /* anchors the underline below, and nothing else */
}

html.gdl-motion .navbar .dropbtn::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--gdl-red);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 180ms var(--gdl-ease);
    pointer-events: none;
}

html.gdl-motion .navbar .dropdown.open > .dropbtn::after,
html.gdl-motion .navbar .dropbtn:hover::after {
    transform: scaleX(1);
}


/* ============================================================================
   5.  PAGE LOADING BAR
   ----------------------------------------------------------------------------
   A thin red bar across the very top from the moment a link is clicked until
   the next page paints. Switched off on the screens that refresh themselves —
   see gdl_motion.js — so the office wallboards don't flicker a red line every
   five minutes.
   z-index clears .sticky (2000) and the menu fly-outs (9999).
   ========================================================================== */

.gdl-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 99999;
    pointer-events: none;
    background: transparent;
    opacity: 1;
    transition: opacity 260ms ease;
}

.gdl-progress.gdl-progress-done { opacity: 0; }

.gdl-progress > i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--gdl-red), var(--gdl-red-2));
    box-shadow: 0 0 9px rgba(206, 18, 45, 0.75);
    transition: width 220ms ease;
}


/* ============================================================================
   6.  CHANGED SINCE LAST REFRESH
   ----------------------------------------------------------------------------
   On the pages that sit open on an office screen, a value that has changed
   since the previous refresh gets ringed in red for a couple of seconds and
   then fades back. An outline is used rather than a background so it cannot
   interfere with status colours, striping or anything set inline — an outline
   takes up no space and is drawn over the top.
   ========================================================================== */

@keyframes gdl-flash {
    0%   { outline-color: rgba(206, 18, 45, 0.00); outline-offset: 6px; }
    14%  { outline-color: rgba(206, 18, 45, 0.95); outline-offset: 1px; }
    70%  { outline-color: rgba(206, 18, 45, 0.75); outline-offset: 1px; }
    100% { outline-color: rgba(206, 18, 45, 0.00); outline-offset: 1px; }
}

html.gdl-motion .gdl-flash {
    outline: 2px solid rgba(206, 18, 45, 0);
    outline-offset: 1px;
    border-radius: 3px;
    animation: gdl-flash 2400ms var(--gdl-ease) 1;
}


/* ============================================================================
   7.  COUNTING UP, AND LIVE INDICATORS
   ========================================================================== */

/* Stops the figure jittering in width while it counts */
html.gdl-motion .gdl-counting {
    font-variant-numeric: tabular-nums;
}

/* A slow pulse for anything showing a live/online state. Applied automatically
   to online badges; add class="gdl-live" to anything else you want it on. */
@keyframes gdl-live {
    0%, 100% { opacity: 1;    }
    50%      { opacity: 0.45; }
}

html.gdl-motion .gdl-live::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
    animation: gdl-live 2000ms ease-in-out infinite;
}


/* ============================================================================
   8.  (v2) THE LINE UNDER SECTION TITLES
   ----------------------------------------------------------------------------
   Showcase only. gdl_motion.js puts a short red circuit trace (or a plain red
   line, whichever Admin > System Settings > Page Animation says) under each
   section title as the title arrives: it draws itself left to right, then one
   pulse of current runs along it and lights the far pad. Without the
   animation it is simply there, drawn.
   ========================================================================== */

.gdl-rule {
    display: block;
    width: 132px;
    height: 14px;
    margin: 0.1rem auto 1.1rem;
    pointer-events: none;
}
.gdl-rule.gdl-rule-left  { margin-left: 0; }
.gdl-rule.gdl-rule-right { margin-right: 0; }
.gdl-rule-svg { display: block; overflow: visible; }

.gdl-rule-trace {
    fill: none;
    stroke: var(--gdl-red);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
}
.gdl-rule-pad {
    fill: none;
    stroke: var(--gdl-red);
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
}
.gdl-rule-dot {
    fill: #ff5a6e;
    opacity: 0;
    filter: drop-shadow(0 0 3px rgba(255, 90, 110, 0.95));
}
.gdl-rule-line {
    display: block;
    width: 56px;
    height: 3px;
    margin: 5px auto 0;
    border-radius: 2px;
    background: var(--gdl-red);
    transform-origin: left center;
}
.gdl-rule-left  .gdl-rule-line { margin-left: 0; }
.gdl-rule-right .gdl-rule-line { margin-right: 0; }

/* Before it arrives: nothing drawn yet */
html.gdl-motion .gdl-rule.gdl-r .gdl-rule-trace { stroke-dashoffset: 100; }
html.gdl-motion .gdl-rule.gdl-r .gdl-rule-pad   { transform: scale(0); opacity: 0; }
html.gdl-motion .gdl-rule.gdl-r .gdl-rule-line  { transform: scaleX(0); }

/* Arriving: the near pad, the trace, then the far pad */
html.gdl-motion .gdl-rule.gdl-r.gdl-in .gdl-rule-trace {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 650ms var(--gdl-ease) 80ms;
}
html.gdl-motion .gdl-rule.gdl-r.gdl-in .gdl-rule-pad {
    transform: none;
    opacity: 1;
    transition: transform 300ms var(--gdl-ease), opacity 300ms ease;
}
html.gdl-motion .gdl-rule.gdl-r.gdl-in .gdl-rule-pad.b { transition-delay: 640ms; }
html.gdl-motion .gdl-rule.gdl-r.gdl-in .gdl-rule-line {
    transform: none;
    transition: transform 600ms var(--gdl-ease) 60ms;
}

@keyframes gdl-pad-flash {
    0%   { fill: #ff5a6e; filter: drop-shadow(0 0 4px rgba(255, 90, 110, 1)); }
    100% { fill: rgba(255, 90, 110, 0); }
}
.gdl-rule-pad.gdl-flash-pad { animation: gdl-pad-flash 600ms ease-out; }


/* ============================================================================
   9.  (v2) SMALL HOVER NUDGES AND THE BACK-TO-TOP BUTTON
   ----------------------------------------------------------------------------
   Showcase only (html.gdl-show). An arrow at the end of a link — written as
   <span class="gdl-arr">&rarr;</span> — slides a few pixels on as the pointer
   comes over it or the card around it; so does the icon in the hero's
   buttons. Nothing else moves.
   ========================================================================== */

.gdl-arr { display: inline-block; }

@media (hover: hover) {
    html.gdl-show .gdl-arr,
    html.gdl-show .hero-btn .web-ico,
    html.gdl-show .portfolio-cta a .web-ico {
        transition: transform 200ms var(--gdl-ease);
    }
    html.gdl-show a:hover .gdl-arr,
    html.gdl-show [class*="card"]:hover .gdl-arr,
    html.gdl-show .pf-sector:hover .gdl-arr {
        transform: translateX(4px);
    }
    html.gdl-show .hero-btn:hover .web-ico,
    html.gdl-show .portfolio-cta a:hover .web-ico {
        transform: translateX(3px);
    }
}

/* Back to the top — appears once you are well down a long page */
.gdl-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1500;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--gdl-red);
    background: #1a1a1a;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 250ms ease, transform 250ms var(--gdl-ease), background-color 200ms ease;
}
.gdl-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.gdl-top:hover { background: var(--gdl-red); }
.gdl-top:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.gdl-top.gdl-top-high { bottom: 88px; }          /* above the Advice Window button */
/* Part 3 gives every button a 1px lift and its own transitions; this one keeps
   its fade and does not lift (the class is written twice to outrank part 3). */
html.gdl-motion button.gdl-top.gdl-top {
    transition: opacity 250ms ease, transform 250ms var(--gdl-ease), background-color 200ms ease;
}
html.gdl-motion button.gdl-top.is-on:hover { transform: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
@media (max-width: 600px) {
    .gdl-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
    .gdl-top.gdl-top-high { bottom: 76px; }
}


/* ============================================================================
   10. (v2) PHOTOS THAT FADE ONE INTO THE NEXT  [data-gdl-slides]
   ----------------------------------------------------------------------------
   The home page hero. Each photo fades in over the one before and drifts in
   very slowly while it is showing. The page itself decides how big the box
   is and what sits over it; this is only the fading and the drift.
   ========================================================================== */

.gdl-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 0;
    overflow: hidden;
    transition: opacity 1600ms ease;
}
.gdl-slide.is-leaving { opacity: 1; z-index: 1; }
.gdl-slide.is-on      { opacity: 1; z-index: 2; }
.gdl-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@keyframes gdl-drift {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
}
.gdl-slides-live .gdl-slide.is-on img,
.gdl-slides-live .gdl-slide.is-leaving img {
    animation: gdl-drift var(--gdl-zoom, 10400ms) linear forwards;
}
.gdl-slide-cap { opacity: 0; transition: opacity 1600ms ease; }
.gdl-slide-cap.is-on { opacity: 1; }


/* ============================================================================
   11. (v2) A STRIP OF CARDS  [data-gdl-strip]  and  BEFORE / AFTER  [data-gdl-ba]
   ========================================================================== */

/* The strip's arrows: only once gdl_motion.js has run, and only when there is
   more than fits. A phone swipes; its arrows are hidden by the page. */
.gdl-strip-prev,
.gdl-strip-next { display: none; }
.gdl-strip-ready.gdl-strip-over .gdl-strip-prev,
.gdl-strip-ready.gdl-strip-over .gdl-strip-next { display: flex; }
.gdl-strip-prev[disabled],
.gdl-strip-next[disabled] { opacity: 0.25; cursor: default; }

/* Before / after. The "before" photo is laid over the "after" one and cut
   off at the handle; dragging moves the cut. */
.gdl-ba {
    --gdl-ba: 50%;
    position: relative;
    overflow: hidden;
    background: #222;
    cursor: ew-resize;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}
.gdl-ba img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}
.gdl-ba-before {
    position: absolute;
    inset: 0;
    -webkit-clip-path: inset(0 calc(100% - var(--gdl-ba)) 0 0);
    clip-path: inset(0 calc(100% - var(--gdl-ba)) 0 0);
}
.gdl-ba-tag {
    position: absolute;
    top: 12px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: 3px;
    transition: opacity 200ms ease;
    pointer-events: none;
}
.gdl-ba-tag.b { left: 12px; }
.gdl-ba-tag.a { right: 12px; background: var(--gdl-red); }
.gdl-ba.gdl-ba-l .gdl-ba-tag.b,
.gdl-ba.gdl-ba-r .gdl-ba-tag.a { opacity: 0; }
.gdl-ba-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--gdl-ba);
    width: 2px;
    margin-left: -1px;
    background: #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.45);
    z-index: 3;
    pointer-events: none;
}
.gdl-ba-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    padding: 0;
    border-radius: 50%;
    border: 3px solid #fff;
    background: var(--gdl-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    cursor: ew-resize;
    pointer-events: auto;
}
.gdl-ba-knob:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
html.gdl-motion .gdl-ba button.gdl-ba-knob:hover { transform: none; }


/* ============================================================================
   12. GET OUT OF THE WAY
   ----------------------------------------------------------------------------
   Anyone who has asked their machine for less movement gets none, and nothing
   is ever hidden or mid-animation on a printout.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    html.gdl-pre [class*="hero"],
    html.gdl-pre [class*="card"],
    html.gdl-pre [class*="-wrap"],
    html.gdl-pre [class*="page-header"],
    html.gdl-pre .container,
    html.gdl-pre .boxinside,
    html.gdl-pre welcome   > div,
    html.gdl-pre home      > div,
    html.gdl-pre services  > div,
    html.gdl-pre team      > div,
    html.gdl-pre portfolio > div,
    html.gdl-pre careers   > div,
    html.gdl-pre contact   > div,
    html.gdl-pre noaccess  > div,
    html.gdl-motion .gdl-r {
        opacity: 1 !important;
        transform: none !important;
    }

    html.gdl-motion .gdl-lift:hover { transform: none !important; }

    /* (v2) no drift on the hero photos, no nudges */
    .gdl-slide img { animation: none !important; }
    html.gdl-show .gdl-arr,
    html.gdl-show .hero-btn .web-ico { transform: none !important; }

    html.gdl-motion *,
    html.gdl-motion *::before,
    html.gdl-motion *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {

    html.gdl-pre [class*="hero"],
    html.gdl-pre [class*="card"],
    html.gdl-pre [class*="-wrap"],
    html.gdl-pre [class*="page-header"],
    html.gdl-pre .container,
    html.gdl-pre .boxinside,
    html.gdl-pre welcome   > div,
    html.gdl-pre home      > div,
    html.gdl-pre services  > div,
    html.gdl-pre team      > div,
    html.gdl-pre portfolio > div,
    html.gdl-pre careers   > div,
    html.gdl-pre contact   > div,
    html.gdl-pre noaccess  > div,
    html.gdl-motion .gdl-r {
        opacity: 1 !important;
        transform: none !important;
    }

    .gdl-progress { display: none !important; }
    .gdl-top, .gdl-strip-prev, .gdl-strip-next { display: none !important; }   /* (v2) */

    html.gdl-motion .gdl-flash {
        outline: none !important;
        animation: none !important;
    }
}