/*
Theme Name: Wiatech
Theme URI: https://example.com/
Author: Custom conversion
Description: Wiatech HTML template converted into a WordPress theme.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
License: GPL-2.0-or-later
Text Domain: wiatech
*/

@use './abstracts/' as *;

/**
  * Name: WiaTech - IT Services & Development HTML Template
  * Version: 1.0.2
  * Author: Themesflat
  * Author URI: http://www.themesflat.com
*/
/* The vendor CSS/font imports these lines carried resolved to paths that do
   not exist next to style.css (7 × 404 per page, issue #94). Every file in
   the list is already imported by app/css/app.css from a path that resolves;
   the duplicates are removed. */

/**
  	* Header Style 01
    * Header Style 02
    * Header Style 03
    * Header Style 04
    * Footer Style 01
    * Footer Style 02
    * Footer Style 03
    * Footer Style 04
*/
/* Abstracts variable

    * Reset css styles

    * Components
        * header
        * footer
        * tabs
        * slider banner
        * button
        * form
        * nice select
        * swiper
        * off canvas
        * hover
        * preloader

    * section

    * Responsive
 ------------------------------------------------------------------------------ */
/**
  	* Reset Browsers
	* Elements
  	* Forms
	* Typography
	* Extra classes
	* link style
    * search
    * Header Fixed
    * Pagination
    * Scroll Top
    * PreLoad
    * heading 
    * dropdown
    * progress bar
    * map
    * up load 
    * price range 
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}


/* Elements
-------------------------------------------------------------- */

html {
    margin-right: 0 !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: $font-family;
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
    color: $main;
    background-color: $white;
}

img {
    width: 100%;
    height: auto;
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

ul,
li {
    list-style-type: none;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

.center {
    text-align: center;
}
.row > * {
    padding-right: 15px;
    padding-left: 15px;
}

.tf-container {
    max-width: 1320px;
    width: 100%;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.tf-container.full {
    max-width: 100%;
    width: 100%;
    margin: auto;
    padding-left: 0px;
    padding-right: 0px;
}

label {
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    color: $main;
    font-family: $font-text;
}

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
    outline: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border: 1px solid transparent;
    border-radius: 5px;
    line-height: 18px;
    font-size: 16px;
    font-weight: 400;
    padding: 23px 25px;
    width: 100%;
    background-color: $white;
    color: $text;
}

textarea::placeholder,
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="datetime"]::placeholder,
input[type="datetime-local"]::placeholder,
input[type="date"]::placeholder,
input[type="month"]::placeholder,
input[type="time"]::placeholder,
input[type="week"]::placeholder,
input[type="number"]::placeholder,
input[type="email"]::placeholder,
input[type="url"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="color"]::placeholder {
    color: $text;
    line-height: 18px;
    font-size: 16px;
    font-weight: 400;
    @include transition3;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus {
    border: 1px solid $primary;
    @include transition3;
}


/* Placeholder color */
::-webkit-input-placeholder {
    color: $text;
}

:-moz-placeholder {
    color: $text;
}

::-moz-placeholder {
    color: $text;
    opacity: 1;
}


/* Since FF19 lowers the opacity of the placeholder by default */

:-ms-input-placeholder {
    color: $text;
}


/* Typography
-------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: $font-family;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.03em;
    font-weight: 600;
}

h1 {
    font-size: $h1-fs;
    line-height: $h1-lh;
}

h2 {
    font-size: $h2-fs;
    line-height: $h2-lh;
}

h3 {
    font-size: $h3-fs;
    line-height: $h3-lh;
}

h4 {
    font-size: $h4-fs;
    line-height: $h4-lh;
}

h5 {
    font-size: $h5-fs;
    line-height: $h5-lh;
}

h6 {
    font-size: $h6-fs;
    line-height: $h6-lh;
}

p {
    font-family: $font-text;
    line-height: 30px;
    color: $text;
}

/* Extra classes
-------------------------------------------------------------- */
.msg-success {
    background: linear-gradient(to right, #E250E5, #29a099, #E250E5);
    background-clip: text;
    -webkit-background-clip: text;
    font-weight: 700;
    background-size: 200% 200%;
    animation: rainbow 2s ease-in-out infinite;
    color: rgb(0 0 0 / 0);
    transition: color .2s ease-in-out;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
}

label.error {
    color: red;
}

.text-white {
    color: $white;
}

.text-blue1 {
    color: $blue;

    &.mask {
        position: relative;
        z-index: 0;
        padding: 0 0 10px;
        &:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 11px;
            bottom: 0;
            left: 0%;
            z-index: -1;
            // transform: translateX(-50%);
            background-color: $blue;
            -webkit-repeat: no-repeat;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-image: url(../../assets/images/page/line.svg);
            mask-image: url(../../assets/images/page/line.svg);
            animation: dot-anim-2 3s linear 0s infinite alternate;
        }
    }
}

.text-blue2 {
    color: $blue-light;
    &.mask {
        position: relative;
        z-index: 0;
        padding: 0 0 10px;
        &:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 11px;
            bottom: 0;
            left: 0%;
            z-index: -1;
            // transform: translateX(-50%);
            background-color: $primary;
            -webkit-repeat: no-repeat;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-image: url(../../assets/images/page/line-blue.svg);
            mask-image: url(../../assets/images/page/line-blue.svg);
            animation: dot-anim-2 3s linear 0s infinite alternate;
        }
    }
}
.text-black {
    color: $main;
    &.mask {
        position: relative;
        z-index: 0;
        padding: 0 0 10px;
        &:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 11px;
            bottom: 0;
            left: 0%;
            z-index: -1;
            // transform: translateX(-50%);
            background-color: $blue;
            -webkit-repeat: no-repeat;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-image: url(../../assets/images/page/line-blue.svg);
            mask-image: url(../../assets/images/page/line-blue.svg);
            animation: dot-anim-2 3s linear 0s infinite alternate;
        }
    }
}

.color-text {
    color: $text;
}

.texts-blue {
    color: $primary;
}

.text-yellow {
    color: $review;
    &.mask {
        position: relative;
        z-index: 0;
        padding: 0 0 10px;
        &:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 11px;
            bottom: 0;
            left: 0%;
            z-index: -1;
            // transform: translateX(-50%);
            background-color: $review;
            -webkit-repeat: no-repeat;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-image: url(../../assets/images/page/line-blue.svg);
            mask-image: url(../../assets/images/page/line-blue.svg);
            animation: dot-anim-2 3s linear 0s infinite alternate;
        }
    }
}

.text-24 {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}

.m0-auto {
    margin: 0 auto;
}

.w-680 {
    max-width: 680px;
    width: 100%;
}
.w-650 {
    max-width: 647px;
    width: 100%;
}
.w-760 {
    max-width: 760px;
    width: 100%;
}

.pt-122 {
    padding-top: 122px;
}

.pt-130 {
    padding-top: 130px;
}

.pb-130 {
    padding-bottom: 130px;
}


.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-one {
    justify-content: space-between;
    display: flex;
}

