/*
 * WEBGATE brand overrides on top of the Davies template's own styles.css.
 * Keep this file additive — never edit the vendored template CSS directly.
 */
:root {
    --primary: #0e7c86;
    --primary-rgb: 14, 124, 134;
}

/* Guards against accidental horizontal scroll from full-bleed decorative
   elements (e.g. the hero/footer wordmarks, which intentionally overflow
   their container edge-to-edge on every screen size). */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.wg-wordmark {
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: #fff;
}

.wg-logo-img {
    height: 32px;
    width: auto;
}

/* Unlike the admin sidebar's tight icon-only crop, the site header shows the
   full "WEBGATE" wordmark: frame sized to the artwork's aspect ratio, top-
   aligned so the crop only trims the slogan line below the lettering. */
.wg-header-logo-wrap {
    display: flex;
    align-items: flex-start;
    width: 190px;
    height: 36px;
    overflow: hidden;
}

.wg-header-logo {
    width: 100%;
    height: auto;
    display: block;
}

/* Header nav — minimal horizontal links with an animated underline sliding
   in on hover/active, replacing the earlier decorative "tree" SVG. Shared
   by both the home page and the inner-page layout header. */
.wg-nav-underline {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 1.6vw, 1.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.wg-nav-underline li {
    list-style: none;
}

.wg-nav-underline a {
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: rgba(255, 255, 255, .68);
    text-decoration: none !important;
    transition: color .2s ease;
}

.wg-nav-underline a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.wg-nav-underline a:hover,
.wg-nav-underline a:focus-visible,
.wg-nav-underline a.is-active {
    color: #fff !important;
}

.wg-nav-underline a:hover::after,
.wg-nav-underline a:focus-visible::after,
.wg-nav-underline a.is-active::after {
    transform: scaleX(1);
}

.wg-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    background: radial-gradient(circle at 20% 20%, rgba(14, 124, 134, .35), transparent 55%), #0b1220;
    color: #fff;
    overflow: hidden;
}

.wg-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../templates/davies/assets/images/item/dither-effect.svg') center/cover no-repeat;
    opacity: .12;
    pointer-events: none;
}

.wg-hero-inner {
    position: relative;
    z-index: 1;
}

.wg-hero .eyebrow {
    color: rgba(255, 255, 255, .6);
}

.wg-stat {
    text-align: center;
}

.wg-stat .num {
    font-size: 2.4rem;
    font-weight: 700;
}

.wg-stat .label {
    color: var(--bs-white-64, rgba(255, 255, 255, .64));
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.wg-tag {
    display: inline-block;
    padding: .4rem .9rem;
    margin: .25rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, .1);
}

.wg-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.section-brand .wg-tag {
    background: rgba(14, 124, 134, .08);
    color: #1b2735;
    border-color: rgba(14, 124, 134, .18);
}

.wg-section-light {
    background: #f6f8fa;
    color: #1b2735;
}

.wg-section-light .mini-title {
    color: rgba(27, 39, 53, .55);
}

.wg-form-control {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    padding: .75rem .25rem;
    font-size: 1rem;
}

.wg-form-control:focus {
    outline: none;
    border-color: var(--primary);
}

.wg-form-control::placeholder {
    color: rgba(255, 255, 255, .4);
}

/* The vendored template has its own aggressive, higher-specificity reset
   for text-like inputs — `form input[type=text] { border:0; background:
   transparent; color: var(--white); }` (specificity 0,1,2) — built for
   dark-background forms. A plain `.wg-form-control-light` class rule
   (0,1,0) loses to it, leaving these inputs transparent with white text
   on this light page: invisible. Matching the "form input.class" shape
   below brings the specificity up to 0,1,2 so ours wins (and comes later
   in the cascade besides). */
.wg-form-control-light,
form input.wg-form-control-light,
form textarea.wg-form-control-light {
    width: 100%;
    background: #fff;
    border: 1px solid rgba(27, 39, 53, .3);
    border-radius: .5rem;
    color: #1b2735;
    padding: .75rem 1rem;
    font-size: 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.wg-form-control-light:focus,
form input.wg-form-control-light:focus,
form textarea.wg-form-control-light:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .15);
}

/* The vendored template's own placeholder rule references an undefined
   --text-2 custom property (never declared anywhere in its CSS), which
   different browsers resolve very differently — in practice it rendered
   near-invisible here. Override with an explicit, readable color. */
