:root {
    --ink: #111715;
    --muted: #66716c;
    --paper: #f5f7f2;
    --surface: #fff;
    --line: #dfe5dc;
    --lime: #c8f25a;
    --lime-deep: #819f28;
    --dark: #111815;
    --dark2: #1b241f;
    --white: #fff;
    --radius: 28px;
    --shadow: 0 24px 70px rgba(24, 34, 28, 0.1);
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family: "DM Sans", sans-serif;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6;
    overflow-x: hidden;
}
h1,
h2,
h3,
h4 {
    font-family: Manrope, sans-serif;
    line-height: 1.05;
    margin: 0;
}
h1 {
    font-size: 43px;
}
h2 {
    font-size: 45px;
}
p {
    color: var(--muted);
}
a {
    text-decoration: none;
    color: inherit;
}
.container {
    width: min(1220px, calc(100% - 48px));
    margin: auto;
}
.header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    background: rgba(245, 247, 242, 0.86);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(223, 229, 220, 0.8);
}
.nav {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo {
    display: flex;
    align-items: center;
}
.logo img {
    object-fit: contain;
}
.logo-mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--lime);
    font-weight: 800;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 35px;
    font-size: 15px;
    font-weight: 700;
}
.nav-links > a,
.dropdown > a {
    transition: 0.2s;
}
.nav-links > a:hover,
.dropdown > a:hover {
    opacity: 0.55;
}
.nav-cta {
    background: var(--ink);
    color: white;
    padding: 13px 20px;
    border-radius: 999px;
}
.dropdown {
    position: relative;
}
.dropdown-menu {
    display: none;
    position: absolute;
    top: 28px;
    left: -16px;
    min-width: 210px;
    background: #fff;
    border: 1px solid var(--line);
    padding: 10px;
    border-radius: 18px;
    box-shadow: var(--shadow);
}
.dropdown:hover .dropdown-menu {
    display: grid;
}
.dropdown-menu a {
    padding: 10px 12px;
    border-radius: 10px;
}
.dropdown-menu a:hover {
    background: var(--paper);
}
.menu-btn {
    display: none;
    border: 0;
    background: transparent;
    font-size: 28px;
}
.hero {
    /*position: relative;
    min-height: 910px;
    padding: 158px 0 90px;*/
    position: relative;
    min-height: 740px;
    padding: 170px 0 50px;
    overflow: hidden;
    background: linear-gradient(135deg, #f7f9f3 0%, #eef2e8 58%, #e5f2bf 100%);
}
.hero:before {
    content: "";
    position: absolute;
    left: -15vw;
    top: 18%;
    width: 44vw;
    height: 44vw;
    border: 1px solid rgba(17, 23, 21, 0.08);
    border-radius: 50%;
}
.hero:after {
    content: "";
    position: absolute;
    right: -13vw;
    bottom: -25vw;
    width: 48vw;
    height: 48vw;
    border-radius: 50%;
    background: rgba(200, 242, 90, 0.35);
    filter: blur(15px);
}
.hero-glow {
    position: absolute;
    right: 6%;
    top: 14%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(200, 242, 90, 0.52);
    filter: blur(85px);
}
.hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.18fr 0.82fr;
    gap: 72px;
    align-items: center;
}
.hero-copy {
    max-width: 760px;
}
.eyebrow {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.eyebrow span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lime);
    margin-right: 8px;
}
.hero h1 em,
h2 em {
    font-style: normal;
    color: var(--lime-deep);
}
.hero-lead {
    font-size: 16px;
    max-width: 660px;
    margin: 14px 0 0;
}
.hero-copy .hero-lead:nth-of-type(2) {
    max-width: 610px;
    margin-top: 14px;
}
.hero-actions {
    display: flex;
    gap: 12px;
    margin-top: 34px;
    flex-wrap: wrap;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 16px 22px;
    border-radius: 999px;
    font-weight: 800;
    transition: 0.25s;
}
.btn-primary {
    background: var(--lime);
    color: #111;
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 35px rgba(146, 181, 47, 0.3);
}
.btn-light {
    background: white;
    color: #111;
}
.trust-row {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 34px;
    font-size: 12px;
    font-weight: 800;
}
.hero-card-wrap {
    position: relative;
}
.hero-card-wrap:before {
    content: "";
    position: absolute;
    inset: -28px 34px 28px -28px;
    border: 1px solid rgba(17, 23, 21, 0.14);
    border-radius: 36px;
    transform: rotate(-4deg);
}
.hero-card {
    position: relative;
    background: var(--dark);
    color: #fff;
    border-radius: 34px;
    padding: 30px;
    box-shadow: 0 35px 80px rgba(17, 24, 21, 0.24);
    transform: rotate(2deg);
}
.card-top {
    display: flex;
    justify-content: space-between;
    color: #9ba6a1;
    font-size: 11px;
}
.status {
    color: var(--lime);
    font-weight: 800;
}
.status i {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--lime);
    border-radius: 50%;
    margin-right: 6px;
}
.call-visual {
    height: 245px;
    display: grid;
    place-items: center;
    position: relative;
}
.phone {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--lime);
    color: #111;
    font-size: 44px;
    z-index: 2;
}
.pulse {
    position: absolute;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(200, 242, 90, 0.4);
    border-radius: 50%;
    animation: pulse 2.4s infinite;
}
.hero-card h3 {
    font-size: 30px;
    letter-spacing: -0.03em;
}
.hero-card p {
    color: #aab4af;
}
.mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    margin-top: 24px;
}
.mini-stats div {
    display: grid;
}
.mini-stats strong {
    font-size: 21px;
}
.mini-stats small {
    color: #7f8b85;
}
.logo-strip {
    background: var(--ink);
    color: #dce2dc;
    padding: 18px 0;
}
.logo-strip .container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
}
.section {
    padding: 60px 0;
}
.section-head {
    display: grid;
    grid-template-columns: 1fr 0.72fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 68px;
}
.section-head p {
    font-size: 17px;
    max-width: 520px;
}
.services-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 18px;
    align-items: stretch;
}
.service-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px;
    min-height: 270px;
    position: relative;
    transition: 0.3s;
    overflow: hidden;
}
.service-card:after {
    content: "";
    position: absolute;
    right: -42px;
    bottom: -48px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 1px solid rgba(17, 23, 21, 0.08);
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
}
.service-card.featured {
    grid-row: span 2;
    min-height: 558px;
    background: var(--dark);
    border-color: var(--dark);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
/*.service-card.featured:before {
    content: "01";
    position: absolute;
    left: 28px;
    top: 8px;
    font: 800 140px Manrope;
    color: rgba(200, 242, 90, 0.1);
    letter-spacing: -0.08em;
}*/
.service-card:nth-child(4),
.service-card:nth-child(5) {
    grid-column: auto;
}
.number {
    position: absolute;
    top: 26px;
    right: 28px;
    font-size: 11px;
    font-weight: 800;
    color: #8b948f;
}
.service-card.featured .number {
    color: var(--lime);
}
.icon {
    font-size: 36px;
    margin: 42px 0 24px;
}
.service-card.featured .icon {
    margin-bottom: 28px;
    color: var(--lime);
}
.service-card h3 {
    font-size: 29px;
}
.service-card.featured h3 {
    font-size: 40px;
}
.service-card p {
    font-size: 14px;
    max-width: 520px;
}
.service-card.featured p {
    color: #b1bbb6;
    font-size: 16px;
}
.service-card a {
    font-size: 13px;
    font-weight: 800;
    display: inline-block;
    margin-top: 18px;
}
.service-card.featured a {
    color: var(--lime);
}
.dark-section {
    background: var(--dark);
    color: #fff;
    padding: 100px 0;
}
.split {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 100px;
    align-items: start;
}
.light {
    color: var(--lime);
}
.dark-section h2 em {
    color: var(--lime);
}
.dark-section p {
    color: #a8b1ad;
    max-width: 520px;
    margin: 28px 0;
}
.check-list {
    display: grid;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.check-list > div {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 22px;
    padding: 26px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.check-list b {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--lime);
    color: #111;
    font-size: 14px;
}
.check-list span {
    display: grid;
    gap: 5px;
}
.check-list strong {
    font-size: 20px;
}
.check-list small {
    color: #8d9892;
}
.center-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 66px;
}
.process {
    background: #fff;
}
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.step {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 24px;
    min-height: 260px;
    position: relative;
}
.step:before {
    content: "";
    position: absolute;
    left: 47px;
    top: 64px;
    width: 1px;
    height: 52px;
    background: var(--line);
}
.step span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--lime);
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 72px;
    /*position: relative;
    z-index: 999;*/
}
.step h3 {
    font-size: 21px;
}
.step p {
    font-size: 14px;
}
.areas {
    background: #e8ece5;
    padding: 125px 0;
}
.areas-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
}
.area {
    grid-column: span 4;
    background: #fff;
    border-radius: 22px;
    padding: 30px;
    min-height: 180px;
    border: 1px solid rgba(17, 23, 21, 0.04);
    transition: 0.25s;
}
.area:hover {
    transform: translateY(-4px);
}
.area.big {
    grid-column: span 8;
    background: var(--lime);
    color: #111;
}
.area:nth-child(2),
.area:nth-child(3) {
    grid-column: span 2;
}
.area h3 {
    margin: 28px 0 12px;
    font-size: 23px;
}
.area p {
    font-size: 13px;
    margin: 0;
}
.area.big p {
    color: #44502e;
}
.pricing {
    background: #fff;
}
.price-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.price-card {
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 30px;
    min-height: 235px;
    position: relative;
    display: grid;
    align-content: start;
}
.price-card.popular {
    background: var(--dark);
    color: #fff;
}
.price-card label {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--lime);
    color: #111;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
}
.price-card span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
}
.price-card h3 {
    font-size: 32px;
    margin-top: 30px;
}
.price-card p {
    font-size: 13px;
    margin-bottom: 28px;
}
.price-card a {
    font-weight: 800;
    font-size: 13px;
    margin-top: auto;
}
.popular a {
    color: var(--lime);
}
.testimonial {
    padding: 110px 0;
}
.testimonial-inner {
    max-width: 900px;
    text-align: left;
    position: relative;
}
.quote-mark {
    font: 800 100px Georgia;
    color: var(--lime);
    height: 72px;
}
.testimonial blockquote {
    font: 400 clamp(28px, 4vw, 48px) Manrope;
    /*letter-spacing: -0.045em;*/
    margin: 20px 0;
    line-height: 1.2;
}
.testimonial p {
    color: #aab2ae;
}
.dots button {
    width: 9px;
    height: 9px;
    border: 0;
    border-radius: 50%;
    margin: 20px 5px 0 0;
    background: #5e6964;
}
.dots button.active {
    background: var(--lime);
}
.faq-grid {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    gap: 100px;
}
.faq-item {
    border-top: 1px solid var(--line);
}
.faq-item button {
    width: 100%;
    padding: 24px 0;
    border: 0;
    background: none;
    text-align: left;
    font: 700 16px Manrope;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}
