/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/


/*--------------------------
*           Index          *
----------------------------
* 1. Global                *
*    1.1 Custom Properties *
*    1.2 Header            *
*    1.3 Footer            *
*    1.4 Sidebar           *
* 2. Home-page             *
* 3. Sub-page              *
* 4. Responsive            *
* 5. Keyframes             *
--------------------------*/

/*--------------------------
*        1. Global         *
--------------------------*/
/* 1.1 Custom Properties
 *
 * Source of truth: assets/Brand on a Page - Grand River Periodontics.pdf
 *
 * Tier 1 (--c-*)   raw palette, stored as bare RGB triplets so they work with
 *                  both rgb() and rgba(): rgba(var(--c-navy), 0.65)
 * Tier 2 (roles)   ready-to-use colors. Use these in new rules, not tier 1.
 * Tier 3 (legacy)  old Schultz-era names, aliased forward so existing rules in
 *                  this file keep working. Retire as sections get rebuilt.
 *
 * Keep in sync with Avada > Global Options > Color Palette (--awb-color1..8),
 * which is what Fusion Builder's color pickers read from. Those must be typed
 * as literal hex in the admin; they can't reference these vars.
 */
:root {
    /* --- Tier 1: brand palette --- */
    --c-ink:    18, 23, 32;     /* #121720 black navy          */
    --c-navy:   32, 41, 56;     /* #202938 dark navy           */
    --c-slate:  63, 87, 115;    /* #3f5773 slate blue          */
    --c-blue:   144, 163, 185;  /* #90a3b9 soft blue gray      */
    --c-sky:    197, 213, 231;  /* #c5d5e7 light blue          */
    --c-mist:   230, 235, 238;  /* #e6ebee cool gray           */
    --c-stone:  182, 192, 194;  /* #b6c0c2 green gray          */
    --c-taupe:  171, 165, 157;  /* #aba59d warm taupe          */
    --c-sand:   234, 225, 218;  /* #eae1da warm beige          */
    --c-paper:  241, 240, 238;  /* #f1f0ee off white           */
    --c-white:  255, 255, 255;  /* #ffffff true white          */
    /* True white is not a brand colour and is not a substitute for --c-paper.
     * It exists for one job: the affiliations band. Five of the nine logo
     * files supplied by the practice have an opaque #ffffff background, so on
     * any other ground they would show as visible rectangles. */

    /* --- Tier 2: semantic roles --- */
    --brand-primary:    rgb(var(--c-slate));
    --brand-dark:       rgb(var(--c-navy));
    --brand-accent:     rgb(var(--c-blue));

    --text-heading:     rgb(var(--c-navy));
    --text-body:        rgb(var(--c-ink));
    --text-muted:       rgba(var(--c-ink), 0.65);
    --text-on-dark:     rgb(var(--c-white));

    --bg-page:          rgb(var(--c-paper));
    --bg-surface:       rgb(var(--c-mist));
    --bg-surface-warm:  rgb(var(--c-sand));
    --bg-dark:          rgb(var(--c-navy));

    --border-subtle:    rgba(var(--c-stone), 0.6);
    --border-strong:    rgb(var(--c-slate));
    --scrim:            rgba(var(--c-ink), 0.65);

    /* Functional, not brand — do not swap for palette colors */
    --color-error:      #c02b0a;
    --color-warning:    #f16913;
    --color-success:    #2e7d32;

    /* --- Typography --- */
    /* The only two families in the theme. Fallbacks are system fonts only —
     * no webfont other than these two is ever requested. */
    --font-display: 'Solora', Georgia, 'Times New Roman', serif;
    --font-body:    'Neue Swiss', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* --- Motion --- */
    /* Ease-out-quint. No bounce, no elastic. */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* --- Tier 3: legacy aliases (triplets, for rgb()/rgba() call sites) --- */
    --color-main:  var(--c-slate);
    --color-cream: var(--c-sand);
    --color-green: var(--c-taupe);
    --color-white: var(--c-paper);
    --color-black: var(--c-ink);
}

/* Brand webfonts — the only two typefaces the theme uses, per the brand guide.
 * Solora is display (caps only); Neue Swiss is body.
 *
 * woff2 first (roughly half the size of the .otf), then woff, then the original
 * otf as a last resort. The same files are also registered under
 * Avada > Global Options > Custom Fonts so they appear in the typography
 * dropdowns; these declarations stay as the guaranteed fallback.
 *
 * Paths are root-relative on purpose. WP Rocket serves a minified copy of this
 * file from /wp-content/cache/min/1/..., and a relative url() would resolve
 * against that directory and 404. Root-relative survives the relocation. */