.wg-form-control-light::placeholder {
    color: rgba(27, 39, 53, .4);
    opacity: 1;
}

.wg-project-card {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
    transition: transform .2s ease, box-shadow .2s ease;
    height: 100%;
}

.wg-project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(16, 24, 40, .14);
    color: inherit;
}

.wg-project-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.wg-project-card .body {
    padding: 1.1rem 1.25rem;
}

/* Ongoing Works listing: clicking a card expands it in place (Bootstrap's
   .collapse handles the height animation) to reveal the full description
   and details, instead of navigating to a separate page. */
.wg-expandable-card {
    cursor: pointer;
}

.wg-expandable-card-chevron {
    flex: 0 0 auto;
    margin-top: .3rem;
    font-size: .7rem;
    color: rgba(27, 39, 53, .45);
    transition: transform .25s ease;
}

.wg-expandable-card[aria-expanded="true"] .wg-expandable-card-chevron {
    transform: rotate(180deg);
}

.wg-expandable-card-details-inner {
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid rgba(27, 39, 53, .08);
    margin-top: .25rem;
    padding-top: 1rem;
}

/* Blog listing: smaller/denser cards than the default project-card grid. */
.wg-project-card-sm img {
    aspect-ratio: 16 / 9;
}

.wg-project-card-sm .body {
    padding: .85rem 1rem;
}

.wg-project-card-sm .body h5 {
    font-size: .95rem;
}

.wg-project-card-sm .body p {
    font-size: .78rem;
}

.wg-service-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1.75rem;
    height: 100%;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}

.wg-service-card .price {
    color: var(--primary);
    font-weight: 700;
}

.legal-content h1,
.legal-content h2,
.legal-content h3 {
    margin-top: 1.5rem;
}

/* Hero: hand-built CSS art replacing the vendored template's video + Davies wordmark art */
.wg-hero-art {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(var(--primary-rgb), .55), transparent 42%),
        radial-gradient(circle at 88% 12%, rgba(var(--primary-rgb), .3), transparent 48%),
        radial-gradient(circle at 50% 95%, rgba(var(--primary-rgb), .22), transparent 55%),
        #05080d;
}

.wg-hero-art::before,
.wg-hero-art::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    animation: wgHeroFloat 16s ease-in-out infinite alternate;
}

.wg-hero-art::before {
    width: 46vw;
    height: 46vw;
    top: -14%;
    left: -12%;
    background: rgba(var(--primary-rgb), .5);
}

.wg-hero-art::after {
    width: 36vw;
    height: 36vw;
    bottom: -16%;
    right: -10%;
    background: rgba(255, 255, 255, .07);
    animation-delay: -8s;
}

@keyframes wgHeroFloat {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(4%, 6%) scale(1.1);
    }
}

/* Hero wordmark: the vendored template baked "DAVIES" into davies-fill.svg /
   davies-stroke.svg as vector art, so the word can't be edited as text.
   These reproduce the same two-layer look (big solid word behind/around the
   photo, faint outline word cropped inside it) using real, brand-driven text. */
.wg-hero-word {
    margin: 0;
    width: 100%;
    text-align: center;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.wg-hero-word-fill {
    font-size: clamp(3.5rem, 11vw, 9.5rem);
    color: #fff;
}

.wg-hero-bw {
    filter: grayscale(1) contrast(1.05);
}

.wg-hero-word-outline {
    font-size: clamp(2.2rem, 9vw, 4.5rem);
    color: transparent;
    -webkit-text-stroke: 2px #fff;
}

.wg-footer-wordmark {
    margin: 0;
    font-weight: 800;
    font-size: clamp(2.5rem, 11vw, 8.5rem);
    line-height: 1;
    letter-spacing: -.02em;
    color: rgba(255, 255, 255, .08);
    -webkit-text-stroke: 1px rgba(255, 255, 255, .2);
}

/* About section: replaces the vendored template's video background (all
   three shipped video assets turned out unusable — one is corrupt binary
   data, one is a broken "no content" placeholder, and the only valid one
   is unrelated fashion footage) with a CSS-only robot/HUD screen look. */
.wg-robot-screen {
    position: relative;
    background: #05080a;
    overflow: hidden;
}

.wg-robot-screen-grid {
    position: absolute;
    inset: -1px;
    background-image:
        linear-gradient(rgba(158, 219, 255, .14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(158, 219, 255, .14) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 90%);
    mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 90%);
}

.wg-robot-screen-scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    top: -10%;
    background: rgba(200, 236, 255, .9);
    box-shadow: 0 0 24px 6px rgba(158, 219, 255, .55);
    animation: wgRobotScan 4.5s linear infinite;
}