.faq-answer {
    display: none;
    padding: 0 40px 25px 0;
    color: var(--muted);
    font-size: 14px;
}
.faq-item.open .faq-answer {
    display: block;
}
.faq-item.open button span {
    transform: rotate(45deg);
}
.contact-cta {
    padding: 0 0 0px;
    background: #fff;
}
.cta-box {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    padding: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}
/*.cta-box:after {
    content: "";
    position: absolute;
    right: -90px;
    top: -100px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(17, 23, 21, 0.16);
    border-radius: 50%;
}*/
.cta-box p {
    color: #44502e;
}
.cta-box .btn {
    position: relative;
    z-index: 2;
    background: #111;
    color: #fff;
}
footer {
    background: #eef1eb;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 50px;
    padding: 40px 0;
}
.footer-grid > div {
    display: grid;
    align-content: start;
    gap: 10px;
}

.footer-grid p {
    font-size: 15px;
}
.footer-grid h4 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}
.footer-grid a:not(.logo) {
    font-size: 14px;
    color: #333333;
}
.footer-bottom {
    border-top: 1px solid #a5a5a5;
    padding: 22px 0;
    display: flex;
    justify-content: space-between;
    color: #333333;
    font-size: 14px;
}
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: 0.7s;
}
.reveal.visible {
    opacity: 1;
    transform: none;
}
@keyframes pulse {
    0%,
    100% {
        transform: scale(0.82);
        opacity: 0.2;
    }
    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}
@media (max-width: 980px) {
    .nav-links {
        display: none;
    }
    .menu-btn {
        display: block;
    }
    .nav {
        height: 80px;
    }
    .nav-links.open {
        position: absolute;
        display: grid;
        left: 24px;
        right: 24px;
        top: 78px;
        background: #fff;
        padding: 20px;
        border: 1px solid var(--line);
        border-radius: 20px;
        box-shadow: var(--shadow);
    }
    .dropdown-menu {
        position: static;
        display: grid;
        box-shadow: none;
        border: 0;
        padding-left: 12px;
    }
    .hero {
        padding-top: 132px;
        min-height: auto;
    }
    .hero-grid,
    .section-head,
    .split,
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .hero-card-wrap {
        max-width: 560px;
    }
    .services-grid {
        grid-template-columns: 1fr 1fr;
    }
    .service-card.featured {
        grid-row: auto;
        grid-column: 1/-1;
        min-height: 420px;
    }
    .process-grid {
        grid-template-columns: 1fr 1fr;
    }
    .areas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .area,
    .area.big,
    .area:nth-child(2),
    .area:nth-child(3) {
        grid-column: auto;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .cta-box {
        align-items: flex-start;
        flex-direction: column;
    }
}
@media (max-width: 640px) {
    .container {
        width: min(100% - 28px, 1220px);
    }
    h1 {
        font-size: clamp(3rem, 16vw, 4.6rem);
    }
    h2 {
        font-size: clamp(2.4rem, 12vw, 3.4rem);
    }
    .hero {
        padding: 120px 0 70px;
    }
    .hero-grid {
        gap: 40px;
    }
    .hero-card {
        transform: none;
    }
    .hero-card-wrap:before {
        display: none;
    }
    .hero-lead {
        font-size: 15px;
    }
    .trust-row {
        gap: 12px 18px;
    }
    .section,
    .areas,
    .dark-section {
        padding: 86px 0;
    }
    .services-grid,
    .process-grid,
    .areas-grid,
    .price-grid {
        grid-template-columns: 1fr;
    }
    .service-card.featured {
        min-height: 360px;
    }
    .step {
        min-height: auto;
    }
    .section-head {
        margin-bottom: 42px;
    }
    .faq-grid {
        gap: 46px;
    }
    .cta-box {
        padding: 40px 28px;
        border-radius: 24px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 60px 0;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 8px;
    }
    .logo-strip .container {
        justify-content: flex-start;
    }
    .call-visual {
        height: 210px;
    }
}

/* California Creative Edition */
body {
    overflow-x: hidden;
    background: #f8faf4;
}
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--lime), #ff7a59);
    z-index: 9999;
}
.cursor-glow {
    position: fixed;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(circle, rgba(200, 242, 90, 0.13), transparent 68%);
    transform: translate(-50%, -50%);
}
.header {
    background: rgba(251, 252, 247, 0.75) !important;
    backdrop-filter: blur(18px);
}
.hero {
    background: linear-gradient(135deg, #faf8ef, #f1f7ee 52%, #edf8f7);
    overflow: hidden;
    isolation: isolate;
}
.hero:after {
    content: "CALIFORNIA";
    position: absolute;
    left: -0.03em;
    bottom: -0.2em;
    font: 800 clamp(110px, 20vw, 330px) / 1 Manrope;
    color: transparent;
    -webkit-text-stroke: 1px rgba(17, 23, 21, 0.06);
    letter-spacing: -0.09em;
    z-index: -1;
}
.hero-gridlines {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: linear-gradient(rgba(17, 23, 21, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 23, 21, 0.035) 1px, transparent 1px);
    background-size: 70px 70px;
}
.california-orb {
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    animation: orb 8s ease-in-out infinite;
}
.orb-one {
    width: 430px;
    height: 430px;
    right: -130px;
    top: 70px;
    background: radial-gradient(circle, rgba(255, 122, 89, 0.32), transparent 68%);
}
.orb-two {
    width: 300px;
    height: 300px;
    left: 38%;
    bottom: -100px;
    background: radial-gradient(circle, rgba(107, 214, 232, 0.28), transparent 68%);
}
.hero-kicker {
    margin-top: 15px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.2em;
}
.hero-card {
    background: linear-gradient(145deg, #15201c, #0c1210) !important;
    box-shadow: 0 45px 100px rgba(18, 35, 29, 0.25) !important;
    transition: transform 0.18s;
}
.floating-pill {
    position: absolute;
    z-index: 5;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 35px rgba(17, 23, 21, 0.13);
    font: 800 9px Manrope;
    letter-spacing: 0.1em;
    animation: float 4s ease-in-out infinite;
}
.pill-one {
    left: -45px;
    top: 20%;
}
.pill-two {
    right: -35px;
    bottom: 17%;
    animation-delay: -2s;
}
.marquee {
    overflow: hidden;
    background: var(--lime);
    transform: rotate(-1deg);
    width: 102%;
    margin-left: -1%;
    position: relative;
    z-index: 4;
}
.marquee-track {
    display: flex;
    width: max-content;
    gap: 26px;
    padding: 13px 0;
    animation: marquee 24s linear infinite;
    font: 800 12px Manrope;
    letter-spacing: 0.12em;
}
.marquee i {
    font-style: normal;
}
.service-card,
.step,
.area,
.price-card {
    transition: 0.35s;
}
.service-card:not(.featured):hover,
.step:hover,
.area:hover,
.price-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 55px rgba(17, 23, 21, 0.09);
}
.service-card .icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: #eef3e8;
    transition: 0.35s;
}
.service-card:hover .icon {
    transform: rotate(-8deg) scale(1.08);
    background: var(--lime);
}
.service-card.featured {
    background: linear-gradient(145deg, #12201b, #1c3029) !important;
}
.dark-section {
    background: radial-gradient(circle at 15% 15%, #203a31, #111a17 38%, #0b100f 100%);
}
.areas {
    background: linear-gradient(145deg, #e7ede5, #eef1e8);
}
.area.big {
    background: linear-gradient(135deg, var(--lime), #dcff81);
}
/*.cta-box {
    background: linear-gradient(115deg, #c8f25a, #dfff87 55%, #aee8d8 130%);
    box-shadow: 0 35px 80px rgba(68, 94, 43, 0.16);
}*/
.reveal {
    filter: blur(5px);
    transform: translateY(36px) scale(0.985);
    transition: 0.8s;
}
.reveal.visible {
    filter: none;
}
@keyframes float {
    50% {
        transform: translateY(-13px) rotate(2deg);
    }
}
@keyframes orb {
    50% {
        transform: translate(20px, -22px) scale(1.06);
    }
}
@keyframes marquee {
    to {
        transform: translateX(-50%);
    }
}
@media (max-width: 980px) {
    .floating-pill,
    .cursor-glow {
        display: none;
    }
}
@media (max-width: 640px) {
    .marquee {
        transform: none;
        width: 100%;
        margin: 0;
    }
}

/* ===== Services: 3-at-a-time horizontal scroll ===== */
.services-slider-wrap {
    position: relative;
}
.services-slider-note {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: -28px 2px 18px;
    font: 800 10px Manrope;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #78827d;
}
.services-slider-note span {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--ink);
    font-size: 15px;
    animation: serviceArrow 1.5s ease-in-out infinite;
}
#services .services-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 2px 24px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--lime) rgba(17, 23, 21, 0.08);
}
#services .services-grid::-webkit-scrollbar {
    height: 7px;
}
#services .services-grid::-webkit-scrollbar-track {
    background: rgba(17, 23, 21, 0.07);
    border-radius: 20px;
}
#services .services-grid::-webkit-scrollbar-thumb {
    background: var(--lime);
    border-radius: 20px;
}
#services .service-card {
    flex: 0 0 calc((100% - 36px) / 3);
    min-width: calc((100% - 36px) / 3);
    min-height: 345px !important;
    grid-column: auto !important;
    grid-row: auto !important;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