@font-face {
    font-family: 'Solora';
    src: url('/wp-content/themes/Avada-Child-Theme/assets/fonts/Solora-Regular.woff2') format('woff2'),
    url('/wp-content/themes/Avada-Child-Theme/assets/fonts/Solora-Regular.woff') format('woff'),
    url('/wp-content/themes/Avada-Child-Theme/assets/fonts/Solora-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Swiss';
    src: url('/wp-content/themes/Avada-Child-Theme/assets/fonts/NeueSwiss-Regular.woff2') format('woff2'),
    url('/wp-content/themes/Avada-Child-Theme/assets/fonts/NeueSwiss-Regular.woff') format('woff'),
    url('/wp-content/themes/Avada-Child-Theme/assets/fonts/NeueSwiss-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Swiss';
    src: url('/wp-content/themes/Avada-Child-Theme/assets/fonts/NeueSwiss-Semibold.woff2') format('woff2'),
    url('/wp-content/themes/Avada-Child-Theme/assets/fonts/NeueSwiss-Semibold.woff') format('woff'),
    url('/wp-content/themes/Avada-Child-Theme/assets/fonts/NeueSwiss-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Don't let phone number links wrap */
a[href^="tel:"],
a[href^="tel+"] {
    white-space: nowrap;
}

/* 1.1a Buttons
 *
 * One button family, site-wide. All variants share the hero button's geometry —
 * squared, 1px border, uppercase, tracked — and differ only in fill.
 *
 *   --solid       brand-primary #3f5773 + paper text   6.53:1
 *   --dark        brand-dark    #202938 + paper text  12.84:1
 *   --light       paper         #f1f0ee + navy text   12.84:1
 *   --line-light  paper border/text, no fill          12.84:1  (hero only)
 *
 * Which one a section gets is decided by its ground, not by taste. A filled
 * button has to clear 3:1 against the field behind it or the button's own shape
 * disappears, and the two brand darks fail that on the dark sections:
 *
 *   fill \ ground     light (25% tints)   navy #131720   slate #3f5773
 *   brand-dark             10.8–12.0           1.23           1.97
 *   brand-primary           5.5–6.1            2.41           1.00
 *   paper                        —             15.97          6.53
 *
 * So light grounds take --dark / --solid, and the navy and slate sections take
 * --light. Using brand-dark on either dark section would ship an invisible
 * button with a legible label sitting on it.
 */

#main {
    padding: 0 !important;
}
.grp-btn {
    /* Exposed so narrow viewports can tighten the padding without restating it. */
    --btn-pad-y: 1.3em;
    --btn-pad-x: 2.4em;
    min-width: 242px;
    display: inline-block;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border: 1px solid transparent;
    border-radius: 1px;
    font-family: var(--font-body);
    font-size: clamp(0.8rem, 0.95vw, 0.9rem);
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    color 0.35s var(--ease);
    letter-spacing: 0.15em;
    font-weight: 700;
}
.grp-btn-sm a span{
    border-radius: 1px;
    /* Exposed so narrow viewports can tighten the padding without restating it. */
    --btn-pad-y: 1em;
    --btn-pad-x: 1.4em;
    display: inline-block;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-size: clamp(0.8rem, 0.95vw, 0.9rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    color 0.35s var(--ease);
}
.awb-menu_row.awb-menu_em-hover .grp-btn-sm.awb-menu__main-li:hover:before {
    display: none ;
}
.grp-btn-sm.grp-btn--taupe:hover,
.grp-btn-sm.grp-btn--taupe .awb-menu__main-background-active{
    border: none ;
    background: transparent ;
}


.grp-btn-sm.grp-btn--taupe a span {
    background-color: transparent;
    border-color: rgb(var(--c-taupe));
    color: #fff !important;
    border: 1px solid #fff;
    font-weight: 900;
}
/* Ink, not white, once the taupe fill lands: white on taupe is 2.44:1, so the
   label disappears into the very fill that is meant to reveal the hover. Ink on
   taupe is 7.53:1 and keeps the taupe the header was designed around. */
.grp-btn-sm.grp-btn--taupe a:hover span{
    background-color: rgb(var(--c-taupe));
    border-color: rgb(var(--c-taupe));
    color: rgb(var(--c-ink));
    border: 1px solid rgb(var(--c-taupe));
    font-weight: 900;
}

.grp-btn-sm.grp-btn--taupe a{
    color: #fff;
    font-weight: 900;
}

/* Two-tone ring so focus stays visible on light and dark fields alike —
   a single-colour outline always vanishes against one or the other. */
.grp-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgb(var(--c-paper)), 0 0 0 4px var(--brand-dark);
}

.grp-btn--solid {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: rgb(var(--c-paper));
}

.grp-btn--dark {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: rgb(var(--c-paper));
}

/* For the navy and slate sections, where a brand-dark fill would vanish. */
.grp-btn--light {
    background-color: rgb(var(--c-paper));
    border-color: rgb(var(--c-paper));
    color: var(--brand-dark);
}

.grp-btn--line-light {
    background-color: transparent;
    border-color: rgba(var(--c-paper), 0.62);
    color: rgb(var(--c-paper));
}

/* Taupe takes DARK type — white on #aba59d is 2.44:1, ink is 7.36:1. And the
   fill only clears 3:1 against a dark field (3.06 on slate, 7.36 on navy), so
   it belongs on the dark sections, not the light ones. */
.grp-btn--taupe {
    background-color: rgb(var(--c-taupe));
    border-color: rgb(var(--c-taupe));
    color: rgb(var(--c-ink));
}

/* Hover keeps each button on the same side of the contrast divide as its base
   state, so it can never collide with its own ground.
   These all used to invert to paper, which made the dark buttons disappear on
   the light sections: 1.00:1 against off-white, 1.07 against the care tint,
   1.19 against the referral tint. A hover state has to stay a visible shape.

   Dark fills live on light grounds, so they swap between the two brand darks
   (navy <-> slate, 1.97:1 apart — a clear tonal shift in a filled area, and
   still 5.5-12.8:1 against every light ground). */
.grp-btn--dark:hover,
.grp-btn--dark:focus-visible {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: rgb(var(--c-paper));
}

.grp-btn--solid:hover,
.grp-btn--solid:focus-visible {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
    color: rgb(var(--c-paper));
}

/* Light fills live on dark grounds, so they shift within the light end. */
.grp-btn--light:hover,
.grp-btn--light:focus-visible {
    background-color: rgb(var(--c-sky));
    border-color: rgb(var(--c-sky));
    color: var(--brand-dark);
}

/* Taupe belongs on the dark grounds; sand is a warm lift that stays clear of
   them (11.3:1 on navy, 5.8:1 on the slate footer band). */
.grp-btn--taupe:hover,
.grp-btn--taupe:focus-visible {
    background-color: rgb(var(--c-sand));
    border-color: rgb(var(--c-sand));
    color: rgb(var(--c-ink));
}

/* Hero only, over the scrimmed video — a paper fill reads against that. */
.grp-btn--line-light:hover,
.grp-btn--line-light:focus-visible {
    background-color: rgb(var(--c-paper));
    border-color: rgb(var(--c-paper));
    color: var(--brand-dark);
}

/* --solid is the one variant used on both sides of the divide: the light
   sections and the hero's scrimmed video. The rule above darkens it to navy,
   which is correct on a light ground but would sink into the footage here, so
   the hero lightens instead. Sky also keeps it distinct from the adjacent
   --line-light button, which hovers to paper. */
.grp-hero .grp-btn--solid:hover,
.grp-hero .grp-btn--solid:focus-visible {
    background-color: rgb(var(--c-sky));
    border-color: rgb(var(--c-sky));
    color: var(--brand-dark);
}

/* Hidden Links */
a.hide-link,
a.hide-link:hover {
    color: inherit;
    text-decoration: none;
    cursor: default;
}

/* Remove default appearance for iOS/Safari forms */
input:matches([type="button"],
[type="submit"],
[type="reset"]) {
    -webkit-appearance: none !important;
}

html body .hide-me,
html body .fusion-flex-container .fusion-row .fusion-flex-column.hide-me {
    display: none;
}

.screen-reader-text {
    clip: rect(1px,1px,1px,1px);
    word-wrap: normal!important;
    border: 0;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    overflow-wrap: normal!important;
    padding: 0;
    position: absolute!important;
    width: 1px
}

.awb-menu_row .menu-text {
    font-size: 14px;
    letter-spacing: 0.15em;
    font-weight: 700;
}
.awb-menu_icons-left .awb-menu__main-a {
    padding: 0 !important;
}

html body .pmax-max-block {
    max-width: 1170px;
    margin-right: auto !important;
    margin-left: auto !important;
}

html body .pmax-glass {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

html body:not(.home) #content p {
    /*color: var(--text-body);*/

}

.grp-cta-panel p {
font-size: var(--step-lead) !important;
}

html body .gform_required_legend {
    display: none;
}

html body .gform_wrapper {
    margin-bottom: 0;
}

html body .gform_wrapper .gfield label,
html body .gform_wrapper .gfield .gfield_description {
    color: rgb(var(--color-white));
}

html body .gform_wrapper .gfield .gfield_description.instruction.validation_message {
    color: var(--color-error);
}

html body .gform_wrapper .ginput_container {
    margin-top: 6px;
}

html body .gform_wrapper .gfield input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
html body .gform_wrapper .gfield textarea:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
html body .gform_wrapper select.gfield_select[multiple=multiple],
html body .gform_wrapper select.gfield_select {
    background-color: rgba(255, 255, 255, 0);
    border: 3px solid rgba(var(--color-white), 0.5);
    font-size: 16px;
    color: rgb(var(--color-white));
    padding: 12px;
}

html body .gform_wrapper .gfield input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):focus,
html body .gform_wrapper .gfield textarea:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):focus,
html body .gform_wrapper select.gfield_select[multiple=multiple]:focus,
html body .gform_wrapper select.gfield_select:focus {
    background-color: rgba(255, 255, 255, 0);
    border: 3px solid rgba(var(--color-white), 0.5);
    font-size: 16px;
    color: rgb(var(--color-white));
    padding: 12px;
}

html body .gform_wrapper .gfield input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
    min-height: 50px;
}

html body .ilightbox-container .ilightbox-social {
    display: none !important;
}

html body .fusion-flex-container.pmax-schema-container {
    max-height: 0;
}

html body .pmax-standalone-video .fusion-image-element {
    position: relative;
}

html body .pmax-standalone-video h1,
html body .pmax-standalone-video h2,
html body .pmax-standalone-video h3,
html body .pmax-standalone-video h4,
html body .pmax-standalone-video h5,
html body .pmax-standalone-video h6 {
    margin-top: 12px;
}