@keyframes wgRobotScan {
    0% {
        top: -5%;
    }

    100% {
        top: 105%;
    }
}

.wg-robot-eye {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130px;
    height: 130px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(200, 236, 255, .4);
    box-shadow: 0 0 50px 12px rgba(158, 219, 255, .18), inset 0 0 30px rgba(255, 255, 255, .08);
}

.wg-robot-eye::before {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
}

.wg-robot-eye::after {
    content: "";
    position: absolute;
    inset: 34%;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, rgba(158, 219, 255, .7) 55%, transparent 100%);
    animation: wgRobotPulse 3.2s ease-in-out infinite;
}

@keyframes wgRobotPulse {
    0%,
    100% {
        opacity: .55;
        transform: scale(.92);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* Team card v3: a colored panel (tracks the site's chosen palette color)
   with the portrait protruding above its top edge, name + role centered
   below — full redesign replacing the v2 frosted-glass-over-photo card.
   Packed tighter than the default grid (see .wg-team-grid-tight) so the
   lineup reads as a row of teammates rather than spaced-out tiles; the
   whole card is the modal trigger (no separate "Profile" button). */
.wg-team-grid-tight {
    column-gap: 16px;
    row-gap: 64px;
}

.wg-team-card-v3 {
    /* Buttons default to display:inline-flex in modern browser UA
       stylesheets, which laid the name/role spans out side by side
       instead of stacked — force normal block flow so each child's own
       `display: block` actually puts it on its own line. */
    display: block;
    position: relative;
    width: 100%;
    max-width: 220px;
    margin: 56px auto 0;
    /* Photo sits at top:-56px and is 148px tall, so it reaches 92px into
       the card (148 - 56) — padding-top must clear that + breathing room,
       or its bottom edge overlaps the name text under it. */
    padding: 112px 1rem 1.75rem;
    border: 0;
    border-radius: 1.75rem;
    background: var(--primary);
    text-align: center;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.wg-team-card-v3:hover,
.wg-team-card-v3:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .25);
}

.wg-team-card-v3-photo {
    position: absolute;
    top: -56px;
    left: 50%;
    transform: translateX(-50%);
    width: 128px;
    height: 148px;
    border-radius: 1.25rem;
    overflow: hidden;
    background: #d9d9d9;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wg-team-card-v3-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
}

.wg-team-card-v3-initial {
    font-size: 2.5rem;
    font-weight: 700;
    color: rgba(0, 0, 0, .35);
}

.wg-team-card-v3-badge.wg-verified-badge {
    position: absolute;
    top: .4rem;
    right: .4rem;
    background: #fff;
    border-radius: 50%;
    padding: .2rem;
}

.wg-team-card-v3-name {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.wg-team-card-v3-role {
    display: block;
    margin-top: .2rem;
    font-size: .85rem;
    color: rgba(255, 255, 255, .85);
}

.wg-verified-badge {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--verified, #00bf43);
}

.wg-verified-badge svg {
    width: 13px;
    height: 13px;
}

/* ---------------------------------------------------------------------
   Partners strip (home page, above the contact form)
   --------------------------------------------------------------------- */
.wg-partners-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.wg-partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
    min-width: 150px;
    padding: 0 1.75rem;
    background: #fff;
    border-radius: 1rem;
    transition: transform .2s ease, box-shadow .2s ease;
}

.wg-partner-logo:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .25);
}

.wg-partner-logo img {
    max-height: 54px;
    max-width: 150px;
    width: auto;
    object-fit: contain;
}

.wg-partner-logo-name {
    color: #1b2735;
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .wg-partner-logo {
        height: 68px;
        min-width: 120px;
        padding: 0 1rem;
    }

    .wg-partner-logo img {
        max-height: 40px;
    }
}

.wg-tech-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), .15);
    color: var(--primary);
    font-weight: 700;
    font-size: 1.25rem;
}

/* The template sets `.section-tech-stack-v2 .wg-tech-v2 { max-width: 400px;
   width: 100% }`, which combined with aspect-ratio:1 renders a huge circle
   on a 3-col layout. Match that selector's specificity to actually override
   it (a bare .wg-tech-v2 rule loses the specificity tie), and cap it much
   smaller. */