#services .service-card.featured {
    min-height: 345px !important;
    justify-content: flex-start;
}
#services .service-card.featured:before {
    font-size: 105px;
    top: 4px;
    opacity: 0.8;
}
#services .service-card .icon {
    margin: 20px 0 20px;
}
#services .service-card h3,
#services .service-card.featured h3 {
    font-size: 24px;
}
#services .service-card p,
#services .service-card.featured p {
    font-size: 14px;
    line-height: 1.7;
}
/*#services .service-card a {
    margin-top: auto;
    padding-top: 20px;
}*/
@keyframes serviceArrow {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}
@media (max-width: 980px) {
    #services .service-card {
        flex-basis: calc((100% - 18px) / 2);
        min-width: calc((100% - 18px) / 2);
    }
    .services-slider-note {
        margin-top: -18px;
    }
}
@media (max-width: 640px) {
    #services .service-card {
        flex-basis: 88%;
        min-width: 88%;
    }
    .services-slider-note {
        justify-content: flex-start;
        margin: 0 0 16px;
    }
}

/* ===== Piezel 2026 — California Corporate Redesign ===== */
:root {
    --ink: #15202b;
    --muted: #667085;
    --paper: #fbf7f0;
    --surface: #fffdf9;
    --line: #e9e2d8;
    --lime: #f88240;
    --lime-deep: #d85f20;
    --dark: #101c2b;
    --dark2: #172638;
    --sand: #f5eadc;
    --sky: #dceef5;
    --white: #fff;
    --shadow: 0 26px 70px rgba(27, 38, 53, 0.12);
}
body {
    background: var(--paper);
    color: var(--ink);
}
p {
    color: var(--muted);
}
.header { 
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: rgba(255, 253, 249, 0.82) !important;
    box-shadow: 0 12px 40px rgba(29, 41, 57, 0.08);
    transition: 0.3s;
}
.nav {
    height: 95px;
    padding: 0 14px;
}
.logo img {
    width: auto;
}
.nav-links {
    gap: 35px;
    font-size: 16px;
}
.nav-cta {
    background: var(--dark);
    padding: 12px 18px;
    box-shadow: 0 8px 20px rgba(16, 28, 43, 0.15);
}
.dropdown-menu {
    top: 42px;
    border-color: #eee3d7;
    box-shadow: 0 20px 50px rgba(25, 38, 55, 0.13);
}
.dropdown-menu a:hover {
    background: #fff2e9;
    color: #c6531d;
}

.hero {
    min-height: 790px;
    padding: 155px 0 82px;
    background: radial-gradient(circle at 78% 22%, rgba(248, 130, 64, 0.22), transparent 25%),
        radial-gradient(circle at 83% 70%, rgba(87, 170, 202, 0.18), transparent 26%),
        linear-gradient(135deg, #fffaf3 0%, #f7f1e7 52%, #edf5f5 100%);
}
.hero:before {
    left: -18vw;
    top: 16%;
    border-color: rgba(21, 32, 43, 0.065);
}
.hero:after {
    content: "WEST COAST";
    left: -0.01em;
    right: auto;
    bottom: -0.16em;
    font-size: clamp(110px, 18vw, 300px);
    color: transparent;
    background: none;
    -webkit-text-stroke: 1px rgba(21, 32, 43, 0.055);
    filter: none;
    white-space: nowrap;
}
.hero-gridlines {
    opacity: 0.55;
    background-size: 76px 76px;
}
.orb-one {
    background: radial-gradient(circle, rgba(248, 130, 64, 0.42), transparent 68%);
}
.orb-two {
    background: radial-gradient(circle, rgba(68, 161, 198, 0.25), transparent 68%);
}
.hero-grid {
    grid-template-columns: 1.08fr 0.92fr;
    gap: 85px;
}
.eyebrow {
    color: #a44a20;
    font-size: 12px;
    letter-spacing: 0.19em;
}
.eyebrow span {
    background: var(--lime);
    box-shadow: 0 0 0 6px rgba(248, 130, 64, 0.14);
}
.hero h1 {
    font-size: 40px;
    max-width: 780px;
}
.hero h1 em,
h2 em {
    color: var(--lime-deep);
}
.hero-lead {
    font-size: 17px;
    line-height: 1.75;
    max-width: 680px;
}
.btn {
    border-radius: 14px;
    padding: 15px 20px;
}
.btn-primary {
      background: #000000;
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(248, 130, 64, 0.28);
}
.btn-primary:hover {
    box-shadow: 0 16px 34px rgba(248, 130, 64, 0.34);
}
.btn-ghost {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(21, 32, 43, 0.12);
    color: var(--ink);
}
.btn-ghost:hover {
    transform: translateY(-3px);
    background: #fff;
}
.trust-row span {
    padding: 8px 12px;
    border: 1px solid rgba(21, 32, 43, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.56);
}
.hero-card-wrap:before {
    inset: -22px 28px 25px -22px;
    border-color: rgba(248, 130, 64, 0.28);
    border-radius: 38px;
    transform: rotate(-3deg);
}
.hero-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(155deg, #17283a, #0d1724) !important;
    border-radius: 36px;
    padding: 32px;
    box-shadow: 0 40px 90px rgba(15, 27, 41, 0.28) !important;
    overflow: hidden;
}
.hero-card:after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    right: -100px;
    top: -95px;
    background: rgba(248, 130, 64, 0.18);
    filter: blur(4px);
}
.hero-card-badge {
    display: inline-flex;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: #f6b48f;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    margin-bottom: 18px;
}
.status {
    color: #ff9d64;
}
.status i {
    background: #ff9d64;
    box-shadow: 0 0 0 5px rgba(248, 130, 64, 0.11);
}
.phone {
    background: linear-gradient(145deg, #ff9a5f, #f88240);
    box-shadow: 0 15px 35px rgba(248, 130, 64, 0.28);
    font-size: 38px;
}
.pulse {
    border-color: rgba(248, 130, 64, 0.4);
}
.pulse-two {
    width: 235px;
    height: 235px;
    animation-delay: -1.1s;
    opacity: 0.45;
}
.orbit-label {
    position: absolute;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 9px;
    color: #c9d4df;
    backdrop-filter: blur(4px);
}
.orbit-a {
    left: 8%;
    top: 25%;
}
.orbit-b {
    right: 5%;
    top: 38%;
}
.orbit-c {
    left: 18%;
    bottom: 18%;
}
.floating-pill {
    border: 1px solid rgba(248, 130, 64, 0.12);
    color: #64331c;
}
.pill-one:before,
.pill-two:before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f88240;
    margin-right: 6px;
}

.logo-strip {
    background: #111d2b;
    padding: 15px 0;
}
.logo-strip .container {
    color: #d7e0e8;
}
.marquee {
    background: #f88240;
    color: #18202a;
}
.section {
    padding: 105px 0;
}
.section-head {
    margin-bottom: 48px;
}
.section-head h2 {
    font-size: clamp(42px, 5vw, 64px);
    letter-spacing: -0.05em;
}
.section-head p {
    font-size: 16px;
}
.services-slider-note span {
    background: #f88240;
}
.services-slider-note {
    color: #8b6d5e;
}
#services .services-grid {
    scrollbar-color: #f88240 rgba(21, 32, 43, 0.08);
    gap: 20px;
}
#services .services-grid::-webkit-scrollbar-thumb {
    background: #f88240;
}
#services .service-card {
    flex-basis: calc((100% - 40px) / 3);
    min-width: calc((100% - 40px) / 3);
    min-height: 390px !important;
    border-radius: 26px;
    border-color: #eadfd3;
    padding: 30px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 9px 30px rgba(21, 32, 43, 0.05);
}
#services .service-card.featured {
    min-height: 390px !important;
    background: linear-gradient(150deg, #142538, #0e1926) !important;
}
#services .service-card .icon {
    background: #fff0e7;
    color: #c95a22;
}
.service-card:hover .icon {
    background: #f88240;
    color: #15202b;
}
.service-card.featured .icon {
    background: rgba(248, 130, 64, 0.13);
    color: #ff9e67;
}
.service-card.featured a {
    color: #ff9d64;
}
.service-card.featured .number {
    color: #ff9d64;
}