html body .pmax-standalone-video .fusion-image-element:after,
html body .fusion-image-carousel.pmax-standalone-video a:after {
    content: '';
    background-image: url('/wp-content/uploads/2022/12/home-builders-in-west-michigan.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 40px;
    left: 40px;
    width: 100px;
    height: 100px;
    opacity: 0.65;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    z-index: 999;
    -webkit-filter: drop-shadow(0 0 6px rgb(21 21 21 / 40%));
    filter: drop-shadow(0 0 6px rgb(21 21 21 / 40%));
}

html body .pmax-standalone-video .fusion-imageframe img,
html body .fusion-image-carousel.pmax-standalone-video .fusion-image-wrapper img {
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

html body .pmax-standalone-video:hover .fusion-imageframe img,
html body .fusion-image-carousel.pmax-standalone-video a:hover img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

html body .pmax-standalone-video:hover .fusion-image-element:after,
html body .fusion-image-carousel.pmax-standalone-video a:hover:after {
    opacity: 0.9;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

html body .pmax-youtube-embed {
    aspect-ratio: 16/9;
}

html body .pmax-youtube-embed p {
    margin-bottom: 0;
    width: 100%;
    height: 100%;
}

html body .pmax-youtube-embed iframe {
    width: 100%;
    height: 100%;
}

/* 1.2 Header */
.collapsed-nav-text {
    display: none !important;
}


html body .fusion-tb-header > .fusion-fullwidth {
    max-width: 1400px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

/* The header is transparent with white type because it is designed to sit over
 * the homepage's hero video. Anywhere else that only works if the page happens
 * to open with a dark banner image behind it — and a page without one renders
 * white-on-white. Give every non-homepage template a navy header field so the
 * nav is legible regardless of what the page starts with.
 *
 * This sets background-color rather than Avada's --awb-background-color: that
 * custom property is written as an inline style on this very element, and an
 * inline declaration always beats a stylesheet one. Setting the longhand works
 * because Avada's own rule is only `.fusion-fullwidth{background-color:var(…)}`,
 * which this out-specifies. */
body:not(.page-template-template-home) .fusion-tb-header > .fusion-fullwidth {
    background-color: rgb(var(--c-navy));
}

/* ── Sticky header ────────────────────────────────────────────────────────
 * The header follows the top of the page on scroll, and once the page has
 * scrolled past the top it gains a full-width navy background.
 *
 * position:fixed (not sticky) is used on every template so the pin is immune to
 * Avada's header-wrapper height and to any ancestor `overflow`, both of which
 * silently disable position:sticky. Because fixed pulls the header out of flow,
 * non-homepage templates reserve its height with padding-top on <body>; the
 * homepage skips that because its hero is full-bleed and the header was already
 * an overlay there.
 *
 * --grp-header-h is a safe fallback; script.js overwrites it with the header's
 * real measured height on load and on resize, so the reserved space always
 * matches. The navy is painted on .fusion-tb-header itself — the full-width
 * element, not the 1400px-capped inner bar — so it reaches both screen edges. */
:root {
    --grp-header-h: 90px;
}

/* Offset in-page anchor jumps and keyboard-focus scrolling by the fixed header's
   height, so a targeted element lands below the header instead of hidden beneath
   it. Uses the same measured variable, so it tracks the real header height and
   the mobile breakpoint automatically. */
html {
    scroll-padding-top: var(--grp-header-h);
}

html body .fusion-tb-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    -webkit-transition: background-color 0.3s ease, box-shadow 0.3s ease;
    -o-transition: background-color 0.3s ease, box-shadow 0.3s ease;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

html body:not(.page-template-template-home) {
    /*padding-top: var(--grp-header-h);*/
}

/* Keep the fixed header clear of the WordPress admin bar when logged in. */
html body.admin-bar .fusion-tb-header {
    top: 32px;
}

/* Scrolled state (toggled by script.js): full-width navy + a soft lift. */
html body.grp-header-stuck .fusion-tb-header {
    background-color:  rgb(32 41 56 / 98%);
    -webkit-box-shadow: 0 2px 12px rgba(var(--c-ink), 0.25);
    box-shadow: 0 2px 12px rgba(var(--c-ink), 0.25);
    height: 90px;
}
html body:not(.home) .fusion-tb-header  {
    background-color:  rgb(32 41 56 / 100%);
    -webkit-box-shadow: 0 2px 12px rgba(var(--c-ink), 0.25);
    box-shadow: 0 2px 12px rgba(var(--c-ink), 0.25);
    height: 90px;
}
html body:not(.home)   {
 padding-top: 90px;
}

@media (max-width: 1024px) {
    :root {
        --grp-header-h: 68px;
    }

    html body.admin-bar .fusion-tb-header {
        top: 46px;
    }
}

html body .fusion-tb-header .pmax-logo {
    min-width: 100px;
    max-width: 185px !important;
}

html body .fusion-tb-header .pmax-mobile-phone,


html body .fusion-tb-header .wtp-mobile-phone{
    position: absolute;
    top: 13px;
    right: 75px;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}




html body .fusion-tb-header .wtp-mobile-phone a{
    color: rgb(var(--color-white));
    font-weight: 600;
    font-size: 18px;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}




html body .fusion-tb-header .fusion-menu-element-wrapper:not(.collapse-enabled) .wtp-mobile-phone{
    display: none;
}

html body .fusion-tb-header ul.awb-menu__sub-ul.awb-menu__sub-ul_main {
    min-width: 280px;
}

/* Header dropdown submenus (e.g. Services) — Avada's own default: a flush,
   flat white box with a near-invisible 3%-opacity shadow and generic grey
   text (measured: box-shadow rgba(12,21,45,.03), text rgb(95,113,120), no
   accent of any kind). Restyled to look like the rest of this site rather
   than an unstyled default.
 *
 * Avada drives the base rule through --awb-* custom properties set inline on
 * the header wrapper by its own dynamic CSS, which loads after this
 * stylesheet — matching specificity there is not enough to win, so the
 * longhands below carry !important. transform/transition are new
 * properties Avada never sets here, so those don't need it.
 *
 * The open trigger itself is untouched: .awb-menu_em-hover .awb-menu__li:hover
 * (and :focus-within, and the click variant) already flips opacity/visibility.
 * The lift-in transform below is written against that exact same selector, so
 * it rides the same trigger instead of adding a second, competing one. */
html body .fusion-tb-header .awb-menu_dropdown .awb-menu__sub-ul {
    background-color: rgb(var(--c-white)) !important;
    border-top: 2px solid var(--brand-primary) !important;
    border-radius: 0 0 2px 2px !important;
    box-shadow:
            0 20px 40px -8px rgba(var(--c-ink), 0.16),
            0 4px 10px rgba(var(--c-ink), 0.06) !important;
    padding: 0.5rem 0 !important;
    margin-top: 14px !important;
    transform: translateY(-6px);
    transition: opacity calc(var(--awb-transition-time) * 1ms) var(--ease),
    transform 0.4s var(--ease);
}

html body .fusion-tb-header .awb-menu_em-hover .awb-menu__li.hover > .awb-menu__sub-ul,
html body .fusion-tb-header .awb-menu_em-hover .awb-menu__li:focus-within > .awb-menu__sub-ul,
html body .fusion-tb-header .awb-menu_em-hover .awb-menu__li:hover > .awb-menu__sub-ul,
html body .fusion-tb-header .awb-menu_em-click .awb-menu__open-nav-submenu_click[aria-expanded="true"] ~ .awb-menu__sub-ul {
    transform: translateY(0);
}

html body .fusion-tb-header .awb-menu__sub-li {
    background-color: transparent !important;
}

html body .fusion-tb-header .awb-menu__sub-ul a {
    font-family: var(--font-body) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    color: var(--brand-dark) !important;
    padding: 0.85rem 1.5rem !important;
    transition: background-color 0.3s var(--ease),
    color 0.3s var(--ease),
    padding-inline-start 0.3s var(--ease);
}

html body .fusion-tb-header .awb-menu__sub-ul a:hover,
html body .fusion-tb-header .awb-menu__sub-ul a:focus-visible {
    background-color: rgba(var(--c-sky), 0.32) !important;
    color: var(--brand-primary) !important;
    padding-inline-start: 1.85rem !important;
}

html body .fusion-tb-header .awb-menu__sub-ul a:focus-visible {
    outline: 2px solid rgb(var(--c-sky));
    outline-offset: -2px;
}

/* Belt-and-braces: the rule above already sets this, but only via a generic
   `a` element selector. Avada's own base colour for these links isn't in any
   shipped stylesheet — it's set on the exact class (.awb-menu__sub-a /
   .awb-submenu__sub-a, confirmed real via dynamic-css.php's own exclusion
   list for them), almost certainly from a shadow-DOM style block bundled
   inside its JS rather than a static CSS file, so it isn't visible to grep
   or confirmable by reading source here. Targeting that same exact class
   directly guarantees equal-or-higher specificity than whatever Avada sets
   on it, so this wins regardless of source order. */
html body .fusion-tb-header .awb-menu__sub-a,
html body .fusion-tb-header .awb-submenu__sub-a {
    color: var(--brand-dark) !important;
}

/* Same restyle, legacy markup path: depending on this site's Header Layout
   setting, the desktop dropdown can render through Avada's older nav walker
   (.fusion-main-menu > .fusion-dropdown-menu > ul.sub-menu) instead of the
   awb-menu web component targeted above. .fusion-main-menu only ever wraps
   the desktop nav — the mobile off-canvas panel uses a completely different
   container (.wtp-mobile-menu) — so this can't collide with anything mobile
   elsewhere in this file. Harmless if this install doesn't use this path:
   the selectors simply match nothing. */
html body .fusion-main-menu .sub-menu {
    background-color: rgb(var(--c-white)) !important;
    border-top: 2px solid var(--brand-primary) !important;
}

html body .fusion-main-menu .sub-menu a {
    color: var(--brand-dark) !important;
}

html body .fusion-main-menu .sub-menu a:hover,
html body .fusion-main-menu .sub-menu a:focus-visible {
    background-color: rgba(var(--c-sky), 0.32) !important;
    color: var(--brand-primary) !important;
}

/* Mobile off-canvas menu (.wtp-mobile-menu — the header instance shown below
   the "large" breakpoint; the desktop rules above target a *different*
   instance and are untouched by anything here).
 *
 * Two real bugs found while inspecting this, not just a colour mismatch:
 *
 * 1. The open panel is `position: absolute`, sized to its own content
 *    (measured: 462px tall) rather than the viewport, so on a page taller
 *    than one screen the menu simply ends partway down and the page's own
 *    content shows through underneath it — logos, headings, whatever
 *    happens to sit at that scroll position. Fixed by promoting it to
 *    `position: fixed` and pinning all four edges, so its size is always
 *    "the viewport below the header bar", never "however tall its rows add
 *    up to". 80px matches the header bar's own measured height — checked at
 *    360/390/428px, it doesn't vary across that range.
 *
 * 2. The expanded "Services" sub-items render navy text (#202938) on a
 *    transparent background sitting over the slate panel — ink-on-slate,
 *    under 2:1, effectively illegible. Not a stylistic quibble; those eight
 *    service names were unreadable before this rule existed.
 *
 * Background is brand-dark to match the header bar directly above it (they
 * were previously two different colours — navy bar, slate list — with no
 * reason for the seam). The current-page item traded its own jarring
 * solid-colour swap for a left accent, the same idiom the desktop dropdown
 * already uses for hover, so it reads as this site's own convention rather
 * than a different treatment invented for mobile. */
/* height is an explicit calc(), not top+bottom, on purpose: one of Avada's own
   ancestor elements (the .awb-menu_transition-fade wrapper) sets a `transform`
   for its fade animation, and ANY transformed ancestor becomes the containing
   block for position:fixed descendants — the fix's own viewport no longer
   applies to bottom:0, which computed against that ancestor's own ~56px box
   and collapsed this panel to 0 height (confirmed: computed height was
   literally 0px). vh units sidestep this entirely — they're defined against
   the true viewport regardless of any transformed ancestor in between, so
   top:80px (landing correctly, since that ancestor happens to start flush
   with the real viewport top) plus a vh-based height reaches the same result
   without depending on the compromised bottom-offset math. */
html body .wtp-mobile-menu .awb-menu__main-ul {
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 80px) !important;
    height: calc(100dvh - 80px) !important;
    /* Avada's own .expanded rule sets max-height: max-content — a second
       property from `height`, so it clamps the box down to its natural
       content size regardless of the explicit height above. Confirmed via
       CSS.getMatchedStylesForNode: without this, height computed correctly
       but the rendered box still came out at the old 462px content height. */
    max-height: calc(100vh - 80px) !important;
    max-height: calc(100dvh - 80px) !important;
    /* Avada's own .awb-menu.collapse-enabled rule sets
       margin-top: var(--awb-mobile-nav-trigger-bottom-margin) (~17px) on this
       same element, unrelated to the `top: 80px` above — the two stack, so
       the panel's fill actually started ~17px below the header bar's bottom
       edge, showing a sliver of whatever page content sits behind it (the
       page title bar, on interior pages). Confirmed via getBoundingClientRect:
       top computed to 96.95px, not 80px, until this override. */
    margin-top: 0 !important;
    overflow-y: auto !important;
    background-color: var(--brand-dark) !important;
    -webkit-overflow-scrolling: touch;
}

/* The header bar itself (.wtp-mobile-menu, holding the logo/phone/toggle) is
   transparent-over-video on the homepage by design when the menu is closed.
   With the panel below it now sealed flush (fix above), that transparency
   became the only remaining gap: opening the menu still showed hero video
   behind the logo/phone/close icon for that top 80px strip, while the list
   below was solid navy. Forcing this bar solid only while
   nav.awb-menu carries .expanded makes the whole area one continuous fill
   without touching the closed-state transparency anywhere else on the site. */
html body .fusion-tb-header .fusion-fullwidth.wtp-mobile-menu:has(nav.awb-menu.expanded) {
    background-color: var(--brand-dark) !important;
}

html body .wtp-mobile-menu .awb-menu__main-li {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(var(--c-paper), 0.12) !important;
}

html body .wtp-mobile-menu .awb-menu__main-a {
    /* The opaque slate fill lives on the <a> itself, not the <li> — found by
       walking every descendant's computed background after the accent-only
       fix above still showed a per-row colour split. Without this, every
       non-current row keeps Avada's own #5f7178-ish default underneath the
       (correctly transparent) <li>, which is exactly the mismatched slate the
       rest of this rule set out to replace with the uniform navy panel. */
    background-color: transparent !important;
    font-family: var(--font-body) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    color: rgb(var(--c-paper)) !important;
    padding: 1.15rem 1.5rem !important;
    border-left: 3px solid transparent;
    transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

html body .wtp-mobile-menu .awb-menu__main-a:hover,
html body .wtp-mobile-menu .awb-menu__main-a:focus-visible {
    background-color: rgba(var(--c-paper), 0.06) !important;
}

/* Left accent instead of the old solid-colour swap — the row still reads
   like its siblings, just marked, rather than looking like a different
   component. */
html body .wtp-mobile-menu .awb-menu__main-li.current-menu-item .awb-menu__main-a,
html body .wtp-mobile-menu .awb-menu__main-li.current_page_item .awb-menu__main-a {
    border-left-color: var(--brand-primary);
    background-color: rgba(var(--c-paper), 0.05) !important;
}

/* The Services accordion: darker than the list it opens from (--c-ink, not
   --brand-dark), on purpose — a nested level should look recessed, not equal
   weight to what it's nested under. Sentence case, not uppercase, for the
   same reason the desktop dropdown's sub-items are sentence case: it's the
   one visual cue separating "section" from "item within a section".
 *
 * .fusion-tb-header is in every selector below for a reason that isn't
 * optional: this mobile panel carries .awb-menu_dropdown in its own class
 * list (it's the same "dropdown" event-mode Avada uses for the desktop
 * flyout), so the desktop dropdown rule two sections up
 * (.fusion-tb-header .awb-menu_dropdown .awb-menu__sub-ul, 3 classes) also
 * matches this element. Both rules carry !important, so it comes down to
 * specificity — and .wtp-mobile-menu .awb-menu__sub-ul alone is only 2
 * classes, so the desktop rule was winning and painting this accordion white.
 * Confirmed by screenshot: the fix below made no visible difference until
 * this got added. */
html body .fusion-tb-header .wtp-mobile-menu .awb-menu__sub-ul {
    background-color: rgb(var(--c-ink)) !important;
    border-top: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    padding: 0.35rem 0 !important;
    transform: none !important;
}

html body .fusion-tb-header .wtp-mobile-menu .awb-menu__sub-li {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(var(--c-paper), 0.08) !important;
}
.awb-menu.collapse-enabled .awb-menu__main-li, .awb-menu.collapse-enabled .awb-menu__sub-li {
    background: var(--c-taupe) !important;
}

html body .fusion-tb-header .wtp-mobile-menu .awb-menu__sub-ul a {
    /* Same fix as .awb-menu__main-a above and for the same reason: the fill
       lives on the <a>, not the <li>. */
    background-color: transparent !important;
    font-family: var(--font-body) !important;
    font-size: 0.88rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    color: rgba(var(--c-paper), 0.88) !important;
    padding: 0.9rem 1.5rem 0.9rem 2.5rem !important;
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

html body .fusion-tb-header .wtp-mobile-menu .awb-menu__sub-ul a:hover,
html body .fusion-tb-header .wtp-mobile-menu .awb-menu__sub-ul a:focus-visible {
    background-color: rgba(var(--c-paper), 0.06) !important;
    color: rgb(var(--c-paper)) !important;
    padding-inline-start: 2.5rem !important;
}

html body .wtp-mobile-menu .awb-menu__open-nav-submenu_mobile {
    color: rgba(var(--c-paper), 0.85);
}

html body a.pmax_no-click.fusion-button,
html body .fusion-tb-header ul li.pmax_no-click,
html body .fusion-tb-header ul li.pmax_no-click > a {
    cursor: default !important;
    /*pointer-events: none;*/
}

html body a.pmax_no-click.fusion-button,
html body a.pmax_no-click.fusion-button:focus,
html body a.pmax_no-click.fusion-button:active,
html body a.pmax_no-click.fusion-button:hover {
    background-color: var(--button_gradient_top_color) !important;
}

/* 1.3 Footer */
html body .fusion-footer .gform_required_legend {
    display: none;
}

html body .fusion-footer .gform_wrapper {
    margin-bottom: 0;
}

html body .fusion-footer .gform_wrapper .gfield label {
    color: rgb(var(--color-white));
}

html body .fusion-footer .gform_wrapper .ginput_container {
    margin-top: 6px;
}

html body .fusion-footer .gform_wrapper .gfield input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
html body .fusion-footer .gform_wrapper .gfield textarea:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
html body .fusion-footer .gform_wrapper .gfield_select[multiple=multiple] {
    background-color: transparent;
    border: 3px solid rgba(var(--color-white), 0.5);
    font-size: 16px;
    color: rgb(var(--color-white));
    padding: 12px;
}

html body .fusion-footer .gform_wrapper .gfield input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
    min-height: 50px;
}

html body .fusion-footer h1,
html body .fusion-footer h2,
html body .fusion-footer h3,
html body .fusion-footer h4,
html body .fusion-footer h5,
html body .fusion-footer h6,
html body .fusion-footer p,
html body .fusion-footer p a {
    color: rgb(var(--color-white));
}

html body .fusion-footer p a:hover {
    color: rgb(var(--color-cream));
    text-decoration: underline;
}

.responsive-img, .responsive-img img {
    min-width: 100%;
    height: auto;
}

/* 1.4 Sidebar */


/*------------------------
*      2. Home-page      *
-------------------------*/
html body .fusion-flex-container.pmax-hero-container {
    padding: 0;
    overflow: hidden;
}

html body .fusion-flex-container.pmax-hero-container .fusion-builder-row {
    -ms-flex-line-pack: end;
    align-content: flex-end;
    padding-bottom: 40px;
    max-width: 100vw !important;
    margin: 0 !important;
}

html body .fusion-flex-container.pmax-hero-container .fusion-builder-row .pmax-hero-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

html body .fusion-flex-container.pmax-hero-container .fusion-builder-row .fusion-layout-column:not(.pmax-hero-image) .fusion-column-wrapper {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

html body .fusion-flex-container.pmax-hero-container .fusion-builder-row .pmax-hero-image:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgb(0,0,0);
    background: -o-linear-gradient(top, rgba(0,0,0,0.2049413515406162) 0%, rgba(0,0,0,0.048078606442577) 50%, rgba(0,0,0,0.2) 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2049413515406162)), color-stop(50%, rgba(0,0,0,0.048078606442577)), to(rgba(0,0,0,0.2)));
    background: linear-gradient(180deg, rgba(0,0,0,0.2049413515406162) 0%, rgba(0,0,0,0.048078606442577) 50%, rgba(0,0,0,0.2) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}

html body .fusion-flex-container.pmax-hero-container .fusion-builder-row .pmax-hero-image .fusion-column-wrapper,
html body .fusion-flex-container.pmax-hero-container .fusion-builder-row .pmax-hero-image .fusion-column-wrapper > div,
html body .fusion-flex-container.pmax-hero-container .fusion-builder-row .pmax-hero-image .fusion-column-wrapper > div span.fusion-imageframe,
html body .fusion-flex-container.pmax-hero-container .fusion-builder-row .pmax-hero-image .fusion-column-wrapper > div span.fusion-imageframe img {
    width: 100%;
    height: 100%;
}

html body .fusion-flex-container.pmax-hero-container .fusion-builder-row .pmax-hero-image .fusion-column-wrapper > div span.fusion-imageframe img {
    -o-object-fit: cover;
    object-fit: cover;
}

html body .fusion-flex-container .fusion-row .fusion-flex-column.pmax-hero-buttons .fusion-column-wrapper:not(.fusion-flex-column-wrapper-legacy) {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 40px 1fr;
    grid-template-columns: 1fr 1fr;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
}

html body .fusion-flex-container .fusion-row .fusion-flex-column.pmax-hero-buttons .fusion-column-wrapper:not(.fusion-flex-column-wrapper-legacy) > div {
    display: inline-block;
    width: auto;
    text-align: center;
}

html body .fusion-flex-container .fusion-row .fusion-flex-column.pmax-hero-buttons .fusion-column-wrapper:not(.fusion-flex-column-wrapper-legacy) > div:first-of-type {
    text-align: right;
}

html body .fusion-flex-container .fusion-row .fusion-flex-column.pmax-hero-buttons .fusion-column-wrapper:not(.fusion-flex-column-wrapper-legacy) > div:last-of-type {
    text-align: left;
}

html body .fusion-flex-container .fusion-row .fusion-flex-column.pmax-hero-buttons .fusion-column-wrapper:not(.fusion-flex-column-wrapper-legacy) > div a.fusion-button {
    text-align: center;
    min-width: 209px;
}

html body .pmax-testimonial-video .fusion-column-wrapper > div,
html body .pmax-testimonial-video .fusion-column-wrapper > div span.fusion-imageframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

html body .pmax-testimonial-video .fusion-column-wrapper > div span.fusion-imageframe img {
    position: absolute;
    bottom: 40px;
    left: 40px;
    width: 7.5vw;
    min-width: 48px;
    max-width: 100px;
    height: auto;
    opacity: 0.65;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

html body .pmax-testimonial-video:hover .fusion-column-wrapper > div span.fusion-imageframe img {
    opacity: 0.9;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

html body .pmax-bullets ul li {
    color: rgb(var(--color-white));
    font-size: 21px;
}

html body .pmax-bullets ul {
    list-style-type: none;
    line-height: 2.2;
}

html body .pmax-bullets ul li img {
    position: relative;
    right: 5px;
    top: 6px;
}

html body .pmax-bullets .pmax-house-icon .fusion-column-wrapper {
    text-align: right;
}

html body .pmax-bullets .pmax-house-icon img {
    height: 225px;
    width: auto;
    position: relative;
}

html body .pmax-home-projects .pmax-project-name {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

html body .pmax-home-projects .swiper-slide {
    max-width: calc((100% / 3) - (80px / 3)) !important;
}

html body .pmax-al-gallery .swiper-slide {
    max-width: calc((100% / 3) - 8px) !important;
}

html body .pmax-home-projects .fusion-carousel-item-wrapper {
    position: relative;
}

html body .pmax-home-projects .fusion-carousel-item-wrapper .fusion-image-wrapper:before {
    background-color: rgba(var(--color-black), 0.65);
    z-index: 999;
}

html body .pmax-home-projects .fusion-carousel-item-wrapper .pmax-project-name p {
    color: rgb(var(--color-white)) !important;
    font-size: 21px;
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    margin: 0;
}

html body .pmax-home-projects .fusion-carousel-item-wrapper:hover .pmax-project-name p {
    opacity: 1;
}

html body .pmax-home-projects .fusion-carousel-item-wrapper:hover .pmax-project-name p:before,
html body .pmax-home-projects .fusion-carousel-item-wrapper:hover .pmax-project-name p:after {
    content: '';
    display: block;
    width: 25px;
    height: 1px;
    background-color: rgb(var(--color-white));
}

html body .pmax-home-projects .fusion-carousel-item-wrapper:hover .pmax-project-name p:before {
    position: absolute;
    top: 50%;
    left: -45px;
}

html body .pmax-home-projects .fusion-carousel-item-wrapper:hover .pmax-project-name p:after {
    position: absolute;
    top: 50%;
    right: -45px;
}

html body .pmax-home-projects-carousel .fusion-carousel-wrapper,
html body .pmax-home-projects-carousel .fusion-carousel-wrapper .fusion-carousel-holder {
    min-height: 363px;
}

html body .pmax-bullets.pmax-glass:after {
    content: '';
    background-color: transparent;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
}


/*------------------------
*      3. Sub-page       *
------------------------*/
html body .pmax-page-banner {
    background-color: var(--brand-dark);
    min-height: 350px;
    max-height: 36vw;
    overflow: hidden;
}

html body .pmax-page-banner.no-image {
    height: 20vw;
}

html body .pmax-page-banner .fusion-row .fusion-layout-column,
html body .pmax-page-banner .fusion-row .fusion-layout-column .fusion-image-element,
html body .pmax-page-banner .fusion-row .fusion-layout-column .fusion-image-element span {
    width: 100%;
    height: 100%;
}

html body .pmax-page-banner .fusion-row .fusion-layout-column .fusion-image-element span img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
}

html body .pmax-page-banner .fusion-row .fusion-layout-column .fusion-image-element span.align-center-top img {
    -o-object-position: center top;
    object-position: center top;
}

html body .pmax-page-banner .fusion-row .fusion-layout-column .fusion-image-element span.align-center-center img {
    -o-object-position: center center;
    object-position: center center;
}

html body .pmax-page-banner .fusion-row .fusion-layout-column .fusion-image-element span.align-center-bottom img {
    -o-object-position: center bottom;
    object-position: center bottom;
}

html body .pmax-page-banner .fusion-image-element:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(var(--color-black), 0.65);
    z-index: 11;
}

html body .fusion-text.pmax-page-banner-title {
    position: absolute;
    bottom: 10%;
    left: 50%;
    z-index: 999;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 90%;
}

html body .fusion-text.pmax-page-banner-title h1 {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: normal;
    margin: 0;
    text-transform: uppercase;
    opacity: 0.95;
    font-size: 92px !important;
}

html body.page .about-block {
    padding: 24px 16px 10px 16px;
    background-color: var(--brand-primary);
}

html body.page .about-block h3 {
    text-transform: uppercase;
}

html body.page .about-block a {
    border: 1px solid var(--text-on-dark);
}

html body .bio-block .fusion-image-element:before {
    content: '';
    display: block;
    background-color: rgba(var(--color-black), 0.5);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 0;
}

html body .bio-block .bio-block-inner {
    position: absolute;
    top: 55%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    z-index: 999;
    width: 100%;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 0;
}

html body .bio-block .bio-block-inner h3 {
    padding: 0 15px;
}

html body .bio-block:hover .fusion-image-element:before {
    opacity: 1;
}

html body .bio-block:hover .bio-block-inner {
    opacity: 0.9;
}

html body .bio-block .bio-block-inner h3 {
    font-size: 2.8rem;
    font-family: var(--font-body);
    font-weight: lighter;
    opacity: 0.95;
}

html body .bio-block .bio-block-inner img {
    max-width: 80px;
}

html body.our-team .bio-block.no-bio,
html body.our-team .bio-block.no-bio a {
    cursor: default;
}

html body.our-team .bio-block.no-bio .bio-block-inner img {
    display: none;
}

html body .contact-card {
    display: inline-block;
    padding: 10px 20px 18px 20px;
    background-color: var(--brand-primary);
    max-width: 100%;
}

html body .contact-card br {
    display: none;
}

html body #content .contact-card p {
    color: var(--text-on-dark);
    font-family: var(--font-display);
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
}

html body #content .contact-card p:not(:first-child) {
    margin: 0;
}

html body #content .contact-card .line {
    width: 50%;
    height: 5px;
    background-color: var(--bg-page);
    margin: 0 0 24px 0;
    opacity: 0.9;
}

html body .contact-card a {
    color: var(--text-on-dark);
    font-family: var(--font-body);
    font-weight: lighter;
    font-size: 16px;
    display: block;
}

html body .contact-card a.phone {
    margin-bottom: 10px;
}

html body .contact-card a img {
    width: 32px;
    height: auto;
    margin-right: 10px;
    position: relative;
    top: -2px;
}

html body.our-process .list-col {
    min-width: 600px;
    margin: 40px 0;
}

html body.our-process .pmax-bullets-list ul {
    list-style-type: none;
    padding: 0 20px 0 0;
}

html body.our-process .pmax-bullets-list ul img {
    width: 56px;
    height: auto;
    position: relative;
    top: -7px;
    margin-right: 7px;
}

html body.our-process main#main {
    padding-bottom: 0;
}

