/*
Theme Name: Parallel Digital
Theme URI: https://paralleldigital.com.au
Author: Parallel Digital
Author URI: https://paralleldigital.com.au
Description: Baseline theme for the Parallel Digital one-page business site.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: parallel-digital
*/

:root {
    --blue: #087cf0;
    --blue2: #0068e8;
    --navy: #041321;
    --text: #081728;
    --muted: #627083;
    --pale: #f4f9ff;
    --line: #e4edf7;
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    color: var(--text);
    background: #fff;
    opacity: 0;
    transition: opacity 0.35s ease;
}
body.loaded {
    opacity: 1;
}
a {
    text-decoration: none;
    color: inherit;
}
small {
	font-size: 14px !important;
}
button {
    cursor: pointer;
}
h2, h3 {
    font-weight: 500;   
}
.wrap {
    width: min(1280px, calc(100% - 48px));
    margin: auto;
}
.hero {
    min-height: 700px;
    color: #fff;
    background:
        linear-gradient(
            90deg,
            rgba(2, 14, 25, 0.98) 0%,
            rgba(2, 14, 25, 0.82) 42%,
            rgba(2, 14, 25, 0.16) 100%
        ),
        url("assets/images/industries-hero.webp") top/cover no-repeat;
}
.nav {
    height: 84px;
    display: flex;
    align-items: center;
    gap: 30px;
}
.brand {
    font-weight: 800;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.brandmark {
    display: block;
    width: 55px;
    height: 55px;
}
.navlinks {
    margin: auto;
    display: flex;
    gap: 28px;
    font-size: 16px;
}
.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 50px;
    padding: 0 26px;
    border: 0;
    border-radius: 12px;
    background: #007aff;
    color: #fff;
    font-family: inherit;
    font-weight: 500;
    font-size: 15.5px;
    box-shadow: 0 4px 16px rgba(0, 122, 255, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    text-decoration: none;
    line-height: 1;
}
.button:hover {
    background: #006ee6;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 122, 255, 0.35);
}
.ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: none;
}
.ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: none;
    transform: translateY(-1px);
}
.white {
    background: #fff;
    color: #071727;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.white:hover {
    background: #f8fafc;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
/* Inline SVG arrow appended to button/link labels. */
.arr {
    width: 0.95em;
    height: 0.95em;
    margin-left: 0.5em;
    flex: 0 0 auto;
    vertical-align: -0.12em;
}
.outline {
    background: #fff;
    color: var(--blue);
    border: 1px solid #83bfff;
    box-shadow: none;
}
.outline:hover {
    background: #f4f9ff;
    border-color: var(--blue);
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.15);
}
.menu {
    display: none;
    margin-left: auto;
    background: none;
    border: 0;
    color: white;
    font-size: 25px;
}
.hero-grid {
    min-height: 566px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 70px;
    padding: 50px 0;
}
.kicker {
    font-size: 16px;
    letter-spacing: 1.8px;
    font-weight: 100;
    color: #8cc4ff;
    margin: 0 0 10px;
}
.kicker.blue {
    color: #438bd7;
}
.hero h1 {
    font-size: 64px;
    line-height: 1.01;
    letter-spacing: -3px;
    margin: 0 0 24px;
}
.hero h1 span {
    color: #1685ff;
}
.lead {
    max-width: 530px;
    color: rgba(255, 255, 255, 0.83);
    line-height: 1.7;
}
.actions {
    display: flex;
    gap: 14px;
    margin-top: 28px;
}
.proof {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
}
.proof b {
    display: block;
    color: #ffb400;
    letter-spacing: 2px;
}
.proof small {
    color: #cbd5df;
}
.faces {
    display: flex;
}
.faces i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: linear-gradient(#d6dce2, #8797a5);
    margin-left: -6px;
}
.flow-card {
    justify-self: end;
    width: 440px;
    padding: 28px 24px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(4, 16, 28, 0.78);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.flow {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 15px 0;
}
.flow:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 21px;
    width: 2px;
    background: #1b72cf;
}
.flow:first-child:before {
    top: 50%;
}
.flow:last-child:before {
    bottom: 50%;
}
.flow:not(:first-child):after {
    content: "";
    position: absolute;
    top: -3px;
    left: 19px;
    z-index: 2;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #bcd9f7;
}
.flow i {
    position: relative;
    z-index: 1;
    justify-self: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #2a9dff, #0062dd);
    font-style: normal;
    color: #fff;
    box-shadow:
        0 0 0 4px rgba(30, 125, 225, 0.18),
        0 6px 14px rgba(0, 0, 0, 0.35);
}
.flow i svg {
    width: 18px;
    height: 18px;
    display: block;
}
.flow strong,
.flow small {
    display: block;
}
.flow strong {
    font-size: 16px;
    color: #fff;
    font-weight: 400;
}
.flow small {
    font-size: 16px;
    color: #93a5b4;
    margin-top: 2px;
}
.flow em {
    align-self: start;
    margin-top: 4px;
    font-size: 16px;
    color: #8fa2b3;
    font-style: normal;
}
.section {
    padding: 35px 0;
}
.section h2 {
    font-size: 48px;
    letter-spacing: -1.6px;
    line-height: 1.08;
    margin: 0 0 12px;
}
.section p {
    color: var(--muted);
    line-height: 1.65;
}
.section-head,
.dark-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 30px;
}
.section-head > div {
    max-width: 700px;
}
.section-head > a {
    color: var(--blue);
    font-weight: 500;
    font-size: 16px;
}
.price-grid article,
.quotes article {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 22px;
    box-shadow: 0 12px 30px rgba(23, 67, 105, 0.05);
}
.feature-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.feature-grid article {
    background: #fff;
    border: 1px solid #edf4fc;
    border-radius: 18px;
    padding: 28px 20px 24px;
    box-shadow: 0 4px 20px rgba(16, 40, 80, 0.04);
    display: flex;
    flex-direction: column;
}
.feature-grid span {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #eaf3ff;
    color: var(--blue);
    margin-bottom: 22px;
    flex-shrink: 0;
}
.feature-grid span svg {
    display: block;
    width: 24px;
    height: 24px;
}
.steps .step-icon svg {
    display: block;
    width: 22px;
    height: 22px;
}
.feature-grid h3 {
    margin: 0 0 10px;
    color: #0b1224;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
}
.feature-grid p {
    margin: 0;
    color: #58708a;
    font-size: 13.5px;
    line-height: 1.45;
}
.industries {
    background: var(--navy);
    color: #fff;
}
.dark-head h2 {
    color: #fff;
}
.dark-head > a {
    font-size: 16px;
}
.industry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 0.65fr;
    gap: 18px;
}
.industry {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    color: var(--text);
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(11, 25, 44, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.industry:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 45px rgba(11, 25, 44, 0.14);
}
.industry img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}
.industry-body {
    position: relative;
    margin-top: -20px;
    border-radius: 20px;
    background: #fff;
    padding: 22px 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 1;
}
.industry-main {
    flex: 1;
    min-width: 0;
}
.industry-title {
    display: flex;
    align-items: center;
    gap: 12px;
}
.industry-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eaf3ff;
    color: var(--blue);
    flex-shrink: 0;
}
.industry-icon svg {
    width: 22px;
    height: 22px;
}
.industry-title h3 {
    margin: 0;
    color: #0b1224;
    font-size: 18.5px;
    font-weight: 500;
    line-height: 1.25;
}
.industry-main p {
    margin: 8px 0 0;
    color: #58708a;
    font-size: 14px;
    line-height: 1.45;
}
.industry-arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #081325;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(8, 19, 37, 0.2);
    transition: background 0.2s ease, transform 0.2s ease;
}
.industry-arrow svg {
    width: 17px;
    height: 17px;
}
.industry:hover .industry-arrow {
    background: var(--blue);
    transform: translateX(3px);
}
.industry.other {
    border-radius: 20px;
    padding: 26px;
    background: linear-gradient(145deg, #0a8cff, #0064e6);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.other > span:first-of-type {
    font-size: 30px;
}
.other .button {
    align-self: flex-start;
    margin-top: 10px;
}
.other h3 {
    font-size: 27px;
    margin: 20px 0 8px;
}
.other p {
    color: #e7f3ff;
}
.how {
    position: relative;
    overflow: hidden;
    padding: 42px 0 34px;
    background: #fff;
}
.how::before,
.how::after {
    content: "";
    position: absolute;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    background: #f2f8ff;
    pointer-events: none;
}
.how::before {
    top: -205px;
    left: -105px;
}
.how::after {
    right: -110px;
    bottom: -230px;
}
.how-head {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}
.how-badge {
    display: inline-block;
    margin: 0 0 8px;
    padding: 5px 13px;
    border-radius: 999px;
    background: #eaf4ff;
    color: var(--blue);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.8px;
}
.how-head h2 {
    margin: 0;
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -1.2px;
}
.how-head h2 span {
    color: var(--blue);
}
.how .intro {
    max-width: 470px;
    margin: 7px auto 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.45;
}
.steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 40px;
}
/* Dashed connector running through the step-number circles; the cards
   cover it inside their bounds so it only shows in the gaps. */