.dark-section {
    background: radial-gradient(circle at 12% 16%, #203851, #111e2c 40%, #0c1621 100%);
}
.light,
.dark-section h2 em {
    color: #ff965a;
}
.check-list b {
    background: #f88240;
}
.btn-light {
    border-radius: 14px;
}
.process {
    background: #fffaf4;
}
.step {
    background: #fff;
    border-color: #eadfd3;
    border-radius: 22px;
}
.step span {
    background: #f88240;
}
.step:before {
    background: #eadfd3;
}

.testimonial {
    position: relative;
    overflow: hidden;
    padding: 130px 0;
    text-align: center;
}
.testimonial:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(920px, 86vw);
    height: 72%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 42px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(5px);
}
.testimonial-inner {
    max-width: 850px;
    text-align: center;
    position: relative;
    z-index: 2;
}
.testimonial-label {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 999px;
    color: #aebccc;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
}
.testimonial-label span {
    color: #ff9b61;
    letter-spacing: 0.05em;
}
.quote-mark {
    color: #f88240;
    height: 66px;
    margin-top: 18px;
}
.testimonial blockquote {
font-size: 24px;
    line-height: 32px;
    /* letter-spacing: -0.045em; */
    margin: 14px auto 27px;
    transition: opacity 0.28s, transform 0.28s;
}
.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.testimonial-author p {
    margin: 0;
    color: #c2ccd7;
    font-weight: 600;
}
.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #f88240, #ffb17f);
    color: #17202a;
    font-size: 11px;
    font-weight: 900;
}
.dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 22px;
}
.dots button {
    width: 24px;
    height: 5px;
    border-radius: 99px;
    margin: 0;
    background: #405065;
    cursor: pointer;
    transition: 0.3s;
}
.dots button.active {
    background: #f88240;
    width: 42px;
}
.testimonial-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(4px);
    opacity: 0.55;
}
.testimonial-orb-a {
    width: 300px;
    height: 300px;
    left: -120px;
    top: 30px;
    background: radial-gradient(circle, rgba(248, 130, 64, 0.22), transparent 70%);
}
.testimonial-orb-b {
    width: 360px;
    height: 360px;
    right: -150px;
    bottom: -90px;
    background: radial-gradient(circle, rgba(75, 164, 201, 0.18), transparent 70%);
}

.cta-box {
 
    /*background: linear-gradient(120deg, #fff0e5, #f7e2d2 55%, #e2f0f3);
    border: 1px solid #ead9cc;*/
   
}
.cta-box .btn {
    background: #132234;
}
.cta-box p {
    color: #725a4b;
}
footer {
    background: #edf0f0;
}
.footer-grid {
    padding: 60px 0px 40px 0px;
}
.footer-grid h4 {
    color: #9b4c27;
}
.scroll-progress {
    background: linear-gradient(90deg, #f88240, #48a2c6);
}
.cursor-glow {
    background: radial-gradient(circle, rgba(248, 130, 64, 0.1), transparent 68%);
}

@media (max-width: 980px) {
    .header {
        top: 8px;
        left: 10px;
        right: 10px;
    }
    .nav {
        height: 68px;
    }
    .hero {
        padding-top: 125px;
    }
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }
    .hero-copy {
        max-width: 820px;
    }
    .hero-card-wrap {
        max-width: 610px;
        margin: auto;
        width: 100%;
    }
    #services .service-card {
        flex-basis: calc((100% - 20px) / 2);
        min-width: calc((100% - 20px) / 2);
    }
    .testimonial-inner {
        padding: 30px 50px;
    }
}
@media (max-width: 640px) {
    .header {
        border-radius: 16px;
    }
    .logo img {
        max-height: 36px;
    }
    .hero {
        padding: 115px 0 64px;
        min-height: auto;
    }
    .hero h1 {
        font-size: clamp(43px, 13vw, 61px);
    }
    .hero-actions {
        display: grid;
    }
    .hero-actions .btn {
        width: 100%;
    }
    .trust-row span {
        font-size: 10px;
    }
    .hero-card {
        padding: 24px;
        border-radius: 26px;
    }
    .hero-card-wrap {
        padding: 0 3px;
    }
    .call-visual {
        height: 225px;
    }
    #services .service-card {
        flex-basis: 88%;
        min-width: 88%;
        min-height: 370px !important;
    }
    .section {
        padding: 80px 0;
    }
    .testimonial {
        padding: 95px 0;
    }
    .testimonial:before {
        width: calc(100% - 28px);
        height: 82%;
        border-radius: 28px;
    }
    .testimonial-inner {
        padding: 25px 18px;
    }
    .testimonial-label {
        gap: 10px;
    }
    .testimonial blockquote {
        font-size: 28px;
    }
    .testimonial-author {
        align-items: flex-start;
    }
    .testimonial-author p {
        font-size: 13px;
        text-align: left;
    }
}
@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}