.section-tech-stack-v2 .wg-tech-v2 {
    max-width: 220px;
    width: 100%;
    margin: 0 auto;
    padding: 12px;
}

.wg-tech-v2 .tech-name {
    font-size: 1rem;
    margin-bottom: 8px;
}

.wg-tech-v2 .tech-desc {
    font-size: .75rem;
    margin-bottom: 10px;
}

@media (min-width: 1200px) {
    .wg-tech-v2 .tech-name {
        margin-bottom: 8px;
    }

    .wg-tech-v2 .tech-desc {
        margin-bottom: 10px;
    }
}

/* The "Select Work" counter section above already carries a full
   flat-spacing bottom padding (120px/80px/60px); stacking this section's
   own flat-spacing top padding on top of that left an oversized, mostly
   empty gap between the counter and the "Build List" heading. Trim just
   this section's top padding instead of touching the shared utility. */
.section-build-list-v2 {
    padding-top: 40px;
}

@media (max-width: 991px) {
    .section-build-list-v2 {
        padding-top: 24px;
    }
}

.wg-build-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.wg-build-mini-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    border-radius: .85rem;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.wg-build-mini-card:hover {
    background: rgba(var(--primary-rgb), .12);
    border-color: rgba(var(--primary-rgb), .4);
    color: #fff;
    transform: translateX(4px);
}

.wg-build-mini-card .thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: .65rem;
    overflow: hidden;
    background: rgba(var(--primary-rgb), .15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wg-build-mini-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wg-build-mini-card .thumb .initial {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--primary);
}

.wg-build-mini-card .info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.wg-build-mini-card .info .title {
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wg-build-mini-card .info .meta {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.wg-build-mini-card .stats {
    flex: 0 0 auto;
    display: flex;
    gap: .9rem;
    padding-right: .25rem;
}

.wg-build-mini-card .stat {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .5);
}

.wg-build-mini-card .stat svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.wg-build-mini-card .arrow {
    flex: 0 0 auto;
    opacity: .5;
    transition: opacity .2s ease, transform .2s ease, color .2s ease;
}

.wg-build-mini-card:hover .arrow {
    opacity: 1;
    color: var(--primary);
    transform: translateX(3px);
}

/* Mobile-only fixes (does not affect tablet/laptop/desktop widths). */
@media (max-width: 767.98px) {
    /* The logo box is a fixed 190px, wider than the 50% header column it
       sits in once the screen drops below ~480px — it was overflowing past
       its column and overlapping the hamburger menu button. */
    .wg-header-logo-wrap {
        width: 132px;
        height: 25px;
    }

    /* .about-main .content is absolutely positioned over the video and
       relies on horizontal room the vendor template never had to allocate
       for phone widths, so the About title/copy overlapped the video
       illegibly. Drop the overlay and stack video → content normally. */
    .section-about-me-v2 .about-main {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .section-about-me-v2 .about-main .content {
        position: static;
        display: block;
    }

    .section-about-me-v2 .about-main .top {
        margin-bottom: 16px;
    }

    .section-about-me-v2 .davies-video .video {
        min-height: 280px;
    }

    /* exp_year's fixed 109px min-width pushed the row past the container
       edge instead of wrapping, clipping "MISSION"/"VISION"/etc labels
       off-screen (overflow-x:hidden on body hides the scrollbar, not the
       clipped text). Let it size to its own content instead. */
    .section-about-me-v2 .award-main .experience-list .exp_year {
        min-width: 0;
    }
}

@media (max-width: 479.98px) {
    .wg-header-logo-wrap {
        width: 112px;
        height: 21px;
    }
}

/* The hero photo is a literal code screenshot — legible and distracting
   at phone width where it has nowhere to recede into. Fade it back to a
   mood texture instead of readable text, same treatment already used for
   the fainter outline wordmark layer next to it. !important is needed
   because the scroll-reveal animation library sets opacity inline once
   its fade-in finishes, which otherwise wins over a plain class rule. */
@media (max-width: 767.98px) {
    .section-hero-v2 .image-wrap .img-item img {
        opacity: .4 !important;
    }
}

/* The vendored template's sticky header carries a large negative bottom
   margin (-116px/-148px depending on breakpoint) so it overlays the home
   page's hero image transparently. Every other page using this layout
   (Portfolio, Contact, Legal, Build List, ...) has no hero to absorb that
   overlap — the negative margin instead pulls the page's own content up
   underneath the sticky header, leaving its top ~150px unclickable (this is
   what broke the "Back to Build List" link). Neutralize it on inner pages;
   the home page keeps the original overlay behavior untouched. */
.wg-inner-page .tf-header.style-2 {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   Build Item detail page (public /build-list/{item})
   --------------------------------------------------------------------- */
.wg-build-head-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    font-size: .95rem;
}

.wg-build-head-meta .dot {
    opacity: .5;
}

.wg-inline-stat {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.wg-inline-stat svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.wg-tag-row-light {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.wg-tag-light {
    display: inline-block;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), .08);
    color: var(--primary);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    border: 1px solid rgba(var(--primary-rgb), .18);
}

/* Clickable variant (category filter badges on /build-list): hover + active
   states only kick in for <a> usages — static <span> tag badges elsewhere
   are unaffected since they never gain the is-active class or a hover target. */
a.wg-tag-light {
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

a.wg-tag-light:hover {
    background: rgba(var(--primary-rgb), .16);
    color: var(--primary);
}

a.wg-tag-light.is-active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.wg-build-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: 480px;
}

.wg-build-search .wg-form-control-light {
    flex: 1 1 auto;
}

.wg-build-search-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
}

.wg-build-search-btn svg {
    width: 19px;
    height: 19px;
}

/* Fixed-size slider: every slide is forced to the same box via object-fit
   so mixed-aspect-ratio uploads don't resize the carousel per slide. */
.wg-build-carousel-wrap {
    border-radius: 1rem;
    overflow: hidden;
    background: #f6f8fa;
}

.wg-build-carousel-wrap img {
    display: block;
    width: 100%;
    height: 460px;
    object-fit: cover;
}

.wg-build-carousel-wrap .carousel-indicators {
    margin-bottom: .75rem;
}

.wg-build-carousel-empty {
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgba(27, 39, 53, .2);
}

@media (max-width: 991px) {
    .wg-build-carousel-wrap img,
    .wg-build-carousel-empty {
        height: 340px;
    }
}

@media (max-width: 575px) {
    .wg-build-carousel-wrap img,
    .wg-build-carousel-empty {
        height: 240px;
    }
}

.wg-build-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(27, 39, 53, .1);
    border-bottom: 1px solid rgba(27, 39, 53, .1);
}