.steps::before {
    content: "";
    position: absolute;
    top: -5px;
    left: calc((100% - 54px) / 8);
    right: calc((100% - 54px) / 8);
    z-index: 0;
    border-top: 2px dashed #76b9f6;
}
.steps article {
    position: relative;
    z-index: auto;
    display: flex;
    flex-direction: column;
    min-height: 235px;
    background: #fff;
    border: 1px solid #dceaf7;
    border-radius: 12px;
    padding: 28px 16px 14px;
    text-align: center;
    box-shadow: 0 12px 28px rgba(23, 67, 105, 0.06);
}
.steps article:nth-child(even) {
    background: linear-gradient(145deg, #fff, #f5faff);
}
.steps .step-num {
    position: absolute;
    top: -25px;
    left: 50%;
    z-index: 30000000;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0a8cff, #0064e6);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 5px 12px rgba(0, 105, 232, 0.24);
    transform: translateX(-50%);
}
.steps article:nth-child(3) .step-num {
    background: #e6f2ff;
    color: var(--blue);
    box-shadow: none;
}
.steps .step-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto;
    border-radius: 50%;
    background: #eaf3ff;
    color: var(--blue);
}
.steps h3 {
    margin: 12px 0 6px;
    font-size: 16px;
    line-height: 1.3;
}
.steps p {
    margin: 0 auto;
    max-width: 240px;
    color: #58708a;
    font-size: 15px;
    line-height: 1.45;
}
.steps .step-pill {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    gap: 7px;
    min-height: 30px;
    margin-top: auto;
    padding: 6px 10px;
    border-radius: 8px;
    background: #eaf4ff;
    color: var(--blue);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.steps article > p {
    margin-bottom: 10px;
}
.steps .step-pill svg {
    width: 14px;
    height: 14px;
    flex: none;
}
.how-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
}
.how-cta .button {
    min-width: 205px;
    min-height: 50px;
    padding: 0 32px;
    border-radius: 12px;
    font-size: 15px;
}
.how-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #71859a;
    font-size: 11px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.35;
    transform: rotate(-3deg);
}
.how-note svg {
    width: 36px;
    height: 24px;
    flex: none;
}
.booking {
    background: #f6fbff;
}
.booking-grid,
.ai-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 70px;
    align-items: center;
}
.booking h2 span {
    color: var(--blue);
}
.booking-feats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 26px 0 26px;
}
.bf-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: #e3f1ff;
    color: var(--blue);
}
.bf-icon svg {
    width: 22px;
    height: 22px;
}
.booking-feats strong {
    display: block;
    color: #0b1224;
    font-size: 13px;
}
.booking-feats small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.35;
}
.booking-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.booking-note {
    margin: 0;
    color: #5b6b80;
    font-size: 13px;
    font-style: italic;
    line-height: 1.45;
}
.ai ul,
.price-grid ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
.ai li,
.price-grid li {
    margin: 10px 0;
    font-size: 16px;
}
.ai li,
.price-grid li {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ai li:before,
.price-grid li:before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.calendar-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}
.ai {
    background: linear-gradient(135deg, #f4faff, #edf7ff);
}
.pricing {
    background: #f7fbff;
}
.price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 32px;
}
.price-grid article {
    position: relative;
    padding: 28px;
}
.price-grid .popular {
    border: 2px solid var(--blue);
    transform: translateY(-8px);
}
.popular label {
    position: absolute;
    top: -13px;
    right: 22px;
    background: var(--blue);
    color: #fff;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 16px;
}
.price {
    font-size: 40px;
    font-weight: 800;
    margin: 10px 0;
}
.price small {
    font-size: 16px;
    color: var(--muted);
    font-weight: 500;
}
.price-grid p,
.price-grid li {
    font-size: 16px;
}
.price-grid .button {
    width: 100%;
    margin-top: 10px;
}
.ai-note {
    text-align: center;
    font-size: 16px;
}
.testimonials {
    background: #f6fbff;
}
.quote-nav {
    display: flex;
    gap: 12px;
    flex: 0 0 auto;
}
.quote-nav button {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--blue);
}
.quote-nav button.next {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}
.quote-nav button:disabled {
    opacity: 0.35;
    cursor: default;
}
.quote-nav button svg {
    width: 18px;
    height: 18px;
}
.quotes {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 36px) / 3);
    gap: 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 12px 12px 42px;
    margin: -12px -12px -42px;
}
.quotes::-webkit-scrollbar {
    display: none;
}
.quotes article {
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
}
.quotes p {
    flex: 1;
    margin: 0 0 22px;
    font-size: 16px;
}
.quote-foot {
    display: flex;
    align-items: end;
    gap: 12px;
}
.quote-foot .avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(145deg, #5a9bd8, #2e5b88);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}
.quote-foot strong {
    display: block;
    font-size: 16px;
    color: var(--text);
}
.quote-foot small {
    display: block;
    font-size: 16px;
    color: var(--muted);
}
.quote-foot .stars {
    margin-left: auto;
    color: #ffb400;
    font-size: 18px;
    letter-spacing: 1px;
	position: relative;
    top: 3px;
}
.cta {
    padding: 30px 0;
    background: linear-gradient(110deg, #0787ff, #064d9f);
    color: #fff;
}
.cta .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cta h2 {
    font-size: 34px;
    margin: 0;
}
.cta p {
    color: #dcecff;
}
.cta .button {
    margin-left: 10px;
}
footer {
    background: #041321;
    color: #fff;
    padding: 55px 0 22px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 0.7fr 0.8fr 0.8fr 1fr;
    gap: 40px;
}
.footer-grid p,
.footer-grid a:not(.button) {
    display: block;
    color: #9eacb8;
    font-size: 14px;
    line-height: 1.8;
}
.footer-grid h4 {
    font-size: 16px;
}
.copyright {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #142635;
    margin-top: 40px;
    padding-top: 20px;
    color: #718190;
    font-size: 16px;
}
@media (max-width: 850px) {
    .navlinks,
    .navcta {
        display: none;
    }
    .menu {
        display: block;
    }
    .hero-grid {
        grid-template-columns: 1fr;
        padding: 60px 0;
    }
    .hero h1 {
        font-size: 46px;
    }
    .flow-card {
        justify-self: start;
        width: 100%;
    }
    .feature-grid {
        grid-template-columns: 1fr 1fr;
    }
    .industry-grid,
    .booking-grid,
    .ai-grid,
    .price-grid {
        grid-template-columns: 1fr;
    }
    .how > .wrap {
        width: min(calc(100% - 40px), 1180px);
    }
    .steps {
        grid-template-columns: 1fr 1fr;
    }
    .steps::before {
        display: none;
    }
    .quotes {
        grid-auto-columns: calc(100% - 48px);
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .price-grid .popular {
        transform: none;
    }
    .cta .wrap {
        display: block;
    }
    .cta .wrap > div:last-child {
        margin-top: 20px;
    }
    .industry.other {
        min-height: 260px;
    }
}
@media (max-width: 640px) {
    .wrap {
        width: min(100% - 30px, 1180px);
    }
    .hero h1 {
        font-size: 39px;
    }
    .section {
        padding: 55px 0;
    }
    .section h2 {
        font-size: 31px;
    }
    .feature-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .how > .wrap {
        width: min(100% - 32px, 1180px);
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
    }
    .how-head h2 {
        font-size: 28px;
        line-height: 1.2;
    }
    .how .intro {
        font-size: 13px;
        line-height: 1.5;
        margin: 8px auto 0;
    }
    /* Vertical timeline: numbered dots down the left, connected by a
       dashed line, with each card's icon sitting beside its text. */
    .steps {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin: 32px 0 0 0;
        padding: 0 0 0 52px;
        position: relative;
        box-sizing: border-box;
        width: 100%;
    }
    .steps::before {
        display: none;
    }
    .steps article {
        position: relative;
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 12px;
        align-items: start;
        min-height: auto;
        text-align: left;
        padding: 16px;
        background: #fff;
        border: 1px solid #dceaf7;
        border-radius: 12px;
        box-shadow: 0 8px 22px rgba(23, 67, 105, 0.05);
        box-sizing: border-box;
        width: 100%;
    }
    .steps article:nth-child(even) {
        background: #fff;
    }
    /* Dashed timeline segment connecting each dot to the next. */
    .steps article:not(:last-child)::after {
        content: "";
        position: absolute;
        left: -36px;
        top: 36px;
        height: calc(100% + 16px);
        width: 0;
        border-left: 2px dashed #76b9f6;
        z-index: 1;
        transform: translateX(-50%);
    }
    .steps .step-num {
        position: absolute;
        top: 36px;
        left: -36px;
        transform: translate(-50%, -50%);
        width: 32px;
        height: 32px;
        font-size: 13px;
        font-weight: 800;
        border-radius: 50%;
        background: linear-gradient(135deg, #0a8cff, #0064e6) !important;
        color: #fff !important;
        box-shadow: 0 4px 10px rgba(0, 105, 232, 0.28);
        z-index: 2;
    }
    .steps article:nth-child(3) .step-num {
        background: linear-gradient(135deg, #0a8cff, #0064e6) !important;
        color: #fff !important;
        box-shadow: 0 4px 10px rgba(0, 105, 232, 0.28);
    }
    .steps .step-icon {
        grid-column: 1;
        grid-row: 1 / 4;
        width: 44px;
        height: 44px;
        margin: 0;
        border-radius: 50%;
        background: #eaf3ff;
        color: var(--blue);
        display: grid;
        place-items: center;
    }
    .steps .step-icon svg {
        width: 20px;
        height: 20px;
    }
    .steps h3 {
        grid-column: 2;
        margin: 0 0 4px;
        font-size: 16px;
        font-weight: 500;
        color: #071727;
        line-height: 1.3;
    }
    .steps p {
        grid-column: 2;
        max-width: none;
        margin: 0 0 10px;
        font-size: 12.5px;
        color: #58708a;
        line-height: 1.45;
    }
    .steps .step-pill {
        grid-column: 2;
        justify-self: start;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        border-radius: 6px;
        background: #eef6ff;
        color: var(--blue);
        font-size: 11px;
        font-weight: 400;
        line-height: 1.2;
        white-space: normal;
        margin-top: 0;
    }
    .steps .step-pill svg {
        width: 13px;
        height: 13px;
        flex: none;
    }
    .how-cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-top: 24px;
        width: 100%;
    }
    .how-cta .button {
        width: 100%;
        max-width: 100%;
        min-height: 50px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 500;
        justify-content: center;
        text-align: center;
    }
    .how-note {
        margin: 0;
        color: #71859a;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        text-align: center;
        transform: none;
    }
    .how-note svg {
        display: none;
    }
    .section-head,
    .dark-head {
        display: block;
    }
    .booking-feats {
        grid-template-columns: 1fr 1fr;
    }
    .quote-nav {
        margin-top: 16px;
    }
    .actions {
        flex-direction: column;
    }
    .cta .button {
        margin: 8px 8px 0 0;
    }
}
/* ---------------------------------------------------------------
   WordPress theme additions
--------------------------------------------------------------- */

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

.skip-link:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 999;
    width: auto;
    height: auto;
    clip: auto;
    padding: 8px 16px;
    color: #fff;
    background: var(--navy);
}

/* Nav bar wrapper used on inner pages (front page renders the nav inside .hero). */
.site-nav-bar {
    background: var(--navy);
    color: #fff;
}

.nav {
    position: relative;
}

.navlinks {
    padding: 0;
    list-style: none;
}

.navlinks li {
    margin: 0;
}

.navlinks .current-menu-item > a {
    color: #8cc4ff;
}

/* Desktop dropdown for menu items with children; the drill-down
   controls are only shown on mobile. */
.submenu-toggle,
.submenu-back-row {
    display: none;
}

@media (min-width: 851px) {
    .navlinks li {
        position: relative;
    }
    .navlinks .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        display: none;
        min-width: 230px;
        margin: 0;
        padding: 8px 0;
        list-style: none;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 18px 40px rgba(3, 15, 28, 0.18);
    }
    .navlinks li:not(.has-megamenu):hover > .sub-menu,
    .navlinks li:not(.has-megamenu):focus-within > .sub-menu {
        display: block;
    }
    .navlinks .sub-menu a {
        display: block;
        padding: 10px 18px;
        color: var(--text);
        white-space: nowrap;
    }
    .navlinks .sub-menu a:hover {
        color: var(--blue);
    }
}

/* Industries megamenu. Desktop only — the mobile drill-down keeps
   using the normal .sub-menu, which is hidden here for the item. */
.megamenu {
    display: none;

}

@media (min-width: 851px) {
    .navlinks .has-megamenu {
        position: static;
    }
    .navlinks .has-megamenu > .sub-menu {
        display: none;
    }
    .navlinks .megamenu {
        display: block;
        position: absolute;
        top: 100%;
        left: 50%;
        z-index: 50;
        width: min(780px, calc(100vw - 48px));
        padding: 14px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 24px 60px rgba(3, 15, 28, 0.25);
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 8px);
        transition:
            opacity 0.18s ease,
            transform 0.18s ease,
            visibility 0s 0.18s;
    }
    /* Invisible hover bridge between the nav link and the panel. */
    .navlinks .megamenu::before {
        content: "";
        position: absolute;
        top: -36px;
        left: 0;
        right: 0;
        height: 36px;
    }
    .navlinks .has-megamenu:hover > .megamenu,
    .navlinks .has-megamenu:focus-within > .megamenu {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        transition:
            opacity 0.18s ease,
            transform 0.18s ease;
    }
    .megamenu .mega-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }
    .megamenu .mega-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 10px;
        color: var(--text);
    }
    .megamenu .mega-item:hover {
        background: #f2f8ff;
    }
    .megamenu .mega-icon {
        flex: none;
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: #eaf3ff;
        color: var(--blue);
    }
    .megamenu .mega-item:hover .mega-icon {
        background: var(--blue);
        color: #fff;
    }
    .megamenu .mega-icon svg {
        width: 20px;
        height: 20px;
    }
    .megamenu .mega-text {
        min-width: 0;
        line-height: 1.3;
        text-align: left;
    }
    .megamenu .mega-text strong {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: var(--text);
    }
    .megamenu .mega-text small {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 12px;
        color: var(--muted);
    }
    .megamenu .mega-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-top: 12px;
        padding: 12px 12px 4px;
        border-top: 1px solid var(--line);
        font-size: 14px;
    }
    .megamenu .mega-note {
        color: var(--muted);
    }
    .megamenu .mega-note a,
    .megamenu .mega-all {
        color: var(--blue);
        font-weight: 400;
        white-space: nowrap;
    }
}