/* Connect Me social media */
.connect-column .social-links {
    display: grid;
    gap: 9px;
    margin-top: 4px;
}
.footer-grid .connect-column .social-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 10px;
    color: #30393a;
    font-weight: 650;
    transition: transform .25s ease, color .25s ease;
}
.footer-grid .connect-column .social-link:hover {
    transform: translateX(5px);
    color: #9b4c27;
}
.social-icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 11px;
    background: #fff;
    border: 1px solid rgba(18, 31, 34, .10);
    box-shadow: 0 8px 20px rgba(18, 31, 34, .08);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.social-link:hover .social-icon {
    transform: translateY(-2px) rotate(-3deg);
    box-shadow: 0 12px 26px rgba(18, 31, 34, .14);
    background: #fff7f1;
}
.social-icon svg {
    width: 17px;
    height: 17px;
    display: block;
    fill: currentColor;
}
.social-icon.linkedin { color: #0A66C2; }
.social-icon.instagram { color: #C13584; }
.social-icon.facebook { color: #1877F2; }
.social-icon.x-social { color: #111; }

@media (max-width: 640px) {
    .connect-column .social-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 330px;
        gap: 10px 14px;
    }
}
/* ===== Dropdown hover stability fix ===== */
.header .dropdown {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: -12px;
}
.header .dropdown::after {
    content: "";
    position: absolute;
    left: -18px;
    right: -18px;
    top: 100%;
    height: 16px;
}
.header .dropdown-menu {
    display: grid;
    top: calc(100% + 10px);
    left: -18px;
    min-width: 235px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    z-index: 1200;
}
.header .dropdown:hover .dropdown-menu,
.header .dropdown:focus-within .dropdown-menu,
.header .dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.header .dropdown-menu a {
    position: relative;
    overflow: hidden;
    transition: background .2s ease, color .2s ease, transform .2s ease, padding-left .2s ease;
}
.header .dropdown-menu a:hover {
    transform: translateX(3px);
    padding-left: 16px;
}

/* ===== Premium footer hover effects ===== */
footer .footer-grid > div { position: relative; transition: transform .3s ease; }
footer .footer-grid > div:hover { transform: translateY(-4px); }
footer .footer-grid h4 { position: relative; width: fit-content; padding-bottom: 7px; }
footer .footer-grid h4::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px;
    border-radius: 999px; background: #f88240; transition: width .3s ease;
}
footer .footer-grid > div:hover h4::after { width: 100%; }
footer .footer-grid a:not(.logo):not(.social-link) {
    position: relative; width: fit-content; transition: color .25s ease, transform .25s ease;
}
footer .footer-grid a:not(.logo):not(.social-link)::after {
    content: "→"; display: inline-block; margin-left: 5px; opacity: 0;
    transform: translateX(-5px); transition: opacity .25s ease, transform .25s ease; color: #f88240;
}
footer .footer-grid a:not(.logo):not(.social-link):hover { color: #c6531d; transform: translateX(5px); }
footer .footer-grid a:not(.logo):not(.social-link):hover::after { opacity: 1; transform: translateX(0); }
.footer-grid .connect-column .social-link {
    padding: 6px 11px 6px 6px; border-radius: 13px; border: 1px solid transparent;
    transition: transform .28s ease, color .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.footer-grid .connect-column .social-link:hover {
    transform: translateX(7px) translateY(-2px); color: #9b4c27; background: rgba(255,255,255,.72);
    border-color: rgba(248,130,64,.25); box-shadow: 0 10px 25px rgba(21,32,43,.08);
}
.social-link:hover .social-icon {
    transform: scale(1.08) rotate(-6deg); box-shadow: 0 12px 28px rgba(18,31,34,.16); background: #fff3ea;
}
footer .logo img { transition: transform .35s ease, filter .35s ease; }
footer .logo:hover img { transform: translateY(-3px) scale(1.035); filter: drop-shadow(0 8px 12px rgba(21,32,43,.13)); }
.footer-bottom span { transition: color .25s ease; }
.footer-bottom:hover span { color: #7b4d38; }

@media (max-width: 820px) {
    .header .dropdown { padding-bottom: 0; margin-bottom: 0; }
    .header .dropdown::after { display: none; }
    .header .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
    footer .footer-grid > div:hover { transform: none; }
}


/* ===== Footer Legal Links Hover: Privacy Policy & Terms & Conditions ===== */
.footer-bottom a {
    position: relative;
    display: inline-block;
    transition: color .25s ease, transform .25s ease;
}

.footer-bottom a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: #f88240;
    transition: width .3s ease;
}

.footer-bottom a:hover {
    color: #c6531d;
    transform: translateY(-2px);
}

.footer-bottom a:hover::after {
    width: 100%;
}

/* ===== ABOUT US — UNIQUE INNER PAGE ===== */
.about-page {
    padding-top: 90px;
    background: #f5f7f2;
    overflow: hidden;
}
.about-hero {
    position: relative;
    padding: 74px 0 60px;
    background: #111815;
    color: #fff;
}
.about-hero:before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(200, 242, 90, 0.16);
    border-radius: 50%;
    right: -120px;
    top: -250px;
    box-shadow:
        0 0 0 70px rgba(200, 242, 90, 0.035),
        0 0 0 140px rgba(200, 242, 90, 0.025);
}
.breadcrumb {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
    color: #aeb9b3;
    margin-bottom: 44px;
}
.breadcrumb a {
    color: #c95a22;
}
.breadcrumb b {
    font-weight: 400;
    opacity: 0.5;
}
.about-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 80px;
    align-items: end;
    position: relative;
}
.about-kicker {
    /*display: inline-flex;*/
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 18px;
}
.about-kicker:before {
    content: "";
    width: 30px;
    height: 2px;
    background: #c8f25a;
}
.about-hero h1 {
    font-size: 32px;
    max-width: 760px;
}
.about-hero h1 em {
    font-style: normal;
    color: #c95a22;
}
.about-intro {
border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 34px;
}
.about-intro p {
    font-size: 20px;
    line-height: 1.55;
    color: #d6ded9;
    margin: 0;
}
.about-main {
    padding: 90px 0;
}
.about-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 28px;
}
.story-panel {
    min-height: 330px;
    border-radius: 30px;
    padding: 46px;
    position: relative;
    overflow: hidden;
}
.mission-panel {
    background: #79d8cf;
}
.values-panel {
    background: #fff;
    border: 1px solid #dfe5dc;
}
.story-number {
    font:
        800 70px/1 Manrope,
        sans-serif;
    position: absolute;
    right: 34px;
    top: 25px;
    opacity: 0.08;
}
.story-label {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 64px;
}
.story-panel h2 {
    font-size: 25px;
    margin-bottom: 20px;
}
.story-panel p {
    font-size: 18px;
    line-height: 1.7;
    color: #344039;
    max-width: 530px;
}
.business-band {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    background: #18211c;
    border-radius: 30px;
    overflow: hidden;
    margin-top: 28px;
}
.business-title {
    padding: 52px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 390px;
    background: radial-gradient(circle at 15% 85%, rgba(200, 242, 90, 0.18), transparent 45%);
}
.business-title span {
    font-size: 13px;
    color: #c95a22;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.business-title h2 {
    font-size: 42px;
    max-width: 360px;
}
.business-list {
    padding: 34px;
    background: #202b25;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.business-item {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 18px;
    padding: 25px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    align-items: start;
}
.business-item:last-child {
    border-bottom: 0;
}
.business-item i {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eaf8f6;
    color: #111815;
    font-style: normal;
    font-weight: 900;
}
.business-item p {
    margin: 4px 0 0;
    color: #edf2ef;
    font-size: 17px;
}
.about-contact {
    margin-top: 28px;
    border-radius: 30px;
    background: #fff;
    padding: 54px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    border: 1px solid #dfe5dc;
    box-shadow: 0 18px 50px rgba(24, 34, 28, 0.06);
}
.about-contact h2 {
    font-size: 30px;
    margin-bottom: 10px;
}
.about-contact p {
    margin: 0;
    font-size: 17px;
}
.about-contact .btn {
    white-space: nowrap;
}
.about-meta {
    display: none;
}
@media (max-width: 900px) {
    .about-hero-grid,
    .about-story-grid,
    .business-band {
        grid-template-columns: 1fr;
    }
    .about-intro {
        border-left: 0;
        padding-left: 0;
    }
    .story-panel {
        min-height: auto;
    }
    .business-title {
        min-height: 270px;
    }
    .about-contact {
        align-items: flex-start;
        flex-direction: column;
    }
    .about-hero {
        padding-top: 50px;
    }
    .breadcrumb {
        margin-bottom: 30px;
    }
}
@media (max-width: 600px) {
    .about-main {
        padding: 55px 0;
    }
    .story-panel,
    .business-title,
    .business-list,
    .about-contact {
        padding: 30px;
    }
    .about-hero h1 {
        font-size: 44px;
    }
    .about-intro p {
        font-size: 18px;
    }
    .business-title h2,
    .story-panel h2,
    .about-contact h2 {
        font-size: 31px;
    }
}

/* ===== Call Center page: editorial / operations design ===== */
.cc-page {
    background: #f7f9fc;
    color: #10213b;
}
.cc-hero {
    position: relative;
    overflow: hidden;
    padding: 46px 0 92px;
    background: linear-gradient(120deg, #071d3c 0%, #0b315f 58%, #075b73 100%);
    color: #fff;
}
.cc-hero:after {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    right: -100px;
    top: -130px;
    box-shadow:
        0 0 0 80px rgba(255, 255, 255, 0.025),
        0 0 0 160px rgba(255, 255, 255, 0.018);
}
.cc-hero .breadcrumb {
    position: relative;
    z-index: 2;
    color: #dbe9f7;
    margin-bottom: 54px;
}
.cc-hero .breadcrumb a {
    color: #fff;
}
.cc-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    gap: 70px;
    align-items: center;
}
.cc-kicker {
    gap: 9px;
    align-items: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 14px;
    color: #77e0dc;
    margin-bottom: 18px;
}
.cc-kicker:before {
    content: "";
    width: 28px;
    height: 2px;
    background: #77e0dc;
}
.cc-hero h1 {
    font-family: Manrope, sans-serif;
    font-size: clamp(44px, 5.4vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.045em;
    margin: 0 0 24px;
    max-width: 780px;
}
.cc-hero h1 span {
    color: #7de1d8;
}
.cc-lead {
    font-size: 19px;
    line-height: 1.7;
    color: #dbe7f4;
    max-width: 720px;
    margin: 0 0 16px;
}
.cc-copy {
    color: #b8c9dc;
    line-height: 1.75;
    max-width: 720px;
    margin-bottom: 30px;
}
.cc-btn {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    color: #0a2a50;
    padding: 15px 21px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}
.cc-btn i {
    font-style: normal;
    font-size: 18px;
}
.cc-live-card {
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    padding: 28px;
    backdrop-filter: blur(12px);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18);
}
.cc-live-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.cc-live-top b {
    font: 700 17px Manrope;
}
.cc-status {
    font-size: 12px;
    font-weight: 800;
    color: #8ff0c4;
}
.cc-status:before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #63e6a5;
    margin-right: 7px;
    box-shadow: 0 0 0 5px rgba(99, 230, 165, 0.12);
}
.cc-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
}
.cc-stat {
    padding: 18px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.075);
}
.cc-stat strong {
    display: block;
    font: 800 24px Manrope;
    margin-bottom: 5px;
}
.cc-stat span {
    font-size: 12px;
    color: #c4d5e7;
}
.cc-signal {
    display: flex;
    gap: 5px;
    align-items: end;
    height: 55px;
    margin-top: 24px;
}
.cc-signal span {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: rgba(125, 225, 216, 0.7);
}
.cc-signal span:nth-child(1) {
    height: 30%;
}
.cc-signal span:nth-child(2) {
    height: 55%;
}
.cc-signal span:nth-child(3) {
    height: 42%;
}
.cc-signal span:nth-child(4) {
    height: 78%;
}
.cc-signal span:nth-child(5) {
    height: 62%;
}
.cc-signal span:nth-child(6) {
    height: 90%;
}
.cc-signal span:nth-child(7) {
    height: 70%;
}
.cc-section {
    padding: 88px 0;
}
.cc-section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 34px;
}
.cc-section-head h2,
.cc-why h2,
.cc-process h2,
.cc-faq h2 {
    font:800 clamp(30px, 4vw, 35px) Manrope;
    margin: 0;
    letter-spacing: -0.035em;
    color: #0a2345;
}
.cc-section-head p {
    max-width: 440px;
    color: #65748a;
    line-height: 1.7;
}
.cc-handle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.cc-handle {
    background: #fff;
    border: 1px solid #e5ebf2;
    border-radius: 16px;
    padding: 25px 22px;
    min-height: 178px;
    box-shadow: 0 8px 25px rgba(24, 48, 80, 0.04);
    transition: 0.25s;
}
.cc-handle:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(24, 48, 80, 0.09);
    border-color: #bcdedb;
}
.cc-handle .ico {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #fff0e7;
    color: #c95a22;
    font-weight: 900;
    margin-bottom: 22px;
}
.cc-handle p {
    line-height: 1.55;
    margin: 0;
    color: #20344f;
}
.cc-band {
    background: #fff;
}
.cc-why {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 70px;
    align-items: start;
}
.cc-why-left {
    position: sticky;
    top: 120px;
}
.cc-why-left p {
    color: #65748a;
    line-height: 1.7;
}
.cc-reasons {
    display: grid;
    gap: 14px;
}
.cc-reason {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 18px;
    padding: 24px;
    border-radius: 16px;
    background: #f7f9fc;
    border: 1px solid #e5ebf2;
}
.cc-reason b {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #fff0e7;
    color: #c95a22;
    display: grid;
    place-items: center;
    font: 800 16px Manrope;
}
.cc-reason p {
    margin: 2px 0 0;
    line-height: 1.65;
    color: #344860;
}
.cc-process {
    padding: 60px 0px 40px 0px;
    background: #0a2345;
    color: #fff;
}
.cc-process h2 {
    color: #fff;
}
.cc-process-sub {
    color: #b7c9dc;
    margin-top: 10px;
}
.cc-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 42px;
}
.cc-step {
    position: relative;
    padding: 28px 30px 28px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.cc-step:not(:last-child):after {
    content: "";
    position: absolute;
    right: 18px;
    top: -4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #78dfd8;
}
.cc-step span {
    display: block;
    color: #78dfd8;
    font: 800 13px Manrope;
    margin-bottom: 16px;
}
.cc-step p {
    margin: 0;
    color: #e2ebf4;
    line-height: 1.6;
    font-weight: 600;
}
.cc-faq {
    padding: 90px 0;
}
.cc-faq-wrap {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 70px;
}
.cc-faq-list {
    border-top: 1px solid #dce4ee;
}
.cc-faq-item {
    border-bottom: 1px solid #dce4ee;
}
.cc-faq-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 23px 0;
    font: 700 17px Manrope;
    color: #122b4d;
    cursor: pointer;
}
.cc-faq-q span {
    font-size: 22px;
    color: #168c88;
}
.cc-faq-a {
    display: none;
    padding: 0 42px 23px 0;
    color: #5b6d83;
    line-height: 1.7;
}
.cc-faq-item.open .cc-faq-a {
    display: block;
}
.cc-final {
    margin: 0 auto 88px;
    border-radius: 24px;
    background: linear-gradient(120deg, #e7f7f5, #edf3fb);
    padding: 46px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}
.cc-final small {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    font-weight: 800;
    color: #13807c;
    margin-bottom: 9px;
}
.cc-final h2 {
    font: 800 clamp(28px, 3.5vw, 42px) Manrope;
    color: #0a2345;
    margin: 0;
}
.cc-final .cc-btn {
    background: #0a2345;
    color: #fff;
}
@media (max-width: 950px) {
    .cc-hero-grid,
    .cc-why,
    .cc-faq-wrap {
        grid-template-columns: 1fr;
    }
    .cc-live-card {
        max-width: 600px;
    }
    .cc-handle-grid {
        grid-template-columns: 1fr 1fr;
    }
    .cc-why-left {
        position: static;
    }
    .cc-steps {
        grid-template-columns: 1fr 1fr;
    }
    .cc-final {
        align-items: flex-start;
        flex-direction: column;
    }
}
@media (max-width: 620px) {
    .cc-hero {
        padding-bottom: 64px;
    }
    .cc-hero .breadcrumb {
        margin-bottom: 36px;
    }
    .cc-hero h1 {
        font-size: 43px;
    }
    .cc-handle-grid,
    .cc-steps {
        grid-template-columns: 1fr;
    }
    .cc-section,
    .cc-faq {
        padding: 64px 0;
    }
    .cc-section-head {
        align-items: start;
        flex-direction: column;
    }
    .cc-stat-grid {
        grid-template-columns: 1fr;
    }
    .cc-final {
        margin-bottom: 60px;
        padding: 32px 25px;
    }
    .cc-why {
        gap: 35px;
    }
}
/* Call Center v2 — redesigned What We Handle + How It Works */
.cc-handle-section {
    background: linear-gradient(180deg, #f7f9fc 0%, #fff 100%);
}
.cc-handle-layout {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    gap: 76px;
    align-items: start;
}
.cc-handle-intro {
    position: sticky;
    top: 120px;
    padding: 34px;
    border-radius: 24px;
    background: #0a2345;
    color: #fff;
    overflow: hidden;
}
.cc-handle-intro:after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    right: -65px;
    bottom: -75px;
    background: rgba(125, 225, 216, 0.1);
    box-shadow: 0 0 0 35px rgba(125, 225, 216, 0.045);
}
.cc-handle-intro h2 {
    font: 800 clamp(32px, 4vw, 48px) Manrope;
    margin: 0 0 15px;
    letter-spacing: -0.04em;
    color: #fff;
}
.cc-handle-intro > p {
    color: #c5d5e5;
    line-height: 1.75;
    margin: 0 0 34px;
}
.cc-handle-badge {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.cc-handle-badge strong {
    font: 800 42px Manrope;
    color: #7de1d8;
}
.cc-handle-badge span {
    max-width: 120px;
    font-size: 13px;
    line-height: 1.35;
    color: #d6e2ee;
}
.cc-handle-list {
    border-top: 1px solid #dce5ee;
}
.cc-handle-row {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 24px;
    align-items: center;
    padding: 22px 10px;
    border-bottom: 1px solid #dce5ee;
    transition: 0.25s;
}
.cc-handle-row:hover {
    padding-left: 22px;
    background: #f0f8f7;
}
.cc-handle-row span {
    font: 800 12px Manrope;
    color: #13807c;
    letter-spacing: 0.08em;
}
.cc-handle-row p {
    margin: 0;
    color: #20344f;
    font-weight: 650;
    line-height: 1.55;
}
.cc-process-v2 {
    position: relative;
    overflow: hidden;
    background: #071d3c;
}
.cc-process-v2:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 15%, rgba(24, 145, 139, 0.16), transparent 28%);
}
.cc-process-grid {
    position: relative;
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    gap: 80px;
    align-items: start;
}
.cc-process-title {
    position: sticky;
    top: 120px;
}
.cc-process-title .cc-kicker {
    color: #7de1d8;
}
.cc-process-title h2 {
    font: 800 clamp(34px, 4vw, 48px) Manrope;
    color: #fff;
    margin: 0;
    letter-spacing: -0.04em;
}
.cc-process-flow {
    position: relative;
    padding-left: 18px;
}
.cc-process-flow:before {
    content: "";
    position: absolute;
    left: 43px;
    top: 38px;
    bottom: 38px;
    width: 1px;
    background: linear-gradient(#7de1d8, rgba(125, 225, 216, 0.16));
}
.cc-flow-step {
    position: relative;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 25px;
    align-items: center;
    padding: 10px 0 30px;
}
.cc-flow-num {
    position: relative;
    z-index: 2;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #0d3158;
    border: 1px solid rgba(125, 225, 216, 0.45);
    color: #7de1d8;
    font: 800 13px Manrope;
    box-shadow: 0 0 0 8px #071d3c;
}
.cc-flow-step > div:last-child {
    padding: 24px 28px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.11);
    transition: 0.25s;
}
.cc-flow-step:hover > div:last-child {
    transform: translateX(7px);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(125, 225, 216, 0.35);
}
.cc-flow-step small {
    display: block;
    color: #7de1d8;
    font: 800 11px Manrope;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
}
.cc-flow-step p {
    margin: 0;
    color: #edf4fa;
    line-height: 1.6;
}
@media (max-width: 950px) {
    .cc-handle-layout,
    .cc-process-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }
    .cc-handle-intro,
    .cc-process-title {
        position: static;
    }
    .cc-handle-intro {
        max-width: none;
    }
}
@media (max-width: 620px) {
    .cc-handle-intro {
        padding: 28px 24px;
    }
    .cc-handle-row {
        grid-template-columns: 42px 1fr;
        gap: 14px;
        padding: 19px 4px;
    }
    .cc-handle-row:hover {
        padding-left: 8px;
    }
    .cc-process-flow {
        padding-left: 0;
    }
    .cc-process-flow:before {
        left: 27px;
    }
    .cc-flow-step {
        grid-template-columns: 54px 1fr;
        gap: 14px;
    }
    .cc-flow-step > div:last-child {
        padding: 20px 18px;
    }
}
/* Virtual Staffing — unique editorial/team design */
.vs-page {
    font-family: "DM Sans", sans-serif;
    color: #102c3c;
    background: #fff;
}
.vs-page h1,
.vs-page h2,
.vs-page h3 {
    font-family: "Manrope", sans-serif;
}
.vs-hero {
    background: linear-gradient(120deg, #f1faf8 0%, #fff 62%);
    padding: 28px 0 90px;
    border-bottom: 1px solid #dce9e7;
}
.vs-breadcrumb {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
    margin: 10px 0 62px;
    color: #71858d;
}
.vs-breadcrumb a {
    color: #607780;
    text-decoration: none;
}
.vs-breadcrumb b {
    color: #123847;
}
.vs-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 76px;
    align-items: center;
}
.vs-eyebrow,
.vs-heading > span,
.vs-engage-head > span,
.vs-faq-grid > div > span,
.vs-final span {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12px;
    font-weight: 800;
    color: #14877e;
}
.vs-hero h1 {
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.04;
    letter-spacing: -0.045em;
    margin: 16px 0 22px;
    color: #0c3040;
    max-width: 900px;
}
.vs-hero h1 em {
    font-style: normal;
    color: #168b80;
}
.vs-lead {
    font-size: 20px;
    line-height: 1.6;
    color: #34545f;
    max-width: 780px;
}
.vs-copy {
    font-size: 17px;
    line-height: 1.75;
    color: #60747c;
    max-width: 780px;
    margin: 18px 0 30px;
}
.vs-btn {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    padding: 16px 22px;
    border-radius: 8px;
    background: #123f50;
    color: white;
    text-decoration: none;
    font-weight: 700;
}
.vs-btn span {
    font-size: 20px;
}
.vs-team-card {
    background: #0d3544;
    color: white;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 30px 60px rgba(13, 53, 68, 0.16);
    position: relative;
    overflow: hidden;
}
.vs-team-card:after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    right: -70px;
    top: -65px;
}
.vs-team-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #9bc8c4;
}
.vs-team-top b {
    font-size: 28px;
    color: #5ec8bd;
}
.vs-avatar {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #d8f2ee;
    color: #126a65;
    font-size: 38px;
    font-weight: 800;
    margin: 42px 0;
}
.vs-team-lines > div {
    padding: 17px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.vs-team-lines small {
    color: #83aaa9;
    letter-spacing: 0.1em;
}
.vs-team-lines strong {
    text-align: right;
}
.vs-roles {
    padding: 100px 0;
}
.vs-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 42px;
}
.vs-heading h2,
.vs-engage-head h2,
.vs-why h2,
.vs-faq h2 {
    font-size: 42px;
    letter-spacing: -0.035em;
    margin: 8px 0;
}
.vs-role-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #dce7e5;
    border-left: 1px solid #dce7e5;
}
.vs-role-grid article {
    min-height: 180px;
    padding: 28px;
    border-right: 1px solid #dce7e5;
    border-bottom: 1px solid #dce7e5;
    transition: 0.25s;
}
.vs-role-grid article:hover {
    background: #f1faf8;
    transform: translateY(-3px);
}
.vs-role-grid b {
    color: #1a9388;
    font-size: 13px;
}
.vs-role-grid h3 {
    font-size: 19px;
    line-height: 1.45;
    margin-top: 38px;
}
.vs-role-grid h3 small {
    display: block;
    font-family: "DM Sans";
    font-weight: 500;
    color: #698087;
    margin-top: 5px;
}
.vs-role-grid .wide {
    grid-column: span 3;
    min-height: auto;
    display: flex;
    gap: 34px;
    align-items: center;
}
.vs-role-grid .wide h3 {
    margin: 0;
}
.vs-engagement {
    background: #0d3544;
    color: white;
    padding: 100px 0;
}
.vs-engage-head {
    text-align: center;
    margin-bottom: 60px;
}
.vs-engage-head h2 {
    color: white;
}
.vs-engage-head > span {
    color: #74d4ca;
}
.vs-roadmap {
    max-width: 940px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.vs-roadmap article {
    background: #153f4e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 14px;
    display: flex;
    gap: 22px;
}
.vs-roadmap article > span {
    flex: 0 0 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #5cc8bd;
    color: #0d3544;
    font-weight: 800;
}
.vs-roadmap h3 {
    font-size: 18px;
    margin: 2px 0 8px;
    color: white;
}
.vs-roadmap p {
    color: #b7cecf;
    line-height: 1.6;
    margin: 0;
}
.vs-why {
    padding: 100px 0;
    background: #f5faf9;
}
.vs-why-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
    align-items: start;
}
.vs-eyebrow.dark {
    color: #168b80;
}
.vs-why > div > div:first-child > p {
    color: #687f87;
    line-height: 1.7;
}
.vs-benefits {
    background: white;
    border-radius: 18px;
    padding: 8px 30px;
    box-shadow: 0 18px 45px rgba(20, 70, 75, 0.07);
}
.vs-benefits article {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 25px 0;
    border-bottom: 1px solid #e2ecea;
}
.vs-benefits article:last-child {
    border: 0;
}
.vs-benefits i {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #dcf3ef;
    color: #168b80;
    font-style: normal;
    font-weight: 900;
    flex: 0 0 auto;
}
.vs-benefits p {
    margin: 3px 0;
    line-height: 1.6;
    font-weight: 600;
}
.vs-faq {
    padding: 100px 0;
}
.vs-faq-grid {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 80px;
}
.vs-faq-list details {
    border-top: 1px solid #d9e5e3;
    padding: 24px 0;
}
.vs-faq-list details:last-child {
    border-bottom: 1px solid #d9e5e3;
}
.vs-faq-list summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.vs-faq-list summary::-webkit-details-marker {
    display: none;
}
.vs-faq-list summary b {
    color: #168b80;
    font-size: 24px;
}
.vs-faq-list p {
    color: #60777f;
    line-height: 1.75;
    padding-right: 35px;
}
.vs-final {
    background: #168b80;
    color: white;
    padding: 68px 0;
}
.vs-final .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.vs-final h2 {
    font-size: 34px;
    max-width: 720px;
    margin: 10px 0;
}
.vs-final > div > div > span {
    color: #d5f5f1;
}
.vs-btn.light {
    background: white;
    color: #0e4952;
    white-space: nowrap;
}
.vs-btn.light span {
    color: #0e4952;
}
@media (max-width: 900px) {
    .vs-hero-grid,
    .vs-why-grid,
    .vs-faq-grid {
        grid-template-columns: 1fr;
    }
    .vs-hero-grid {
        gap: 45px;
    }
    .vs-role-grid {
        grid-template-columns: 1fr 1fr;
    }
    .vs-role-grid .wide {
        grid-column: span 2;
    }
    .vs-roadmap {
        grid-template-columns: 1fr;
    }
    .vs-final .container {
        align-items: flex-start;
        flex-direction: column;
    }
    .vs-breadcrumb {
        margin-bottom: 40px;
    }
}
@media (max-width: 600px) {
    .vs-hero {
        padding-bottom: 65px;
    }
    .vs-hero h1 {
        font-size: 39px;
    }
    .vs-roles,
    .vs-engagement,
    .vs-why,
    .vs-faq {
        padding: 70px 0;
    }
    .vs-role-grid {
        grid-template-columns: 1fr;
    }
    .vs-role-grid .wide {
        grid-column: auto;
        display: block;
    }
    .vs-role-grid .wide h3 {
        margin-top: 38px;
    }
    .vs-heading h2,
    .vs-engage-head h2,
    .vs-why h2,
    .vs-faq h2 {
        font-size: 34px;
    }
    .vs-team-lines > div {
        display: block;
    }
    .vs-team-lines strong {
        display: block;
        text-align: left;
        margin-top: 6px;
    }
    .vs-roadmap article {
        padding: 24px 20px;
    }
    .vs-final h2 {
        font-size: 28px;
    }
}