html body.gallery {
    max-width: 100dvw;
}

html body.gallery .bio-block {
    margin-bottom: 45px;
}

html body.gallery .bio-block .bio-block-inner h3 {
    font-size: 1.8rem;
}

html body.gallery .bio-block .bio-block-inner img {
    max-width: 64px;
}

html body.get-started .gform_wrapper select.gfield_select {
    background-color: var(--brand-dark);
    min-height: 50px;
}

html body.get-started #wrapper .gform_wrapper .select-arrow {
    background-color: transparent;
    color: var(--text-on-dark);
}

html body .fusion-image-carousel-fixed.pmax-al-gallery {
    margin-bottom: 0;
}

html body .fusion-image-carousel-fixed.pmax-al-gallery .awb-swiper .pmax-project-name {
    display: none;
}

html body .fusion-image-carousel-fixed.pmax-al-gallery .awb-swiper .fusion-carousel-item-wrapper {
    aspect-ratio: 1/1;
}

html body .fusion-image-carousel-fixed.pmax-al-gallery .awb-swiper .fusion-carousel-item-wrapper .fusion-image-wrapper {
    width: 100%;
    height: 100%;
}

html body .fusion-image-carousel-fixed.pmax-al-gallery .awb-swiper .fusion-carousel-item-wrapper .fusion-image-wrapper a {
    display: block;
    width: 100%;
    height: 100%;
}