/* Scroll-aware nav: sticks to the top, slides away on scroll down,
   and returns on scroll up. The hide transform is skipped while the
   mobile menu is open, since a transform would break its fixed panel. */
.site-nav-bar {
    position: sticky;
    top: 0;
    z-index: 120;
    transition: transform 0.3s ease;
}
.hero .nav {
    z-index: 130;
    transition: transform 0.3s ease;
}
.nav-pinned .hero .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 130;
    width: 100%;
    padding: 0 max(24px, calc((100% - 1280px) / 2));
    background: var(--navy);
}
.nav-pinned .hero {
    padding-top: 84px;
}
.nav-hidden:not(.menu-open) .site-nav-bar,
.nav-hidden:not(.menu-open) .hero .nav {
    transform: translateY(-100%);
}
@media (min-width: 851px) {
    .site-nav-bar,
    .hero .nav {
        will-change: transform;
    }
}

.site-main {
    padding: 72px 0;
    min-height: 50vh;
}

.site-main article {
    margin-bottom: 2.5rem;
}

/* Mobile drill-down menu: a full-screen panel that slides down from
   the top; each .sub-menu slides in from the right on top of it. */
body.menu-open {
    overflow: hidden;
}

@media (max-width: 850px) {
    .nav .brand,
    .nav .menu {
        position: relative;
        z-index: 70;
    }

    .navlinks {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 110px 24px 40px;
        background: var(--navy);
        overflow-y: auto;
        transform: translateY(-100%);
        visibility: hidden;
        transition:
            transform 0.32s ease,
            visibility 0s 0.32s;
    }

    .navlinks.open {
        transform: none;
        visibility: visible;
        transition: transform 0.32s ease;
    }

    .navlinks li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .navlinks li:last-child {
        border-bottom: 0;
    }

    .navlinks a {
        display: block;
        flex: 1;
        padding: 16px 0;
        font-size: 20px;
    }

    .submenu-toggle {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        padding: 0;
        background: none;
        border: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.07);
        color: #8cc4ff;
        cursor: pointer;
    }

    .navlinks .sub-menu {
        position: absolute;
        inset: 0;
        z-index: 2;
        margin: 0;
        padding: 110px 24px 40px;
        list-style: none;
        background: var(--navy);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.28s ease;
    }

    .navlinks .sub-menu.open {
        transform: none;
    }

    .submenu-back-row {
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    .submenu-back {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        padding: 16px 0;
        background: none;
        border: 0;
        color: #8cc4ff;
        font-size: 20px;
        font-weight: 400;
        cursor: pointer;
    }
}

/* ---------------------------------------------------------------
   Plumbing & Heating landing page
--------------------------------------------------------------- */

/* Checklist — works on light sections and inside the dark hero. */
.checklist {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
.checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}
.checklist li:before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.hero .checklist li {
    color: rgba(255, 255, 255, 0.85);
}

/* Notification list — flow-card without the timeline spine. */
.flow-card--list .flow:before,
.flow-card--list .flow:after {
    display: none;
}
.flow i.green {
    background: linear-gradient(145deg, #34d399, #059669);
}
.flow i.violet {
    background: linear-gradient(145deg, #a78bfa, #7c3aed);
}
.flow i.amber {
    background: linear-gradient(145deg, #fbbf24, #d97706);
}

/* Trust logo strip — shared light band, works on any page. */
.trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: 16px 30px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 14px max(24px, calc((100% - 980px) / 2)) 20px;
    background: #f4f9ff;
    color: #607087;
}
.trust-strip .trust-label {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--blue);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1.8px;
}
.trust-strip .logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 1;
}
.trust-strip .logo--img {
    height: 40px;
    width: auto;
    object-fit: contain;
    justify-self: center;
    filter: grayscale(1);
}
@media (max-width: 850px) {
    .trust-strip {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
}
@media (max-width: 520px) {
    .trust-strip {
        grid-template-columns: repeat(2, 1fr);
        padding-inline: 16px;
    }
}

/* Six-across feature grid. */
.feature-grid--six {
    grid-template-columns: repeat(6, 1fr);
}

/* Pale section variant. */
.section--pale {
    background: #f6fbff;
}

/* Image with an overlaid mini testimonial card. */
.media-quote {
    position: relative;
}
.media-quote > img {
    display: block;
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 16px;
}
.mini-quote {
    position: absolute;
    left: 18px;
    bottom: 18px;
    max-width: 360px;
    padding: 16px 18px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.mini-quote p {
    margin: 0 0 10px;
}

/* Plumbing landing page — popular services carousel */
.plumbing-services {
    background: #f6fbfe;
    padding: 65px 0 75px;
}
.svc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}
.svc-head h2 {
    margin: 6px 0 8px;
    font-size: 34px;
    letter-spacing: -0.8px;
}
.svc-head .intro {
    margin: 0;
    color: #58708a;
    font-size: 15px;
}
.service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.service {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #edf4fc;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(12, 35, 65, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(12, 35, 65, 0.08);
}
.service > img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
}
.service-body {
    padding: 16px 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
}
.service-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #eaf3ff;
    color: var(--blue);
    flex-shrink: 0;
}
.service-icon .svc-ico {
    width: 20px;
    height: 20px;
}
.service-info {
    flex: 1;
    min-width: 0;
}
.service-info h3 {
    margin: 2px 0 4px;
    color: #0b1224;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}
.service-info p {
    margin: 0;
    color: #58708a;
    font-size: 14px;
    line-height: 1.45;
}

/* FAQ accordion (native <details>, no JS needed). */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}
.faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 4px 20px;
}
.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    font-weight: 400;
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary:after {
    content: "+";
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--blue);
    font-weight: 500;
}
.faq-item[open] summary:after {
    content: "–";
}
.faq-item p {
    margin: 0 0 16px;
}