.wg-action-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.15rem;
    border-radius: 999px;
    border: 1px solid rgba(27, 39, 53, .15);
    background: #fff;
    color: #1b2735;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.wg-action-btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.wg-action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.wg-like-btn.is-liked {
    background: rgba(var(--primary-rgb), .1);
    border-color: var(--primary);
    color: var(--primary);
}

.wg-like-btn.is-liked svg {
    fill: var(--primary);
}

.wg-like-btn:disabled {
    cursor: default;
}

.wg-share-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.wg-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f6f8fa;
    color: #1b2735;
    border: 1px solid rgba(27, 39, 53, .1);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.wg-share-btn svg {
    width: 17px;
    height: 17px;
}

.wg-share-btn:hover {
    background: rgba(var(--primary-rgb), .1);
    color: var(--primary);
    border-color: rgba(var(--primary-rgb), .3);
}

.wg-call-request {
    position: relative;
    margin-left: auto;
}

.wg-call-request-btn {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.wg-call-request-btn svg {
    stroke: #fff;
}

.wg-call-request-btn:hover {
    background: #0b6169;
    border-color: #0b6169;
    color: #fff;
}

.wg-call-request-options {
    position: absolute;
    top: calc(100% + .6rem);
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .6rem;
    border-radius: .85rem;
    background: #fff;
    box-shadow: 0 16px 32px rgba(16, 24, 40, .16);
    border: 1px solid rgba(27, 39, 53, .08);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    min-width: 190px;
}

.wg-call-request-options.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.wg-mini-btn {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem .9rem;
    border-radius: .6rem;
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    transition: opacity .2s ease;
}

.wg-mini-btn:hover {
    opacity: .88;
    color: #fff;
}

.wg-mini-btn svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.wg-mini-btn-whatsapp {
    background: #25d366;
}

.wg-mini-btn-email {
    background: #1b2735;
}

.wg-mini-btn-instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.wg-build-sidebar {
    position: sticky;
    top: 24px;
}

@media (max-width: 991px) {
    .wg-call-request {
        margin-left: 0;
        width: 100%;
    }

    .wg-call-request-btn {
        width: 100%;
        justify-content: center;
    }

    .wg-call-request-options {
        left: 0;
        right: 0;
        width: 100%;
    }

    .wg-build-sidebar {
        position: static;
    }
}

.wg-demo-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    background: #0b1220;
    border-radius: 1rem;
    transition: max-height .4s ease, opacity .3s ease, transform .3s ease, margin-top .4s ease, padding .4s ease;
}