.flex-two {
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.flex-three {
    display: flex;
    align-items: center;
}

.flex-five {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-six {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.flex-wrap {
    flex-wrap: wrap;
}


.center,
.text-center {
    text-align: center;
}

.text-end {
    text-align: end;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.overflow-hiden {
    overflow: hidden;
}

.font-man {
    font-family: $font-text;
}

.flex-none {
    flex: none !important;
}

.text-t {
    text-transform: capitalize;
}

.text-u {
    text-transform: uppercase;
}

.text-unset {
    text-transform: unset !important;
}

.text-line {
    text-decoration-line: underline !important;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: end;
}

.justify-space {
    justify-content: space-between;
}

.flex-wrap {
    flex-wrap: wrap;
}

.align-center {
    align-items: center;
}

.text-end {
    text-align: end;
}

.font-italic {
    font-style: italic;
}

.al-i-end {
    align-items: flex-end;
}

.z-index-2 {
    z-index: 2;
}

.z-index-3 {
    z-index: 3;
}

.bd-rd-10 {
    border-radius: 10px;
}

#wrapper {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    height: 100%;
}

.wrapper-style {
    background: #f6fbfa;
}

button {
    border: none;
    font-family: $font-family;

    &:hover {
        background-color: $secondary;
        transition: all 0.3s;
        border: unset;
    }
}

button[type=submit]:hover {
    background-color: $secondary;
    transition: all 0.3s;
    border: unset;
}

button,
input[type=submit] {
    font-family: $font-family;
    border: unset;
    border-radius: 12px;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    text-transform: capitalize;
    color: $white;
    background-color: $primary;
    @include transition3;
    cursor: pointer;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-13 {
    margin-bottom: 13px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-18 {
    margin-bottom: 18px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-23 {
    margin-bottom: 23px;
}

.mb-26 {
    margin-bottom: 26px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-45 {
    margin-bottom: 45px;
}

.mb-47 {
    margin-bottom: 47px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-60 {
    margin-bottom: 60px;
}

.mb-70 {
    margin-bottom: 70px;
}

.mb-80 {
    margin-bottom: 80px;
}

.mb-100 {
    margin-bottom: 100px;
}

.mb-130 {
    margin-bottom: 130px;
}

.ml-20px {
    margin-left: 20px;
}

.ml-30px {
    margin-left: 30px;
}

.pb-50 {
    padding-bottom: 50px;

}

.mt--70 {
    margin-top: -70px;
}

.pd-5 {
    padding: 5px;
}

.mr-3em {
    margin-right: 3.1em;
    margin-top: -10px;
}

.ml-3em {
    margin-left: 3.1em;
    margin-top: 10px;
}

.mb--10em {
    margin-bottom: -10.2em;
}

.mb--13em {
    margin-bottom: -13.8em;
}

.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}


.fs-italic {
    font-style: italic;
}

.pd-section {
    padding-top: 130px;
    padding-bottom: 130px;
}

.bg-1 {
    background-color: $main-black;
}

.bg-2 {
    background-color: $gray2;
}

.bg-3 {
    background-color: $blue-dark;
}

.bg-4 {
    background-color: $gray3;
}

.bg-5 {
    background-color: $primary;
}

.bg-6 {
    background-color: $secondary;
}

.bg-7 {
    background-color: $gray5;
}

.bg-8 {
    background-color: $blue !important;
}

.bg-9 {
    background-color: $blue-dark3;
}

.bd-rd-12 {
    border-radius: 12px;
}

/* Custom radio buttons */
input[type="radio"]+label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 30px;
    margin-right: 15px;
    font-size: 15px;
    font-weight: 400;

    &:before {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        margin-right: 14px;
        position: absolute;
        top: -3px;
        left: 0;
        border: 1px solid $red;
        background-color: $white;
        border-radius: 50%;
    }
}

input[type="radio"] {
    display: none !important;
    *display: inline;

    &:checked+label:after {
        content: "";
        display: block;
        position: absolute;
        top: 1px;
        left: 4px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: $primary;
    }
}

// End Custom radio buttons

/* Custom checkbox */
input[type="checkbox"]+label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 30px;
    margin-right: 15px;
    font-size: 15px;
    font-weight: 400;

    &:before {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        margin-right: 14px;
        position: absolute;
        top: -3px;
        left: 0;
        border: 1px solid $red;
        background-color: $white;
        border-radius: 4px;
    }
}

input[type="checkbox"] {
    display: none !important;
    *display: inline;

    &:checked+label:after {
        content: '\e94f';
        font-family: $fontIcon;
        font-size: 10px;
        line-height: 20px;
        color: $white;
        background-color: $primary;
        display: block;
        position: absolute;
        top: -3px;
        left: 1px;
        width: 20px;
        height: 20px;
        border-radius: 3px;
        padding-left: 5px;
        padding-top: 2px;
    }
}

// End Custom checkbox

/* link style
-------------------------------------------------------------- */

a {
    @include transition3;
    text-decoration: none;
    color: $main;
    @include transition3;

    // display: inherit;
    &:focus,
    &:hover {
        color: $primary;
        @include transition3;
        text-decoration: none;
        outline: 0;
    }
}


@keyframes rainbow {
    0% {
        background-position: left
    }

    50% {
        background-position: right
    }

    100% {
        background-position: left
    }
}



path {
    @include transition3;
}

.form-wg {
    margin-left: -30px;

    .wg-box {
        width: calc(50% - 30px) !important;
        margin-left: 30px;
    }

    .wg-box2 {
        width: calc(33.333% - 30px) !important;
        margin-left: 30px;
    }

    .wg-box3 {
        width: calc(25% - 30px);
        margin-left: 30px;
    }
}


/* Header Fixed */

#header.style-absolute.is-fixed,
.header.is-fixed {
    position: fixed;
    top: -80px;
    left: 0;
    width: 100%;
    box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.05);
    z-index: 9999;
    background: #fff;
    border: none;
    opacity: 1;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#header.style-absolute.is-fixed {
    background: $primary;
}


@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

$color: $secondary;
$colorRight: darken($secondary, 15%);
$colorLeft: darken($secondary, 5%);
$shadow: $red;

.loader {
    position: relative;
}

.loader span {
    position: absolute;
    color: $white;
    transform: translate(-50%, -50%);
    font-size: 60px;
    line-height: 60px;
    font-weight: 800;
    letter-spacing: 5px;
}

.loader span:nth-child(1) {
    color: transparent;
    -webkit-text-stroke: 2px $primary;
}

.loader span:nth-child(2) {
    color: $primary;
    -webkit-text-stroke: 1px $primary;
    animation: uiverse723 3s ease-in-out infinite;
}

@keyframes uiverse723 {

    0%,
    100% {
        clip-path: polygon(0% 45%, 15% 44%, 32% 50%,
                54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
    }

    50% {
        clip-path: polygon(0% 60%, 16% 65%, 34% 66%,
                51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
    }
}

html {
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: border-box;

    &:before,
    &:after {
        box-sizing: border-box;
    }
}



// Center & dribbble
body {
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;

        img {
            display: block;
            height: 28px;
        }
    }
}
/* ==========================================================================
   Homepage (template-home.php) — Zolviq brand system, see docs/BRANDING.md
   Plain CSS: style.css is enqueued by functions.php as the theme stylesheet,
   so these rules load after app.css and need no new enqueue.
   ========================================================================== */

:root {
    --zq-navy: #2a3b44;
    --zq-blue: #29a099;
    --zq-blue-2: #2f8f89;
    --zq-blue-3: #47b3ab;
    --zq-cyan: #6fd6cd;
    --zq-text: #eef7f4;
    --zq-muted: #a9bfc4;
    --zq-faint: #6d8288;
    --zq-panel: rgba(34, 51, 59, .5);
    --zq-hairline: rgba(140, 205, 195, .25);
    --zq-grad-wordmark: linear-gradient(90deg, #29a099, #6fd6cd);
    --zq-grad-accent: linear-gradient(90deg, #47b3ab, #6fd6cd);
    --zq-font: "Inter Tight", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --zq-measure: 65ch;
}

.zq-home {
    background: var(--zq-navy);
    color: var(--zq-text);
    font-family: var(--zq-font);
}

.zq-home a {
    color: var(--zq-cyan);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.zq-home a:hover {
    color: #6fd6cd;
}

.zq-home :focus-visible {
    outline: 3px solid var(--zq-cyan);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---- Hero ---------------------------------------------------------------- */

.zq-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 12vw, 140px) 24px clamp(64px, 10vw, 120px);
    text-align: center;
}

.zq-hero__glow {
    position: absolute;
    inset: -20% -10% auto;
    height: 70%;
    background:
        radial-gradient(50% 50% at 30% 40%, rgba(41, 160, 153, .28), transparent 70%),
        radial-gradient(45% 45% at 72% 30%, rgba(47, 143, 137, .24), transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}

.zq-hero__inner {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
}

.zq-hero__title {
    margin: 0 0 20px;
    font-family: var(--zq-font);
    font-size: clamp(2.4rem, 7vw, 4.2rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--zq-text);
}

.zq-hero__tagline {
    max-width: 46ch;
    margin: 0 auto 36px;
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    line-height: 1.6;
    color: var(--zq-muted);
}

.zq-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin: 0;
}

/* Status pill (brand: pill chips, hairline border, panel fill) */

.zq-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 28px;
    padding: 8px 18px;
    border: 1px solid var(--zq-hairline);
    border-radius: 999px;
    background: var(--zq-panel);
    font-size: .85rem;
    letter-spacing: .02em;
    color: var(--zq-muted);
}

.zq-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zq-cyan);
    box-shadow: 0 0 0 0 rgba(111, 214, 205, .6);
    animation: zq-pulse 1.4s ease-out infinite;
}

@keyframes zq-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(111, 214, 205, .6); }
    100% { box-shadow: 0 0 0 10px rgba(111, 214, 205, 0); }
}

/* ---- Buttons ------------------------------------------------------------- */

.zq-btn {
    display: inline-block;
    padding: 13px 30px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.zq-btn--primary {
    background: var(--zq-blue);
    color: var(--zq-text);
    border: 1px solid var(--zq-blue);
}

.zq-btn--primary:hover {
    background: var(--zq-blue-2);
    border-color: var(--zq-blue-2);
    color: #fff;
}

.zq-btn--ghost {
    background: transparent;
    color: var(--zq-text);
    border: 1px solid var(--zq-hairline);
}

.zq-btn--ghost:hover {
    color: var(--zq-cyan);
    border-color: var(--zq-cyan);
}

/* ---- Sections ------------------------------------------------------------ */

.zq-section {
    padding: clamp(56px, 9vw, 104px) 24px;
    border-top: 1px solid var(--zq-hairline);
}

.zq-section--alt {
    background: linear-gradient(180deg, rgba(47, 143, 137, .08), transparent 60%);
}

.zq-section__inner,
.zq-cta__inner {
    max-width: 1080px;
    margin: 0 auto;
}

.zq-section__title,
.zq-cta__title {
    margin: 0 0 14px;
    font-family: var(--zq-font);
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--zq-text);
}

.zq-section__lede {
    max-width: var(--zq-measure);
    margin: 0 0 18px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--zq-text);
}

.zq-section__text {
    max-width: var(--zq-measure);
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--zq-muted);
}

/* Cards (brand: panel fill, hairline, 12px radius) */

.zq-cards {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.zq-card {
    padding: 26px;
    border: 1px solid var(--zq-hairline);
    border-radius: 12px;
    background: var(--zq-panel);
}

.zq-card__title {
    margin: 0 0 10px;
    font-family: var(--zq-font);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--zq-text);
}

.zq-card__title::before {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: var(--zq-grad-accent);
}

.zq-card__text {
    margin: 0;
    font-size: .98rem;
    line-height: 1.6;
    color: var(--zq-muted);
}

/* ---- Closing call to action --------------------------------------------- */

.zq-cta {
    padding: clamp(56px, 9vw, 104px) 24px;
    border-top: 1px solid var(--zq-hairline);
    text-align: center;
}

.zq-cta__text {
    max-width: 46ch;
    margin: 0 auto 30px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--zq-muted);
}

.zq-cta__actions {
    margin: 0;
}

/* ---- Motion (brand: slow and subtle, decoration only) ------------------- */

@media (prefers-reduced-motion: no-preference) {
    .zq-hero__inner,
    .zq-section__inner,
    .zq-cta__inner {
        animation: zq-rise .9s ease-out both;
    }

    @keyframes zq-rise {
        from {
            opacity: 0;
            transform: translateY(18px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
}

/* ---- Site chrome: header, primary nav, footer, sidebar ------------------ */

/* Header band (navy, hairline below — same roles as the hero and footer). */
/* Menu bar: sticky at the top; once the page is scrolled the bar takes the
   lighter frosted "stuck" look (translucent navy + blur). No hover color
   changes — owner brief 2026-10-21: one consistent bar color. */
.zq-header {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--zq-navy);
    transition: background .25s ease;
}

.zq-header--stuck {
    background: rgba(42, 59, 68, .72);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.zq-header__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    flex-wrap: wrap;
}

/* Wordmark: the launch page's gradient lockup, 800 weight. */
.zq-brand .custom-logo {
    max-height: 26px;
    width: auto;
}

.zq-brand__wordmark {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    letter-spacing: .02em;
    background: var(--zq-grad-wordmark);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-decoration: none;
}

/* Primary nav: flat list, off-white links, cyan on hover/current.
   Covers wp_nav_menu markup and the wp_page_menu fallback (.menu ul). */
.zq-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.zq-nav li {
    margin: 0;
}

.zq-nav a {
    display: block;
    padding: 9px 14px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    transition: background .18s ease, color .18s ease;
}

.zq-nav a:hover,
.zq-nav a:focus-visible {
    color: var(--zq-cyan);
    background: none;
}

/* About and Contact keep plain white on hover (owner brief 2026-10-21). */
.zq-nav li.zq-nav-plain > a:hover,
.zq-nav li.zq-nav-plain > a:focus-visible {
    color: #fff;
}

/* Keyboard focus ring on header links (issue #93): focus was only shown by
   the cyan color change, which the owner brief forbids on About/Contact —
   leaving them with no focus indicator (WCAG 2.4.7). An outline is not a
   text-color change, so it honors the brief and restores the indicator. */
.zq-nav a:focus-visible,
.zq-brand a:focus-visible {
    outline: 2px solid var(--zq-cyan);
    outline-offset: 4px;
}

.zq-nav .current-menu-item > a,
.zq-nav .current_page_item > a {
    color: #fff;
}

/* Header menu v2 (owner brief, 2026-10-21): the menu sits beside the logo on
   the left, the Request a Quote button on the right. The Services dropdown is
   CSS-only — hover and keyboard focus; on narrow screens it flows inline. */
.zq-nav {
    margin-right: auto;
}

.zq-nav .menu-item-has-children {
    position: relative;
}

.zq-nav .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: -2px 0 0 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    vertical-align: middle;
}

.zq-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 80;
    width: 200px;
    margin: 10px 0 0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    flex-wrap: nowrap;
    background: #fff;
    border: 1px solid rgba(41, 160, 153, .16);
    border-radius: 14px;
    box-shadow: 0 22px 48px rgba(29, 41, 47, .24);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

/* Hover bridge so the pointer can travel from the item into the panel. */
.zq-nav .menu-item-has-children::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 12px;
}

.zq-nav .menu-item-has-children:hover > .sub-menu,
.zq-nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.zq-nav .sub-menu a {
    display: block;
    padding: 10px 14px;
    border-radius: 9px;
    color: #394852;
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
}