html body .fusion-image-carousel-fixed.pmax-al-gallery .awb-swiper .fusion-carousel-item-wrapper .fusion-image-wrapper a picture {
    display: block;
}

html body .fusion-image-carousel-fixed.pmax-al-gallery .awb-swiper .fusion-carousel-item-wrapper .fusion-image-wrapper a picture,
html body .fusion-image-carousel-fixed.pmax-al-gallery .awb-swiper .fusion-carousel-item-wrapper .fusion-image-wrapper a img,
html body .fusion-image-carousel-fixed.pmax-al-gallery .awb-swiper .fusion-carousel-item-wrapper .fusion-image-wrapper a picture img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    max-height: none;
}

html body .pmax-design-intro {
    max-width: 960px;
    margin: 0 auto !important;
}

html body .pmax-fl-section .fusion-builder-row {
    padding: 20px 0 0 0;
    border: 1px solid var(--border-subtle);
}

html body.the-build .pmax-timeline .fusion-layout-column.pmax-timeline-left {
    padding-right: 60px;
}

html body.the-build .pmax-timeline .fusion-layout-column.pmax-timeline-right {
    padding-left: 20px;
}

html body.the-build .pmax-timeline .fusion-layout-column.pmax-timeline-left:after {
    width: 2px;
    height: 50%;
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    background-color: var(--brand-primary);
}