/* Dark closing CTA band. */
.cta-band {
    padding: 48px 0;
    background: var(--navy);
    color: #fff;
}
.cta-band-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}
.cta-band h2 {
    margin: 0;
    font-size: 34px;
    letter-spacing: -1px;
}
.cta-band .kicker {
    margin-bottom: 8px;
}
.cta-band .button {
    min-height: 56px;
}
.cta-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 34px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.cta-checks span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #cbd5df;
}
.cta-checks span:before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}

@media (max-width: 850px) {
    .feature-grid--six {
        grid-template-columns: 1fr 1fr;
    }
    .service-grid {
        grid-template-columns: 1fr 1fr;
    }
    .svc-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .faq-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 520px) {
    .feature-grid--six {
        grid-template-columns: 1fr;
    }
    .service-grid {
        grid-template-columns: 1fr;
    }
    .cta-band h2 {
        font-size: 28px;
    }
}

/* ---------------------------------------------------------------
   Industries page
--------------------------------------------------------------- */

/* Right-hand note in the section head. */
.page-template-page-industries #industry-grid {
    background: #ffffff;
}
.page-template-page-industries #industry-grid .section-head {
    align-items: center;
}
.section-head > p {
    max-width: 380px;
    margin: 0;
}

/* Industry card grid. */
.ind-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.ind-card > a {
    display: block;
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(23, 67, 105, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ind-card > a:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(23, 67, 105, 0.12);
}
.ind-card img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.ind-card-body {
    position: relative;
    min-height: 126px;
    padding: 30px 50px 16px 16px;
}
.ind-icon {
   position: absolute;
    top: -27px;
    left: 7px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #fff;
    color: var(--blue);
}
.ind-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}
.ind-text h3 {
    margin: 0 0 7px;
    line-height: 1.2;
}
.ind-text p {
    margin: 0;
    line-height: 1.4;
}
.ind-arrow {
    position: absolute;
    right: 14px;
    bottom: 16px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #a9d1ff;
    color: var(--blue);
}
.ind-arrow svg {
    width: 14px;
    height: 14px;
}

/* "Don't see your industry?" callout below the industry grid. */
.ind-other {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 20px;
    padding: 30px 36px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(110deg, #0787ff, #064d9f);
    box-shadow: 0 18px 45px rgba(7, 105, 230, 0.25);
}
.ind-other-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.ind-other-icon svg {
    width: 26px;
    height: 26px;
}
.ind-other > div {
    flex: 1;
}
.ind-other h3 {
    margin: 0;
    font-size: 24px;
}
.ind-other p {
    margin: 6px 0 0;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 16px;
    line-height: 1.5;
}
.ind-other .button {
    flex: 0 0 auto;
}
@media (max-width: 850px) {
    .ind-other {
        flex-direction: column;
        align-items: flex-start;
        padding: 26px;
    }
    .ind-other .button {
        width: 100%;
    }
}

/* Footer: social icons and demo button. */
.social-row {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    
}
.social-row a {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #9eacb8;
}
.social-row a:hover {
    color: #fff;
}
.social-row svg {
    width: 14px;
    height: 14px;
}
.footer-demo {
    margin-top: 16px;
    min-height: 44px;
    font-size: 14px;
}

@media (max-width: 850px) {
    .ind-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 520px) {
    .ind-grid {
        grid-template-columns: 1fr;
    }
}

/* Industries page hero artwork. */
.page-template-page-industries .hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(2, 14, 25, 0.98) 0%,
            rgba(2, 14, 25, 0.82) 42%,
            rgba(2, 14, 25, 0.16) 100%
        ),
        url("assets/images/industries-hero.webp");
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Industries hero — "Find your industry" picker card. */
.industry-picker {
    justify-self: end;
    width: 440px;
    padding: 26px 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(6, 22, 38, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.industry-picker h3 {
    margin: 0 0 6px;
    font-size: 24px;
    color: #fff;
}
.industry-picker > p {
    margin: 0 0 18px;
    color: #aeb9c4;
}
.ind-link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
}
.ind-link:hover {
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}
.ind-link .il-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--blue);
    color: #fff;
}
.ind-link .il-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}
.ind-link .il-label {
    font-weight: 400;
}
.ind-link .chev {
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: #8fa2b3;
}
.industry-picker .ind-cta {
    width: 100%;
    margin-top: 8px;
}
.industry-picker .ind-note {
    margin: 16px 0 0;
    color: #aeb9c4;
    text-align: center;
    font-size: 14px;
}
.industry-picker .ind-note a {
    color: #4da3ff;
    text-decoration: underline;
}

@media (max-width: 850px) {
    .industry-picker {
        justify-self: start;
        width: 100%;
    }
}