.zq-nav .sub-menu a:hover,
.zq-nav .sub-menu a:focus-visible {
    background: rgba(41, 160, 153, .08);
    color: #29a099;
}

/* Header CTA: the owner green button, white ink, on the right. */
.zq-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 22px;
    border-radius: 10px;
    background: var(--zq-green);
    color: #fff !important;
    font-family: var(--zq-font);
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: .01em;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .16s ease;
}

.zq-header__cta:hover,
.zq-header__cta:focus-visible,
.zq-header__cta:active,
.zq-header__cta:visited {
    background: var(--zq-green-dark);
    color: #fff !important;
    text-decoration: none !important;
}

/* Burger button + drawer CTA (owner brief 2026-10-22, issue #105): both are
   mobile-only — hidden on desktop, where the inline menu and header CTA show.
   The .zq-header prefix outscores the parent theme's bare `button` skin,
   which painted a tan pill behind the burger. */
.zq-header .zq-burger {
    display: none;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding: 8px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-family: var(--zq-font);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .01em;
    cursor: pointer;
}

.zq-burger__box {
    position: relative;
    display: block;
    width: 26px;
    height: 16px;
}

.zq-burger__line,
.zq-burger__box::before,
.zq-burger__box::after {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .18s ease, opacity .18s ease, top .18s ease;
    content: "";
}

.zq-burger__box::before { top: 0; }
.zq-burger__line { top: 7px; }
.zq-burger__box::after { top: 14px; }

.zq-header--nav-open .zq-burger__box::before { top: 7px; transform: rotate(45deg); }
.zq-header--nav-open .zq-burger__line { opacity: 0; }
.zq-header--nav-open .zq-burger__box::after { top: 7px; transform: rotate(-45deg); }

.zq-burger:focus-visible {
    outline: 2px solid var(--zq-cyan);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Owner brief 2026-10-22 (#107): icon-only burger — the label stays in the
   DOM as the accessible name, visually hidden. */
.zq-burger__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.zq-nav .zq-nav__cta { display: none; }

/* Footer: navy band, widget grid when the areas have widgets, brand-line base. */
.zq-footer {
    background: var(--zq-navy);
    color: var(--zq-faint);
    border-top: 1px solid var(--zq-hairline);
    font-size: .85rem;
}

.zq-footer__widgets {
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px 24px 28px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 32px;
}

.zq-footer__widgets .widget-title {
    color: var(--zq-text);
    font-size: .95rem;
    font-weight: 800;
    margin: 0 0 12px;
}

.zq-footer__widgets a {
    color: var(--zq-muted);
}

.zq-footer__widgets a:hover {
    color: var(--zq-cyan);
}

.zq-footer__base {
    border-top: 1px solid var(--zq-hairline);
}

.zq-footer__copy {
    max-width: 1120px;
    margin: 0 auto;
    padding: 18px 24px;
}

/* License attribution (Freepik free license requires author credit). */
.zq-footer__credits {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px 18px;
    font-size: .8rem;
    opacity: .75;
}

.zq-footer__credits a {
    color: inherit;
    text-decoration: underline;
}

/* Sidebar: the launch page's 640px measure, panel+hairline cards. */
.zq-sidebar {
    max-width: 688px;
    margin: 32px auto;
    padding: 0 24px;
}

.zq-sidebar .widget {
    background: var(--zq-panel);
    border: 1px solid var(--zq-hairline);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.zq-sidebar .widget-title {
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 800;
}

/* ==========================================================================
   Static pages (page.php) — the home page's navy system on page content.
   ========================================================================== */

body.page {
    background: var(--zq-navy);
}

.zq-page {
    position: relative;
    overflow: hidden;
    background: var(--zq-navy);
    color: var(--zq-text);
    font-family: var(--zq-font);
    padding: clamp(72px, 12vw, 128px) 24px clamp(80px, 12vw, 140px);
}

.zq-page__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(560px 320px at 18% -10%, rgba(41, 160, 153, .28), transparent 70%),
        radial-gradient(520px 300px at 82% 0%, rgba(47, 143, 137, .24), transparent 70%);
}

.zq-page__inner {
    position: relative;
    max-width: var(--zq-measure);
    margin: 0 auto;
}

.zq-page__title {
    margin: 0 0 clamp(28px, 5vw, 44px);
    font-family: var(--zq-font);
    font-size: clamp(2.1rem, 5.6vw, 3.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--zq-text);
}

.zq-page__title::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin-top: 18px;
    border-radius: 2px;
    background: var(--zq-grad-accent);
}

.zq-prose > :first-child {
    margin-top: 0;
}

.zq-prose p {
    color: var(--zq-muted);
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0 0 1.15em;
}

.zq-prose h2 {
    margin: 2.2em 0 .6em;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--zq-text);
}

.zq-prose h3 {
    margin: 1.8em 0 .5em;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--zq-text);
}

.zq-prose a {
    color: var(--zq-cyan);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.zq-prose a:hover {
    color: var(--zq-text);
}

.zq-prose :focus-visible {
    outline: 3px solid var(--zq-cyan);
    outline-offset: 2px;
}

.zq-prose strong {
    color: var(--zq-text);
}

.zq-prose ul,
.zq-prose ol {
    color: var(--zq-muted);
    padding-left: 1.4em;
    margin: 0 0 1.15em;
}

.zq-prose li {
    margin: .35em 0;
    line-height: 1.6;
}

.zq-prose hr {
    border: 0;
    border-top: 1px solid var(--zq-hairline);
    margin: 2.4em 0;
}

.zq-prose blockquote {
    margin: 1.6em 0;
    padding: 16px 20px;
    background: var(--zq-panel);
    border: 1px solid var(--zq-hairline);
    border-radius: 12px;
    color: var(--zq-muted);
}

.zq-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* ==========================================================================
   Home v2 (owner brief 2026-10-20) — light, minimalist, vapi.ai register.
   Appended block: it redefines the .zq-home canvas and adds zq-hero2 /
   zq-scard2 / zq-cta2. Old v1 home rules are inert because the
   new template uses only the new class names.
   ========================================================================== */

:root {
    /* Owner palette 2026-11-01 (logo colors): teal #29a099 (actions, links,
       accents), dark slate #2a3b44 (headings, dark bands, header/footer),
       slate #394852 (body text), mint #def0ec (tints, section backgrounds).
       Gradient styles unchanged; colors only. */
    --zq-blue: #29a099;
    --zq-green: #29a099;
    --zq-green-dark: #1f8178;
    --zq-green-ink: #17706a;
    --zq-ink: #2a3b44;
    --zq-body: #394852;
    --zq-line: #d3e9e5;
    --zq-paper: #f2faf8;
}

.zq-home {
    background: #fff;
    color: var(--zq-body);
    font-family: var(--zq-font);
}

/* ---- hero ---------------------------------------------------------------- */

.zq-hero2 {
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 9vw, 110px) 24px clamp(56px, 8vw, 96px);
    min-height: 620px;
    display: flex;
    align-items: center;
}

.zq-hero2__inner {
    position: relative;
    z-index: 1;
    /* Issue #101: 1488px put the copy 24px outside the 1440px panel on
       wide screens — title glyphs clipped at the panel edge, subcopy ran
       onto the white canvas. Cap to the panel width and pad inside it. */
    max-width: 1440px;
    padding: 0 24px;
    box-sizing: border-box;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
    text-align: left;
}

.zq-hero2__eyebrow {
    margin: 0 0 18px;
    color: var(--zq-blue);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.zq-hero2__title {
    margin: 0 0 22px;
    color: #fff;
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
}

.zq-hero2__sub {
    margin: 0 0 30px;
    max-width: 54ch;
    color: rgba(222, 240, 236, .88);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.65;
}

.zq-hero2__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
}

/* ---- buttons -------------------------------------------------------------- */

.zq-btn2 {
    display: inline-block;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease,
                border-color .18s ease, transform .18s ease,
                box-shadow .18s ease;
}

.zq-btn2:focus-visible {
    outline: 3px solid var(--zq-blue-3);
    outline-offset: 2px;
}

.zq-btn2--green {
    background: var(--zq-green);
    color: #fff;
}

.zq-btn2--green:hover {
    background: var(--zq-green-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 168, 107, .28);
}

.zq-btn2--outline {
    background: #fff;
    border: 2px solid var(--zq-blue);
    color: var(--zq-blue);
}

.zq-btn2--outline:hover {
    background: rgba(41, 160, 153, .06);
    color: var(--zq-blue);
    transform: translateY(-1px);
}

.zq-btn2--ghost {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .45);
    color: #fff;
}

.zq-btn2--ghost:hover {
    border-color: #fff;
    color: #fff;
    transform: translateY(-1px);
}

/* Deterministic text colors: the theme loads bootstrap.css (a { color: … }),
   so button/chip link colors are locked with !important — the owner brief
   says the green button is white text, full stop. */