html body.the-build .pmax-timeline .fusion-layout-column.pmax-timeline-right:before {
    content: '';
    display: block;
    background-color: var(--bg-page);
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid var(--border-strong);
    position: absolute;
    top: calc(50% - 12px);
    left: -12px;
}

html body.the-build .pmax-timeline:not(.first) .fusion-layout-column.pmax-timeline-left:after {
    height: 100%;
    top: 0;
}

html body.the-build .pmax-timeline.last .fusion-layout-column.pmax-timeline-left:after {
    height: 50%;
    top: 0;
}

html body.html-sitemap ul#menu-header-blocks-menu-1 li a {
    color: var(--brand-primary);
    font-weight: 700;
}

html body.html-sitemap ul#menu-header-blocks-menu-1 li a:hover {
    color: var(--brand-dark);
}

html body .gform_confirmation_message {
    color: var(--text-on-dark);
}

html body.videos .pmax-project-name,
html body.videos h2.awb-imageframe-caption-title {
    display: none;
}

html body .gfield_description.validation_message.gfield_validation_message,
html body .gfield_required.gfield_required_asterisk {
    background-color: transparent;
    border: none;
    color: var(--color-warning);
}

html body .gform_confirmation_message {
    background: var(--color-success);
    text-align: center;
    color: var(--text-on-dark);
    font-weight: 600;
    padding: 20px;
    border: 3px solid rgba(var(--color-white), 0.5);
}