/* Virtual Staffing breadcrumb navigation */
.vs-breadcrumb-bar {
    background: #fff;
    border-top: 1px solid #edf2f1;
    border-bottom: 1px solid #dfe9e7;
    box-shadow: 0 4px 16px rgba(16, 44, 60, 0.035);
}
.vs-breadcrumb-bar .vs-breadcrumb {
    margin: 0;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14px;
    color: #7a8c92;
}
.vs-breadcrumb-bar .vs-breadcrumb a {
    color: #365c67;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}
.vs-breadcrumb-bar .vs-breadcrumb a:hover {
    color: #168b80;
}
.vs-breadcrumb-bar .vs-breadcrumb span:not(.current) {
    color: #9aabaa;
}
.vs-breadcrumb-bar .vs-breadcrumb .current {
    color: #168b80;
    font-weight: 700;
}
.vs-hero {
    padding-top: 72px;
}
@media (max-width: 600px) {
    .vs-breadcrumb-bar .vs-breadcrumb {
        min-height: 48px;
        font-size: 13px;
        gap: 8px;
    }
    .vs-hero {
        padding-top: 52px;
    }
}

/* Virtual Staffing hero image */
.vs-hero-image {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 30px 65px rgba(13, 53, 68, 0.18);
    min-height: 470px;
    background: #eaf3f4;
}
.vs-hero-image img {
    width: 100%;
    height: 100%;
    min-height: 470px;
    object-fit: cover;
    display: block;
}
.vs-image-badge {
    position: absolute;
    left: 22px;
    bottom: 22px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    padding: 15px 18px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(13, 53, 68, 0.15);
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #0d3544;
}
.vs-image-badge strong {
    font-family: "Manrope", sans-serif;
    font-size: 15px;
}
.vs-image-badge span {
    font-size: 12px;
    color: #607780;
}
@media (max-width: 900px) {
    .vs-hero-image,
    .vs-hero-image img {
        min-height: 390px;
    }
    .vs-hero-image img {
        max-height: 520px;
    }
}
@media (max-width: 600px) {
    .vs-hero-image,
    .vs-hero-image img {
        min-height: 300px;
    }
    .vs-image-badge {
        left: 14px;
        bottom: 14px;
        right: 14px;
    }
}

/* Virtual Staffing hero — alternate editorial design */
.vs2-hero {
    position: relative;
    min-height: 700px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #092f43;
    color: #fff;
}
.vs2-bg {
    position: absolute;
    inset: 0 0 0 46%;
    z-index: 0;
}
.vs2-bg:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #092f43 0%, rgba(9, 47, 67, 0.62) 28%, rgba(9, 47, 67, 0.05) 70%);
}
.vs2-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.vs2-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #092f43 0%, #092f43 39%, rgba(9, 47, 67, 0.82) 50%, rgba(9, 47, 67, 0) 76%);
    z-index: 1;
}
.vs2-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 700px;
    padding-top: 70px;
    padding-bottom: 110px;
}
.vs2-content {
    max-width: 80%;
}
.vs2-kicker {
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 12px;
    font-weight: 800;
    color: #77d8ce;
    margin-bottom: 22px;
}
.vs2-kicker:before {
    content: "";
    width: 38px;
    height: 2px;
    background: #77d8ce;
}
.vs2-content h1 {
font-family: "Manrope", sans-serif;
    font-size: 45px;
    line-height: 50px;
    margin: 0 0 24px;
    color: #fff;
}
.vs2-content h1 span {
    display: block;
    color: #d85f20;
}
.vs2-lead {
    font-size: 20px;
    line-height: 1.55;
    color: #eefafa;
    max-width: 85%;
    margin: 0 0 17px;
}
.vs2-copy {
    font-size: 16px;
    line-height: 1.75;
    color: #bcd2d9;
    max-width: 85%;
    margin: 0 0 30px;
    padding-top: 25px;
}
.vs2-btn {
    display: inline-flex;
    align-items: center;
    gap: 25px;
    background: #fff;
    color: #0b3b4d;
    text-decoration: none;
    padding: 17px 24px;
    border-radius: 6px;
    font-weight: 800;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.15);
    transition: 0.25s;
}
.vs2-btn:hover {
    transform: translateY(-3px);
}
.vs2-btn b {
    font-size: 20px;
    color: #168b80;
}
.vs2-stats {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 760px;
    background: #fff;
    color: #123847;
    box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.09);
}
.vs2-stats div {
    padding: 22px 28px;
    border-right: 1px solid #dce9e7;
}
.vs2-stats div:last-child {
    border-right: 0;
}
.vs2-stats strong {
    display: block;
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    color: #0d4050;
    margin-bottom: 3px;
}
.vs2-stats span {
    font-size: 13px;
    color: #71868c;
}
.vs2-hero + .vs-roles {
    padding-top: 115px;
}
@media (max-width: 900px) {
    .vs2-hero {
        min-height: auto;
    }
    .vs2-bg {
        inset: 0;
    }
    .vs2-bg:after {
        display: none;
    }
    .vs2-overlay {
        background: linear-gradient(90deg, rgba(7, 42, 59, 0.97), rgba(7, 42, 59, 0.84) 65%, rgba(7, 42, 59, 0.55));
    }
    .vs2-wrap {
        min-height: 680px;
        padding-top: 75px;
    }
    .vs2-content {
        max-width: 680px;
    }
    .vs2-stats {
        max-width: calc(100% - 40px);
    }
}
@media (max-width: 600px) {
    .vs2-wrap {
        min-height: 760px;
        padding-top: 58px;
        padding-bottom: 210px;
    }
    .vs2-content h1 {
        font-size: 40px;
    }
    .vs2-lead {
        font-size: 18px;
    }
    .vs2-stats {
        grid-template-columns: 1fr;
        left: 20px;
        right: 20px;
        max-width: none;
    }
    .vs2-stats div {
        padding: 13px 20px;
        border-right: 0;
        border-bottom: 1px solid #dce9e7;
    }
    .vs2-stats div:last-child {
        border-bottom: 0;
    }
    .vs2-hero + .vs-roles {
        padding-top: 75px;
    }
}