a.zq-btn2 { text-decoration: none; }
.zq-home a.zq-btn2--green,
.zq-home a.zq-btn2--green:hover,
.zq-home a.zq-btn2--green:focus,
.zq-home a.zq-btn2--green:visited { color: #fff !important; }
.zq-home a.zq-btn2--outline,
.zq-home a.zq-btn2--outline:hover,
.zq-home a.zq-btn2--outline:focus,
.zq-home a.zq-btn2--outline:visited { color: var(--zq-blue) !important; }

/* White-on-navy outline variant — hero is dark, light-blue-on-white is not
   legible there. MUST stay below the .zq-home color lock above: the lock
   matches at the same specificity in every link state (incl. :visited), so
   equal weight is decided by order — last rule paints. */
.zq-home .zq-hero2 a.zq-btn2--outline,
.zq-home .zq-hero2 a.zq-btn2--outline:hover,
.zq-home .zq-hero2 a.zq-btn2--outline:focus,
.zq-home .zq-hero2 a.zq-btn2--outline:link,
.zq-home .zq-hero2 a.zq-btn2--outline:visited,
.zq-home .zq-hero2 a.zq-btn2--outline:active {
    background: transparent;
    border-color: rgba(255, 255, 255, .55);
    color: #fff !important;
}

.zq-home .zq-hero2 a.zq-btn2--outline:hover,
.zq-home .zq-hero2 a.zq-btn2--outline:focus {
    background: rgba(255, 255, 255, .10);
    border-color: #fff;
}
.zq-home a.zq-btn2--ghost,
.zq-home a.zq-btn2--ghost:hover,
.zq-home a.zq-btn2--ghost:focus,
.zq-home a.zq-btn2--ghost:visited { color: #fff !important; }

/* ---- hero visual (abstract, CSS only) ------------------------------------- */

/* The visual is the hero's background layer: pinned behind the copy. */
.zq-hero2__visual {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Owner spec update 2026-10-22 (#103): the hero background is a full-bleed
   cover layer of the hero — it resizes with the browser window at every
   width (the old 1440x620 centered panel left white gutters on wide
   screens). Height follows the hero content. */
.zq-viz {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: linear-gradient(145deg, #1d292f 0%, #22333b 55%, #2a3b44 100%);
}

.zq-viz__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(140, 205, 195, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(140, 205, 195, .10) 1px, transparent 1px);
    background-size: 44px 44px;
}

.zq-viz__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(46px);
}

.zq-viz__orb--blue {
    width: 55%;
    aspect-ratio: 1;
    top: -12%;
    right: -10%;
    background: rgba(41, 160, 153, .55);
}

.zq-viz__orb--cyan {
    width: 48%;
    aspect-ratio: 1;
    bottom: -14%;
    left: -8%;
    background: rgba(111, 214, 205, .34);
}

.zq-viz__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(140, 205, 195, .28);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Height-driven so the circles arc nicely in a 1440x620 (2.32:1) box */
.zq-viz__ring--1 { height: 84%; aspect-ratio: 1; }
.zq-viz__ring--2 { height: 120%; aspect-ratio: 1; opacity: .55; }

/* Glass service card — right column of the hero. Owner spec: 450 x 385. */
.zq-viz__card {
    position: relative;
    justify-self: center;
    align-self: center;
    box-sizing: border-box;
    width: min(450px, 100%);
    height: 385px;
    margin: 0;
    padding: 20px 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(140, 205, 195, .35);
    border-radius: 16px;
    background: rgba(29, 41, 47, .62);
    backdrop-filter: blur(8px);
    box-shadow: 0 18px 44px rgba(29, 41, 47, .45);
}

/* Service cycle: the five core services rotate through the glass card,
   pure CSS (12.5 s loop, one fifth each), dots track the active slide. */
.zq-viz__stack {
    position: relative;
    height: 220px;
}

.zq-viz__slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    opacity: 0;
    animation: zq-slide 12.5s linear infinite;
}

.zq-viz__slide:nth-child(2) { animation-delay: 2.5s; }
.zq-viz__slide:nth-child(3) { animation-delay: 5s; }
.zq-viz__slide:nth-child(4) { animation-delay: 7.5s; }
.zq-viz__slide:nth-child(5) { animation-delay: 10s; }

.zq-viz__slide i {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(41, 160, 153, .16);
    color: var(--zq-green);
    font-size: 1.7rem;
}

.zq-viz__slide span {
    color: var(--zq-text);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.zq-viz__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.zq-viz__dots i {
    width: 22px;
    height: 4px;
    border-radius: 2px;
    background: rgba(238, 247, 244, .3);
    animation: zq-dot 12.5s linear infinite;
}

.zq-viz__dots i:nth-child(2) { animation-delay: 2.5s; }
.zq-viz__dots i:nth-child(3) { animation-delay: 5s; }
.zq-viz__dots i:nth-child(4) { animation-delay: 7.5s; }
.zq-viz__dots i:nth-child(5) { animation-delay: 10s; }

@keyframes zq-slide {
    0%     { opacity: 0; transform: translateY(14px); }
    4%     { opacity: 1; transform: translateY(0); }
    16.4%  { opacity: 1; transform: translateY(0); }
    20%    { opacity: 0; transform: translateY(-14px); }
    100%   { opacity: 0; transform: translateY(-14px); }
}

@keyframes zq-dot {
    0%     { background: var(--zq-green); }
    16.4%  { background: var(--zq-green); }
    20%    { background: rgba(238, 247, 244, .3); }
    100%   { background: rgba(238, 247, 244, .3); }
}

@media (prefers-reduced-motion: reduce) {
    .zq-viz__card { height: auto; }
    .zq-viz__stack { height: auto; }
    .zq-viz__slide {
        position: static;
        inset: auto;
        opacity: 1;
        animation: none;
        padding: 10px 0;
    }
    .zq-viz__dots { display: none; }
}

/* ---- solutions -------------------------------------------------------------- */

.zq-solutions {
    padding: clamp(56px, 8vw, 96px) 24px;
}

.zq-solutions__inner { max-width: 1180px; margin: 0 auto; }

.zq-solutions__title {
    margin: 0 0 10px;
    color: var(--zq-ink);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -.015em;
}

.zq-solutions__lede {
    margin: 0 0 40px;
    color: var(--zq-body);
    font-size: 1.08rem;
}

/* Retell-style stacked deck: the cards sit in a vertical column, each one
   `position: sticky` at a slightly lower top, so scrolling piles the next
   card over the previous one (their is-1/is-2/is-3 sticky tops at
   150/170/190px — same mechanic, our offsets). */
.zq-scards {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    max-width: 1160px;
}

.zq-scard2 {
    position: sticky;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    column-gap: 40px;
    align-items: center;
    min-height: 492px;
    padding: 24px 36px;
    border: 1px solid var(--zq-line);
    border-radius: 24px;
    background: var(--zq-paper);
    box-shadow: 0 -12px 32px rgba(26, 26, 26, .06),
                0 24px 60px rgba(26, 26, 26, .14);
}

/* Text-only card (no figure): copy spans the full card width. */
.zq-scard2--full {
    grid-template-columns: minmax(0, 1fr);
}

.zq-scard2--full .zq-scard2__body {
    max-width: 900px;
}

.zq-scard2__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.zq-scard2:nth-child(1) { top: 32px; margin-bottom: 56px; }
.zq-scard2:nth-child(2) { top: 52px; margin-bottom: 56px; }
.zq-scard2:nth-child(3) { top: 72px; margin-bottom: 56px; }
.zq-scard2:nth-child(4) { top: 92px; margin-bottom: 56px; }
.zq-scard2:nth-child(5) { top: 112px; margin-bottom: 32px; }

.zq-scard2--dark {
    border-color: transparent;
    background: linear-gradient(160deg, #1d292f 0%, #22333b 100%);
}

.zq-scard2__icon {
    margin-bottom: 14px;
    color: var(--zq-green);
}

.zq-scard2__title {
    margin: 0 0 10px;
    color: var(--zq-ink);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.zq-scard2__text {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    color: var(--zq-ink);
    font-size: clamp(1.3rem, 1.5vw, 1.55rem);
    line-height: 1.4;
}

.zq-scard2--dark .zq-scard2__title { color: #fff; }
.zq-scard2--dark .zq-scard2__text { color: rgba(238, 247, 244, .85); }

.zq-scard2__btn {
    margin-top: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
    height: 32px;
    padding: 0 18px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: var(--zq-blue);
    color: #fff !important;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: background-color .18s ease, transform .18s ease;
}

.zq-scard2__btn:hover {
    background: #2f8f89;
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

.zq-scard2--dark .zq-scard2__btn { background: #fff; }
.zq-scard2--dark .zq-scard2__btn:hover { background: #e2f1ee; }
.zq-scard2--dark .zq-scard2__btn,
.zq-scard2--dark .zq-scard2__btn:hover,
.zq-scard2--dark .zq-scard2__btn:focus,
.zq-scard2--dark .zq-scard2__btn:visited { color: var(--zq-blue) !important; }

/* Card imagery: owner-supplied artwork, side-by-side with the copy.
   Files live in the WordPress media library (content), referenced
   site-root-relative so staging and production both resolve them.
   Fixed 330x444 slot; object-fit:cover crops to fill, so portrait,
   square and landscape sources all render undistorted. */
.zq-scard2__figure {
    margin: 0;
    width: 330px;
    height: 444px;
    align-self: center;
}

.zq-scard2__figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(29, 41, 47, .18);
}

.zq-scard2--dark .zq-scard2__figure img {
    box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
}

/* ---- who we work with -------------------------------------------------------- */

.zq-who2 {
    padding: clamp(48px, 7vw, 80px) 24px;
    background: var(--zq-paper);
    border-top: 1px solid var(--zq-line);
    border-bottom: 1px solid var(--zq-line);
}

.zq-who2__inner { max-width: 820px; margin: 0 auto; text-align: center; }

.zq-who2__title {
    margin: 0 0 16px;
    color: var(--zq-ink);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.015em;
}

.zq-who2__text {
    margin: 0 auto;
    max-width: var(--zq-measure);
    color: var(--zq-body);
    font-size: 1.08rem;
    line-height: 1.7;
}

/* ---- closing CTA (navy band) -------------------------------------------------- */

.zq-cta2 {
    padding: clamp(64px, 9vw, 110px) 24px;
    background:
        radial-gradient(60% 90% at 80% 10%, rgba(41, 160, 153, .35), transparent 60%),
        radial-gradient(50% 80% at 15% 90%, rgba(111, 214, 205, .18), transparent 60%),
        var(--zq-navy);
    color: var(--zq-muted);
    text-align: center;
}

.zq-cta2__inner {
    max-width: 1060px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
    text-align: left;
}

/* Single centered column (404 page and other simple sections). */
.zq-cta2__inner--single { display: block; max-width: 720px; text-align: center; }

.zq-cta2__title {
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -.015em;
}

.zq-cta2__text { margin: 0 0 30px; font-size: 1.1rem; }

.zq-cta2__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 0;
}

/* ---- quote form (owner brief 2026-10-21) ---------------------------------- */

.zq-quote {
    text-align: left;
    margin-top: 4px;
}

.zq-quote__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
    margin: 0;
}

.zq-quote__field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
}

.zq-quote__field--full { grid-column: 1 / -1; }

.zq-quote label {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--zq-muted);
}

.zq-quote input,
.zq-quote select,
.zq-quote textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--zq-hairline);
    background: rgba(34, 51, 59, .55);
    color: #fff;
    font: inherit;
    font-size: .98rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.zq-quote input:focus,
.zq-quote select:focus,
.zq-quote textarea:focus {
    outline: none;
    border-color: var(--zq-cyan);
    box-shadow: 0 0 0 3px rgba(111, 214, 205, .16);
}

.zq-quote input::placeholder,
.zq-quote textarea::placeholder { color: var(--zq-faint); }

.zq-quote select option { background: #fff; color: #394852; }

.zq-quote textarea {
    min-height: 130px;
    resize: vertical;
}

.zq-quote__hp { display: none !important; }

.zq-quote__actions {
    display: flex;
    justify-content: center;
    margin: 26px 0 0;
}

.zq-quote button.zq-btn2 {
    border: 0;
    cursor: pointer;
    font: inherit;
}

.zq-quote__done {
    margin: 22px 0 0;
    padding: 22px 26px;
    border-radius: 14px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    background: rgba(41, 160, 153, .10);
    border: 1px solid rgba(41, 160, 153, .45);
}

.zq-quote__error {
    margin: 18px 0 0;
    text-align: center;
    color: #ffb4ab;
}

.zq-quote__error a { color: #ffb4ab; }

/* ---- responsive ----------------------------------------------------------------- */

@media (max-width: 900px) {
    /* Burger header (owner brief 2026-10-22, issue #105): one-row bar —
       brand left, burger right — with the menu in a navy drawer under the
       header and the Request a Quote button at the bottom of the drawer.
       Replaces the wrapped-menu layout and the #91 Services tap-toggle. */
    .zq-header__inner { gap: 0; }
    .zq-header__cta { display: none; }
    .zq-header .zq-burger { display: inline-flex; }

    .zq-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        order: 0;
        flex: none;
        margin: 0;
        background: var(--zq-navy);
        border-top: 1px solid var(--zq-hairline);
        box-shadow: 0 24px 48px rgba(29, 41, 47, .35);
    }
    .zq-header--nav-open .zq-nav { display: block; }
    .zq-nav ul {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 0;
    }
    .zq-nav .menu-item-has-children::before { display: none; }
    /* #107: Services is a dropdown inside the drawer — children collapsed,
       opened by tap (zq-header.js) or hover/focus. The chevron is back to
       signal it, and flips when open. */
    .zq-nav .menu-item-has-children.zq-nav-open > a::after { transform: rotate(180deg); }
    .zq-nav__list > li > a {
        display: block;
        padding: 13px 24px;
        color: #fff !important;
        font-size: 1.02rem;
    }
    @media (hover: hover) and (pointer: fine) {
        .zq-nav__list > li > a:hover {
            background: rgba(255, 255, 255, .05);
            color: #fff;
        }
    }
    .zq-nav__list > li > a:focus-visible {
        background: rgba(255, 255, 255, .05);
        color: #fff;
    }
    /* Services dropdown inside the drawer (#107): collapsed by default; tap
       (zq-header.js) or hover/focus opens it. */
    .zq-nav .sub-menu {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        margin: 0;
        padding: 0 24px 6px 40px;
        border: 0;
        box-shadow: none;
        background: transparent;
        flex-direction: column;
    }
    .zq-nav .menu-item-has-children:focus-within > .sub-menu,
    .zq-nav .menu-item-has-children.zq-nav-open > .sub-menu { display: flex; }
    /* Touch screens keep :hover "stuck" after a tap (sticky hover), which
       kept the dropdown open through the collapse (#107 follow-up: owner
       "clicking again doesn't collapse"). Hover-open only on real pointers;
       on touch the tap toggle owns the state. */
    @media (hover: hover) and (pointer: fine) {
        .zq-nav .menu-item-has-children:hover > .sub-menu { display: flex; }
    }
    .zq-nav .sub-menu a {
        padding: 9px 0;
        /* #6d8288 footer ink is ~3:1 on the navy drawer — below WCAG AA. */
        color: rgba(255, 255, 255, .72);
        font-size: .93rem;
        white-space: normal;
    }
    .zq-nav .sub-menu a:hover,
    .zq-nav .sub-menu a:focus-visible {
        background: transparent;
        color: var(--zq-cyan);
    }
    /* Green CTA as the last thing in the drawer (owner: "at the bottom"). */
    .zq-nav .zq-nav__cta {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 48px;
        margin: 12px 24px 24px;
        border-radius: 10px;
        background: var(--zq-green);
        color: #fff !important;
        font-family: var(--zq-font);
        font-weight: 700;
        font-size: 1rem;
        text-decoration: none !important;
    }
    .zq-nav__cta:hover,
    .zq-nav__cta:focus-visible,
    .zq-nav__cta:active,
    .zq-nav__cta:visited {
        background: var(--zq-green-dark);
        color: #fff !important;
        text-decoration: none !important;
    }

    /* Hero scaled to the phone screen (#107): background + copy + buttons +
       card fit one viewport (the stacked layout ran to ~1085px). */
    .zq-hero2 {
        min-height: calc(100vh - 78px);
        min-height: calc(100svh - 78px);
        padding: 36px 24px 40px;
    }
    .zq-hero2__inner { grid-template-columns: 1fr; gap: 22px; padding: 0; }
    .zq-hero2__title {
        margin-bottom: 14px;
        font-size: clamp(1.55rem, 6.4vw, 1.9rem);
    }
    .zq-hero2__sub {
        margin-bottom: 20px;
        font-size: .95rem;
        line-height: 1.55;
    }
    .zq-hero2__actions { gap: 10px; }
    .zq-hero2 .zq-btn2 {
        padding: 10px 14px;
        border-radius: 9px;
        font-size: .85rem;
    }
    /* #90/#103: the .zq-viz cover layer fills the hero at every width. */
    .zq-viz__card {
        justify-self: center;
        height: 260px;
        height: clamp(220px, 34svh, 300px);
    }
}

/* Small phones (#107): the hero content (title, sub, buttons, card) has to
   fit the viewport minus the header — measured budget 662px at 360x740. */
@media (max-width: 420px) {
    .zq-hero2 { padding: 28px 20px 32px; }
    .zq-hero2__inner { gap: 16px; }
    .zq-hero2__title {
        margin-bottom: 12px;
        font-size: 1.45rem;
    }
    .zq-hero2__sub {
        margin-bottom: 16px;
        font-size: .9rem;
    }
    .zq-viz__card { height: 210px; }
}

@media (max-width: 900px) {
    .zq-scard2 {
        grid-template-columns: 1fr;
        row-gap: 24px;
        min-height: 0;
        padding: 30px 24px;
        border-radius: 20px;
    }
    .zq-scard2__figure {
        width: 100%;
        height: auto;
    }
    .zq-scard2__figure img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .zq-scard2:nth-child(1) { top: 16px; }
    .zq-scard2:nth-child(2) { top: 32px; }
    .zq-scard2:nth-child(3) { top: 48px; }
    .zq-scard2:nth-child(4) { top: 64px; }
    .zq-scard2:nth-child(5) { top: 80px; }

    /* Quote form stacks on narrow screens. */
    .zq-quote__grid { grid-template-columns: 1fr; }
    .zq-cta2__inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Home v11 (owner brief 2026-10-25, issue #111): the RiSETech layout in the
   owner palette. zq-topbar / zq-hero3 / zq-marquee / zq-process / zq-services
   (navy panel holding the stacking deck) / zq-why3 / quote-section banner.
   The hero2 and who2 styles above are inert — template-home.php no longer
   references them.
   ========================================================================== */

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- topbar ---------------------------------------------------------------- */
.zq-topbar {
    background: #f2faf8;
    border-bottom: 1px solid #def0ec;
    font-family: var(--zq-font);
    font-size: .8rem;
    color: #3f4f58;
}

.zq-topbar__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    gap: 28px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.zq-topbar__item {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.zq-topbar a.zq-topbar__item:hover,
.zq-topbar a.zq-topbar__item:focus-visible {
    color: var(--zq-blue);
    text-decoration: underline;
}

/* ---- hero v3 (light) -------------------------------------------------------- */
.zq-hero3 {
    padding: clamp(56px, 8vw, 100px) 24px clamp(56px, 7vw, 88px);
    background: linear-gradient(180deg, #def0ec 0%, #f6fcfb 55%, #fff 100%);
    font-family: var(--zq-font);
}

.zq-hero3__inner {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.zq-hero3__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    padding: 7px 15px;
    border: 1px solid #def0ec;
    border-radius: 999px;
    background: #fff;
    color: var(--zq-blue);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.zq-hero3__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zq-green);
}

.zq-hero3__title {
    margin: 0 0 20px;
    color: var(--zq-navy);
    font-size: clamp(2.1rem, 4.6vw, 3.35rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.015em;
}

.zq-hero3__accent { color: var(--zq-blue); }

.zq-hero3__sub {
    max-width: 52ch;
    margin: 0 0 30px;
    color: var(--zq-body);
    font-size: 1.08rem;
    line-height: 1.65;
}

.zq-hero3__actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0;
}

.zq-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 28px;
    border-radius: 999px;
    font-family: var(--zq-font);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none !important;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.zq-pill--green {
    background: var(--zq-green);
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(41, 160, 153, .28);
}

.zq-pill--green:hover,
.zq-pill--green:focus-visible,
.zq-pill--green:active {
    background: var(--zq-green-dark);
    color: #fff !important;
}

.zq-pill--ghost {
    background: #fff;
    border: 1px solid #d3e9e5;
    color: var(--zq-navy) !important;
}

.zq-pill--ghost:hover,
.zq-pill--ghost:focus-visible {
    border-color: var(--zq-blue);
    color: var(--zq-blue) !important;
}

/* Rotator panel: the navy service-card on a soft-blue stage. */
.zq-hero3__viz {
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(24px, 4vw, 48px);
    border-radius: 28px;
    background: radial-gradient(120% 120% at 30% 20%, #c9e6e0 0%, #e7f5f2 55%, #f6fcfb 100%);
}

.zq-hero3__ring {
    position: absolute;
    border: 1px solid rgba(41, 160, 153, .18);
    border-radius: 50%;
    aspect-ratio: 1;
}

.zq-hero3__ring--1 { width: 80%; }
.zq-hero3__ring--2 { width: 105%; border-color: rgba(41, 160, 153, .10); }

.zq-hero3 .zq-viz__card {
    width: min(380px, 100%);
    border: 1px solid var(--zq-navy);
    border-radius: 20px;
    background: var(--zq-navy);
    box-shadow: 0 30px 60px rgba(42, 59, 68, .28);
}

/* ---- capability marquee ------------------------------------------------------ */
.zq-marquee {
    overflow: hidden;
    padding: 18px 0;
    background: #fff;
    border-top: 1px solid var(--zq-line);
    border-bottom: 1px solid var(--zq-line);
    font-family: var(--zq-font);
}

.zq-marquee__track {
    display: flex;
    width: max-content;
    animation: zq-marquee 30s linear infinite;
}

.zq-marquee__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-right: 48px;
    white-space: nowrap;
    color: #8a999e;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.zq-marquee__item::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--zq-blue-3);
}

@keyframes zq-marquee { to { transform: translateX(-50%); } }

/* ---- process row ------------------------------------------------------------- */
.zq-process {
    padding: clamp(56px, 7vw, 88px) 24px;
    background: #fff;
    font-family: var(--zq-font);
}

.zq-process__inner { max-width: 1120px; margin: 0 auto; }

.zq-process__title-main {
    margin: 0 0 36px;
    color: var(--zq-navy);
    font-size: clamp(1.7rem, 3.2vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
}

.zq-process__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.zq-process__card {
    padding: 28px 26px;
    border: 1px solid var(--zq-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(26, 26, 26, .05);
}

.zq-process__step {
    margin: 0 0 10px;
    color: var(--zq-blue);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.zq-process__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: #def0ec;
    color: var(--zq-blue);
    font-weight: 800;
    font-size: 1rem;
}

.zq-process__title {
    margin: 0 0 8px;
    color: var(--zq-navy);
    font-size: 1.08rem;
    font-weight: 700;
}

.zq-process__text {
    margin: 0;
    color: var(--zq-body);
    font-size: .92rem;
    line-height: 1.6;
}

/* ---- services: navy panel + stacking deck ------------------------------------ */
.zq-services {
    padding: clamp(56px, 7vw, 88px) 24px;
    background: #e2f1ee;
    font-family: var(--zq-font);
}

.zq-services__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(28px, 4.5vw, 56px) clamp(18px, 4vw, 56px) clamp(36px, 5vw, 64px);
    border-radius: 28px;
    background: linear-gradient(150deg, #1d292f 0%, #22333b 48%, #2a3b44 100%);
    box-shadow: 0 40px 90px rgba(42, 59, 68, .35);
}

.zq-services__head {
    max-width: 720px;
    margin: 0 auto clamp(28px, 4vw, 44px);
    text-align: center;
}

.zq-services__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    color: #a9d8d0;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.zq-services__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zq-green);
}

.zq-services__title {
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(1.7rem, 3.2vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
}

.zq-services__lede {
    margin: 0;
    color: rgba(222, 240, 236, .85);
    font-size: 1.02rem;
    line-height: 1.7;
}

.zq-services .zq-scards { max-width: 960px; }

.zq-services .zq-scard2 {
    background: #f2faf8;
    border: 1px solid rgba(140, 205, 195, .28);
    box-shadow: 0 24px 60px rgba(26, 35, 40, .45);
}

/* Deck typography: match the weight/scale of the rest of the page. */
.zq-services .zq-scard2__title {
    color: var(--zq-navy);
    font-size: 1.3rem;
    font-weight: 700;
}

.zq-services .zq-scard2__text {
    color: var(--zq-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
}

.zq-scard2__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: var(--zq-blue);
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
}

/* ---- why-Zolviq blue band ----------------------------------------------------- */
.zq-why3 {
    padding: clamp(64px, 8vw, 96px) 24px;
    background: linear-gradient(160deg, #29a099 0%, #2a3b44 60%, #2a3b44 100%);
    font-family: var(--zq-font);
}

.zq-why3__inner { max-width: 1120px; margin: 0 auto; }

.zq-why3__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    color: #def0ec;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.zq-why3__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zq-green);
}

.zq-why3__title {
    max-width: 22ch;
    margin: 0 0 36px;
    color: #fff;
    font-size: clamp(1.7rem, 3.2vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
}

.zq-why3__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.zq-why3__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: #fff;
    color: var(--zq-navy);
    font-weight: 800;
    font-size: 1.05rem;
}

.zq-why3__card {
    padding: 26px 24px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 16px;
    background: rgba(255, 255, 255, .08);
}

.zq-why3__card-title {
    margin: 0 0 10px;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
}

.zq-why3__card-text {
    margin: 0;
    color: rgba(222, 240, 236, .85);
    font-size: .9rem;
    line-height: 1.65;
}

.zq-why3__text {
    max-width: 70ch;
    margin: 0;
    color: rgba(222, 240, 236, .9);
    font-size: 1rem;
    line-height: 1.7;
}

/* ---- consult banner (above the owner-spec quote form) -------------------------- */
.zq-cta2__banner {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    padding: 28px 34px;
    border-radius: 20px;
    background: linear-gradient(120deg, var(--zq-navy) 0%, var(--zq-blue) 100%);
}

.zq-cta2__banner-title {
    margin: 0 0 6px;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
}

.zq-cta2__banner-text {
    margin: 0;
    color: rgba(222, 240, 236, .85);
    font-size: .95rem;
}

/* ---- v11 responsive ------------------------------------------------------------ */
@media (max-width: 900px) {
    .zq-topbar { display: none; }
    .zq-hero3__inner { grid-template-columns: 1fr; }
    /* Phone fit (owner brief #107): hero must fit one screen — budget is
       viewport minus the 78px sticky header. */
    .zq-hero3 { padding: 28px 20px 32px; }
    .zq-hero3__inner { gap: 22px; }
    .zq-hero3__eyebrow { margin: 0 0 10px; }
    .zq-hero3__title { margin: 0 0 12px; }
    .zq-hero3__sub { margin: 0 0 16px; font-size: .98rem; line-height: 1.55; }
    .zq-hero3__viz { padding: 14px; border-radius: 22px; }
    .zq-hero3 .zq-viz__card { width: min(292px, 100%); height: 292px; }
    /* Font-size 0 kills the container's line-box strut (28px of phantom
       height under the buttons); the pills set their own size. */
    .zq-hero3__actions { font-size: 0; gap: 12px; }
    .zq-process__grid { grid-template-columns: repeat(2, 1fr); }
    .zq-why3__grid { grid-template-columns: repeat(2, 1fr); }
    .zq-cta2__banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 26px;
    }
}

@media (max-width: 560px) {
    .zq-process__grid,
    .zq-why3__grid { grid-template-columns: 1fr; }
    .zq-pill { height: 44px; padding: 0 22px; font-size: .9rem; }
}

@media (max-width: 420px) {
    .zq-hero3 { padding: 24px 18px 28px; }
    .zq-hero3__eyebrow { display: none; }
    .zq-hero3__title { font-size: 1.8rem; margin: 0 0 10px; }
    .zq-hero3__sub { margin: 0 0 14px; font-size: .95rem; }
    .zq-hero3__viz { padding: 12px; }
    .zq-hero3 .zq-viz__card { width: 264px; height: 268px; }
    .zq-pill { height: 40px; padding: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .zq-marquee__track {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 12px;
    }
    .zq-marquee__item { padding-right: 24px; margin: 4px 12px; }
}

/* ---- site-wide typography (v11.7) ------------------------------------------
   One type system on every page: Inter Tight for body copy, Manrope for
   headings. Both families are already loaded by the parent theme (app.css
   Google Fonts import). body.body outscored the parent/bootstrap body rules. */
body.body {
    font-family: var(--zq-font);
}

body.body h1,
body.body h2,
body.body h3,
body.body h4,
body.body h5,
body.body h6 {
    font-family: "Manrope", "Inter Tight", sans-serif;
}

/* ---- CRM service page (page-crm.php) ---------------------------------------
   RiSETech-inspired single-service layout in owner palette. Light hero band
   with ring decor, overlapping rounded hero image, narrow article column,
   navy pull-quote, two-column platform list, image pair, consult banner. */
.zq-crm {
    background: #f6fcfb;
    color: var(--zq-body);
    font-family: var(--zq-font);
    padding-bottom: clamp(64px, 8vw, 100px);
}

.zq-crm__hero {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 7vw, 92px) 24px clamp(64px, 6vw, 88px);
    text-align: center;
    background: linear-gradient(180deg, #def0ec 0%, #f6fcfb 100%);
}

/* Mockup ring decor on the light band. */
.zq-crm__hero::before,
.zq-crm__hero::after {
    content: "";
    position: absolute;
    border: 1.5px solid rgba(41, 160, 153, .10);
    border-radius: 50%;
    pointer-events: none;
}

.zq-crm__hero::before {
    top: -160px;
    right: -140px;
    width: 420px;
    height: 420px;
    box-shadow: 0 0 0 46px rgba(41, 160, 153, .04),
                0 0 0 92px rgba(41, 160, 153, .03);
}

.zq-crm__hero::after {
    bottom: -180px;
    left: -150px;
    width: 380px;
    height: 380px;
    box-shadow: 0 0 0 44px rgba(41, 160, 153, .04);
}

.zq-crm__hero-inner {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
}

.zq-crm__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    color: var(--zq-blue);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.zq-crm__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zq-green);
}

.zq-crm__title {
    margin: 0 0 18px;
    color: var(--zq-navy);
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    font-weight: 800;
    line-height: 1.12;
}

.zq-crm__lead {
    margin: 0 auto;
    max-width: 640px;
    color: var(--zq-body);
    font-size: 1.05rem;
    line-height: 1.7;
}

.zq-crm__hero-figure {
    position: relative;
    z-index: 2;
    max-width: 920px;
    margin: -72px auto 0;
    padding: 0 24px;
}

.zq-crm__hero-figure img {
    display: block;
    width: 100%;
    height: clamp(260px, 32vw, 420px);
    object-fit: cover;
    object-position: center 42%;
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(42, 59, 68, .22);
}

.zq-crm__body {
    max-width: 760px;
    margin: 8px auto 0;
    padding: 0 24px;
}

.zq-crm__body h2 {
    margin: 56px 0 10px;
    color: var(--zq-navy);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.25;
}

.zq-crm__body h3 {
    margin: 30px 0 6px;
    color: var(--zq-navy);
    font-size: 1.12rem;
    font-weight: 700;
}

.zq-crm__body p {
    margin: 0 0 14px;
    font-size: 1rem;
    line-height: 1.7;
}

.zq-crm__quote {
    margin: 44px 0;
    padding: 30px 34px;
    border: 0;
    border-radius: 20px;
    background: var(--zq-navy);
    color: #fff;
    font-size: 1.06rem;
    line-height: 1.65;
}

.zq-crm__platforms {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 36px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.zq-crm__platforms li {
    position: relative;
    margin: 0;
    padding: 13px 0 13px 22px;
    border-bottom: 1px solid #d3e9e5;
    font-size: .95rem;
    line-height: 1.55;
}

.zq-crm__platforms li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 21px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--zq-blue);
}

.zq-crm__platforms strong { color: var(--zq-navy); }

.zq-crm__gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 44px 0 22px;
}

.zq-crm__gallery figure { margin: 0; }

.zq-crm__gallery img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: 50% 0%;
    border-radius: 16px;
}

.zq-crm__cta {
    max-width: 1120px;
    margin: 64px auto 0;
    padding: 0 24px;
}

.zq-crm__cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: clamp(28px, 4vw, 44px);
    border-radius: 24px;
    background: linear-gradient(120deg, #29a099 0%, #2a3b44 60%, #2a3b44 100%);
}

.zq-crm__cta-title {
    margin: 0 0 8px;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.3;
}

.zq-crm__cta-text {
    margin: 0;
    max-width: 54ch;
    color: rgba(255, 255, 255, .85);
    font-size: .98rem;
    line-height: 1.65;
}

.zq-crm__cta-actions {
    display: flex;
    flex-shrink: 0;
    gap: 12px;
}

.zq-crm__cta-actions .zq-pill { margin: 0; }

@media (max-width: 900px) {
    .zq-crm__hero-figure { margin-top: -44px; }
    .zq-crm__platforms { grid-template-columns: 1fr; }
    .zq-crm__cta-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
    .zq-crm__gallery { grid-template-columns: 1fr; }
    .zq-crm__quote { padding: 24px 22px; }
    .zq-crm__cta-actions { flex-direction: column; width: 100%; }
    .zq-crm__cta-actions .zq-pill { width: 100%; }
}

/* ---- content-page buttons (v12.5) -------------------------------------------
   Green CTA buttons placed inside page content (e.g. the Contact page
   "Email the team" button) inherited the theme's cyan link color on green.
   White text in all states, mirroring the homepage rule at 2118.
   .zq-prose is the wrapper the content pages actually use. */
.site-content a.zq-btn2--green,
.entry-content a.zq-btn2--green,
.zq-prose a.zq-btn2--green,
.site-content a.zq-btn2--green:hover,
.site-content a.zq-btn2--green:focus,
.site-content a.zq-btn2--green:visited,
.entry-content a.zq-btn2--green:hover,
.entry-content a.zq-btn2--green:focus,
.entry-content a.zq-btn2--green:visited,
.zq-prose a.zq-btn2--green:hover,
.zq-prose a.zq-btn2--green:focus,
.zq-prose a.zq-btn2--green:visited {
    color: #fff !important;
}

/* ---- service page design pass (v12.6) ---------------------------------------
   Benefits become numbered cards, platforms become tiles, h2s get the brand
   accent bar, the pull-quote gets a decorative glyph, and the closing line
   becomes a callout. Shared by every .zq-crm service page. */
.zq-crm__body {
    max-width: 980px;
}

.zq-crm__body h2 {
    margin: 64px 0 20px;
}

.zq-crm__body h2::before {
    content: "";
    display: block;
    width: 46px;
    height: 4px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--zq-blue), var(--zq-green));
}

.zq-feats {
    counter-reset: zq-feat;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.zq-feat {
    counter-increment: zq-feat;
    padding: 24px 26px;
    border: 1px solid rgba(41, 160, 153, .13);
    border-radius: 18px;
    background: linear-gradient(180deg, #f2faf8 0%, #fafdfc 100%);
    transition: transform .18s ease, box-shadow .18s ease;
}

.zq-feat:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(42, 59, 68, .10);
}

.zq-feat::before {
    content: "0" counter(zq-feat);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    padding: 3px 11px;
    border: 1px solid rgba(41, 160, 153, .18);
    border-radius: 999px;
    background: #fff;
    color: var(--zq-blue);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.zq-feat h3 {
    margin: 0 0 8px;
}

.zq-feat p {
    margin: 0;
    font-size: .97rem;
}

.zq-crm__quote {
    position: relative;
    margin: 52px 0;
    padding: 32px 96px 30px 38px;
    background: linear-gradient(135deg, #24343b 0%, var(--zq-navy) 62%);
}

.zq-crm__quote::before {
    content: "\201C";
    position: absolute;
    top: 2px;
    right: 26px;
    color: rgba(111, 214, 205, .32);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 5.5rem;
    line-height: 1;
    pointer-events: none;
}

.zq-crm__platforms {
    gap: 14px;
    column-gap: 14px;
    margin-top: 6px;
}

.zq-crm__platforms li {
    padding: 16px 18px 16px 36px;
    border: 1px solid #d3e9e5;
    border-bottom: 1px solid #d3e9e5;
    border-radius: 14px;
    background: #fafdfc;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.zq-crm__platforms li:hover {
    border-color: rgba(41, 160, 153, .35);
    box-shadow: 0 12px 26px rgba(42, 59, 68, .08);
}

.zq-crm__platforms li::before {
    left: 17px;
    top: 24px;
}

.zq-crm__body > p:last-child {
    margin-top: 36px;
    padding: 18px 22px;
    border-left: 4px solid var(--zq-blue);
    border-radius: 0 14px 14px 0;
    background: #f2faf8;
}

@media (max-width: 900px) {
    .zq-feats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .zq-crm__quote {
        padding: 26px 66px 24px 24px;
    }

    .zq-crm__quote::before {
        right: 16px;
        font-size: 4rem;
    }
}

/* ---- service page quote + figure spacing (v12.7) ----------------------------
   1. Pages built from WP content wrap the pull-quote text in a <p>; the theme's
      body-paragraph grey beat the quote's white (grey-on-navy on the web dev
      page). Force white on quote paragraphs, zero inner margin.
   2. Hero figure and the article below read as one block: tighten the column
      top margin and the first heading so the image and text sit closer. */
.zq-crm__quote,
.zq-crm__quote p {
    color: #fff;
}

.zq-crm__quote p {
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.65;
}

.zq-crm__body {
    margin: 0 auto;
}

.zq-crm__body h2:first-of-type {
    margin-top: 34px;
}

/* ==========================================================
   v12.8 (#155) - platform/technology names stand out
   Applies to every service page (CRM, web dev, e-commerce):
   all use .zq-crm__platforms with the name in <strong>.
   ========================================================== */
.zq-crm__platforms strong {
    font-family: "Manrope", "Inter Tight", -apple-system, sans-serif;
    font-weight: 800;
    color: var(--zq-navy);
    letter-spacing: .01em;
}

/* ==========================================================
   v12.9 (#161) - homepage hero: circuit-board video background
   Full-bleed loop with navy veil for contrast; the rotating
   service-card visual is retired. Reduced-motion users get
   the static navy band.
   ========================================================== */
.zq-hero3 {
    position: relative;
    overflow: hidden;
    background: #2a3b44;
}

.zq-hero3__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zq-hero3__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(42, 59, 68, .93) 0%, rgba(42, 59, 68, .82) 55%, rgba(42, 59, 68, .62) 100%);
}

.zq-hero3__inner { position: relative; z-index: 2; }

.zq-hero3__eyebrow {
    border-color: rgba(111, 214, 205, .35);
    background: rgba(42, 59, 68, .55);
    color: #6fd6cd;
}

.zq-hero3__title { color: #fff; }

.zq-hero3__accent { color: var(--zq-green); }

.zq-hero3__sub { color: rgba(255, 255, 255, .88); }

.zq-hero3__actions .zq-pill--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}

.zq-hero3__actions .zq-pill--ghost:hover {
    background: rgba(255, 255, 255, .12);
}

@media (prefers-reduced-motion: reduce) {
    .zq-hero3__video { display: none; }
    .zq-hero3__veil { background: linear-gradient(180deg, #2a3b44 0%, #22333b 100%); }
}

/* ==========================================================
   v13.0 (#165) - contact page: method cards + form column
   Hero band reuses .zq-crm__hero. Cards overlap the band the
   same way the service-page figure does.
   ========================================================== */
.zq-contact {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 24px 90px;
    font-family: var(--zq-font);
}

.zq-contact__methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: -46px;
}

.zq-contact__method {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 26px 22px;
    border: 1px solid #d3e9e5;
    border-radius: 16px;
    background: #fafdfc;
    box-shadow: 0 14px 30px rgba(42, 59, 68, .07);
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.zq-contact__method:hover {
    border-color: rgba(41, 160, 153, .35);
    box-shadow: 0 18px 34px rgba(42, 59, 68, .1);
    transform: translateY(-3px);
}

.zq-contact__method-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #def0ec;
    color: var(--zq-blue);
    font-size: 1.05rem;
}

.zq-contact__method-title {
    font-family: "Manrope", "Inter Tight", sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--zq-navy);
}

.zq-contact__method-text {
    font-size: .95rem;
    line-height: 1.6;
    color: var(--zq-body);
}

.zq-contact__method-go {
    margin-top: 2px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--zq-blue);
}

.zq-contact__form-head {
    margin-top: 60px;
}

.zq-contact__form-title {
    position: relative;
    padding-left: 18px;
    margin: 0 0 8px;
    font-family: "Manrope", "Inter Tight", sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--zq-navy);
}

.zq-contact__form-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 5px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--zq-blue), var(--zq-green));
}