/* Plumbing & Heating page hero artwork and trust band. */
.page-template-page-plumbing-heating .hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(2, 14, 25, 0.98) 0%,
            rgba(2, 14, 25, 0.9) 28%,
            rgba(2, 14, 25, 0.58) 52%,
            rgba(2, 14, 25, 0.12) 78%,
            rgba(2, 14, 25, 0) 100%
        ),
        url("assets/images/plumbing-heating-hero.webp");
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Industry landing pages — each hero uses its own artwork. */
.page-template-page-aesthetics .hero {
    background-image:
        linear-gradient(90deg, rgba(2, 14, 25, 0.98) 0%, rgba(2, 14, 25, 0.9) 28%, rgba(2, 14, 25, 0.58) 52%, rgba(2, 14, 25, 0.12) 78%, rgba(2, 14, 25, 0) 100%),
        url("assets/images/aesthetic-clinics-hero.webp");
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}
.page-template-page-beauty-salons .hero {
    background-image:
        linear-gradient(90deg, rgba(2, 14, 25, 0.98) 0%, rgba(2, 14, 25, 0.9) 28%, rgba(2, 14, 25, 0.58) 52%, rgba(2, 14, 25, 0.12) 78%, rgba(2, 14, 25, 0) 100%),
        url("assets/images/beauty-saloon-hero.webp");
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}
.page-template-page-cleaning .hero {
    background-image:
        linear-gradient(90deg, rgba(2, 14, 25, 0.98) 0%, rgba(2, 14, 25, 0.9) 28%, rgba(2, 14, 25, 0.58) 52%, rgba(2, 14, 25, 0.12) 78%, rgba(2, 14, 25, 0) 100%),
        url("assets/images/cleaning-company-hero.webp");
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}
.page-template-page-driveways-paving .hero {
    background-image:
        linear-gradient(90deg, rgba(2, 14, 25, 0.98) 0%, rgba(2, 14, 25, 0.9) 28%, rgba(2, 14, 25, 0.58) 52%, rgba(2, 14, 25, 0.12) 78%, rgba(2, 14, 25, 0) 100%),
        url("assets/images/driveway-paving-hero.webp");
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}
.page-template-page-driving-schools .hero {
    background-image:
        linear-gradient(90deg, rgba(2, 14, 25, 0.98) 0%, rgba(2, 14, 25, 0.9) 28%, rgba(2, 14, 25, 0.58) 52%, rgba(2, 14, 25, 0.12) 78%, rgba(2, 14, 25, 0) 100%),
        url("assets/images/driving-school-hero.webp");
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}
.page-template-page-electricians .hero {
    background-image:
        linear-gradient(90deg, rgba(2, 14, 25, 0.98) 0%, rgba(2, 14, 25, 0.9) 28%, rgba(2, 14, 25, 0.58) 52%, rgba(2, 14, 25, 0.12) 78%, rgba(2, 14, 25, 0) 100%),
        url("assets/images/electrician-hero.webp");
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}
.page-template-page-landscaping .hero {
    background-image:
        linear-gradient(90deg, rgba(2, 14, 25, 0.98) 0%, rgba(2, 14, 25, 0.9) 28%, rgba(2, 14, 25, 0.58) 52%, rgba(2, 14, 25, 0.12) 78%, rgba(2, 14, 25, 0) 100%),
        url("assets/images/landscaping-hero.webp");
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}
.page-template-page-mobile-valeting .hero {
    background-image:
        linear-gradient(90deg, rgba(2, 14, 25, 0.98) 0%, rgba(2, 14, 25, 0.9) 28%, rgba(2, 14, 25, 0.58) 52%, rgba(2, 14, 25, 0.12) 78%, rgba(2, 14, 25, 0) 100%),
        url("assets/images/mobile-valeting-hero.webp");
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}
.page-template-page-pet-grooming .hero {
    background-image:
        linear-gradient(90deg, rgba(2, 14, 25, 0.98) 0%, rgba(2, 14, 25, 0.9) 28%, rgba(2, 14, 25, 0.58) 52%, rgba(2, 14, 25, 0.12) 78%, rgba(2, 14, 25, 0) 100%),
        url("assets/images/pet-grooming-hero.webp");
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}
.page-template-page-removals .hero {
    background-image:
        linear-gradient(90deg, rgba(2, 14, 25, 0.98) 0%, rgba(2, 14, 25, 0.9) 28%, rgba(2, 14, 25, 0.58) 52%, rgba(2, 14, 25, 0.12) 78%, rgba(2, 14, 25, 0) 100%),
        url("assets/images/removal-company-hero.webp");
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}
.page-template-page-roofing-companies .hero {
    background-image:
        linear-gradient(90deg, rgba(2, 14, 25, 0.98) 0%, rgba(2, 14, 25, 0.9) 28%, rgba(2, 14, 25, 0.58) 52%, rgba(2, 14, 25, 0.12) 78%, rgba(2, 14, 25, 0) 100%),
        url("assets/images/roofing-hero.webp");
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}
/* Scroll-in reveal — .reveal is added by script.js only when
   IntersectionObserver is available and motion is allowed. */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.65s ease,
        transform 0.65s ease;
    will-change: opacity, transform;
}
.reveal.in-view {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* AI Receptionist page */
.page-template-page-ai-receptionist .site-nav-bar {
    background: #06172b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.page-template-page-ai-receptionist .nav {
    height: 82px;
}
.page-template-page-ai-receptionist .navlinks {
    gap: 24px;
}
.page-template-page-ai-receptionist .navlinks a {
    font-size: 14px;
}
.page-template-page-ai-receptionist .navcta {
    min-height: 44px;
    padding: 0 18px;
    font-size: 14px;
    border-radius: 12px;
}
.ai-rec-page {
    background: #fff;
}
.ai-rec-hero {
    padding: 40px 0 26px;
    background:
        radial-gradient(circle at 58% 40%, rgba(18, 126, 255, 0.15), rgba(255, 255, 255, 0) 38%),
        radial-gradient(circle at 64% 42%, rgba(8, 124, 240, 0.06), rgba(255, 255, 255, 0) 50%),
        #fff;
}
.ai-rec-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: 20px;
}
.ai-rec-kicker {
    margin: 0 0 10px;
    color: #0f6bda;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.8px;
}
.ai-rec-copy h1 {
    margin: 0;
    max-width: 580px;
    color: #0b1224;
    font-size: clamp(48px, 4.2vw, 69px);
    line-height: 1.03;
    letter-spacing: -0.03em;
}
.ai-rec-copy h1 span {
    color: #1476ef;
}
.ai-rec-lead {
    max-width: 590px;
    margin: 18px 0 18px;
    color: #38485f;
    font-size: 18px;
    line-height: 1.42;
}
.ai-rec-checks {
    margin: 0;
}
.ai-rec-checks li {
    margin: 0 0 12px;
    color: #2a3750;
    font-size: 16px;
    line-height: 1.32;
}
.ai-rec-actions {
    display: flex;
    gap: 14px;
    margin-top: 22px;
}
.ai-rec-page .button {
    min-height: 52px;
    padding-inline: 30px;
    font-size: 16px;
}
.ai-rec-page .button.outline {
    border-color: #93c1fb;
    color: #1275ea;
    background: #fff;
}
.ai-rec-page .button.outline:hover {
    background: #f3f8ff;
}
.ai-rec-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 18px 0 0;
    color: #5e6f89;
    font-size: 14px;
}
.ai-rec-meta span {
    color: #1776eb;
    font-size: 18px;
    line-height: 1;
}
.ai-rec-art-wrap {
    position: relative;
}
.ai-rec-art {
    display: block;
    width: min(100%, 755px);
    height: auto;
    margin: 0 auto;
}
.ai-rec-highlights {
    padding: 24px 0 36px;
}
.ai-rec-highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.ai-rec-highlight {
    padding: 28px 26px 24px;
    text-align: center;
    background: linear-gradient(180deg, #fbfdff, #f3f8ff);
    border: 1px solid #e7effa;
    border-radius: 18px;
}
.ai-rec-highlight-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #cde5ff, #e9f3ff);
    color: #1778ed;
    font-size: 30px;
}
.ai-rec-highlight-icon svg {
    width: 26px;
    height: 26px;
}
.ai-rec-highlight h3 {
    margin: 0;
    color: #091426;
    font-size: 20px;
    line-height: 1.08;
}
.ai-rec-highlight p {
    margin: 8px 0 0;
    color: #4e6079;
    font-size: 16px;
    line-height: 1.28;
}
.ai-rec-proof {
    padding: 0;
    color: #fff;
    background: linear-gradient(112deg, #0a2d63 5%, #1248a1 52%, #0c3681 92%);
}
.ai-rec-proof-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.95fr 0.7fr;
    gap: 24px;
    align-items: center;
    min-height: 220px;
    padding-block: 22px;
}
.ai-rec-testimonial p {
    margin: 0;
    max-width: 540px;
    font-size: 22px;
    line-height: 1.17;
    font-style: italic;
}
.ai-rec-person {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
}
.ai-rec-person img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.25);
}
.ai-rec-person strong {
    display: block;
    font-size: 15px;
}
.ai-rec-person small {
    display: block;
    margin-top: 2px;
    color: #b8d0f4;
    font-size: 12px;
}
.ai-rec-person span {
    display: block;
    margin-top: 3px;
    color: #ffcf32;
    font-size: 14px;
}
.ai-rec-stat {
    padding: 20px 24px 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(204, 227, 255, 0.3);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.ai-rec-stat-title {
    margin: 0;
    color: #d9e8ff;
    font-size: 16px;
}
.ai-rec-stat-number {
    margin: 6px 0 0;
    font-size: 52px;
    font-weight: 500;
    line-height: 1;
}
.ai-rec-stat-number small {
    color: #4be18f;
    font-size: 30px !important;
    font-weight: 500;
}
.ai-rec-stat-note {
    margin: 8px 0 0;
    color: #d7e8ff;
    font-size: 15px;
}
.ai-rec-bars p {
    margin: 0 0 6px;
    font-size: 30px;
    font-style: italic;
    line-height: 1.08;
}
.ai-rec-bar-stack {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 92px;
    padding-left: 18px;
}
.ai-rec-bar-stack i {
    display: block;
    width: 20px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #fff, #88bdff);
}
.ai-rec-bar-stack i:nth-child(1) { height: 22px; opacity: 0.45; }
.ai-rec-bar-stack i:nth-child(2) { height: 34px; opacity: 0.58; }
.ai-rec-bar-stack i:nth-child(3) { height: 48px; opacity: 0.72; }
.ai-rec-bar-stack i:nth-child(4) { height: 68px; opacity: 0.85; }
.ai-rec-bar-stack i:nth-child(5) { height: 86px; }
.ai-rec-integrations {
    padding: 44px 0 30px;
}
.ai-rec-integrations h2 {
    margin: 0;
    color: #0a1529;
    font-size: 49px;
}
.ai-rec-integrations > .wrap > p {
    margin: 6px 0 20px;
    color: #5a6b84;
    font-size: 18px;
}
.ai-rec-tools {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
.ai-rec-tools article {
    padding: 18px 12px 15px;
    text-align: center;
    background: #fff;
    border: 1px solid #e8eef7;
    border-radius: 14px;
}
.ai-rec-tools span {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border-radius: 14px;
    background: linear-gradient(145deg, #f2f7ff, #e5f0ff);
    color: #1778ed;
}
.ai-rec-tools span svg {
    width: 24px;
    height: 24px;
}
.ai-rec-tools h3 {
    margin: 10px 0 0;
    color: #0a1528;
    font-size: 20px;
    line-height: 1.2;
}
.ai-rec-tools p {
    margin: 6px 0 0;
    color: #6b7b93;
    font-size: 14px;
    line-height: 1.3;
}
.ai-rec-cta {
    padding: 10px 0 56px;
}
.ai-rec-cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 26px;
    border-radius: 16px;
    border: 1px solid #dfe9f8;
    background: linear-gradient(90deg, #f5f9ff, #eef5ff);
}
.ai-rec-cta-title {
    margin: 0;
    color: #0b1629;
    font-size: 24px;
    font-weight: 500;
}
.ai-rec-cta-card p {
    margin: 5px 0 0;
    color: #5b6e89;
    font-size: 15px;
}
.ai-rec-cta-card > div {
    position: relative;
    padding-left: 58px;
}
.ai-rec-cta-card > div::before {
    content: "⚡";
    position: absolute;
    left: 0;
    top: 2px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #1778ed;
    background: linear-gradient(145deg, #eaf3ff, #d7e8ff);
    font-size: 22px;
}

@media (max-width: 1280px) {
    .ai-rec-kicker { font-size: 15px; }
    .ai-rec-copy h1 { font-size: clamp(38px, 4.2vw, 54px); }
    .ai-rec-lead { font-size: 17px; }
    .ai-rec-checks li { font-size: 16px; }
    .ai-rec-page .button { font-size: 16px; min-height: 50px; }
    .ai-rec-meta { font-size: 14px; }
    .ai-rec-highlight h3 { font-size: 20px; }
    .ai-rec-highlight p { font-size: 15px; }
    .ai-rec-testimonial p { font-size: 20px; }
    .ai-rec-integrations h2 { font-size: 39px; }
    .ai-rec-integrations > .wrap > p { font-size: 17px; }
    .ai-rec-tools h3 { font-size: 19px; }
    .ai-rec-tools p { font-size: 14px; }
}
@media (max-width: 980px) {
    .ai-rec-hero-grid,
    .ai-rec-proof-grid {
        grid-template-columns: 1fr;
    }
    .ai-rec-copy {
        order: 1;
    }
    .ai-rec-art-wrap {
        order: 0;
    }
    .ai-rec-art {
        width: min(100%, 620px);
    }
    .ai-rec-highlight-grid {
        grid-template-columns: 1fr;
    }
    .ai-rec-tools {
        grid-template-columns: 1fr 1fr;
    }
    .ai-rec-cta-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .ai-rec-cta-card .button {
        width: 100%;
    }
}
@media (max-width: 520px) {
    .ai-rec-hero {
        padding-top: 20px;
    }
    .ai-rec-actions {
        flex-direction: column;
    }
    .ai-rec-tools {
        grid-template-columns: 1fr;
    }
}

/* Contact page */
.page-template-page-contact .site-nav-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.contact-page {
    background: #fff;
}
.contact-hero {
    position: relative;
    padding: 62px 0 72px;
    color: #fff;
    background:
        linear-gradient(100deg, rgba(5, 20, 36, 0.97) 30%, rgba(5, 20, 36, 0.82) 65%, rgba(5, 20, 36, 0.6) 100%),
        url("assets/images/contact-hero.webp") center/cover no-repeat,
        var(--navy);
}
.contact-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
    align-items: start;
}
.contact-badge {
    display: inline-block;
    margin: 0 0 18px;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid rgba(120, 180, 255, 0.35);
    background: rgba(8, 124, 240, 0.22);
    color: #9cc8ff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
}
.contact-hero-copy h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(40px, 4.4vw, 60px);
    line-height: 1.05;
    letter-spacing: -0.03em;
}
.contact-hero-copy h1 span {
    display: block;
    color: #3ea2ff;
}
.contact-hero-copy .lead {
    margin: 16px 0 0;
    max-width: 480px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 16px;
    line-height: 1.55;
}
.contact-points {
    display: grid;
    gap: 16px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}
.contact-points li {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cp-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(96, 165, 250, 0.3);
    background: rgba(8, 124, 240, 0.2);
    color: #57a7ff;
}
.cp-icon svg {
    width: 19px;
    height: 19px;
}
.contact-points strong {
    display: block;
    font-size: 15px;
}
.contact-points small {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}
.contact-note {
    position: absolute;
    top: 26px;
    left: 0;
    z-index: 2;
    margin: 0;
    color: #9cc8ff;
    font-size: 15px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
    transform: rotate(-4deg);
}
.contact-note svg {
    display: block;
    width: 26px;
    height: 26px;
    margin-top: 8px;
    margin-left: 60px;
}
.collage-shot {
    position: absolute;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.collage-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.collage-shot--main {
    top: 0;
    left: 26%;
    width: 58%;
    height: 250px;
    transform: rotate(-2deg);
}
.collage-shot--small {
    top: 84px;
    right: 0;
    width: 26%;
    height: 230px;
    transform: rotate(4deg);
}
.collage-float {
    position: absolute;
    z-index: 2;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    color: var(--text);
}
.collage-float--badge {
    left: 30%;
    top: 30px;
    padding: 13px 17px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    transform: rotate(2deg);
}
.collage-float--toast {
    left: 8%;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 13px;
}
.collage-float--toast i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e5f9ee;
    color: #1fae5b;
}
.collage-float--toast i svg {
    width: 16px;
    height: 16px;
}
.collage-float--toast strong {
    display: block;
    font-size: 13px;
}
.collage-float--toast small {
    display: block;
    color: var(--muted);
    font-size: 11px !important;
}
.collage-float--toast em {
    margin-left: 8px;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
}
.contact-stats {
    display: flex;
    gap: 44px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}
.contact-stats strong {
    display: block;
    color: #3ea2ff;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.contact-stats small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
}
.contact-form-card {
    padding: 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(23, 67, 105, 0.08);
}

/* Multi-step contact wizard. */
.wizard-steps {
    display: flex;
    gap: 18px;
    margin: 0 0 22px;
    padding: 0 0 18px;
    list-style: none;
    border-bottom: 1px solid var(--line);
}
.wizard-steps li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}
.wizard-steps b {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #f4f8fd;
    color: var(--muted);
    font-size: 12px;
}
.wizard-steps li.active {
    color: var(--text);
    font-weight: 400;
}
.wizard-steps li.active b {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}
.wizard-steps li.done b {
    background: #e3f0ff;
    border-color: #b9d7fb;
    color: var(--blue);
    font-size: 0;
}
.wizard-steps li.done b::before {
    content: "✓";
    font-size: 13px;
}
.wizard-step {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
}
.wizard-step.active {
    display: block;
}
.wizard-step h2 {
    margin: 0;
    color: #0b1224;
    font-size: 24px;
}
.wizard-sub {
    margin: 6px 0 18px;
    color: var(--muted);
    font-size: 14px;
}
.wizard-step label {
    display: block;
    margin: 0 0 14px;
    color: var(--text);
    font-size: 14px;
    font-weight: 400;
}
.wizard-step label em {
    color: #e23b3b;
    font-style: normal;
}
.wizard-step input[type="text"],
.wizard-step input[type="tel"],
.wizard-step input[type="email"],
.wizard-step select {
    display: block;
    width: 100%;
    margin-top: 7px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fbff;
    color: var(--text);
    font: inherit;
    font-weight: 400;
    font-size: 15px;
    appearance: none;
}
.wizard-step select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23627083' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}
.wizard-step input:focus,
.wizard-step select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(8, 124, 240, 0.15);
    background: #fff;
}
.wizard-step input:user-invalid,
.wizard-step select:user-invalid {
    border-color: #e23b3b;
}
.wizard-step label.wizard-label {
    margin-bottom: 7px;
}
.wizard-options label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fbff;
    font-weight: 500;
    cursor: pointer;
}
.wizard-options label:has(input:checked) {
    border-color: var(--blue);
    background: #eef6ff;
    box-shadow: 0 0 0 1px var(--blue);
}
.wizard-options.wizard-err label {
    border-color: #e23b3b;
}
.wizard-options input {
    accent-color: var(--blue);
    width: 17px;
    height: 17px;
    margin: 0;
    flex: none;
}