.wg-demo-panel.show {
    max-height: 900px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 1.5rem;
    padding: 2rem;
}

.wg-demo-panel .alert {
    margin-bottom: 1.25rem;
}

@media (max-width: 575px) {
    .wg-demo-panel.show {
        padding: 1.25rem;
    }
}

/* Sidebar now stacks the spec card and related-builds list together as one
   sticky unit, instead of a lone card leaving the column mostly empty.
   A compact horizontal mini-card (not the full wg-project-card grid card)
   keeps each related item to a small fixed-height row. */
.wg-related-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem;
    border-radius: .75rem;
    color: inherit;
    text-decoration: none;
    transition: background .15s ease;
}

.wg-related-card:hover {
    background: rgba(27, 39, 53, .04);
    color: inherit;
}

.wg-related-card .thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: .6rem;
    overflow: hidden;
    background: rgba(27, 39, 53, .06);
}

.wg-related-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wg-related-card .info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.wg-related-card .title {
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wg-related-card .meta {
    font-size: .76rem;
    color: rgba(27, 39, 53, .55);
}

/* ---------------------------------------------------------------------
   Reviews & Comments (public /build-list/{item})
   --------------------------------------------------------------------- */
.wg-comment-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(27, 39, 53, .08);
}

.wg-comment-item:first-child {
    padding-top: 0;
}

.wg-comment-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}

.wg-star-display {
    display: inline-flex;
    gap: .2rem;
    color: rgba(27, 39, 53, .25);
}

.wg-star-display svg {
    width: 16px;
    height: 16px;
}

.wg-star-display svg.is-filled {
    color: #f5a623;
}

.wg-comment-form-wrap {
    background: #fff;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}

@media (max-width: 575px) {
    .wg-comment-form-wrap {
        padding: 1.25rem;
    }
}

.wg-star-input {
    display: inline-flex;
    gap: .35rem;
}

.wg-star-btn {
    background: none;
    border: none;
    padding: 0;
    line-height: 0;
    cursor: pointer;
    color: rgba(27, 39, 53, .25);
    transition: color .15s ease, transform .15s ease;
}

.wg-star-btn svg {
    width: 26px;
    height: 26px;
}

.wg-star-btn:hover {
    transform: scale(1.1);
}

.wg-star-btn.is-filled {
    color: #f5a623;
}

.wg-star-btn.is-filled svg {
    fill: currentColor;
}

/* Build item page headings: the vendored template's text-display-1/2
   utility classes (up to 96px/72px) are sized for the home page's big
   marketing type, not a product title or a "Reviews" section heading —
   scaled down to a normal heading size here. */
.wg-build-heading {
    font-size: clamp(26px, 3.2vw, 38px);
    line-height: 1.25;
    letter-spacing: -.01em;
}

.wg-categories-sidebar {
    position: sticky;
    top: 24px;
}

.wg-categories-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.wg-categories-list a {
    display: block;
    padding: .5rem .25rem;
    color: rgba(27, 39, 53, .65);
    text-decoration: none;
    font-size: .9rem;
    border-left: 2px solid transparent;
    padding-left: .75rem;
    transition: color .15s ease, border-color .15s ease;
}

.wg-categories-list a:hover {
    color: var(--primary);
}

.wg-categories-list a.is-active {
    color: var(--primary);
    font-weight: 600;
    border-left-color: var(--primary);
}

@media (max-width: 991px) {
    .wg-categories-sidebar {
        position: static;
        margin-bottom: 2rem;
    }

    .wg-categories-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .wg-categories-list a {
        border-left: none;
        border: 1px solid rgba(27, 39, 53, .12);
        border-radius: 999px;
        padding: .4rem .9rem;
    }

    .wg-categories-list a.is-active {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }
}

/* .tf-btn.style-fill defaults to black text (vendored template); this
   specific button reads better with white text on the teal fill. */
#wgDemoBtn {
    color: #fff;
}