.zq-contact__form-text {
    margin: 0 0 22px;
    color: var(--zq-body);
    font-size: 1rem;
    line-height: 1.6;
}

.zq-contact .zq-quote__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.zq-contact__note {
    margin: 26px 0 0;
    font-size: .9rem;
    color: #5f7079;
}

@media (max-width: 900px) {
    .zq-contact__methods { grid-template-columns: 1fr; margin-top: 26px; }
    .zq-contact .zq-quote__grid { grid-template-columns: 1fr; }
}

/* v13.0.1 (#165) - contact page form skin: the .zq-quote form was built for
   the homepage's dark navy band (translucent dark fills, white text). On the
   white contact page it needs the light skin. */
.zq-contact .zq-quote label {
    color: #5f7079;
}

.zq-contact .zq-quote input,
.zq-contact .zq-quote select,
.zq-contact .zq-quote textarea {
    background: #fff;
    border-color: #e2f1ee;
    color: var(--zq-ink);
}

.zq-contact .zq-quote input:focus,
.zq-contact .zq-quote select:focus,
.zq-contact .zq-quote textarea:focus {
    border-color: var(--zq-blue);
    box-shadow: 0 0 0 3px rgba(41, 160, 153, .14);
}

.zq-contact .zq-quote input::placeholder,
.zq-contact .zq-quote textarea::placeholder { color: #a9bfc4; }

/* ==========================================================
   v13.1 (#165) - contact page layout pass: info column with
   2x2 icon rows on the left, form in a raised white card on
   the right (owner mockup, RiSETech family). No map.
   ========================================================== */
.zq-contact__grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(28px, 4vw, 48px);
    align-items: start;
    margin-top: -46px;
    position: relative;
    z-index: 2;
}