/*------------------------
*      4. Responsive     *
------------------------*/
@media (max-width: 1279px) {
    html body .fusion-text.pmax-page-banner-title h1 {
        font-size: 85px !important;
    }

    html body .fusion-tb-header > .fusion-fullwidth > .fusion-builder-row.fusion-row {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    html body .fusion-tb-header > .fusion-fullwidth > .fusion-builder-row.fusion-row .pmax-logo-column {
        width: 20% !important;
    }

    html body.fusion-body .fusion-tb-header .fusion-menu-element-wrapper[data-count="0"] .fusion-menu-element-list>li {
        margin-right: 8px;
    }
}

@media (max-width: 1230px) {
    html body .pmax-home-projects-carousel .fusion-carousel-wrapper,
    html body .pmax-home-projects-carousel .fusion-carousel-wrapper .fusion-carousel-holder {
        min-height: 0;
    }

    html body .awb-menu_icons-left a.awb-menu__main-a {
        font-size: 15px;
    }
}

@media (max-width: 1099px) {
    html body .fusion-text.pmax-page-banner-title h1 {
        font-size: 72px !important;
    }
}

@media (max-width: 1024px) {

    .awb-menu.collapse-enabled.awb-menu_indent-left ul ul a {
        padding-left: 1.5em !important;
        color: #000 !important;
        font-weight: 700 !important;
    }
    html body .fusion-tb-header .wtp-mobile-menu ul.awb-menu__sub-ul {
        background: #fff !important;
        background-color: #fff !important;
    }

    html body .fusion-tb-header .wtp-mobile-menu ul.awb-menu__sub-ul a{
        color: #000 !important;
    }
    html body .fusion-tb-header .wtp-mobile-menu ul.awb-menu__sub-ul a:hover{
        color: var(--c-taupe) !important;
    }
    html body .pmax-standalone-video .fusion-image-element:after {
        width: 72px;
        height: 72px;
        opacity: 0.8;
    }

    html body .fusion-tb-header .fusion-fullwidth.pmax-mobile-menu,


    html body .fusion-tb-header .fusion-fullwidth.wtp-mobile-menu{
        z-index: 9999;
    }

    html body .fusion-tb-header .fusion-fullwidth.pmax-mobile-menu > .fusion-row,


    html body .fusion-tb-header .fusion-fullwidth.wtp-mobile-menu > .fusion-row{
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        padding: 20px 30px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    html body .fusion-tb-header .fusion-fullwidth.pmax-mobile-menu > .fusion-row .fusion_builder_column_1_4,
    html body .fusion-tb-header .fusion-fullwidth.pmax-mobile-menu > .fusion-row .fusion_builder_column_3_4,


    html body .fusion-tb-header .fusion-fullwidth.wtp-mobile-menu > .fusion-row .fusion_builder_column_1_4,
    html body .fusion-tb-header .fusion-fullwidth.wtp-mobile-menu > .fusion-row .fusion_builder_column_3_4{
        margin: 0;
    }

    html body .fusion-tb-header .fusion-fullwidth.pmax-mobile-menu > .fusion-row .fusion_builder_column_1_4,


    html body .fusion-tb-header .fusion-fullwidth.wtp-mobile-menu > .fusion-row .fusion_builder_column_1_4{
        width: 25%;
    }

    html body .fusion-tb-header .fusion-fullwidth.pmax-mobile-menu > .fusion-row .fusion_builder_column_3_4,


    html body .fusion-tb-header .fusion-fullwidth.wtp-mobile-menu > .fusion-row .fusion_builder_column_3_4{
        width: 75%;
    }

    html body .fusion-tb-header .fusion-fullwidth.pmax-mobile-menu > .fusion-row .fusion_builder_column_3_4 nav.awb-menu,


    html body .fusion-tb-header .fusion-fullwidth.wtp-mobile-menu > .fusion-row .fusion_builder_column_3_4 nav.awb-menu{
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    html body .fusion-tb-header .fusion-fullwidth.pmax-mobile-menu ul#menu-header-blocks-menu,


    html body .fusion-tb-header .fusion-fullwidth.wtp-mobile-menu ul#menu-header-blocks-menu{
        margin-top: 4.35vw;
    }

    html body .fusion-tb-header .fusion-fullwidth.pmax-mobile-menu .awb-menu__m-toggle,


    html body .fusion-tb-header .fusion-fullwidth.wtp-mobile-menu .awb-menu__m-toggle{
        padding: 12px 0;
    }

    html body .fusion-flex-container.pmax-hero-container .fusion-builder-row .pmax-hero-image .fusion-column-wrapper {
        margin-right: 0;
        margin-left: 0;
    }

    html body .fusion-flex-container .fusion-row .fusion-flex-column.pmax-hero-buttons .fusion-column-wrapper:not(.fusion-flex-column-wrapper-legacy) {
        -webkit-column-gap: 12px;
        -moz-column-gap: 12px;
        column-gap: 12px;
    }

    html body .fusion-flex-container .fusion-row .fusion-flex-column.pmax-hero-buttons .fusion-column-wrapper:not(.fusion-flex-column-wrapper-legacy) > div a.fusion-button {
        font-size: 13px;
        padding: 12px 35px;
        min-width: 164px;
    }

    html body .pmax-testimonial-video {
        height: 50vw;
        max-height: 450px;
    }

    html body .pmax-bullets .fusion-builder-row .fusion-layout-column {
        margin: 0;
    }

    html body.our-process .pmax-bullets-list ul {
        display: table;
        margin: 0 auto;
        position: relative;
        padding: 0;
    }

    html body.the-build .pmax-timeline .fusion-layout-column.fusion_builder_column_1_6 {
        display: none;
    }

    html body.our-team .bio-block {
        max-width: 512px;
        margin-right: auto;
        margin-left: auto;
    }

    html body.active-listings .pmax-al-section > .fusion-builder-row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    html body .pmax-al-gallery .swiper-slide {
        max-width: calc((100% / 3) - 8px) !important;
    }
    .wtp-mobile-menu {
        padding: 0 10px !important;
    }
}

@media (max-width: 900px) {
    html body .fusion-tb-footer.fusion-footer,
    html body .fusion-tb-footer.fusion-footer .fusion-social-networks .fusion-social-networks-wrapper {
        text-align: center;
    }

    html body .fusion-tb-footer.fusion-footer .gform_footer {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    html body .fusion-flex-container.pmax-hero-container .fusion-builder-row .pmax-hero-image .fusion-column-wrapper > div span.fusion-imageframe:after {
        background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 100%);
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)), color-stop(40%, rgba(0,0,0,0)), to(rgba(0,0,0,0.5)));
        background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 100%);
    }

    html body .fusion-flex-container.pmax-hero-container .fusion-title.title {
        margin-bottom: 20px !important;
    }

    html body .fusion-flex-container.pmax-hero-container .fusion-title.title h3 {
        text-shadow: 0 0 8px rgb(var(--color-black));
    }

    html body .pmax-bullets .pmax-house-icon .fusion-column-wrapper {
        text-align: center;
    }

    html body .pmax-bullets .pmax-bullets-list.fusion-text {
        text-align: center;
    }

    html body .pmax-bullets .pmax-bullets-list.fusion-text ul {
        display: inline-block;
        margin: 0 auto;
        text-align: left;
        padding: 0;
    }

    @media (orientation: portrait) {
        html body.fusion-body .fusion-flex-container.pmax-hero-container.fusion-builder-row-2 {
            min-height: 60vh;
        }
    }
}