/* Team member "Profile" modal — diagonal split card (light info panel on
   the left, photo bleeding into a dark diagonal-cut panel on the right). */
.wg-profile-modal .modal-content.wg-profile-modal-content {
    border: none;
    border-radius: 1.25rem;
    overflow: hidden;
    padding: 0;
    background: transparent;
}

.wg-profile-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: var(--primary);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.wg-profile-modal-close svg {
    width: 16px;
    height: 16px;
}

.wg-profile-modal-close:hover {
    background: var(--primary);
    color: #fff;
}

.wg-profile-split {
    position: relative;
    display: flex;
    min-height: 480px;
    background: #ececec;
    overflow: hidden;
}

.wg-profile-right {
    position: absolute;
    inset: 0;
    left: 38%;
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
    background: #0b0d10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wg-profile-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.wg-profile-initial {
    font-size: 5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .5);
}

.wg-profile-left {
    position: relative;
    z-index: 2;
    width: 56%;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wg-profile-hi {
    font-size: 1rem;
    color: rgba(27, 39, 53, .6);
    margin-bottom: .25rem;
}

.wg-profile-name {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    color: #1b2735;
    line-height: 1.15;
    margin: 0 0 .4rem;
}

.wg-profile-role {
    font-size: .95rem;
    font-weight: 600;
    color: rgba(27, 39, 53, .55);
    margin: 0 0 .75rem;
    max-width: 46%;
}

.wg-profile-bio {
    font-size: .9rem;
    color: rgba(27, 39, 53, .7);
    line-height: 1.5;
    margin: 0 0 .5rem;
    max-width: 46%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    overflow-wrap: break-word;
}

.wg-profile-bio.is-expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}

.wg-profile-bio-toggle {
    display: inline-flex;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 1.5rem;
    color: var(--primary);
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}

.wg-profile-bio-toggle:hover {
    text-decoration: underline;
}

.wg-profile-social-icons {
    display: flex;
    gap: .6rem;
}

.wg-profile-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .6rem;
    background: #1b2735;
    color: #fff;
    transition: background-color .15s ease, transform .15s ease;
}

.wg-profile-social-icon svg {
    width: 18px;
    height: 18px;
}

.wg-profile-social-icon:hover {
    background: var(--primary);
    transform: translateY(-2px);
}

@media (max-width: 767px) {
    .wg-profile-split {
        min-height: 420px;
    }

    .wg-profile-right {
        left: 55%;
        clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
    }

    .wg-profile-left {
        width: 100%;
        padding: 2.5rem 1.5rem;
    }

    .wg-profile-role,
    .wg-profile-bio {
        max-width: 40%;
    }
}

/* Gallery item modal — image slider + shared title/note caption */
.wg-gallery-modal .modal-content.wg-gallery-modal-content {
    border: none;
    border-radius: 1.25rem;
    overflow: hidden;
    padding: 0;
    background: #0b0d10;
    position: relative;
}

.wg-gallery-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: var(--primary);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.wg-gallery-modal-close svg {
    width: 16px;
    height: 16px;
}

.wg-gallery-modal-close:hover {
    background: var(--primary);
    color: #fff;
}

.wg-gallery-carousel .carousel-item {
    height: min(70vh, 560px);
    background: #0b0d10;
    text-align: center;
}

.wg-gallery-carousel .carousel-item img {
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 100%;
    object-fit: contain;
}

.wg-gallery-carousel-indicators {
    position: static;
    margin: .75rem 0 0;
}

.wg-gallery-modal-caption {
    padding: 1.25rem 1.75rem 1.5rem;
    background: #fff;
}

.wg-gallery-modal-caption h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1b2735;
    margin: 0 0 .35rem;
}

.wg-gallery-modal-caption p {
    font-size: .9rem;
    color: rgba(27, 39, 53, .7);
    line-height: 1.5;
    margin: 0;
}

/* Newsletter Subscribe modal */
.wg-subscribe-modal .modal-content.wg-subscribe-modal-content {
    border: none;
    border-radius: 1.25rem;
    background: #fff;
    padding: 2.5rem;
    position: relative;
}

.wg-subscribe-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.wg-subscribe-title {
    font-weight: 800;
    color: #1b2735;
    margin-bottom: .5rem;
}