.zq-contact__info { padding-top: 30px; }

.zq-contact__rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 22px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.zq-contact__row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.zq-contact__row-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #def0ec;
    color: var(--zq-blue);
    font-size: .92rem;
}

.zq-contact__row-body { display: flex; flex-direction: column; gap: 2px; }

.zq-contact__row-label {
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #5f7079;
}

.zq-contact__row-value {
    font-size: .95rem;
    font-weight: 600;
    color: var(--zq-navy);
    text-decoration: none;
}

a.zq-contact__row-value:hover { color: var(--zq-blue); }

.zq-contact__info .zq-contact__note { margin-top: 26px; }

.zq-contact__card {
    background: #fff;
    border: 1px solid #d3e9e5;
    border-radius: 20px;
    padding: clamp(24px, 3vw, 34px);
    box-shadow: 0 22px 48px rgba(42, 59, 68, .1);
}

.zq-contact .zq-quote__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.zq-contact__consent {
    margin: 18px 0 4px;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--zq-body);
}

.zq-contact__consent label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
}

.zq-contact__consent input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--zq-blue);
}

@media (max-width: 900px) {
    .zq-contact__grid { grid-template-columns: 1fr; margin-top: 26px; }
    .zq-contact__info { padding-top: 0; }
}

/* ==========================================================
   v13.2 (#167) - contact page UX pass: more breathing room
   (wider column, deeper gutters, roomier card and fields) and
   a visible consent checkbox (the form's text-input CSS was
   stretching it to full width with padding).
   ========================================================== */