/* Custom dropdown (JS-enhanced select, used site-wide). */
.ui-select {
    position: relative;
    margin: 0 0 14px;
}
.ui-select .ui-select-native {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.ui-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fbff;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    text-align: left;
}
.ui-select-btn::after {
    content: "";
    width: 16px;
    height: 16px;
    flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23627083' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.2s;
}
.ui-select.open .ui-select-btn::after {
    transform: rotate(180deg);
}
.ui-select-btn.placeholder {
    color: #8b98a9;
}
.ui-select.open .ui-select-btn,
.ui-select-btn:focus-visible {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(8, 124, 240, 0.15);
    background: #fff;
}
.ui-select.invalid .ui-select-btn {
    border-color: #e23b3b;
}
.ui-select-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 236px;
    overflow: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15, 40, 70, 0.16);
}
.ui-select-opt {
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
}
.ui-select-opt:hover,
.ui-select-opt:focus {
    outline: none;
    background: #eef6ff;
}
.ui-select-opt[aria-selected="true"] {
    color: var(--blue);
    font-weight: 400;
}
.wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
}
.wizard-actions .button {
    min-height: 50px;
    font-size: 15px;
}
.wizard-step:first-of-type .wizard-actions .button {
    flex: 1;
}
.wizard-back {
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 14px;
    font-weight: 400;
}
.wizard-back:hover {
    color: var(--text);
}
.wizard-success {
    padding: 30px 10px 20px;
    text-align: center;
}
.wizard-tick {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #22b06a;
    color: #fff;
    font-size: 26px;
    font-weight: 500;
}
.wizard-success h2 {
    margin: 0;
    font-size: 24px;
}
.contact-privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 13px;
}
.contact-privacy svg {
    width: 14px;
    height: 14px;
    color: var(--blue);
}
/* "Speak to us directly" footer inside the form card. */
.contact-or {
    position: relative;
    margin: 26px 0 0;
    text-align: center;
}
.contact-or::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid var(--line);
}
.contact-or span {
    position: relative;
    padding: 0 14px;
    background: #fff;
    color: #9aa7b8;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1em;
}
.contact-direct-title {
    margin: 20px 0 16px;
    color: #0b1224;
    font-size: 17px;
    font-weight: 400;
    text-align: center;
}
.contact-direct {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.contact-direct a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}
.cd-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    box-shadow: 0 8px 18px rgba(8, 124, 240, 0.28);
}
.cd-icon svg {
    width: 19px;
    height: 19px;
}
.cd-wa {
    background: #25d366;
    box-shadow: 0 8px 18px rgba(37, 211, 102, 0.3);
}
.contact-direct strong {
    color: #0b1224;
    font-size: 13px;
    font-weight: 400;
    overflow-wrap: anywhere;
}
.contact-direct small {
    color: var(--muted);
    font-size: 11px !important;
    line-height: 1.35;
}