.wg-subscribe-text {
    color: rgba(27, 39, 53, .6);
    margin-bottom: 1.5rem;
}

.wg-subscribe-form-row {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.wg-subscribe-form-row .wg-form-control-light {
    flex: 1 1 200px;
}

.wg-subscribe-message {
    margin: .75rem 0 0;
    font-size: .85rem;
    min-height: 1.2em;
}

.wg-subscribe-message.is-success {
    color: #15803d;
}

.wg-subscribe-message.is-error {
    color: #b91c1c;
}

/* Flip-image gallery note (Why Webgate section) */
.flip-image {
    overflow: hidden;
}

.flip-image-note {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1rem .9rem .8rem;
    color: #fff;
    font-size: .78rem;
    line-height: 1.35;
    background: linear-gradient(0deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .45) 55%, transparent 100%);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}

.flip-image-note strong {
    font-size: .85rem;
    font-weight: 700;
}

.flip-image:hover .flip-image-note {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 767px) {
    .flip-image-note {
        display: none;
    }
}

/* Select Work split: text half + featured-projects half, divided by a
   vertical rule that tracks the user's chosen palette color. --primary is
   swapped live by the site's color-picker (settingColor() in main.js sets
   body[data-color-primary=...]), so this rule needs no JS of its own — it
   just re-reads the same custom property. */
.wg-selected-work-split .s-header {
    overflow: hidden;
}

/* Spans just the marquee/heading row, not the full split (which would run
   on down past the counters and the cards below it). */
@media (min-width: 992px) {
    .wg-selected-work-split {
        position: relative;
    }

    .wg-selected-work-split::before {
        content: "";
        position: absolute;
        top: 0;
        height: clamp(140px, 14vw, 190px);
        left: 50%;
        width: 2px;
        background: var(--primary);
        transform: translateX(-50%);
    }
}

/* Capped at 2 records (see HomeController) and rendered as an actual
   swiper (2-up, autoplaying) rather than a bare grid, matching the site's
   other auto-sliders — centered under the marquee with breathing room
   between the two cards instead of butting against the column edge. */
.wg-featured-duo {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

.wg-featured-duo .swiper-slide {
    height: auto;
}

.wg-featured-mini-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    border-radius: .85rem;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
}

.wg-featured-mini-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Multi-image auto-cycle (wg-site.js toggles .is-active on an interval) —
   only applies when a card has more than one .wg-cycle-img; a single image
   just renders as normal via the plain rule above. */
.wg-featured-mini-card .wg-cycle-img {
    opacity: 0;
    transition: opacity .8s ease;
}

.wg-featured-mini-card .wg-cycle-img.is-active {
    opacity: 1;
}

/* Same cycler, for plain (non-absolute-by-default) card media like the
   Ongoing Works listing page grid. */
.wg-cycle-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.wg-cycle-media .wg-cycle-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .8s ease;
}

.wg-cycle-media .wg-cycle-img.is-active {
    opacity: 1;
}

.wg-featured-mini-card-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, .32);
    font-size: 2rem;
}

.wg-featured-mini-card.is-empty {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
}

.wg-featured-mini-card-caption {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    width: 100%;
    padding: .6rem .65rem .55rem;
    background: linear-gradient(0deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .45) 70%, transparent 100%);
    color: #fff;
}

.wg-featured-mini-card-title {
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: -.01em;
}

.wg-featured-mini-card-desc {
    font-size: .7rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .68);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Testimonials (home page, between the "Why Webgate" gallery and FAQ) —
   3-up on desktop, stacks on mobile via Bootstrap's row/col. Dark card to
   match the section's surrounding (no bg-surface) sections. */
.wg-testimonial-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.75rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
}

.wg-testimonial-card-rating {
    display: flex;
    gap: .15rem;
    color: var(--primary);
}

.wg-testimonial-card-quote {
    flex: 1 1 auto;
    margin: 0;
    font-size: .95rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .82);
}

.wg-testimonial-card-author {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.wg-testimonial-card-avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(var(--primary-rgb), .15);
}

.wg-testimonial-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wg-testimonial-card-initial {
    font-weight: 700;
    color: var(--primary);
}

.wg-testimonial-card-author-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wg-testimonial-card-name {
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
}

.wg-testimonial-card-role {
    font-size: .78rem;
    color: rgba(255, 255, 255, .6);
}