.zq-contact {
    max-width: 1120px;
    padding-bottom: 100px;
}

.zq-contact__grid {
    gap: clamp(40px, 5vw, 76px);
    margin-top: -50px;
}

.zq-contact__info { padding-top: 36px; }

.zq-contact__info .zq-contact__form-title { margin-bottom: 12px; }

.zq-contact__info .zq-contact__form-text { margin-bottom: 30px; }

.zq-contact__rows {
    gap: 26px 28px;
    margin-top: 0;
}

.zq-contact__card {
    padding: clamp(30px, 3.4vw, 46px);
}

.zq-contact .zq-quote__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 24px;
}

.zq-contact .zq-quote__field { gap: 9px; }

.zq-contact .zq-quote__field--full { margin-top: 0; }

/* Consent checkbox: undo the text-input skin for this one control. */
.zq-contact .zq-quote input[type="checkbox"] {
    flex: none;
    width: 19px;
    height: 19px;
    margin: 0;
    padding: 0;
    border: 1px solid #c9e6e0;
    border-radius: 5px;
    background: #fff;
    accent-color: var(--zq-blue);
    cursor: pointer;
}

.zq-contact .zq-quote .zq-contact__consent label {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: .92rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--zq-body);
    line-height: 1.55;
}

.zq-contact__consent { margin: 24px 0 6px; }

.zq-contact .zq-quote__actions { margin-top: 18px; }

.zq-contact__info .zq-contact__note { margin-top: 34px; }

/* v13.2.1 (#167) - the base theme hides native checkboxes with
   display:none !important (framework "custom checkbox" pattern that
   styles a sibling label). The consent control wraps its input in the
   label, so restore the native box with a more specific !important. */
.zq-contact .zq-quote input[type="checkbox"] {
    display: inline-block !important;
    -webkit-appearance: checkbox;
    appearance: checkbox;
}

/* ==========================================================
   v13.3 (#169) - about page: platform lines inside feature
   cards (content uses the shared .zq-feats grid).
   ========================================================== */
.zq-feat__platforms {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #d3e9e5;
    font-size: .84rem;
    line-height: 1.5;
    color: #5f7079;
}

.zq-feat__platforms strong {
    color: var(--zq-navy);
    font-weight: 700;
}

.zq-feat { display: flex; flex-direction: column; }

/* ==========================================================
   v13.3.1 (#173) - the v13.3 flex column stretched the
   numbered pills to full width; pin them to their intrinsic
   58px and left-align.
   ========================================================== */
.zq-feat::before {
    align-self: flex-start;
}