/* "More Than Just a Website" services strip. */
.contact-services {
    padding: 72px 0 80px;
    background: #fff;
}
.contact-services-head {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
.contact-services-head h2 {
    margin: 6px 0 0;
    color: #0b1224;
    font-size: clamp(30px, 3vw, 40px);
    letter-spacing: -0.02em;
}
.contact-services-head > p {
    margin: 12px auto 0;
    max-width: 520px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
}
.cs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 42px;
}
.cs-card {
    padding: 28px 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(23, 67, 105, 0.06);
}
.cs-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #e9f4ff;
    color: var(--blue);
}
.cs-icon svg {
    width: 20px;
    height: 20px;
}
.cs-card h3 {
    margin: 0;
    color: #0b1224;
    font-size: 17px;
}
.cs-card p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 980px) {
    .contact-hero-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }
    .cs-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 560px) {
    .contact-hero {
        padding: 44px 0 56px;
    }
    .collage-shot--main {
        left: 20%;
        height: 200px;
    }
    .collage-shot--small {
        height: 190px;
    }
    .contact-stats {
        flex-wrap: wrap;
        gap: 22px;
    }
    .contact-direct {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .contact-direct a {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        column-gap: 14px;
        row-gap: 3px;
        align-items: center;
        justify-items: start;
        text-align: left;
    }
    .contact-direct a .cd-icon {
        grid-row: 1 / -1;
        margin-bottom: 0;
    }
    .contact-direct a strong,
    .contact-direct a small {
        grid-column: 2;
    }
    .cs-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------
   About page
--------------------------------------------------------------- */
.page-template-page-about .site-nav-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.about-hero {
    position: relative;
    padding: 62px 0 70px;
    color: #fff;
    background:
        linear-gradient(100deg, rgba(5, 20, 36, 0.97) 30%, rgba(5, 20, 36, 0.82) 65%, rgba(5, 20, 36, 0.6) 100%),
        url("assets/images/about-hero.webp") center/cover no-repeat,
        var(--navy);
}
.about-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 56px;
    align-items: start;
}
.about-badge {
    display: inline-block;
    margin: 0 0 18px;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid rgba(120, 180, 255, 0.35);
    background: rgba(8, 124, 240, 0.22);
    color: #9cc8ff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
}
.about-hero-copy h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(38px, 4.2vw, 58px);
    line-height: 1.05;
    letter-spacing: -0.03em;
}
.about-hero-copy h1 span {
    color: #3ea2ff;
}
.about-hero-copy .lead {
    margin: 16px 0 0;
}
.about-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}
.about-chips li {
    display: flex;
    align-items: center;
    gap: 10px;
}
.about-chips strong {
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
}
.about-chips .chip-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(0, 122, 255, 0.22);
}
.about-chips svg {
    width: 16px;
    height: 16px;
    color: #5fb0ff;
}
.about-note {
    position: absolute;
    top: 0;
    right: 2%;
    z-index: 2;
    margin: 0;
    color: #9cc8ff;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
    transform: rotate(-4deg);
}
.about-note svg {
    display: block;
    width: 24px;
    height: 24px;
    margin-top: 6px;
    margin-left: 40px;
}
.about-trust {
    padding: 18px 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.about-trust-row {
    display: flex;
    align-items: center;
    gap: 16px 28px;
    flex-wrap: wrap;
}
.about-trust-label {
    flex: none;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
}
.about-trust-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.about-trust-pills li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 400;
}
.about-trust-pills li::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #e9f4ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087cf0' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat;
}

/* Mission + cards. */
.about-mission {
    padding: 70px 0 60px;
    background: #fff;
}
.about-mission-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 60px;
    align-items: center;
}
.about-mission-copy h2 {
    margin: 0;
    color: #0b1224;
    font-size: clamp(30px, 3.2vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.about-mission-copy h2 span,
.about-results-copy h2 span,
.about-faq-copy h2 span {
    color: var(--blue);
}
.about-mission-copy > p,
.about-results-copy > p,
.about-faq-copy > p {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.6;
}
.about-mission-copy .button,
.about-results-copy .button,
.about-faq-copy .button {
    margin-top: 24px;
    min-height: 50px;
    font-size: 15px;
}
.about-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.about-cards article {
    padding: 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(23, 67, 105, 0.05);
}
.ac-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #e9f4ff;
    color: var(--blue);
}
.ac-icon svg {
    width: 19px;
    height: 19px;
}
.about-cards h3 {
    margin: 0;
    color: #0b1224;
    font-size: 15px;
}
.about-cards p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.5;
}
.about-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 48px;
    padding: 34px 30px;
    border-radius: 18px;
    background: var(--navy);
    color: #fff;
    text-align: center;
}
.about-stats svg {
    width: 22px;
    height: 22px;
    color: #57a7ff;
}
.about-stats strong {
    display: block;
    margin-top: 8px;
    color: #3ea2ff;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.about-stats small {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
}

/* Process steps. */
.about-how {
    padding: 64px 0;
    background: #fff;
}
.about-how-head {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
.about-how-head h2 {
    margin: 6px 0 0;
    color: #0b1224;
    font-size: clamp(28px, 3vw, 38px);
    letter-spacing: -0.02em;
}
.about-how-head > p {
    margin: 10px auto 0;
    max-width: 520px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
}
.about-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 40px;
}
.about-steps article {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(23, 67, 105, 0.05);
}
.as-num {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}
.about-steps h3 {
    margin: 0;
    color: #0b1224;
    font-size: 15px;
}
.about-steps p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.5;
}

/* Results collage. */
.about-results {
    padding: 64px 0;
    background: #fff;
}
.about-results-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: center;
}
.about-results-copy h2,
.about-faq-copy h2 {
    margin: 0;
    color: #0b1224;
    font-size: clamp(30px, 3.2vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
/* Coverflow carousel (JS positions slides via data-pos). */
.about-shots {
    position: relative;
    min-height: 380px;
}
.shots-track {
    position: absolute;
    inset: 0 0 30px;
}
.shot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 58%;
    height: 88%;
    margin: 0;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 24px 50px rgba(8, 23, 40, 0.22);
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 0.55s ease,
        opacity 0.55s ease,
        filter 0.55s ease;
}
.shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shot[data-pos="0"] {
    z-index: 3;
    transform: translate(-50%, -50%);
    opacity: 1;
    pointer-events: auto;
}
.shot[data-pos="-1"] {
    z-index: 2;
    transform: translate(-96%, -50%) scale(0.8);
    opacity: 0.9;
    filter: brightness(0.82);
    pointer-events: auto;
}
.shot[data-pos="1"] {
    z-index: 2;
    transform: translate(-4%, -50%) scale(0.8);
    opacity: 0.9;
    filter: brightness(0.82);
    pointer-events: auto;
}
.shots-arrow {
    position: absolute;
    top: 44%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--blue);
    box-shadow: 0 8px 20px rgba(8, 23, 40, 0.15);
}
.shots-arrow:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}
.shots-prev {
    left: -10px;
}
.shots-next {
    right: -10px;
}
.shots-arrow svg {
    width: 16px;
    height: 16px;
}
.shots-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    gap: 7px;
}
.shots-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cdd9e8;
}
.shots-dot.active {
    background: var(--blue);
}

/* Blue CTA band. */
.about-cta {
    padding: 20px 0;
    background: #fff;
}
.about-cta-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    padding: 46px 50px;
    border-radius: 20px;
    background: linear-gradient(120deg, #0a8cff, #0057d9);
    color: #fff;
}
.about-cta .kicker {
    margin-bottom: 6px;
    color: #bcd9ff;
}
.about-cta h2 {
    margin: 0;
    font-size: clamp(26px, 2.6vw, 34px);
    letter-spacing: -0.02em;
}
.about-cta p {
    margin: 8px 0 0;
    max-width: 520px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.55;
}
.about-cta-side {
    flex: none;
    text-align: right;
}
.about-cta .button {
    min-height: 52px;
    font-size: 15px;
}
.about-cta-note {
    margin: 14px 0 0;
    color: #cfe6ff;
    font-size: 13px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
    text-align: right;
}
.about-cta-note svg {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 4px;
    vertical-align: middle;
}

/* FAQ split. */
.about-faq {
    padding: 64px 0 80px;
    background: #fff;
}
.about-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 60px;
    align-items: start;
}
.about-faq-list .faq-item {
    margin-bottom: 12px;
}

@media (max-width: 980px) {
    .about-hero-grid,
    .about-mission-grid,
    .about-results-grid,
    .about-faq-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .about-stats {
        grid-template-columns: 1fr 1fr;
        gap: 26px;
    }
    .about-steps {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 560px) {
    .about-hero {
        padding: 44px 0 54px;
    }
    .about-cards,
    .about-steps,
    .about-stats {
        grid-template-columns: 1fr;
    }
    .about-shots {
        min-height: 280px;
    }
    .about-cta-grid {
        flex-direction: column;
        align-items: flex-start;
        padding: 34px 26px;
    }
    .about-cta-side,
    .about-cta-note {
        text-align: left;
    }
}

/* ---------------------------------------------------------------
   Pricing page
--------------------------------------------------------------- */
.page-template-page-pricing .site-nav-bar {
    background: #051424;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
.page-template-page-pricing .brand {
    color: #ffffff;
}
.page-template-page-pricing .navlinks a {
    color: #94a3b8;
}
.page-template-page-pricing .navlinks a:hover,
.page-template-page-pricing .navlinks .current-menu-item > a {
    color: #ffffff;
}
.page-template-page-pricing .navlinks .current-menu-item > a {
    position: relative;
    font-weight: 600;
}
.page-template-page-pricing .navlinks .current-menu-item > a::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--blue);
    border-radius: 2px;
}
.page-template-page-pricing .menu {
    color: #ffffff;
}

.pricing-page {
    background: #ffffff;
}

/* Dark Hero */
.pricing-hero {
    position: relative;
    background: linear-gradient(135deg, #051424 0%, #0a1f38 100%);
    padding: 64px 0 160px;
    overflow: hidden;
}
.pricing-hero::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    background: radial-gradient(circle at 75% 45%, rgba(0, 122, 255, 0.12) 0%, rgba(5, 20, 36, 0) 70%);
    pointer-events: none;
    z-index: 0;
}
.pricing-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 40px;
    align-items: center;
}
.pricing-hero-copy h1 {
    margin: 8px 0 16px;
    color: #ffffff;
    font-size: clamp(38px, 4.4vw, 54px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.2px;
}
.pricing-hero-copy h1 .accent-blue {
    color: var(--blue);
}
.pricing-lead {
    color: #94a3b8;
    font-size: 16px;
    line-height: 1.55;
    max-width: 480px;
    margin: 0 0 28px;
}
.pricing-hero-badges {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.pricing-badge-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(14, 38, 70, 0.65);
    border: 1px solid rgba(0, 122, 255, 0.2);
    border-radius: 12px;
    padding: 8px 14px;
    backdrop-filter: blur(8px);
}
.pricing-badge-item .badge-icon {
    display: grid;
    place-items: center;
    color: var(--blue);
    flex-shrink: 0;
}
.pricing-badge-item .badge-icon svg {
    width: 20px;
    height: 20px;
}
.pricing-badge-item .badge-text strong {
    display: block;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}
.pricing-badge-item .badge-text small {
    display: block;
    color: #94a3b8;
    font-size: 11.5px;
    line-height: 1.25;
}
.pricing-hero-visual {
    position: relative;
    display: flex;
    justify-content: flex-end;
}
.pricing-desk-wrap {
    position: relative;
    width: 100%;
    max-width: 580px;
}
.pricing-desk-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    filter: drop-shadow(0 20px 45px rgba(0, 0, 0, 0.45));
}