.pricing-table-wrap {
    width: 100%;
    margin: 40px auto;
    font-family: Arial, sans-serif;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.10);
    border: 1px solid #e8edf4;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
}

.pricing-table thead {
    background: #0f2747;
}

.pricing-table th {
    padding: 22px 25px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    letter-spacing: 0.3px;
}

.pricing-table td {
    padding: 21px 25px;
    color: #536273;
    font-size: 15px;
    line-height: 1.6;
    border-bottom: 1px solid #edf0f4;
}

.pricing-table tbody tr {
    transition: all 0.3s ease;
}

.pricing-table tbody tr:nth-child(even) {
    background: #f8fafc;
}

.pricing-table tbody tr:hover {
    background: #eef6ff;
}

.pricing-table tbody tr:last-child td {
    border-bottom: none;
}

.service-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #172b4d;
}

.service-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #e8f2ff;
    font-size: 17px;
}

.quote-badge {
    display: inline-block;
    padding: 8px 14px;
    background: #eaf7f1;
    color: #16845b;
    font-size: 13px;
    font-weight: 600;
    border-radius: 30px;
    white-space: nowrap;
}

@media (max-width: 768px) {

    .pricing-table-wrap {
        border-radius: 12px;
        overflow-x: auto;
    }

    .pricing-table {
        min-width: 700px;
    }

    .pricing-table th,
    .pricing-table td {
        padding: 17px 18px;
    }
}
/* Contact + consultation pages */
.contact-hero-new,.consult-hero{min-height:720px;padding:145px 0 90px;background:linear-gradient(135deg,#071a35 0%,#0c2d58 62%,#0b4a7a 100%);color:#fff;position:relative;overflow:hidden}.contact-hero-new:after,.consult-hero:after{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(255,255,255,.09);border-radius:50%;right:-170px;top:100px;box-shadow:0 0 0 90px rgba(255,255,255,.025),0 0 0 180px rgba(255,255,255,.018)}.contact-hero-new .container,.consult-hero .container{position:relative;z-index:1}.contact-hero-new .breadcrumb,.consult-crumb{margin-bottom:75px;color:#bcd0e8}.contact-hero-new .breadcrumb a,.consult-crumb a{color:#fff}.contact-grid-new{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.contact-eyebrow,.consult-kicker{font-size:12px;font-weight:800;letter-spacing:2.2px;color:#64b5ff}.contact-grid-new h1,.consult-copy h1{font-family:Manrope,sans-serif;font-size:64px;line-height:1.04;margin:18px 0 24px;letter-spacing:-2.5px}.contact-grid-new h1 em,.consult-copy h1 em{font-style:normal;color:#55adff}.contact-grid-new p,.consult-copy>p{max-width:570px;color:#c4d2e2;font-size:18px;line-height:1.8}.contact-channel-panel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:26px;padding:16px;backdrop-filter:blur(10px)}.contact-channel{display:grid;grid-template-columns:54px 1fr auto;gap:20px;align-items:center;padding:28px 24px;color:#fff;border-radius:17px;text-decoration:none;transition:.25s}.contact-channel+ .contact-channel{border-top:1px solid rgba(255,255,255,.1)}.contact-channel:hover{background:#fff;color:#102b4e;transform:translateX(5px)}.channel-no{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#1689ee;color:#fff;font-weight:800}.contact-channel small{display:block;letter-spacing:1.5px;font-size:10px;opacity:.65;margin-bottom:7px}.contact-channel strong{font-size:19px}.contact-channel>b{font-size:22px}.consult-layout{display:grid;grid-template-columns:.88fr 1.12fr;gap:75px;align-items:center}.consult-points{margin-top:38px;display:grid;gap:12px}.consult-points div{display:flex;gap:16px;align-items:center;color:#dce8f5}.consult-points b{color:#59b3ff;font-size:12px}.consult-form-card{background:#fff;color:#172b4d;border-radius:28px;padding:38px;box-shadow:0 30px 80px rgba(0,0,0,.22)}.form-head{margin-bottom:26px}.form-head small{color:#1689ee;font-weight:800;letter-spacing:1.8px}.form-head h2{font-family:Manrope,sans-serif;font-size:30px;margin:8px 0}.consult-form-card form{display:grid;gap:18px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.consult-form-card label{display:grid;gap:8px;font-size:13px;font-weight:700;color:#334b67}.consult-form-card input,.consult-form-card select,.consult-form-card textarea{width:100%;border:1px solid #dbe4ee;background:#f8fafc;border-radius:12px;padding:14px 15px;font:inherit;color:#172b4d;outline:none}.consult-form-card input:focus,.consult-form-card select:focus,.consult-form-card textarea:focus{border-color:#1689ee;box-shadow:0 0 0 3px rgba(22,137,238,.1)}.consult-submit{border:0;cursor:pointer;justify-content:center}.form-thanks{background:#eaf8f1;color:#167653;padding:13px 15px;border-radius:10px;font-size:14px}.footer-bottom a{color:inherit;text-decoration:none}@media(max-width:900px){.contact-grid-new,.consult-layout{grid-template-columns:1fr;gap:45px}.contact-grid-new h1,.consult-copy h1{font-size:48px}.contact-hero-new,.consult-hero{padding-top:120px}.contact-hero-new .breadcrumb,.consult-crumb{margin-bottom:45px}}@media(max-width:600px){.contact-grid-new h1,.consult-copy h1{font-size:39px}.form-row{grid-template-columns:1fr}.consult-form-card{padding:24px 18px;border-radius:20px}.contact-channel{grid-template-columns:44px 1fr auto;padding:22px 14px;gap:12px}.channel-no{width:40px;height:40px}.contact-channel strong{font-size:15px}.contact-hero-new,.consult-hero{min-height:auto;padding-bottom:65px}}