/* ==========================================================
   v14.0 (#175) - brand palette swap (logo colors): teal
   #29a099, dark slate #2a3b44, slate #394852, mint #def0ec.
   Polish: small teal text on white uses the darker teal ink
   (4.4:1 teal is a fill/large-text color); accents on dark
   surfaces stay mint-tinted. Gradients unchanged.
   ========================================================== */
/* v14.1 fix (#177): the hero eyebrow sits on the dark video veil, not on
   white - it keeps the bright mint #6fd6cd. Only light-surface accents use
   the teal ink. */

.zq-process__step {
    color: var(--zq-green-ink);
}

.zq-contact__method-go {
    color: var(--zq-green-ink);
}

/* Color-grade the circuit video toward the brand: it is shot in azure;
   shift it to the palette's teal range (colors only, no layout change). */
.zq-hero3__video {
    filter: hue-rotate(-38deg) saturate(.85);
}

.zq-hero3__veil {
    background: linear-gradient(90deg, rgba(42, 59, 68, .93) 0%, rgba(42, 59, 68, .84) 55%, rgba(42, 59, 68, .66) 100%);
}

/* The base framework paints service/about body text in neutral #696969;
   harmonize to the palette's muted slate. */
.zq-crm__body p,
.zq-crm__lead {
    color: #5f7079;
}

.zq-crm__body .zq-crm__platforms strong {
    color: var(--zq-navy);
}

/* ==========================================================
   v14.1 (#177) - readability pass + captcha.
   CTA banner text sat at 85% mint over the teal end of the
   banner gradient (about 2:1); it is solid white, mid weight.
   Captcha field rides the existing .zq-quote__field skin.
   ========================================================== */
.zq-cta2__banner-text {
    color: #fff;
    font-weight: 500;
}

.zq-quote__field .zq-quote__captcha {
    max-width: 220px;
}

.zq-contact .zq-quote__field .zq-quote__captcha {
    max-width: 220px;
}

/* Contrast audit (#177): service-page CTA banner had the same mint-over-
   teal problem as the homepage banner - solid white. Solid teal fills with
   white text (4.4:1, just under AA for small text) use the brand's deep
   teal shade: 5.5:1 on #1f8178, 6.9:1 on hover. Same hue, palette-consistent. */
.zq-crm__cta-title {
    color: #fff;
}

.zq-crm__cta-text {
    color: #fff;
    font-weight: 500;
}

.zq-btn2--green,
.zq-pill--green,
.zq-header__cta,
.zq-scard2__btn {
    background: #1f8178;
}

.zq-btn2--green:hover,
.zq-btn2--green:focus,
.zq-pill--green:hover,
.zq-pill--green:focus,
.zq-header__cta:hover,
.zq-header__cta:focus,
.zq-scard2__btn:hover {
    background: #17706a;
}

/* Audit: footer copyright inherited a ~18% white from the base framework
   (2.1:1 over slate). Palette mint at 78% = about 8:1. */
.zq-footer__copy {
    color: rgba(222, 240, 236, .78);
}

.zq-footer__copy a,
.zq-footer__base a {
    color: #def0ec;
}

/* ==========================================================
   v14.2 (#179) - site footer grid (owner spec) + the quote
   section lead, which sat at the muted-slate inherited color
   on the dark band: on paper it passes, at that size on that
   background it reads muddy. Solid light mint.
   ========================================================== */
.zq-cta2__text {
    color: rgba(238, 247, 244, .95);
}

.zq-footer__grid {
    max-width: 1160px;
    margin: 0 auto;
    padding: 64px 24px 40px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
    gap: 40px;
}

.zq-footer__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-family: var(--zq-font-head, "Manrope", sans-serif);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
}

.zq-footer__logo-z {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #29a099;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
}

.zq-footer__tagline {
    margin: 0;
    max-width: 30ch;
    color: rgba(222, 240, 236, .78);
    font-size: .95rem;
    line-height: 1.65;
}

.zq-footer__title {
    margin: 0 0 16px;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #def0ec;
}

.zq-footer__col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.zq-footer__col li {
    margin: 0 0 10px;
    font-size: .95rem;
    color: rgba(222, 240, 236, .82);
}

.zq-footer__col a {
    color: rgba(222, 240, 236, .82);
    transition: color .18s ease;
}

.zq-footer__col a:hover,
.zq-footer__col a:focus-visible {
    color: #fff;
}

.zq-footer__base {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 1160px;
    margin: 0 auto;
    padding: 22px 24px 34px;
    border-top: 1px solid rgba(222, 240, 236, .14);
}

.zq-footer__legal {
    display: flex;
    gap: 22px;
    font-size: .88rem;
}

.zq-footer__legal a {
    color: rgba(222, 240, 236, .78);
    transition: color .18s ease;
}

.zq-footer__legal a:hover,
.zq-footer__legal a:focus-visible {
    color: #fff;
}

@media (max-width: 900px) {
    .zq-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        padding: 48px 20px 32px;
    }
    .zq-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .zq-footer__grid { grid-template-columns: 1fr; gap: 26px; }
    .zq-footer__base {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ==========================================================
   v14.3 (#181) - official Zolviq logo (owner-supplied master,
   mint background stripped; white/mint knockout for the dark
   header and footer). Replaces the text wordmark and the
   interim footer Z chip.
   ========================================================== */
.zq-brand__logo {
    display: inline-flex;
    align-items: center;
}

.zq-brand__logo-img {
    height: 28px;
    width: auto;
    display: block;
}

.zq-footer__logo {
    display: inline-flex;
    margin: 0 0 14px;
}

.zq-footer__logo-img {
    height: 34px;
    width: auto;
    display: block;
}

/* ==========================================================
   v14.4 (#188) - neutral button system (owner: "too much
   green"). Teal was doubling as decoration and action, so
   nothing read as "the click" - accent discipline. Buttons
   go neutral: white on dark surfaces, dark slate on light.
   Teal keeps its single job: links, hovers, chips, dots.
   Appended after the v14.2 fills lock so order decides.
   ========================================================== */

/* Pill primary: lives on dark surfaces only (hero video,
   quote band, service CTA banner). White = the loudest
   possible action on slate. */
.zq-pill--green,
.zq-home .zq-pill--green {
    background: #fff;
    color: #2a3b44 !important;
}

.zq-pill--green:hover,
.zq-pill--green:focus-visible,
.zq-pill--green:focus,
.zq-pill--green:active {
    background: #def0ec;
    color: #1f2d34 !important;
}

/* Header CTA (also the mobile drawer CTA). */
.zq-header__cta {
    background: #fff;
    color: #2a3b44 !important;
}

.zq-header__cta:hover,
.zq-header__cta:focus-visible,
.zq-header__cta:focus,
.zq-header__cta:active,
.zq-header__cta:visited {
    background: #def0ec;
    color: #1f2d34 !important;
}

/* Quote band submit sits on the dark band: white fill. */
.zq-cta2 .zq-btn2--green {
    background: #fff;
    color: #2a3b44;
}

.zq-cta2 .zq-btn2--green:hover,
.zq-cta2 .zq-btn2--green:focus {
    background: #def0ec;
    color: #1f2d34;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}

/* Contact submit sits on a white card: the primary there is
   a solid dark slate fill (a white button would vanish). */
.zq-contact .zq-btn2--green {
    background: #2a3b44;
    color: #fff;
}

.zq-contact .zq-btn2--green:hover,
.zq-contact .zq-btn2--green:focus {
    background: #1d2a31;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(42, 59, 68, .3);
}

/* Deck card CTAs on light cards: slate ghost outline that
   fills slate on hover. Quiet by default, decisive on hover. */
.zq-scard2__btn {
    background: transparent;
    border: 1.5px solid rgba(57, 72, 82, .55);
    color: #2a3b44 !important;
}

.zq-scard2__btn:hover,
.zq-scard2__btn:focus {
    background: #2a3b44;
    border-color: #2a3b44;
    color: #fff !important;
}

/* Dark deck card variant (legacy navy deck): white fill, slate text. */
.zq-scard2--dark .zq-scard2__btn {
    background: #fff;
    color: #2a3b44 !important;
}

.zq-scard2--dark .zq-scard2__btn:hover {
    background: #def0ec;
    color: #1f2d34 !important;
}

/* Outline button on light surfaces: slate, not teal.
   Locked with !important against bootstrap's a { color } (same
   pattern as the v14 locks; order beats the .zq-home locks). */
.zq-home a.zq-btn2--outline,
.zq-home a.zq-btn2--outline:hover,
.zq-home a.zq-btn2--outline:focus,
.zq-home a.zq-btn2--outline:visited {
    border-color: #2a3b44;
    color: #2a3b44 !important;
}

.zq-home a.zq-btn2--outline:hover,
.zq-home a.zq-btn2--outline:focus {
    background: rgba(42, 59, 68, .06);
}

/* ==========================================================
   v14.5 (#190) - owner veto on v14.4: buttons back to the
   brand teal #29a099 (exact spec), darker teal on hover.
   Appended last so order beats the v14.4 neutral block.
   ========================================================== */
.zq-pill--green,
.zq-home .zq-pill--green {
    background: #29a099;
    color: #fff !important;
}

.zq-pill--green:hover,
.zq-pill--green:focus-visible,
.zq-pill--green:focus,
.zq-pill--green:active {
    background: #1f8178;
    color: #fff !important;
}

.zq-header__cta {
    background: #29a099;
    color: #fff !important;
}

.zq-header__cta:hover,
.zq-header__cta:focus-visible,
.zq-header__cta:focus,
.zq-header__cta:active,
.zq-header__cta:visited {
    background: #1f8178;
    color: #fff !important;
}

.zq-cta2 .zq-btn2--green {
    background: #29a099;
    color: #fff;
}

.zq-cta2 .zq-btn2--green:hover,
.zq-cta2 .zq-btn2--green:focus {
    background: #1f8178;
    color: #fff;
    box-shadow: 0 10px 24px rgba(41, 160, 153, .35);
}

.zq-contact .zq-btn2--green {
    background: #29a099;
    color: #fff;
}

.zq-contact .zq-btn2--green:hover,
.zq-contact .zq-btn2--green:focus {
    background: #1f8178;
    color: #fff;
    box-shadow: 0 10px 24px rgba(41, 160, 153, .35);
}

/* Deck CTAs: teal fill, white text. */
.zq-scard2__btn {
    background: #29a099;
    border: 1.5px solid #29a099;
    color: #fff !important;
}

.zq-scard2__btn:hover,
.zq-scard2__btn:focus {
    background: #1f8178;
    border-color: #1f8178;
    color: #fff !important;
}

.zq-scard2--dark .zq-scard2__btn {
    background: #29a099;
    color: #fff !important;
}

.zq-scard2--dark .zq-scard2__btn:hover {
    background: #1f8178;
    color: #fff !important;
}

/* Outline on light: teal border (owner spec color), text in the
   AA-safe teal ink so the label stays legible on white. */
.zq-home a.zq-btn2--outline,
.zq-home a.zq-btn2--outline:hover,
.zq-home a.zq-btn2--outline:focus,
.zq-home a.zq-btn2--outline:visited {
    border-color: #29a099;
    color: #17706a !important;
}

.zq-home a.zq-btn2--outline:hover,
.zq-home a.zq-btn2--outline:focus {
    background: rgba(41, 160, 153, .07);
}