/* Cards Section with Hero Overlap */
.pricing-cards-section {
    position: relative;
    z-index: 5;
    margin-top: -115px;
    padding: 0 0 60px;
    background: linear-gradient(180deg, transparent 0%, #f4f9fd 140px, #ffffff 100%);
}
.pricing-billing-switch {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}
.billing-tabs {
    display: inline-flex;
    align-items: center;
    background: rgba(7, 23, 48, 0.88);
    padding: 4px;
    border-radius: 999px;
    border: 1px solid rgba(0, 122, 255, 0.35);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.billing-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: #94a3b8;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}
.billing-tab.is-active {
    background: var(--blue);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 122, 255, 0.4);
}
.billing-tab:hover:not(.is-active) {
    color: #ffffff;
}
.tab-save-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}
.billing-tab.is-active .tab-save-badge {
    background: #ffffff;
    color: var(--blue);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
    margin-bottom: 40px;
}
.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #edf4fc;
    border-radius: 20px;
    padding: 34px 28px 30px;
    box-shadow: 0 8px 30px rgba(12, 35, 65, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(12, 35, 65, 0.1);
}
.pricing-card.card-popular {
    background: linear-gradient(180deg, #071730 0%, #0c2347 100%);
    border: 1.5px solid #007aff;
    box-shadow: 0 18px 45px rgba(0, 25, 60, 0.2);
    transform: scale(1.02);
    z-index: 2;
}
.pricing-card.card-popular:hover {
    transform: scale(1.02) translateY(-4px);
    box-shadow: 0 22px 52px rgba(0, 25, 60, 0.26);
}
.tier-popular-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--blue);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 5px 18px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.45);
    white-space: nowrap;
}
.card-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eaf3ff;
    color: var(--blue);
    margin-bottom: 18px;
}
.card-icon svg {
    width: 22px;
    height: 22px;
}
.card-icon.card-icon--popular {
    background: var(--blue);
    color: #fff;
}
.card-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #0b1224;
}
.pricing-card.card-popular .card-title {
    color: #ffffff;
}
.pricing-card.card-popular .card-desc {
    color: #94a3b8;
}
.card-desc {
    margin: 0 0 22px;
    color: #58708a;
    font-size: 13.5px;
    line-height: 1.45;
    min-height: 40px;
}
.card-pricing {
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    padding: 18px 0;
    margin-bottom: 22px;
}
.pricing-card.card-popular .card-pricing {
    border-color: rgba(255, 255, 255, 0.1);
}
.pricing-card.card-popular .price-oneoff .amount {
    color: #ffffff;
}
.pricing-card.card-popular .price-oneoff .label {
    color: #94a3b8;
}
.pricing-card.card-popular .price-monthly .amount {
    color: #ffffff;
}
.pricing-card.card-popular .price-monthly .amount small {
    color: #94a3b8;
}
.pricing-card.card-popular .price-monthly .sub {
    color: #94a3b8;
}
.pricing-card.card-popular .group-title {
    color: #ffffff;
}
.pricing-card.card-popular .feature-list li {
    color: #e2e8f0;
}
.price-oneoff {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}
.price-oneoff .amount {
    font-size: 36px;
    font-weight: 800;
    color: #0b1224;
    letter-spacing: -1px;
    line-height: 1;
}
.price-oneoff .label {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
}
.price-monthly {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.price-monthly .amount {
    font-size: 20px;
    font-weight: 700;
    color: #0b1224;
}
.price-monthly .amount small {
    font-size: 13.5px;
    font-weight: 500;
    color: #64748b;
}
.price-monthly .sub {
    margin: 0;
    font-size: 12px;
    color: #64748b;
}
.card-btn {
    width: 100%;
    margin-bottom: 28px;
    justify-content: center;
}
.card-btn--popular {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0, 122, 255, 0.35);
}
.card-features-group {
    margin-bottom: 16px;
}
.group-title {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    color: #0b1224;
    text-transform: none;
    letter-spacing: 0;
}
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #334155;
    line-height: 1.35;
}
.feature-list.dark-mode li {
    color: #e2e8f0;
}
.feat-ico {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}
.not-included-panel {
    margin-top: 20px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px 14px;
}
.not-included-panel .group-title {
    color: #64748b;
    margin-bottom: 12px;
}
.feature-list.excluded li {
    color: #64748b;
}

/* Dark Navy Trust Bar */
.pricing-trust-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px 36px;
    background: #081a36;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(6, 20, 42, 0.12);
    margin-top: 10px;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
}
.trust-icon {
    display: grid;
    place-items: center;
    color: var(--blue);
    flex-shrink: 0;
}
.trust-icon svg {
    width: 28px;
    height: 28px;
}
.trust-text strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}
.trust-text span {
    display: block;
    color: #94a3b8;
    font-size: 12.5px;
    line-height: 1.25;
}

/* Compare Plans Section */
.pricing-compare-section {
    padding: 60px 0;
    background: #ffffff;
}
.pricing-compare-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: 48px;
    align-items: start;
}
.compare-info h2 {
    margin: 8px 0 16px;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -1px;
    color: #0b1224;
    line-height: 1.15;
}
.compare-lead {
    color: #58708a;
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}
.compare-cta {
    margin-top: 28px;
}
.compare-cta .button.dark-btn {
    background: #081a36;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(8, 26, 54, 0.25);
}
.compare-cta .button.dark-btn:hover {
    background: var(--blue);
    color: #ffffff;
}

.compare-table-card {
    background: #ffffff;
    border: 1px solid #edf4fc;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(12, 35, 65, 0.04);
}
.compare-table-responsive {
    overflow-x: auto;
}
.compare-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.compare-table thead tr {
    background: #f0f7ff;
    border-bottom: 1px solid #e2edf8;
}
.compare-table th {
    padding: 14px 18px;
    font-size: 13.5px;
    font-weight: 700;
    color: #0b1224;
}
.compare-table td {
    padding: 12px 18px;
    font-size: 13px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}
.compare-table tbody tr:last-child td {
    border-bottom: none;
}
.compare-table tbody tr:hover {
    background: #fbfdff;
}
.compare-table .col-feat {
    font-weight: 500;
    color: #1e293b;
}
.compare-table .col-growth {
    background: #f4f9ff;
}
.compare-table .col-tier {
    text-align: center;
    width: 20%;
}
.compare-table th.col-tier {
    text-align: center;
}
.compare-table .comp-ico {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
}

/* Reviews */
.pricing-reviews-section {
    padding: 60px 0;
    background: #fbfdff;
}
.reviews-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px;
}
.reviews-head h2 {
    margin: 6px 0 0;
    font-size: 32px;
    font-weight: 800;
    color: #0b1224;
    letter-spacing: -0.6px;
}
.read-more-link {
    color: var(--blue);
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.read-more-link:hover {
    text-decoration: underline;
}
.pricing-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.review-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #edf4fc;
    border-radius: 16px;
    padding: 26px 24px;
    box-shadow: 0 4px 18px rgba(12, 35, 65, 0.04);
}
.review-quote {
    margin: 0 0 22px;
    color: #334155;
    font-size: 13.5px;
    line-height: 1.55;
}
.review-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}
.review-author {
    display: flex;
    align-items: center;
    gap: 10px;
}
.review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
.review-author strong {
    display: block;
    color: #0b1224;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}
.review-author small {
    display: block;
    color: #64748b;
    font-size: 11.5px;
    line-height: 1.25;
}
.review-stars {
    color: #f59e0b;
    font-size: 13px;
    letter-spacing: 2px;
}

/* FAQ */
.pricing-faq-section {
    padding: 60px 0;
    background: #ffffff;
}
.faq-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px;
}
.faq-head h2 {
    margin: 6px 0 8px;
    font-size: 32px;
    font-weight: 800;
    color: #0b1224;
    letter-spacing: -0.6px;
}
.faq-sub {
    margin: 0;
    color: #58708a;
    font-size: 14.5px;
}

/* CTA */
.pricing-cta-section .kicker {
    margin-bottom: 6px;
}
.pricing-cta-section h2 {
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 800;
}
.pricing-cta-section .button {
    background: var(--blue);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 122, 255, 0.35);
}

/* Responsive adjustments */
@media (max-width: 980px) {
    .pricing-hero {
        padding: 50px 0 100px;
    }
    .pricing-cards-section {
        margin-top: -60px;
    }
    .pricing-hero-grid,
    .pricing-compare-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .pricing-hero-visual {
        justify-content: center;
    }
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto 40px;
    }
    .pricing-card.card-popular {
        transform: none;
    }
    .pricing-card.card-popular:hover {
        transform: translateY(-4px);
    }
    .pricing-trust-bar {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .pricing-reviews-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 560px) {
    .pricing-hero {
        padding: 40px 0 80px;
    }
    .pricing-cards-section {
        margin-top: -40px;
    }
    .pricing-hero-badges {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .pricing-trust-bar {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px 18px;
    }
    .reviews-head,
    .faq-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}