@media (max-width: 699px) {
    html body .pmax-page-banner {
        min-height: 360px;
    }

    html body .fusion-text.pmax-page-banner-title h1 {
        font-size: 48px !important;
    }

    html body.the-build .pmax-timeline .fusion-layout-column.fusion_builder_column_1_3 {
        width: 420px;
    }

    html body.the-build .pmax-timeline .fusion-builder-row {
        padding-bottom: 40px;
        max-width: 420px !important;
    }

    html body.the-build .pmax-timeline .fusion-layout-column.pmax-timeline-left,
    html body.the-build .pmax-timeline .fusion-layout-column.pmax-timeline-right {
        padding-right: 0;
        padding-left: 0;
    }

    html body.the-build .pmax-timeline .fusion-layout-column.pmax-timeline-left:after,
    html body.the-build .pmax-timeline .fusion-layout-column.pmax-timeline-right:before {
        display: none;
    }

    html body.the-build .pmax-timeline .fusion-builder-row:before {
        content: '';
        display: block;
        background-color: var(--brand-primary);
        width: 2px;
        height: calc(26% - 9px);
        position: absolute;
        top: calc(74% + 9px);
        left: 0;
    }

    html body.the-build .pmax-timeline .fusion-builder-row:after {
        content: '';
        display: block;
        background-color: var(--bg-page);
        width: 18px;
        height: 18px;
        border-radius: 999px;
        border: 2px solid var(--border-strong);
        position: absolute;
        top: 74%;
        left: -10px;
    }

    html body.the-build .pmax-timeline:not(.first) .fusion-builder-row:before {
        height: 100%;
        top: 0;
    }

    html body.the-build .pmax-timeline.last .fusion-builder-row:before {
        height: calc(74% + 16px);
        top: 0;
    }
}

@media (max-width: 640px) {
    .pmax-testimonial-2 > .fusion-builder-row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    html body #menu-modern-shop-main-menu {
        margin-top: 15px;
    }

    html body .pmax-bullets .pmax-house-icon img {
        height: auto;
        width: 90%;
    }
}

@media (max-width: 639px) {
    html body .pmax-home-projects .swiper-slide {
        max-width: calc(50% - 20px) !important;
    }

    html body .pmax-al-gallery .swiper-slide {
        max-width: calc(50% - 6px) !important;
    }
}

@media (max-width: 639px) {
    .wtp-mobile-menu {
        padding: 0 10px !important;
    }
}

@media (min-width: 418px) and (max-width: 576px) {
    .wtp-mobile-menu  .fusion-builder-column-3.fusion_builder_column_1_4{
        width: 25%;
    }
    .wtp-mobile-menu .fusion-image-element {
        width: 130%;
    }
}
@media (min-width: 350px) and (max-width: 418px) {

    .wtp-mobile-menu .fusion-image-element {
        width: 130%;
    }
}

@media (max-width: 499px) {
    /*html body .pmax-home-projects .fusion-carousel-item-wrapper .fusion-image-wrapper:before {*/
    /*    opacity: 1;*/
    /*}*/

    /*html body .pmax-home-projects .fusion-carousel-item-wrapper .pmax-project-name p {*/
    /*    opacity: 1;*/
    /*}*/

    /* Scrolled state (toggled by script.js): full-width navy + a soft lift. */
    html body.grp-header-stuck .fusion-tb-header {
        height: 80px;
    }
    html body .pmax-standalone-video .fusion-image-element:after {
        width: 56px;
        height: 56px;
        bottom: 20px;
        left: 20px;
        opacity: 0.9;
    }

    html body .fusion-tb-header .pmax-mobile-phone,


    html body .fusion-tb-header .wtp-mobile-phone{
        top: 15px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    html body .fusion-tb-header .pmax-mobile-phone a,


    html body .fusion-tb-header .wtp-mobile-phone a{
        font-size: 16px;
    }

    html body .fusion-tb-header .fusion-fullwidth.pmax-mobile-menu > .fusion-row,


    html body .fusion-tb-header .fusion-fullwidth.wtp-mobile-menu > .fusion-row{
        padding: 12px 0;
    }

    html body .fusion-tb-header .fusion-fullwidth.pmax-mobile-menu > .fusion-row .fusion_builder_column_1_4,


    html body .fusion-tb-header .fusion-fullwidth.wtp-mobile-menu > .fusion-row .fusion_builder_column_1_4{
        width: calc(100% / 3);
        padding-left: 6px;
    }
    html body .fusion-tb-header .fusion-fullwidth.pmax-mobile-menu > .fusion-row .fusion_builder_column_3_4,

    html body .fusion-tb-header .fusion-fullwidth.wtp-mobile-menu > .fusion-row .fusion_builder_column_3_4{
        width: calc((100% / 3) * 2);
    }

    html body.our-process .pmax-bullets-list ul img {
        width: 32px;
        height: auto;
        top: -2px;
    }

    html body.our-process .pmax-bullets-list ul h2 {
        font-size: 24px;
    }

    html body.the-build .pmax-timeline .fusion-layout-column.fusion_builder_column_1_3 {
        width: 100%;
    }

    html body.the-build .pmax-timeline .fusion-builder-row {
        padding-left: 40px !important;
        max-width: 100% !important;
    }

    html body #content .contact-card p {
        font-size: 16px;
    }

    html body #content .contact-card p a {
        font-size: 14px;
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
    }
    .wtp-mobile-menu {
        padding: 0 10px !important;
    }
}

@media (max-width: 375px) {
    html body.our-process .pmax-bullets-list ul img {
        top: -7px;
    }

    html body.our-process .pmax-bullets-list ul h2 {
        font-size: 18px;
    }
}

@media (max-width: 640px) {
    html body:not(.home) .grp-pagehero__actions {
        display: none;
    }
}

@media (min-width: 901px) and (max-width: 1024px) {
    html body .fusion-footer .fusion-builder-row .fusion-layout-column.fusion_builder_column_1_3 {
        width: calc(100% / 3) !important;
    }

    html body .fusion-footer .fusion-builder-row .fusion-layout-column.fusion_builder_column_2_3 {
        width: calc((100% / 3) * 2) !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    html body .pmax-bullets .fusion-builder-row .fusion-layout-column:not(:first-of-type) {
        margin: 0;
        width: 50% !important;
    }
}

@media (min-width: 1025px) {
    .awb-menu__m-collapse-icon {
        display: none !important;
    }
}


/*------------------------
*      5. Keyframes      *
-------------------------*/
/* Fade In */
@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }

    33% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    33% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Zoom In */
@-webkit-keyframes zoom-in {
    0% {
        -webkit-transform: scale(0) translate(0, 0);
        -ms-transform: scale(0) translate(0, 0);
        transform: scale(0) translate(0, 0);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(1) translate(0, 0);
        -ms-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0);
        opacity: 1;
    }
}

@keyframes zoom-in {
    0% {
        -webkit-transform: scale(0) translate(0, 0);
        -ms-transform: scale(0) translate(0, 0);
        transform: scale(0) translate(0, 0);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(1) translate(0, 0);
        -ms-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0);
        opacity: 1;
    }
}


html body .awb-menu__sub-li.current-menu-item>.awb-menu__sub-a {
    color: var(--brand-primary) !important;
    background-color: rgba(var(--c-sky), 0.32) !important;
}

/*.grp-page p:not(.grp-lead),*/
/*.grp-affil__lead {*/
/*    font-size: 18px;*/
/*}*/
.grp-media__body .grp-lead {
    margin: 0;
}