/* Missing utilities + shared page patterns */
/* Home hero + header (accent = site primary #ff6600) */
.site-header {
    z-index: 100;
    transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease
}

.site-header--solid,
.site-header.scrolled {
    background: hsla(0, 0%, 100%, .92);
    backdrop-filter: blur(4px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05)
}

.site-header--hero:not(.scrolled) {
    background: hsla(0, 0%, 100%, .85);
    box-shadow: none;
    backdrop-filter: blur(6px)
}

.site-header--hero:not(.scrolled) .site-header__link {
    color: #5c5c5c
}

.site-header--hero:not(.scrolled) .site-header__link:hover,
.site-header--hero:not(.scrolled) .site-header__link.is-active {
    color: #ff6600
}

.site-header--hero:not(.scrolled) #menu-toggle {
    color: #ff6600
}

.site-header__link {
    color: #5c5c5c;
    border-bottom: 2px solid transparent
}

.site-header__link:hover {
    color: #ff6600
}

.site-header__link.is-active {
    color: #ff6600;
    border-bottom-color: #ff6600
}

.site-header__apps {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: .55rem;
    border: 1px solid rgba(255, 102, 0, .4);
    color: #ff6600;
    background: rgba(255, 255, 255, 0.08);
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease
}

.site-header__apps:hover {
    background: #ff6600;
    color: #fff;
    box-shadow: 0 0 18px rgba(255, 102, 0, .45)
}

.site-header__cta {
    border-radius: .65rem;
    padding: .7rem 1.4rem;
    min-height: 48px;
    box-shadow: 0 0 24px rgba(255, 102, 0, .5)
}

.site-header__cta:hover {
    box-shadow: 0 0 32px rgba(255, 102, 0, .65)
}

.site-header__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    min-height: 5rem;
    gap: .75rem
}

.site-header__logo {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 48px
}

.site-header__logo-img {
    height: 2.5rem;
    width: auto;
    max-width: 10.5rem;
    object-fit: contain
}

.site-header__menu-toggle {
    margin-left: auto;
    flex-shrink: 0
}

.site-header__links,
.site-header__actions {
    display: none
}

@media (min-width:1024px) {
    .site-header__menu-toggle {
        display: none !important
    }

    .site-header__nav {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 1rem
    }

    .site-header__links {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 0
    }

    .site-header__links ul {
        flex-wrap: nowrap
    }

    .site-header__link,
    .site-header__link-btn {
        white-space: nowrap
    }

    .site-header__actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: nowrap;
        gap: .75rem
    }

    #mobile-menu {
        display: none !important
    }
}

@media (max-width:1023px) {
    #mobile-menu:not(.hidden) {
        max-height: calc(100vh - 5rem);
        max-height: calc(100dvh - 5rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px))
    }

    body.is-menu-open {
        overflow: hidden
    }
}

@media (min-width:1024px) and (max-width:1279px) {
    .site-header__links ul {
        column-gap: .85rem
    }

    .site-header__cta {
        padding: .6rem 1.05rem
    }
}

.hero-showcase {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7.5rem 1.25rem 5.75rem;
    overflow: hidden;
    background: radial-gradient(ellipse 70% 50% at 50% 38%, #ffffff 0%, #fafafa 55%, #f5f5f5 100%);
    color: #1a1a1a;
    text-align: center
}

.hero-showcase__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, .04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 42%, #000 20%, transparent 75%);
    pointer-events: none
}

.hero-showcase__glow {
    position: absolute;
    inset: 20% 18% auto;
    height: 40%;
    background: radial-gradient(circle, rgba(255, 102, 0, .08) 0%, transparent 68%);
    pointer-events: none
}

.hero-showcase__beam {
    position: absolute;
    left: 0;
    right: 0;
    top: 46%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 102, 0, .12) 15%, rgba(255, 102, 0, .45) 50%, rgba(255, 102, 0, .12) 85%, transparent 100%);
    box-shadow: 0 0 18px rgba(255, 102, 0, .2);
    pointer-events: none;
    animation: hero-beam-pulse 4s ease-in-out infinite
}

.hero-showcase__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
    opacity: .35
}

.hero-showcase__orb--1 {
    width: 280px;
    height: 280px;
    top: 18%;
    left: 8%;
    background: rgba(255, 102, 0, .12);
    animation: hero-orb-float 8s ease-in-out infinite
}

.hero-showcase__orb--2 {
    width: 220px;
    height: 220px;
    bottom: 22%;
    right: 10%;
    background: rgba(255, 102, 0, .08);
    animation: hero-orb-float 10s ease-in-out infinite reverse
}

@keyframes hero-beam-pulse {

    0%,
    100% {
        opacity: .55
    }

    50% {
        opacity: 1
    }
}

@keyframes hero-orb-float {

    0%,
    100% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(12px, -18px)
    }
}

.hero-showcase__inner {
    position: relative;
    z-index: 1;
    max-width: 54rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center
}

.hero-showcase__badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1.75rem;
    padding: .5rem 1.15rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 102, 0, .4);
    background: rgba(255, 102, 0, .12);
    color: #ff6600;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase
}

.hero-showcase__title {
    margin: 0 0 1.5rem;
    font-size: clamp(2.35rem, 6.8vw, 4.6rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.025em;
    color: #111
}

.hero-showcase__title-line {
    display: block
}

.hero-showcase__title-accent {
    color: #ff6600
}

.hero-showcase__title-line--rotate {
    min-height: 1.15em
}

.hero-showcase__rotate {
    position: relative;
    display: inline-grid;
    place-items: center;
    min-width: 11ch;
    height: 1.15em
}

.hero-showcase__rotate-word {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
    white-space: nowrap
}

.hero-showcase__rotate-word.is-active {
    opacity: 1;
    transform: translateY(0)
}

.hero-showcase__reveal {
    opacity: 1;
    transform: none;
    animation: none
}

@keyframes hero-reveal {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.hero-showcase__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    margin-top: 2rem
}

.hero-showcase__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .85rem 1.65rem;
    border-radius: .65rem;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease
}

.hero-showcase__btn--primary {
    background: #ff6600;
    color: #fff;
    box-shadow: 0 0 28px rgba(255, 102, 0, .45)
}

.hero-showcase__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 36px rgba(255, 102, 0, .6)
}

.hero-showcase__btn--ghost {
    border: 1px solid rgba(0, 0, 0, .15);
    color: #333;
    background: #fff
}

.hero-showcase__btn--ghost:hover {
    border-color: rgba(255, 102, 0, .6);
    color: #ff6600;
    background: rgba(255, 102, 0, .06)
}

.hero-showcase__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .65rem 1.25rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b7280
}

.hero-showcase__stats li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .85rem;
    border-radius: 9999px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04)
}

.hero-showcase__stats strong {
    color: #ff6600;
    font-weight: 700
}

.hero-showcase__lead {
    margin: 0;
    max-width: 36rem;
    color: #6b7280;
    font-size: clamp(.95rem, 1.8vw, 1.05rem);
    line-height: 1.75
}

.hero-showcase__lead a {
    color: #ff6600;
    text-decoration: underline;
    text-underline-offset: 2px;
    display: inline-flex;
    align-items: center;
    min-height: 48px
}

.hero-showcase__lead a:hover {
    color: #ff8533
}

.hero-showcase__scroll {
    position: absolute;
    left: 1.5rem;
    bottom: 4.75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    min-width: 48px;
    min-height: 48px;
    border-radius: .6rem;
    border: 1px solid rgba(255, 102, 0, .45);
    color: #ff6600;
    background: #fff;
    box-shadow: 0 4px 16px rgba(255, 102, 0, .2);
    transition: transform .2s ease, box-shadow .2s ease
}

.hero-showcase__scroll:hover {
    transform: translateY(3px);
    box-shadow: 0 6px 22px rgba(255, 102, 0, .35)
}

.hero-showcase__ticker {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
    padding: .9rem 0;
    border-top: 1px solid rgba(0, 0, 0, .06);
    background: #fff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .04)
}

.hero-showcase__ticker-track {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: max-content;
    white-space: nowrap;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #4b5563;
    animation: hero-ticker 36s linear infinite
}

.hero-showcase__ticker-track .fas,
.hero-showcase__ticker-track > span[aria-hidden] {
    color: #ff6600;
    font-size: .75rem
}

@keyframes hero-ticker {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

@media (max-width:767px) {
    .hero-showcase {
        padding: 6.5rem 1rem 5.25rem;
        min-height: 92vh
    }

    .hero-showcase__beam {
        top: 44%
    }

    .hero-showcase__actions {
        flex-direction: column;
        width: 100%;
        max-width: 18rem
    }

    .hero-showcase__btn {
        width: 100%;
        min-height: 48px
    }

    .hero-showcase__stats {
        gap: .5rem
    }

    .hero-showcase__stats li {
        font-size: .75rem;
        padding: .65rem .9rem;
        min-height: 48px
    }

    .hero-showcase__scroll {
        left: 1rem;
        bottom: 4.4rem;
        width: 3rem;
        height: 3rem
    }

    .hero-showcase__orb,
    .hero-showcase__beam {
        display: none
    }

    .hero-showcase__ticker-track,
    .hero-showcase__orb--1,
    .hero-showcase__orb--2,
    .hero-showcase__beam {
        animation: none
    }
}

@media (prefers-reduced-motion:reduce) {

    .hero-showcase__ticker-track,
    .hero-showcase__beam,
    .hero-showcase__orb--1,
    .hero-showcase__orb--2 {
        animation: none
    }

    .hero-showcase__reveal {
        opacity: 1;
        transform: none;
        animation: none
    }

    .hero-showcase__rotate-word {
        position: static;
        transform: none;
        opacity: 0;
        display: none
    }

    .hero-showcase__rotate-word.is-active,
    .hero-showcase__rotate-word:first-child {
        opacity: 1;
        display: block
    }
}

.border-red-500 {
    border-color: #ef4444
}

.text-red-500 {
    color: #ef4444
}

.fa-spin {
    animation: fa-spin 1s linear infinite
}

@keyframes fa-spin {
    to {
        transform: rotate(360deg)
    }
}

.cta-banner {
    padding: 4rem 0;
    background: linear-gradient(rgba(255, 102, 0, .9), rgba(255, 102, 0, .7)), #ff6600 center/cover no-repeat;
    color: #fff;
    text-align: center
}

.cta-banner h2 {
    color: #fff;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    margin-bottom: 1.5rem
}

.cta-banner p {
    color: #fff;
    max-width: 800px;
    margin: 0 auto 2rem
}

.cta-banner .btn {
    border: 1px solid #fff;
    color: #fff;
    background: transparent
}

.cta-banner .btn:hover {
    background: #fff;
    color: #ff6600
}

.cta-banner--default {
    background-image: linear-gradient(rgba(255, 102, 0, .9), rgba(255, 102, 0, .7)), url(/images/cta-bg.jpg)
}

.testimonials-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: .5rem 0 1.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.testimonials-track::-webkit-scrollbar {
    display: none
}

.testimonial-card {
    flex: 0 0 88%;
    scroll-snap-align: start;
    min-width: 0
}

@media(min-width:768px) {
    .testimonial-card {
        flex-basis: 46%
    }
}

@media(min-width:1024px) {
    .testimonial-card {
        flex-basis: 31%
    }
}

.testimonial-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    margin-right: 1rem;
    flex-shrink: 0;
    background: #ff6600;
    color: #fff;
    box-shadow: 0 4px 6px rgba(255, 102, 0, .2)
}

/* ===== Off-canvas panels (project & career details) ===== */
.offcanvas {
    position: fixed;
    inset: 0;
    z-index: 99998;
    pointer-events: none;
    visibility: hidden
}

.offcanvas.is-open {
    pointer-events: auto;
    visibility: visible
}

.offcanvas__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .5);
    opacity: 0;
    transition: opacity .3s ease
}

.offcanvas.is-open .offcanvas__backdrop {
    opacity: 1
}

.offcanvas__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(100%, 42rem);
    max-width: 100%;
    height: 100%;
    background: var(--cp-bg, #f8f9fb);
    box-shadow: -10px 0 40px rgba(0, 0, 0, .14);
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.offcanvas__panel--wide {
    width: min(100%, 56rem)
}

.offcanvas__panel--narrow {
    width: min(100%, 32rem)
}

.offcanvas.is-open .offcanvas__panel {
    transform: translateX(0)
}

.offcanvas__toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.25rem;
    background: hsla(0, 0%, 100%, .95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cp-border, #e5e7eb);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04)
}

.offcanvas__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--cp-text, #111827)
}

.offcanvas__close {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--cp-border, #e5e7eb);
    border-radius: 50%;
    background: #fff;
    color: var(--cp-muted, #6b7280);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease, border-color .2s ease
}

.offcanvas__close:hover {
    background: rgba(255, 102, 0, .1);
    border-color: var(--cp-accent, #ff6600);
    color: var(--cp-accent, #ff6600)
}

.offcanvas__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch
}

.offcanvas__body--form {
    padding: 1.25rem
}

.offcanvas__body .cp-hero--compact {
    padding-top: 2rem
}

.offcanvas__loading,
.offcanvas__error {
    padding: 4rem 1.5rem;
    text-align: center;
    color: var(--cp-muted, #6b7280)
}

.cd-apply-form {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.cd-apply-form__field label {
    display: block;
    margin-bottom: .35rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--cp-text, #111827)
}

.cd-apply-form__input,
.cd-apply-form__file {
    width: 100%;
    padding: .75rem 1rem;
    border: 1px solid var(--cp-border, #e5e7eb);
    border-radius: .65rem;
    background: #fff;
    color: var(--cp-text, #111827);
    font-size: .95rem;
    font-family: inherit;
    transition: border-color .2s ease, box-shadow .2s ease
}

.cd-apply-form__input:focus,
.cd-apply-form__file:focus {
    outline: none;
    border-color: rgba(255, 102, 0, .55);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, .12)
}

.cd-apply-form__input.is-readonly {
    background: var(--cp-bg, #f8f9fb);
    color: var(--cp-muted, #6b7280)
}

.cd-apply-form__input.is-invalid,
.cd-apply-form__file.is-invalid {
    border-color: #ef4444
}

.cd-apply-form__error {
    display: block;
    margin-top: .35rem;
    font-size: .82rem;
    color: #ef4444
}

.cd-apply-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    padding-top: .5rem
}

@media (max-width:767px) {
    .offcanvas__panel,
    .offcanvas__panel--wide,
    .offcanvas__panel--narrow {
        width: 100%
    }

    .offcanvas__toolbar {
        padding: .75rem 1rem
    }

    .offcanvas__title {
        font-size: .95rem
    }

    .cd-apply-form__actions .bl-btn {
        flex: 1 1 100%;
        justify-content: center
    }
}

@media (prefers-reduced-motion:reduce) {
    .offcanvas__panel,
    .offcanvas__backdrop {
        transition: none
    }
}

.newsletter-toast-wrap {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.newsletter-toast {
    min-width: 260px;
    max-width: 360px;
    border-radius: .5rem;
    color: #fff;
    padding: .75rem 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
    animation: newsletter-slide-in .25s ease-out
}

.newsletter-toast-success {
    background: #16a34a
}

.newsletter-toast-error {
    background: #dc2626
}

@keyframes newsletter-slide-in {
    from {
        opacity: 0;
        transform: translateY(-8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.animate-slide-down {
    animation: slideDown .3s ease-out forwards
}

/* ===== Home page body (hero untouched) ===== */
.home-kicker {
    margin: 0 0 .75rem;
    color: #ff6600;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase
}

.home-heading {
    margin: 0 0 1rem;
    color: #111;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em
}

.home-lead,
.home-copy {
    margin: 0 0 1rem;
    color: #6b7280;
    font-size: 1.05rem;
    line-height: 1.7
}

.home-copy a,
.home-lead a {
    color: #ff6600;
    text-decoration: underline;
    text-underline-offset: 2px;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 .1rem;
    vertical-align: middle
}

.home-section-head {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 3rem
}

.home-section-head .home-lead {
    margin-bottom: 0
}

.btn,
.home-btn {
    border-radius: .65rem;
    min-height: 48px
}

.home-about {
    background: #fff
}

.home-about__grid {
    display: grid;
    gap: 2.5rem;
    align-items: center
}

@media (min-width:768px) {
    .home-about__grid {
        grid-template-columns: 1fr 1fr;
        gap: 3.5rem
    }
}

.home-about__media {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    background: #f3f4f6
}

.home-about__media::after {
    content: "";
    position: absolute;
    inset: auto -8% -8% auto;
    width: 42%;
    height: 42%;
    border-radius: 1rem;
    border: 2px solid rgba(255, 102, 0, .35);
    z-index: 0;
    pointer-events: none
}

.home-about__media img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto
}

.home-about__content .home-btn {
    margin-top: .5rem
}

.home-stats {
    background: linear-gradient(180deg, #fff7f0 0%, #fff 100%)
}

.home-stats__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr
}

@media (min-width:640px) {
    .home-stats__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem
    }
}

.home-stats__item {
    text-align: center;
    padding: 1.75rem 1.25rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgba(255, 102, 0, .12);
    box-shadow: 0 8px 24px rgba(255, 102, 0, .06)
}

.home-stats__item .stat-number {
    margin-bottom: .35rem;
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 800;
    color: #ff6600;
    line-height: 1
}

.home-stats__label {
    color: #4b5563;
    font-weight: 600;
    font-size: .95rem
}

.home-process {
    background: #fafafa
}

.home-process__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr
}

@media (min-width:768px) {
    .home-process__grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 1rem
    }
}

.home-process__step {
    position: relative;
    text-align: center;
    padding: 1.5rem 1rem 1.35rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid #eee
}

.home-process__num {
    position: absolute;
    top: .85rem;
    right: .95rem;
    font-size: .75rem;
    font-weight: 800;
    color: rgba(255, 102, 0, .45);
    letter-spacing: .06em
}

.home-process__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: .85rem;
    border-radius: .85rem;
    background: rgba(255, 102, 0, .1);
    color: #ff6600;
    font-size: 1.2rem
}

.home-process__step h3 {
    margin: 0 0 .4rem;
    color: #111;
    font-size: 1.05rem;
    font-weight: 700
}

.home-process__step p {
    margin: 0;
    color: #6b7280;
    font-size: .9rem;
    line-height: 1.55
}

.home-why {
    background: #fff
}

.home-why__grid {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: 1fr
}

@media (min-width:640px) {
    .home-why__grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:1024px) {
    .home-why__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.35rem
    }
}

.home-feature {
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid #eee;
    background: #fff;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease
}

.home-feature:hover {
    border-color: rgba(255, 102, 0, .35);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .06)
}

.home-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: .75rem;
    background: rgba(255, 102, 0, .1);
    color: #ff6600;
    font-size: 1.15rem
}

.home-feature h3 {
    margin: 0 0 .45rem;
    color: #111;
    font-size: 1.1rem;
    font-weight: 700
}

.home-feature p {
    margin: 0;
    color: #6b7280;
    line-height: 1.6;
    font-size: .95rem
}

.home-services {
    background: #fafafa
}

.home-services__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr
}

@media (min-width:640px) {
    .home-services__grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:1024px) {
    .home-services__grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

.home-service {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid #eee;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
}

.home-service:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 102, 0, .3);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .07)
}

.home-service__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f3f4f6
}

.home-service__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease
}

picture {
    display: contents
}

.home-service:hover .home-service__media img {
    transform: scale(1.04)
}

.home-service__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem
}

.home-service__body h3 {
    margin: 0 0 .5rem;
    color: #111;
    font-size: 1.05rem;
    font-weight: 700
}

.home-service__body p {
    margin: 0 0 1rem;
    color: #6b7280;
    font-size: .9rem;
    line-height: 1.55;
    flex: 1
}

.home-service__link {
    color: #ff6600;
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 48px
}

.home-service__link:hover {
    text-decoration: underline
}

.home-testimonials {
    background: #fff
}

.home-quote {
    margin: 0 .5rem;
    padding: 1.5rem;
    height: 100%;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .04)
}

.home-quote__top {
    display: flex;
    align-items: center;
    margin-bottom: .85rem
}

.home-quote__top cite {
    display: block;
    font-style: normal;
    font-weight: 700;
    color: #111;
    font-size: 1.05rem
}

.home-quote__top p {
    margin: .15rem 0 0;
    color: #ff6600;
    font-size: .875rem;
    font-weight: 600
}

.home-quote__stars {
    display: flex;
    gap: .2rem;
    margin-bottom: .75rem;
    color: #fbbf24
}

.home-quote > p {
    margin: 0;
    color: #6b7280;
    line-height: 1.65
}

.home-faq {
    background: #fafafa
}

.home-faq__grid {
    display: grid;
    gap: 1rem;
    max-width: 56rem;
    margin: 0 auto
}

@media (min-width:768px) {
    .home-faq__grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.15rem
    }
}

.home-faq__item {
    padding: 1.35rem 1.4rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid #eee;
    border-left: 3px solid #ff6600
}

.home-faq__item h3 {
    margin: 0 0 .55rem;
    color: #111;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35
}

.home-faq__item p {
    margin: 0;
    color: #6b7280;
    font-size: .95rem;
    line-height: 1.6
}

.home-tech {
    background: #fff
}

.home-tech__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

@media (min-width:768px) {
    .home-tech__grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 1.15rem
    }
}

.home-tech__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5.5rem;
    padding: 1rem;
    border-radius: .9rem;
    border: 1px solid #eee;
    background: #fafafa;
    transition: border-color .2s ease, background-color .2s ease
}

.home-tech__item:hover {
    border-color: rgba(255, 102, 0, .35);
    background: #fff
}

.home-tech__item img {
    max-height: 3.25rem;
    width: auto;
    max-width: 100%;
    object-fit: contain
}

.home-locations {
    background: #fafafa
}

.home-locations__grid {
    display: grid;
    gap: 1.15rem
}

@media (min-width:768px) {
    .home-locations__grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.home-location {
    display: block;
    padding: 1.5rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid #eee;
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease
}

.home-location:hover {
    border-color: rgba(255, 102, 0, .4);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .06)
}

.home-location h3 {
    margin: 0 0 .5rem;
    color: #ff6600;
    font-size: 1.05rem;
    font-weight: 700
}

.home-location p {
    margin: 0 0 1rem;
    color: #6b7280;
    font-size: .9rem;
    line-height: 1.55
}

.home-location span {
    color: #111;
    font-weight: 700;
    font-size: .875rem
}

.home-locations__cta {
    text-align: center;
    margin-top: 2rem
}

.home-cta-band {
    padding: 3.5rem 0;
    background: linear-gradient(135deg, #ff6600 0%, #ff8533 100%);
    color: #fff
}

.home-cta-band__inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: flex-start;
    justify-content: space-between
}

@media (min-width:768px) {
    .home-cta-band__inner {
        flex-direction: row;
        align-items: center
    }
}

.home-cta-band h2 {
    margin: 0 0 .4rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: #fff
}

.home-cta-band p {
    margin: 0;
    color: rgba(255, 255, 255, .92);
    max-width: 36rem
}

.home-cta-band .home-btn {
    background: #fff;
    color: #ff6600;
    box-shadow: none
}

.home-cta-band .home-btn:hover {
    background: #fff7f0;
    color: #e65c00
}

/* ===== Site footer ===== */
.site-footer {
    background: #5c5c5c;
    color: #e5e7eb;
    padding: 4rem 0 0;
    border-top: 1px solid rgba(0, 0, 0, .12)
}

.site-footer__top {
    display: grid;
    gap: 2.5rem;
    padding-bottom: 3rem
}

@media (min-width:768px) {
    .site-footer__top {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 2rem
    }
}

@media (min-width:1024px) {
    .site-footer__top {
        grid-template-columns: 1.6fr .9fr 1.1fr 1.3fr;
        gap: 2.5rem
    }
}

.site-footer__logo {
    display: inline-block;
    margin-bottom: 1.1rem
}

.site-footer__logo img {
    height: 2.5rem;
    width: auto;
    filter: brightness(0) invert(1)
}

.site-footer__about {
    margin: 0 0 1.35rem;
    max-width: 22rem;
    color: #d1d5db;
    font-size: .95rem;
    line-height: 1.7
}

.site-footer__social {
    display: flex;
    gap: .65rem;
    list-style: none;
    margin: 0;
    padding: 0
}

.site-footer__social li {
    margin: 0
}

.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: .55rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    color: #fff;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease
}

.site-footer__social a:hover {
    background: #fff;
    border-color: #fff;
    color: #5c5c5c;
    transform: translateY(-2px)
}

.site-footer__heading {
    margin: 0 0 1.1rem;
    color: #ff6600;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em
}

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

.site-footer__col li {
    margin: 0
}

.site-footer__col a {
    color: #d1d5db;
    text-decoration: none;
    font-size: .925rem;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    transition: color .2s ease
}

.site-footer__col a:hover {
    color: #fff
}

.site-footer__contact ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.site-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 0 0 .95rem;
    color: #d1d5db;
    font-size: .9rem;
    line-height: 1.5
}

.site-footer__contact li i {
    margin-top: .2rem;
    color: #ff6600;
    width: 1rem;
    text-align: center;
    flex-shrink: 0
}

.site-footer__contact a {
    color: #d1d5db;
    word-break: break-word;
    display: inline-flex;
    align-items: center;
    min-height: 48px
}

.site-footer__contact a:hover {
    color: #fff
}

.site-footer__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: .35rem;
    padding: .7rem 1.2rem;
    min-height: 48px;
    border-radius: .55rem;
    background: #fff;
    color: #5c5c5c !important;
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease, color .2s ease
}

.site-footer__cta:hover {
    background: #f3f4f6;
    color: #333 !important;
    transform: translateY(-1px)
}

.site-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 0 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    text-align: center
}

@media (min-width:768px) {
    .site-footer__bottom {
        flex-direction: row;
        text-align: left
    }
}

.site-footer__bottom p {
    margin: 0;
    color: #9ca3af;
    font-size: .85rem
}

.site-footer__bottom-links {
    display: flex;
    gap: 1.25rem
}

.site-footer__bottom-links a {
    color: #9ca3af;
    font-size: .85rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 48px
}

.site-footer__bottom-links a:hover {
    color: #fff
}

/* ===== Inner page hero (shared across About, Contact, Blog, etc.) ===== */
.inner-hero {
    padding: 7.5rem 0 3.5rem;
    background: #f7f7f8;
    border-bottom: 1px solid #ececec
}

.inner-hero__content {
    max-width: 48rem;
    margin: 0 auto;
    text-align: center
}

.inner-hero__crumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: 1.25rem;
    font-size: .85rem;
    color: #6b7280
}

.inner-hero__crumb a {
    color: #6b7280;
    text-decoration: none
}

.inner-hero__crumb a:hover {
    color: #ff6600
}

.inner-hero__crumb [aria-current="page"] {
    color: #111;
    font-weight: 600
}

.inner-hero__eyebrow {
    margin: 0 0 .65rem;
    color: #ff6600;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase
}

.inner-hero__title {
    margin: 0 auto 1rem;
    max-width: 28rem;
    color: #111;
    font-size: clamp(1.85rem, 3.8vw, 2.85rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-align: center;
    text-wrap: balance
}

.inner-hero__text {
    margin: 0 auto;
    max-width: 40rem;
    color: #5c5c5c;
    font-size: 1.05rem;
    line-height: 1.7;
    text-align: center;
    text-wrap: pretty
}

@media (max-width:899px) {
    .inner-hero {
        padding: 6.75rem 0 2.75rem
    }

    .inner-hero__title {
        max-width: none
    }
}

/* ===== Contact page (premium layout) ===== */
.cp-page,
.offcanvas__panel {
    --cp-accent: #ff6600;
    --cp-accent-soft: rgba(255, 102, 0, .12);
    --cp-text: #111827;
    --cp-muted: #6b7280;
    --cp-border: #e5e7eb;
    --cp-surface: #fff;
    --cp-bg: #f8f9fb;
    --bl-accent: #ff6600;
    --bl-bg: #f8f9fb;
    --bl-surface: #f9fafb;
    --bl-surface-2: #fff;
    --bl-text: #111827;
    --bl-muted: #6b7280;
    --bl-border: #e5e7eb
}

.cp-kicker {
    margin: 0 0 .5rem;
    color: var(--cp-accent);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase
}

.cp-kicker--light {
    color: rgba(255, 255, 255, .85)
}

.cp-heading--light {
    color: #fff
}

.cp-heading {
    margin: 0 0 .75rem;
    color: var(--cp-text);
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em
}

.cp-lead {
    margin: 0;
    color: var(--cp-muted);
    font-size: 1.05rem;
    line-height: 1.7
}

.cp-section-head {
    text-align: center;
    max-width: 36rem;
    margin: 0 auto 2.5rem
}

/* Hero */
.cp-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(5.5rem, 12vw, 7.5rem) 0 clamp(3rem, 8vw, 4.5rem);
    background: linear-gradient(135deg, #fff 0%, #fff8f3 45%, #fff 100%)
}

@media (max-width:767px) {
    .cp-hero__inner {
        text-align: center
    }

    .cp-hero__crumb {
        justify-content: center;
        font-size: .8rem
    }

    .cp-hero__title {
        font-size: clamp(1.75rem, 7.5vw, 2.35rem)
    }

    .cp-hero__lead {
        font-size: .98rem;
        margin-bottom: 1.35rem
    }

    .cp-hero__cta {
        width: 100%;
        max-width: 20rem
    }
}

.cp-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.cp-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, .03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%)
}

.cp-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: .5
}

.cp-hero__orb--1 {
    width: 320px;
    height: 320px;
    top: 10%;
    right: 8%;
    background: rgba(255, 102, 0, .18);
    animation: cp-float 9s ease-in-out infinite
}

.cp-hero__orb--2 {
    width: 260px;
    height: 260px;
    bottom: 5%;
    left: 5%;
    background: rgba(255, 102, 0, .1);
    animation: cp-float 11s ease-in-out infinite reverse
}

@keyframes cp-float {

    0%,
    100% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(10px, -14px)
    }
}

.cp-hero__inner {
    position: relative;
    z-index: 1
}

.cp-hero__crumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: 1.5rem;
    font-size: .85rem;
    color: var(--cp-muted)
}

.cp-hero__crumb a {
    color: var(--cp-muted);
    text-decoration: none
}

.cp-hero__crumb a:hover {
    color: var(--cp-accent)
}

.cp-hero__crumb [aria-current="page"] {
    color: var(--cp-text);
    font-weight: 600
}

.cp-hero__content {
    max-width: 42rem;
    margin: 0 auto;
    text-align: center
}

.cp-hero__eyebrow {
    margin: 0 0 .75rem;
    color: var(--cp-accent);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase
}

.cp-hero__title {
    margin: 0 0 1rem;
    color: var(--cp-text);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.03em;
    text-wrap: balance
}

.cp-hero__lead {
    margin: 0 auto 1.75rem;
    max-width: 34rem;
    color: var(--cp-muted);
    font-size: 1.08rem;
    line-height: 1.75;
    text-wrap: pretty
}

.cp-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .9rem 1.85rem;
    border-radius: 9999px;
    background: var(--cp-accent, #ff6600);
    color: #fff !important;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(255, 102, 0, .35);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease
}

button.cp-hero__cta {
    border: none;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.2
}

.cp-hero__cta:hover {
    background: #e65c00;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(255, 102, 0, .45)
}

.cp-hero__floats {
    display: none
}

@media (min-width:900px) {
    .cp-hero__floats {
        display: block
    }

    .cp-float {
        position: absolute;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .55rem .9rem;
        border-radius: .75rem;
        background: rgba(255, 255, 255, .92);
        border: 1px solid var(--cp-border);
        box-shadow: 0 10px 28px rgba(17, 24, 39, .08);
        color: var(--cp-text);
        font-size: .82rem;
        font-weight: 600;
        animation: cp-float 6s ease-in-out infinite
    }

    .cp-float i {
        color: var(--cp-accent)
    }

    .cp-float--1 {
        top: 28%;
        right: 6%
    }

    .cp-float--2 {
        top: 48%;
        left: 4%;
        animation-delay: 1s
    }

    .cp-float--3 {
        bottom: 18%;
        right: 12%;
        animation-delay: 2s
    }
}

/* Info cards */
.cp-info {
    background: var(--cp-surface)
}

.cp-info__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr
}

@media (min-width:640px) {
    .cp-info__grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:1024px) {
    .cp-info__grid {
        grid-template-columns: repeat(5, 1fr)
    }
}

.cp-info-card {
    padding: 1.35rem;
    border-radius: 1rem;
    background: var(--cp-bg);
    border: 1px solid var(--cp-border);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.cp-info-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 102, 0, .35);
    box-shadow: 0 16px 36px rgba(17, 24, 39, .08)
}

.cp-info-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: .85rem;
    border-radius: .75rem;
    background: var(--cp-accent-soft);
    color: var(--cp-accent);
    font-size: 1.05rem
}

.cp-info-card h3 {
    margin: 0 0 .45rem;
    color: var(--cp-text);
    font-size: .95rem;
    font-weight: 700
}

.cp-info-card p {
    margin: 0;
    color: var(--cp-muted);
    font-size: .875rem;
    line-height: 1.6
}

.cp-info-card a {
    color: var(--cp-accent);
    text-decoration: none
}

.cp-info-card a:hover {
    text-decoration: underline
}

.cp-social {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    list-style: none;
    margin: 0;
    padding: 0
}

.cp-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .55rem;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    color: var(--cp-accent);
    transition: background-color .2s ease, color .2s ease, transform .2s ease
}

.cp-social a:hover {
    background: var(--cp-accent);
    color: #fff;
    transform: translateY(-2px)
}

/* Form */
.cp-form-section {
    background: var(--cp-bg)
}

.cp-form-wrap {
    max-width: 52rem;
    margin: 0 auto;
    padding: 2rem;
    border-radius: 1.25rem;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    box-shadow: 0 20px 50px rgba(17, 24, 39, .06)
}

@media (min-width:768px) {
    .cp-form-wrap {
        padding: 2.5rem
    }
}

.cp-form-wrap__head {
    text-align: center;
    margin-bottom: 2rem
}

.cp-alert {
    margin-bottom: 1.25rem;
    padding: .85rem 1rem;
    border-radius: .65rem;
    font-size: .9rem;
    font-weight: 500
}

.cp-alert--success {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0
}

.cp-alert--error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca
}

.cp-form__grid {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: 1fr
}

@media (min-width:640px) {
    .cp-form__grid {
        grid-template-columns: 1fr 1fr
    }
}

.cp-float-field {
    position: relative
}

.cp-float-field--full {
    grid-column: 1 / -1
}

.cp-float-input {
    width: 100%;
    padding: 1.15rem 1rem .65rem;
    border: 1.5px solid var(--cp-border);
    border-radius: .75rem;
    background: var(--cp-bg);
    color: var(--cp-text);
    font-size: .95rem;
    line-height: 1.5;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease
}

.cp-float-input:focus {
    outline: none;
    border-color: rgba(255, 102, 0, .55);
    background: var(--cp-surface);
    box-shadow: 0 0 0 4px var(--cp-accent-soft)
}

.cp-float-input:focus-visible {
    outline: 2px solid var(--cp-accent);
    outline-offset: 2px
}

.cp-float-field label {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cp-muted);
    font-size: .95rem;
    pointer-events: none;
    transition: top .2s ease, transform .2s ease, font-size .2s ease, color .2s ease
}

.cp-float-input--area+label {
    top: 1.15rem;
    transform: none
}

.cp-float-input:not(:placeholder-shown)+label,
.cp-float-input:focus+label {
    top: .55rem;
    transform: none;
    font-size: .72rem;
    font-weight: 600;
    color: var(--cp-accent)
}

.cp-float-input--area:not(:placeholder-shown)+label,
.cp-float-input--area:focus+label {
    top: .55rem
}

.cp-float-input--area {
    min-height: 9rem;
    resize: vertical;
    padding-top: 1.5rem
}

.cp-float-input.is-invalid {
    border-color: #ef4444;
    background: #fff5f5
}

.cp-float-input.is-valid {
    border-color: #10b981
}

.cp-field-error {
    display: block;
    min-height: 1.1rem;
    margin-top: .35rem;
    color: #ef4444;
    font-size: .78rem
}

.cp-recaptcha {
    margin: 1.25rem 0 .5rem
}

.cp-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    margin-top: .75rem;
    padding: 1rem 1.5rem;
    border: 0;
    border-radius: .75rem;
    background: var(--cp-accent);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(255, 102, 0, .35);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, opacity .2s ease
}

.cp-submit:hover:not(:disabled) {
    background: #e65c00;
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(255, 102, 0, .45)
}

.cp-submit:disabled {
    opacity: .75;
    cursor: not-allowed
}

.cp-submit__loader i {
    margin-right: .35rem
}

/* Map */
.cp-map-section {
    padding: 0 0 4rem;
    background: var(--cp-bg)
}

.cp-map {
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--cp-border);
    box-shadow: 0 16px 40px rgba(17, 24, 39, .08)
}

.cp-map iframe {
    display: block;
    width: 100%;
    height: clamp(280px, 45vw, 420px);
    border: 0
}

/* FAQ accordion */
.cp-faq {
    background: var(--cp-surface)
}

.cp-accordion {
    max-width: 48rem;
    margin: 0 auto;
    display: grid;
    gap: .75rem
}

.cp-accordion__item {
    border: 1px solid var(--cp-border);
    border-radius: .85rem;
    background: var(--cp-bg);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease
}

.cp-accordion__item[open] {
    border-color: rgba(255, 102, 0, .35);
    box-shadow: 0 8px 24px rgba(17, 24, 39, .06)
}

.cp-accordion__item summary {
    padding: 1.1rem 1.25rem;
    color: var(--cp-text);
    font-weight: 700;
    font-size: .98rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem
}

.cp-accordion__item summary::-webkit-details-marker {
    display: none
}

.cp-accordion__item summary::after {
    content: "+";
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cp-accent-soft);
    color: var(--cp-accent);
    font-size: 1.1rem;
    font-weight: 700;
    transition: transform .2s ease, background-color .2s ease
}

.cp-accordion__item[open] summary::after {
    content: "−";
    background: var(--cp-accent);
    color: #fff
}

.cp-accordion__item p {
    margin: 0;
    padding: 0 1.25rem 1.15rem;
    color: var(--cp-muted);
    font-size: .925rem;
    line-height: 1.65
}

/* CTA */
.cp-cta {
    padding: 3.5rem 0;
    background: linear-gradient(135deg, var(--cp-accent) 0%, #ff8533 100%)
}

.cp-cta__inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: flex-start
}

@media (min-width:768px) {
    .cp-cta__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between
    }
}

.cp-cta__copy h2 {
    margin: 0 0 .4rem;
    color: #fff;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800
}

.cp-cta__copy p {
    margin: 0;
    color: rgba(255, 255, 255, .92);
    max-width: 32rem;
    line-height: 1.6
}

.cp-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .9rem 1.6rem;
    border-radius: 9999px;
    background: #fff;
    color: var(--cp-accent);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    transition: transform .2s ease, box-shadow .2s ease
}

.cp-cta__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18)
}

@media (prefers-reduced-motion:reduce) {

    .cp-hero__orb,
    .cp-float {
        animation: none
    }

    .cp-info-card:hover,
    .cp-hero__cta:hover,
    .cp-submit:hover:not(:disabled),
    .cp-cta__btn:hover,
    .cp-social a:hover {
        transform: none
    }
}

/* ============================================================
   About page (ab-*)
   ============================================================ */
.ab-page {
    --ab-accent: #ff6600;
    --ab-text: #111827;
    --ab-muted: #6b7280;
    --ab-border: #e5e7eb;
    --ab-surface: #f9fafb;
    --ab-radius: 1.25rem;
    --ab-shadow: 0 12px 40px rgba(0, 0, 0, .06)
}

.ab-kicker {
    margin: 0 0 .65rem;
    color: var(--ab-accent);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase
}

.ab-kicker--light {
    color: rgba(255, 255, 255, .85)
}

.ab-heading {
    margin: 0;
    color: var(--ab-text);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em
}

.ab-heading--light {
    color: #fff
}

.ab-lead {
    margin: 0;
    color: var(--ab-muted);
    font-size: 1.05rem;
    line-height: 1.7
}

.ab-copy {
    margin: 1rem 0 0;
    color: var(--ab-muted);
    line-height: 1.75
}

.ab-section-head {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto 2.75rem
}

.ab-section-head__lead {
    margin-top: .85rem
}

.ab-section-head--light .ab-kicker--light {
    color: rgba(255, 255, 255, .8)
}

.ab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .85rem 1.5rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    border: 2px solid transparent
}

.ab-btn--primary {
    background: var(--ab-accent);
    color: #fff;
    box-shadow: 0 8px 24px rgba(255, 102, 0, .35)
}

.ab-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 102, 0, .45)
}

.ab-btn--white {
    background: #fff;
    color: var(--ab-accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12)
}

.ab-btn--white:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18)
}

/* Scroll reveal (shared across visitor pages) */
.ab-reveal,
.ab-reveal--delay,
.bl-reveal,
.bl-reveal--delay,
.sv-reveal,
.ls-reveal,
.cd-reveal,
.pd-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease
}

.ab-reveal.is-visible,
.ab-reveal--delay.is-visible,
.bl-reveal.is-visible,
.bl-reveal--delay.is-visible,
.sv-reveal.is-visible,
.ls-reveal.is-visible,
.cd-reveal.is-visible,
.pd-reveal.is-visible {
    opacity: 1;
    transform: none
}

.ab-reveal--delay,
.bl-reveal--delay {
    transition-delay: .12s
}

/* Story */
.ab-story {
    background: linear-gradient(180deg, #fff 0%, #fafafa 45%, #fff 100%)
}

.ab-story__pillars {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 2.5rem
}

@media (min-width:768px) {
    .ab-story__pillars {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem
    }
}

.ab-story__pillar {
    padding: 1.75rem 1.5rem;
    border-radius: var(--ab-radius);
    background: #fff;
    border: 1px solid var(--ab-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .04);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.ab-story__pillar:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 102, 0, .25);
    box-shadow: var(--ab-shadow)
}

.ab-story__pillar-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: .85rem;
    background: linear-gradient(135deg, rgba(255, 102, 0, .16), rgba(255, 102, 0, .05));
    color: var(--ab-accent);
    font-size: 1.15rem
}

.ab-story__pillar h3 {
    margin: 0 0 .65rem;
    color: var(--ab-text);
    font-size: 1.1rem;
    font-weight: 700
}

.ab-story__pillar p {
    margin: 0;
    color: var(--ab-muted);
    font-size: .92rem;
    line-height: 1.65
}

.ab-story__highlight {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 3.5rem;
    padding: 1.75rem 1.5rem;
    border-radius: calc(var(--ab-radius) + .25rem);
    background: linear-gradient(135deg, rgba(255, 102, 0, .1), rgba(255, 102, 0, .03));
    border: 1px solid rgba(255, 102, 0, .18)
}

@media (min-width:768px) {
    .ab-story__highlight {
        align-items: center;
        gap: 1.75rem;
        padding: 2rem 2.25rem
    }
}

.ab-story__highlight-badge {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1rem;
    background: var(--ab-accent);
    color: #fff;
    box-shadow: 0 8px 24px rgba(255, 102, 0, .35);
    line-height: 1.1;
    text-align: center
}

.ab-story__highlight-badge span {
    font-size: 1.35rem;
    font-weight: 800
}

.ab-story__highlight-badge small {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    opacity: .92
}

.ab-story__highlight blockquote {
    margin: 0
}

.ab-story__highlight blockquote p {
    margin: 0;
    color: var(--ab-text);
    font-size: 1.02rem;
    line-height: 1.7;
    font-weight: 500
}

.ab-story__journey {
    display: grid;
    gap: 1.25rem
}

@media (min-width:768px) {
    .ab-story__journey {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:992px) {
    .ab-story__journey {
        grid-template-columns: repeat(4, 1fr)
    }
}

.ab-story__milestone {
    position: relative;
    padding: 1.5rem 1.35rem 1.35rem;
    border-radius: var(--ab-radius);
    background: #fff;
    border: 1px solid var(--ab-border);
    transition: transform .25s ease, box-shadow .25s ease
}

.ab-story__milestone::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.35rem;
    right: 1.35rem;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--ab-border)
}

.ab-story__milestone--accent {
    border-color: rgba(255, 102, 0, .28);
    background: linear-gradient(180deg, rgba(255, 102, 0, .07), #fff 55%)
}

.ab-story__milestone--accent::before {
    background: var(--ab-accent)
}

.ab-story__milestone:hover {
    transform: translateY(-3px);
    box-shadow: var(--ab-shadow)
}

.ab-story__milestone-year {
    display: inline-block;
    margin-bottom: .75rem;
    padding: .25rem .65rem;
    border-radius: 9999px;
    background: rgba(255, 102, 0, .1);
    color: var(--ab-accent);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .03em
}

.ab-story__milestone h3 {
    margin: 0 0 .5rem;
    color: var(--ab-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35
}

.ab-story__milestone p {
    margin: 0;
    color: var(--ab-muted);
    font-size: .88rem;
    line-height: 1.6
}

/* Timeline */
.ab-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: grid;
    gap: 0
}

@media (min-width:768px) {
    .ab-timeline {
        padding-left: 2rem;
        border-left: 2px solid var(--ab-border)
    }
}

.ab-timeline__item {
    position: relative;
    display: grid;
    gap: .5rem;
    padding: 1.25rem 0 1.25rem 0
}

@media (min-width:768px) {
    .ab-timeline__item {
        grid-template-columns: 7rem 1fr;
        gap: 2rem;
        padding: 1.5rem 0 1.5rem 1.5rem
    }

    .ab-timeline__item::before {
        content: "";
        position: absolute;
        left: -2.55rem;
        top: 1.85rem;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #fff;
        border: 3px solid var(--ab-accent);
        box-shadow: 0 0 0 4px rgba(255, 102, 0, .15)
    }

    .ab-timeline__item--accent::before {
        background: var(--ab-accent);
        box-shadow: 0 0 0 6px rgba(255, 102, 0, .2)
    }
}

.ab-timeline__year {
    color: var(--ab-accent);
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: .02em
}

.ab-timeline__body h3 {
    margin: 0 0 .35rem;
    color: var(--ab-text);
    font-size: 1.1rem;
    font-weight: 700
}

.ab-timeline__body p {
    margin: 0;
    color: var(--ab-muted);
    font-size: .95rem;
    line-height: 1.65
}

.ab-timeline__item--accent .ab-timeline__body {
    padding: 1.15rem 1.25rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(255, 102, 0, .08), rgba(255, 102, 0, .02));
    border: 1px solid rgba(255, 102, 0, .15)
}

/* Identity */
.ab-identity {
    background: var(--ab-surface)
}

.ab-mv-grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2.5rem
}

@media (min-width:768px) {
    .ab-mv-grid {
        grid-template-columns: 1fr 1fr
    }
}

.ab-glass-card {
    padding: 2rem;
    border-radius: var(--ab-radius);
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: var(--ab-shadow);
    transition: transform .25s ease, box-shadow .25s ease
}

.ab-glass-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .1)
}

.ab-glass-card__icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.15rem;
    border-radius: .85rem;
    background: rgba(255, 102, 0, .1);
    color: var(--ab-accent);
    font-size: 1.25rem
}

.ab-glass-card h3 {
    margin: 0 0 .65rem;
    color: var(--ab-text);
    font-size: 1.25rem;
    font-weight: 700
}

.ab-glass-card p {
    margin: 0;
    color: var(--ab-muted);
    line-height: 1.65;
    font-size: .95rem
}

.ab-values-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr
}

@media (min-width:768px) {
    .ab-values-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:992px) {
    .ab-values-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.ab-value-card {
    padding: 1.5rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid var(--ab-border);
    text-align: center;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease
}

.ab-value-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 102, 0, .35);
    box-shadow: 0 12px 32px rgba(255, 102, 0, .08)
}

.ab-value-card__icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 102, 0, .1);
    color: var(--ab-accent);
    font-size: 1.15rem;
    transition: background .25s ease, color .25s ease
}

.ab-value-card__icon i {
    color: inherit
}

.ab-value-card:hover .ab-value-card__icon {
    background: var(--ab-accent);
    color: #fff
}

.ab-value-card:hover .ab-value-card__icon i {
    color: #fff
}

.ab-value-card h4 {
    margin: 0 0 .45rem;
    color: var(--ab-text);
    font-size: 1.05rem;
    font-weight: 700
}

.ab-value-card p {
    margin: 0;
    color: var(--ab-muted);
    font-size: .9rem;
    line-height: 1.6
}

/* Why Choose Us */
.ab-why {
    background: #fff
}

.ab-features-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr
}

@media (min-width:768px) {
    .ab-features-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:992px) {
    .ab-features-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.ab-feature {
    padding: 1.75rem;
    border-radius: var(--ab-radius);
    background: #fff;
    border: 1px solid var(--ab-border);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.ab-feature:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: var(--ab-shadow)
}

.ab-feature__icon {
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: .9rem;
    background: linear-gradient(135deg, rgba(255, 102, 0, .15), rgba(255, 102, 0, .05));
    color: var(--ab-accent);
    font-size: 1.2rem;
    transition: transform .25s ease
}

.ab-feature:hover .ab-feature__icon {
    transform: scale(1.08)
}

.ab-feature h3 {
    margin: 0 0 .5rem;
    color: var(--ab-text);
    font-size: 1.1rem;
    font-weight: 700
}

.ab-feature p {
    margin: 0;
    color: var(--ab-muted);
    font-size: .92rem;
    line-height: 1.6
}

/* Stats */
.ab-stats {
    position: relative;
    background: linear-gradient(135deg, #111827 0%, #1f2937 55%, rgba(255, 102, 0, .35) 100%);
    overflow: hidden
}

.ab-stats::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255, 102, 0, .15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .05) 0%, transparent 40%);
    pointer-events: none
}

.ab-stats .container {
    position: relative;
    z-index: 1
}

.ab-stats__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem
}

@media (min-width:768px) {
    .ab-stats__grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

.ab-stats__item {
    text-align: center
}

.ab-stats__item .stat-number {
    color: #fff;
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: .5rem
}

.ab-stats__label {
    margin: 0;
    color: rgba(255, 255, 255, .75);
    font-size: .9rem;
    font-weight: 600
}

/* Team */
.ab-team {
    background: var(--ab-surface)
}

.ab-team__grid {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
}

.ab-team-card {
    border-radius: var(--ab-radius);
    background: #fff;
    overflow: hidden;
    border: 1px solid var(--ab-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
    transition: transform .3s ease, box-shadow .3s ease
}

.ab-team-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ab-shadow)
}

.ab-team-card__photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    background: #e5e7eb
}

.ab-team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease
}

.ab-team-card:hover .ab-team-card__photo img {
    transform: scale(1.06)
}

.ab-team-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1.25rem;
    background: linear-gradient(to top, rgba(17, 24, 39, .75) 0%, transparent 55%);
    opacity: 0;
    transition: opacity .3s ease
}

.ab-team-card:hover .ab-team-card__overlay {
    opacity: 1
}

.ab-team-card__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #fff;
    color: var(--ab-accent);
    text-decoration: none;
    transition: transform .2s ease, background .2s ease, color .2s ease
}

.ab-team-card__social a i {
    color: inherit;
    font-size: 1rem;
    line-height: 1
}

.ab-team-card__social a:hover {
    transform: scale(1.1);
    background: var(--ab-accent);
    color: #fff
}

.ab-team-card__social a:hover i {
    color: #fff
}

.ab-team-card__body {
    padding: 1.35rem 1.25rem 1.5rem;
    text-align: center
}

.ab-team-card__body h3 {
    margin: 0 0 .25rem;
    color: var(--ab-text);
    font-size: 1.15rem;
    font-weight: 700
}

.ab-team-card__role {
    margin: 0 0 .65rem;
    color: var(--ab-accent);
    font-size: .875rem;
    font-weight: 600
}

.ab-team-card__bio {
    margin: 0;
    color: var(--ab-muted);
    font-size: .9rem;
    line-height: 1.6
}

/* Process */
.ab-process {
    background: #fff
}

.ab-process__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem
}

@media (min-width:992px) {
    .ab-process__track {
        grid-template-columns: repeat(5, 1fr);
        gap: 1rem;
        position: relative
    }

    .ab-process__track::before {
        content: "";
        position: absolute;
        top: 2.75rem;
        left: 10%;
        right: 10%;
        height: 2px;
        background: linear-gradient(90deg, var(--ab-border), var(--ab-accent), var(--ab-border));
        z-index: 0
    }
}

.ab-process__step {
    position: relative;
    z-index: 1;
    padding: 1.5rem 1.25rem;
    border-radius: var(--ab-radius);
    background: #fff;
    border: 1px solid var(--ab-border);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.ab-process__step:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 102, 0, .3);
    box-shadow: 0 12px 32px rgba(255, 102, 0, .08)
}

.ab-process__num {
    display: block;
    margin-bottom: .65rem;
    color: rgba(255, 102, 0, .35);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .08em
}

.ab-process__icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ab-accent);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 6px 16px rgba(255, 102, 0, .35)
}

.ab-process__icon i {
    color: inherit;
    font-size: inherit;
    line-height: 1
}

.ab-process__step h3 {
    margin: 0 0 .4rem;
    color: var(--ab-text);
    font-size: 1.05rem;
    font-weight: 700
}

.ab-process__step p {
    margin: 0;
    color: var(--ab-muted);
    font-size: .875rem;
    line-height: 1.55
}

/* Testimonials */
.ab-testimonials {
    background: var(--ab-surface)
}

.ab-testimonials__wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem
}

.ab-testimonials__track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    padding: .5rem 0 1rem;
    scrollbar-width: thin
}

.ab-testimonials__track::-webkit-scrollbar {
    height: 5px
}

.ab-testimonials__track::-webkit-scrollbar-thumb {
    background: var(--ab-accent);
    border-radius: 3px
}

.ab-testimonial {
    flex: 0 0 88%;
    scroll-snap-align: start;
    min-width: 0;
    padding: 1.75rem;
    border-radius: var(--ab-radius);
    background: #fff;
    border: 1px solid var(--ab-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
    transition: transform .25s ease, box-shadow .25s ease
}

.ab-testimonial:hover {
    transform: translateY(-3px);
    box-shadow: var(--ab-shadow)
}

@media (min-width:768px) {
    .ab-testimonial {
        flex-basis: calc(50% - .625rem)
    }
}

@media (min-width:1024px) {
    .ab-testimonial {
        flex-basis: calc(33.333% - .85rem)
    }
}

.ab-testimonials__nav {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ab-border);
    border-radius: 50%;
    background: #fff;
    color: var(--ab-text);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease
}

@media (min-width:768px) {
    .ab-testimonials__nav {
        display: inline-flex
    }
}

.ab-testimonials__nav:hover {
    background: var(--ab-accent);
    border-color: var(--ab-accent);
    color: #fff
}

.ab-testimonial__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .85rem
}

.ab-testimonial__avatar {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ab-accent);
    color: #fff;
    font-weight: 700;
    font-size: 1rem
}

.ab-testimonial__header cite {
    display: block;
    font-style: normal;
    font-weight: 700;
    color: var(--ab-text);
    font-size: 1.05rem
}

.ab-testimonial__header p {
    margin: .15rem 0 0;
    color: var(--ab-accent);
    font-size: .85rem;
    font-weight: 600
}

.ab-testimonial__stars {
    display: flex;
    gap: .2rem;
    margin-bottom: .85rem;
    color: #fbbf24;
    font-size: .85rem
}

.ab-testimonial blockquote {
    margin: 0
}

.ab-testimonial blockquote p {
    margin: 0;
    color: var(--ab-muted);
    font-size: .95rem;
    line-height: 1.65
}

/* Brand values */
.ab-brand {
    background: #fff
}

.ab-brand__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
}

.ab-brand-card {
    padding: 2rem 1.5rem;
    border-radius: var(--ab-radius);
    text-align: center;
    background: linear-gradient(180deg, #fff 0%, var(--ab-surface) 100%);
    border: 1px solid var(--ab-border);
    transition: transform .25s ease, box-shadow .25s ease
}

.ab-brand-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ab-shadow)
}

.ab-brand-card__icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: rgba(255, 102, 0, .1);
    color: var(--ab-accent);
    font-size: 1.35rem
}

.ab-brand-card h3 {
    margin: 0 0 .5rem;
    color: var(--ab-text);
    font-size: 1.1rem;
    font-weight: 700
}

.ab-brand-card p {
    margin: 0;
    color: var(--ab-muted);
    font-size: .9rem;
    line-height: 1.6
}

/* CTA (matches ab-stats achievements UI) */
.ab-cta {
    position: relative;
    overflow: hidden
}

.ab-cta__body {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 40rem;
    margin: 0 auto
}

.ab-cta__lead {
    margin: 0 0 1.75rem;
    color: rgba(255, 255, 255, .82);
    font-size: 1.05rem;
    line-height: 1.65
}

.ab-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    justify-content: center
}

.ab-cta .ab-section-head {
    margin-bottom: 1.25rem
}

@media (prefers-reduced-motion:reduce) {

    .ab-reveal {
        opacity: 1;
        transform: none;
        transition: none
    }

    .ab-feature:hover,
    .ab-value-card:hover,
    .ab-glass-card:hover,
    .ab-team-card:hover,
    .ab-process__step:hover,
    .ab-testimonial:hover,
    .ab-brand-card:hover,
    .ab-btn--primary:hover,
    .ab-btn--white:hover,
    .ab-story__pillar:hover,
    .ab-story__milestone:hover,
    .ab-team-card:hover .ab-team-card__photo img,
    .ab-feature:hover .ab-feature__icon {
        transform: none
    }
}

/* ============================================================
   Blog page (bl-*)
   ============================================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.bl-page {
    --bl-accent: var(--cp-accent, #ff6600);
    --bl-bg: var(--cp-bg, #f8f9fb);
    --bl-surface: #f9fafb;
    --bl-surface-2: var(--cp-surface, #ffffff);
    --bl-text: var(--cp-text, #111827);
    --bl-muted: var(--cp-muted, #6b7280);
    --bl-border: var(--cp-border, #e5e7eb);
    --bl-shadow: 0 12px 40px rgba(0, 0, 0, .06);
    --bl-radius: 14px;
    background: var(--bl-bg);
    color: var(--bl-text)
}

.cp-page.bl-page {
    background: var(--cp-bg)
}

.bl-section-head__sub {
    margin: .5rem 0 0;
    color: var(--bl-muted);
    font-size: .95rem
}

.bl-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .85rem 1.45rem;
    border: 2px solid transparent;
    border-radius: 9999px;
    font-weight: 700;
    font-size: .92rem;
    font-family: inherit;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease
}

.bl-btn--primary {
    background: var(--bl-accent, #ff6600);
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(255, 102, 0, .32)
}

.bl-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 102, 0, .42);
    color: #fff !important
}

.bl-btn--ghost {
    background: var(--bl-surface-2, #fff);
    color: var(--bl-text, #111827) !important;
    border-color: var(--bl-border, #e5e7eb)
}

.bl-btn--ghost:hover {
    border-color: var(--bl-accent, #ff6600);
    color: var(--bl-accent, #ff6600) !important
}

.bl-btn--ghost-light {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-color: rgba(255, 255, 255, .35)
}

.bl-btn--white {
    background: #fff;
    color: var(--bl-accent)
}

.bl-btn--sm {
    padding: .65rem 1.1rem;
    font-size: .85rem
}

.bl-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    transform: scale(0);
    animation: bl-ripple .6s ease-out;
    pointer-events: none
}

@keyframes bl-ripple {
    to {
        transform: scale(2.5);
        opacity: 0
    }
}

.bl-chip {
    display: inline-flex;
    align-items: center;
    padding: .28rem .7rem;
    border-radius: 9999px;
    background: rgba(255, 102, 0, .1);
    color: var(--bl-accent, #ff6600);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase
}

.bl-chip--soft {
    background: var(--bl-surface);
    border: 1px solid var(--bl-border)
}

.bl-chip--overlay {
    position: absolute;
    top: .85rem;
    left: .85rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px)
}

.bl-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bl-accent);
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
    flex-shrink: 0
}

.bl-avatar--sm {
    width: 1.75rem;
    height: 1.75rem;
    font-size: .65rem
}

/* Skeleton */
.bl-skeleton-wrap {
    padding-bottom: 4rem;
    transition: opacity .3s ease
}

.bl-skeleton-wrap.is-hidden {
    display: none
}

.bl-skeleton {
    background: linear-gradient(90deg, var(--bl-surface) 25%, var(--bl-border) 50%, var(--bl-surface) 75%);
    background-size: 200% 100%;
    animation: bl-shimmer 1.4s infinite;
    border-radius: var(--bl-radius)
}

@keyframes bl-shimmer {
    0% {
        background-position: 200% 0
    }

    100% {
        background-position: -200% 0
    }
}

.bl-skeleton--hero {
    height: 28rem;
    margin-bottom: 1rem
}

.bl-skeleton__toolbar {
    height: 4rem;
    margin-bottom: 2rem;
    border-radius: var(--bl-radius)
}

.bl-skeleton__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
}

.bl-skeleton--card {
    height: 22rem
}

/* Toolbar */
.bl-toolbar-wrap {
    position: sticky;
    top: 5rem;
    z-index: 40;
    padding: .85rem 0;
    background: hsla(0, 0%, 100%, .92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--bl-border)
}

.bl-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center
}

.bl-toolbar__search {
    position: relative;
    flex: 1 1 220px
}

.bl-toolbar__search i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bl-muted);
    font-size: .9rem
}

.bl-toolbar__search input {
    width: 100%;
    padding: .75rem 1rem .75rem 2.5rem;
    border: 1px solid var(--bl-border);
    border-radius: 9999px;
    background: var(--bl-surface-2);
    color: var(--bl-text);
    font-size: .92rem;
    transition: border-color .2s ease, box-shadow .2s ease
}

.bl-toolbar__search input:focus {
    outline: none;
    border-color: var(--bl-accent);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, .15)
}

.bl-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.bl-toolbar__filters select {
    padding: .7rem 2rem .7rem .85rem;
    border: 1px solid var(--bl-border);
    border-radius: 9999px;
    background: var(--bl-surface-2);
    color: var(--bl-text);
    font-size: .85rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center
}

.bl-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center
}

/* Layout */
.bl-layout {
    display: grid;
    gap: 2.5rem;
    padding: 2.5rem 0 3rem
}

@media (min-width:1100px) {
    .bl-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start
    }
}

.bl-section {
    margin-bottom: 3rem
}

/* Featured grid */
.bl-featured-grid {
    display: grid;
    gap: 1.25rem
}

@media (min-width:768px) {
    .bl-featured-grid {
        grid-template-columns: 1.2fr .8fr;
        grid-template-rows: repeat(2, 1fr)
    }

    .bl-featured-card--large {
        grid-row: span 2
    }
}

.bl-featured-card {
    position: relative;
    border-radius: var(--bl-radius);
    overflow: hidden;
    background: var(--bl-surface-2);
    border: 1px solid var(--bl-border);
    box-shadow: var(--bl-shadow);
    transition: transform .25s ease, box-shadow .25s ease
}

.bl-featured-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .1)
}

.bl-featured-card__media {
    position: relative;
    display: block;
    overflow: hidden
}

.bl-featured-card--large .bl-featured-card__media img {
    aspect-ratio: 4/5
}

.bl-featured-card__media img {
    width: 100%;
    height: 100%;
    min-height: 180px;
    object-fit: cover;
    display: block;
    aspect-ratio: 16/10;
    transition: transform .45s ease
}

.bl-featured-card:hover .bl-featured-card__media img {
    transform: scale(1.05)
}

.bl-featured-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 55%);
    pointer-events: none
}

.bl-featured-card__body {
    padding: 1.25rem
}

.bl-featured-card--large .bl-featured-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent)
}

.bl-featured-card--large .bl-featured-card__title a,
.bl-featured-card--large .bl-featured-card__excerpt,
.bl-featured-card--large .bl-featured-card__meta {
    color: #fff
}

.bl-featured-card--large .bl-chip {
    background: rgba(255, 255, 255, .18);
    color: #fff
}

.bl-featured-card__title {
    margin: .65rem 0 .45rem;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.25
}

.bl-featured-card--large .bl-featured-card__title {
    font-size: 1.45rem
}

.bl-featured-card__title a {
    color: var(--bl-text);
    text-decoration: none
}

.bl-featured-card__title a:hover {
    color: var(--bl-accent)
}

.bl-featured-card--large .bl-featured-card__title a:hover {
    color: #fff;
    opacity: .9
}

.bl-featured-card__excerpt {
    margin: 0 0 .85rem;
    color: var(--bl-muted);
    font-size: .9rem;
    line-height: 1.6
}

.bl-featured-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin-bottom: .85rem;
    color: var(--bl-muted);
    font-size: .8rem
}

/* Blog cards grid */
.bl-cards-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr
}

@media (min-width:640px) {
    .bl-cards-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:992px) {
    .bl-cards-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (min-width:1100px) {
    .bl-layout .bl-cards-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

.bl-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--bl-radius);
    background: var(--bl-surface-2);
    border: 1px solid var(--bl-border);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
    transition: transform .25s ease, box-shadow .25s ease
}

.bl-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--bl-shadow)
}

.bl-card.is-liked {
    animation: bl-like-pop .35s ease
}

@keyframes bl-like-pop {

    0%,
    100% {
        transform: translateY(-5px) scale(1)
    }

    50% {
        transform: translateY(-5px) scale(1.015)
    }
}

.bl-card__media {
    position: relative;
    display: block;
    overflow: hidden
}

.bl-card__media img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
    transition: transform .45s ease
}

.bl-card:hover .bl-card__media img {
    transform: scale(1.06)
}

.bl-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem
}

.bl-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .65rem;
    font-size: .78rem;
    color: var(--bl-muted)
}

.bl-card__title {
    margin: 0 0 .55rem;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.35
}

.bl-card__title a {
    color: var(--bl-text);
    text-decoration: none;
    transition: color .2s ease
}

.bl-card__title a:hover {
    color: var(--bl-accent)
}

.bl-card__excerpt {
    margin: 0 0 1rem;
    color: var(--bl-muted);
    font-size: .9rem;
    line-height: 1.65;
    flex: 1
}

.bl-card__author {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .75rem
}

.bl-card__author-name {
    display: block;
    font-weight: 700;
    font-size: .85rem;
    color: var(--bl-text)
}

.bl-card__author-meta {
    display: block;
    font-size: .78rem;
    color: var(--bl-muted)
}

.bl-card__stats {
    display: flex;
    gap: 1rem;
    margin-bottom: .85rem;
    color: var(--bl-muted);
    font-size: .8rem
}

.bl-card__stats i {
    color: var(--bl-accent);
    margin-right: .25rem
}

.bl-card__actions {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding-top: .85rem;
    border-top: 1px solid var(--bl-border)
}

.bl-icon-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid var(--bl-border);
    background: var(--bl-surface);
    color: var(--bl-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease, border-color .2s ease
}

.bl-icon-btn:hover,
.bl-icon-btn.is-active,
.bl-icon-btn.is-copied {
    background: rgba(255, 102, 0, .1);
    border-color: var(--bl-accent);
    color: var(--bl-accent)
}

.bl-card__read {
    margin-left: auto;
    color: var(--bl-accent);
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none
}

.bl-card__read:hover {
    text-decoration: underline
}

/* Sidebar */
.bl-sidebar-col {
    display: none
}

@media (min-width:1100px) {
    .bl-sidebar-col {
        display: block;
        position: sticky;
        top: 9rem
    }
}

.bl-widget {
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    border-radius: var(--bl-radius);
    background: var(--bl-surface-2);
    border: 1px solid var(--bl-border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .03)
}

.bl-widget__title {
    margin: 0 0 1rem;
    font-size: .95rem;
    font-weight: 800;
    color: var(--bl-text);
    display: flex;
    align-items: center;
    gap: .5rem
}

.bl-widget__title i {
    color: var(--bl-accent)
}

.bl-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .85rem
}

.bl-sidebar-list li {
    display: flex;
    gap: .75rem;
    align-items: flex-start
}

.bl-sidebar-list__num {
    color: var(--bl-accent);
    font-weight: 800;
    font-size: .85rem;
    opacity: .7
}

.bl-sidebar-list a {
    display: block;
    color: var(--bl-text);
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none;
    line-height: 1.35;
    margin-bottom: .15rem
}

.bl-sidebar-list a:hover {
    color: var(--bl-accent)
}

.bl-sidebar-list span {
    display: block;
    color: var(--bl-muted);
    font-size: .75rem
}

.bl-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .45rem
}

.bl-category-list__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .55rem .75rem;
    border-radius: .65rem;
    color: var(--bl-text);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    transition: background .2s ease, color .2s ease
}

.bl-category-list__link:hover,
.bl-category-list__link.is-active {
    background: rgba(255, 102, 0, .1);
    color: var(--bl-accent)
}

.bl-category-list__count {
    font-size: .75rem;
    color: var(--bl-muted);
    background: var(--bl-surface);
    padding: .15rem .45rem;
    border-radius: 9999px
}

.bl-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem
}

.bl-recent-list__item {
    display: flex;
    gap: .65rem;
    align-items: center;
    text-decoration: none;
    color: inherit
}

.bl-recent-list__item img {
    width: 3rem;
    height: 3rem;
    border-radius: .55rem;
    object-fit: cover;
    flex-shrink: 0
}

.bl-recent-list__item strong {
    display: block;
    font-size: .82rem;
    line-height: 1.35;
    color: var(--bl-text);
    margin-bottom: .15rem
}

.bl-recent-list__item time {
    font-size: .72rem;
    color: var(--bl-muted)
}

.bl-recent-list__item:hover strong {
    color: var(--bl-accent)
}

.bl-widget--newsletter p {
    margin: 0 0 .85rem;
    color: var(--bl-muted);
    font-size: .85rem;
    line-height: 1.55
}

.bl-widget--newsletter form {
    display: grid;
    gap: .55rem
}

.bl-widget--newsletter input {
    padding: .65rem .85rem;
    border: 1px solid var(--bl-border);
    border-radius: .65rem;
    background: var(--bl-surface);
    color: var(--bl-text);
    font-size: .85rem
}

.bl-widget--newsletter button {
    padding: .65rem;
    border: none;
    border-radius: .65rem;
    background: var(--bl-accent);
    color: #fff;
    font-weight: 700;
    cursor: pointer
}

.bl-widget__trust {
    margin: .65rem 0 0 !important;
    font-size: .75rem !important
}

.bl-social {
    display: flex;
    gap: .55rem
}

.bl-social a {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bl-surface);
    color: var(--bl-muted);
    text-decoration: none;
    transition: background .2s ease, color .2s ease
}

.bl-social a:hover {
    background: var(--bl-accent);
    color: #fff
}

.bl-ad-label {
    display: block;
    margin-bottom: .5rem;
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bl-muted)
}

.bl-ad-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border: 2px dashed var(--bl-border);
    border-radius: .85rem;
    color: var(--bl-muted);
    text-align: center;
    gap: .35rem
}

.bl-ad-placeholder i {
    font-size: 1.75rem;
    color: var(--bl-accent);
    opacity: .5
}

/* Pagination */
.bl-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    margin-top: 2.5rem
}

.bl-pagination__btn {
    padding: .6rem 1rem;
    border-radius: 9999px;
    border: 1px solid var(--bl-border);
    background: var(--bl-surface-2);
    color: var(--bl-text);
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease
}

.bl-pagination__btn:hover {
    border-color: var(--bl-accent);
    color: var(--bl-accent)
}

.bl-pagination__btn--disabled {
    opacity: .45;
    pointer-events: none
}

.bl-pagination__pages {
    display: flex;
    gap: .35rem
}

.bl-pagination__page {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--bl-border);
    color: var(--bl-text);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none
}

.bl-pagination__page.is-active,
.bl-pagination__page:hover {
    background: var(--bl-accent);
    border-color: var(--bl-accent);
    color: #fff
}

.bl-load-more {
    text-align: center;
    margin-top: 1.5rem
}

/* Empty state */
.bl-empty {
    text-align: center;
    padding: 4rem 1.5rem;
    border-radius: var(--bl-radius);
    background: var(--bl-surface);
    border: 1px dashed var(--bl-border)
}

.bl-empty__illus {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 102, 0, .1);
    color: var(--bl-accent);
    font-size: 2rem
}

.bl-empty h2 {
    margin: 0 0 .65rem;
    font-size: 1.5rem
}

.bl-empty p {
    margin: 0 0 1.5rem;
    color: var(--bl-muted);
    max-width: 28rem;
    margin-inline: auto;
    line-height: 1.65
}

/* Newsletter section */
.bl-newsletter {
    background: linear-gradient(135deg, var(--cp-accent, #ff6600) 0%, #ff8533 100%)
}

.bl-newsletter__inner {
    display: grid;
    gap: 2rem;
    align-items: center
}

@media (min-width:768px) {
    .bl-newsletter__inner {
        grid-template-columns: 1.1fr .9fr
    }
}

.bl-newsletter__copy p {
    margin: 0;
    color: rgba(255, 255, 255, .92);
    line-height: 1.65
}

.bl-newsletter__trust {
    margin-top: .85rem !important;
    font-size: .85rem !important;
    opacity: .9
}

.bl-newsletter__form {
    display: flex;
    flex-direction: column;
    gap: .65rem
}

@media (min-width:480px) {
    .bl-newsletter__form {
        flex-direction: row
    }
}

.bl-newsletter__form input {
    flex: 1;
    padding: .9rem 1rem;
    border: none;
    border-radius: 9999px;
    font-size: .95rem
}

.bl-newsletter__form input:focus {
    outline: 3px solid rgba(255, 255, 255, .35)
}

/* Footer CTA */
.bl-cta {
    padding: 4rem 0;
    background: var(--bl-surface);
    border-top: 1px solid var(--bl-border)
}

.bl-cta__inner {
    text-align: center;
    max-width: 36rem;
    margin: 0 auto
}

.bl-cta__inner h2 {
    margin: 0 0 .65rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800
}

.bl-cta__inner p {
    margin: 0 0 1.5rem;
    color: var(--bl-muted);
    line-height: 1.65
}

.bl-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center
}

@media (prefers-reduced-motion:reduce) {

    .bl-skeleton {
        animation: none
    }

    .bl-card:hover,
    .bl-featured-card:hover,
    .bl-btn--primary:hover {
        transform: none
    }
}

/* ============================================================
   Blog detail page (bd-*)
   ============================================================ */
.bd-page {
    background: var(--cp-bg, #f8f9fb)
}

.bd-layout {
    display: grid;
    gap: 2.5rem;
    padding: 2.5rem 0 4rem
}

@media (min-width:1100px) {
    .bd-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start
    }
}

.bd-sidebar-col {
    display: none
}

@media (min-width:1100px) {
    .bd-sidebar-col {
        display: block;
        position: sticky;
        top: 6rem
    }
}

.bl-widget form:not([data-newsletter-form]) {
    display: grid;
    gap: .55rem
}

.bl-widget form:not([data-newsletter-form]) input {
    padding: .65rem .85rem;
    border: 1px solid var(--bl-border);
    border-radius: .65rem;
    background: var(--bl-surface);
    color: var(--bl-text);
    font-size: .85rem
}

.bl-widget form:not([data-newsletter-form]) button {
    padding: .65rem;
    border: none;
    border-radius: .65rem;
    background: var(--bl-accent);
    color: #fff;
    font-weight: 700;
    cursor: pointer
}

.bd-widget-cta p {
    margin: 0 0 1rem;
    color: var(--bl-muted);
    font-size: .9rem;
    line-height: 1.55
}

.bd-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem
}

.bd-tag {
    display: inline-flex;
    padding: .35rem .75rem;
    border-radius: 9999px;
    background: var(--bl-surface);
    border: 1px solid var(--bl-border);
    color: var(--bl-text);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease
}

.bd-tag:hover {
    background: rgba(255, 102, 0, .1);
    border-color: rgba(255, 102, 0, .35);
    color: var(--bl-accent)
}

.bd-tag-cloud--inline {
    margin-top: .85rem
}

.bl-recent-list__item.is-current strong {
    color: var(--bl-accent)
}

/* Article — always visible (no scroll-reveal on the full article wrapper) */
.bd-article {
    background: var(--cp-surface, #fff);
    border: 1px solid var(--bl-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .05)
}

.bd-article__figure {
    margin: 0
}

.bd-article__figure img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block
}

.bd-article__head {
    padding: 1.75rem 1.75rem 0
}

.bd-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    margin-bottom: .85rem;
    color: var(--bl-muted);
    font-size: .85rem
}

.bd-article__title {
    margin: 0 0 1rem;
    color: var(--bl-text);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em
}

.bd-article__author-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .25rem
}

.bd-article__author-name {
    display: block;
    font-weight: 700;
    color: var(--bl-text)
}

.bd-article__author-role {
    display: block;
    color: var(--bl-muted);
    font-size: .85rem
}

.bd-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bl-border)
}

.bd-share__label {
    font-size: .85rem;
    font-weight: 700;
    color: var(--bl-muted);
    margin-right: .25rem
}

.bd-share__btn {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--bl-border);
    background: var(--bl-surface);
    color: var(--bl-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease
}

.bd-share__btn:hover,
.bd-share__btn.is-copied {
    background: rgba(255, 102, 0, .1);
    border-color: var(--bl-accent);
    color: var(--bl-accent)
}

.bd-article__body {
    padding: 1.75rem
}

@media (min-width:1024px) {
    .bd-article__body:has(.bd-toc--sticky) {
        display: grid;
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 2rem;
        align-items: start
    }
}

.bd-toc {
    padding: 1.15rem;
    border-radius: 14px;
    background: var(--bl-surface);
    border: 1px solid var(--bl-border)
}

.bd-toc--mobile {
    margin: 0 1.75rem 1rem
}

@media (min-width:1024px) {
    .bd-toc--mobile {
        display: none
    }
}

.bd-toc--sticky {
    display: none
}

@media (min-width:1024px) {
    .bd-toc--sticky {
        display: block;
        position: sticky;
        top: 6rem;
        max-height: calc(100vh - 8rem);
        overflow-y: auto
    }
}

.bd-toc__title {
    margin: 0 0 .85rem;
    font-size: .85rem;
    font-weight: 800;
    color: var(--bl-text);
    display: flex;
    align-items: center;
    gap: .45rem
}

.bd-toc__title i {
    color: var(--bl-accent)
}

.bd-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .45rem
}

.bd-toc__item a {
    display: block;
    color: var(--bl-muted);
    font-size: .82rem;
    line-height: 1.45;
    text-decoration: none;
    transition: color .2s ease
}

.bd-toc__item a:hover,
.bd-toc__item a.is-active {
    color: var(--bl-accent);
    font-weight: 600
}

.bd-toc__item--h3 a {
    padding-left: .75rem
}

.bd-toc__item--h4 a {
    padding-left: 1.25rem;
    font-size: .78rem
}

/* Prose */
.bd-prose {
    max-width: 68ch;
    color: var(--bl-text);
    font-size: 1.05rem;
    line-height: 1.8
}

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

.bd-prose h2,
.bd-prose h3,
.bd-prose h4 {
    color: var(--bl-text);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    scroll-margin-top: 6rem
}

.bd-prose h2 {
    margin: 2.25rem 0 1rem;
    font-size: 1.65rem
}

.bd-prose h3 {
    margin: 1.75rem 0 .85rem;
    font-size: 1.3rem
}

.bd-prose h4 {
    margin: 1.35rem 0 .65rem;
    font-size: 1.1rem
}

.bd-prose p {
    margin: 0 0 1.15rem
}

.bd-prose ul,
.bd-prose ol {
    margin: 0 0 1.15rem;
    padding-left: 1.35rem
}

.bd-prose li {
    margin-bottom: .45rem
}

.bd-prose blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--bl-accent);
    border-radius: 0 12px 12px 0;
    background: rgba(255, 102, 0, .06);
    color: var(--bl-muted);
    font-style: italic
}

.bd-prose pre {
    margin: 1.25rem 0;
    padding: 1rem 1.15rem;
    overflow-x: auto;
    border-radius: 12px;
    background: #111827;
    color: #f3f4f6;
    font-size: .88rem;
    line-height: 1.6
}

.bd-prose code {
    padding: .15rem .4rem;
    border-radius: .35rem;
    background: rgba(255, 102, 0, .08);
    color: #c2410c;
    font-size: .9em
}

.bd-prose pre code {
    padding: 0;
    background: none;
    color: inherit
}

.bd-prose img {
    max-width: 100%;
    height: auto;
    margin: 1.25rem 0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08)
}

.bd-prose table {
    width: 100%;
    margin: 1.25rem 0;
    border-collapse: collapse;
    font-size: .92rem;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--bl-border)
}

.bd-prose th,
.bd-prose td {
    padding: .75rem .85rem;
    border-bottom: 1px solid var(--bl-border);
    text-align: left
}

.bd-prose th {
    background: var(--bl-surface);
    font-weight: 700
}

.bd-prose tr:last-child td {
    border-bottom: none
}

.bd-prose a {
    color: var(--bl-accent);
    text-decoration: underline;
    text-underline-offset: 2px
}

.bd-prose hr {
    margin: 2rem 0;
    border: none;
    border-top: 1px solid var(--bl-border)
}

/* Author card */
.bd-author {
    display: grid;
    gap: 1.25rem;
    margin-top: 2rem;
    padding: 1.75rem;
    border-radius: 16px;
    background: var(--cp-surface, #fff);
    border: 1px solid var(--bl-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .04)
}

@media (min-width:640px) {
    .bd-author {
        grid-template-columns: auto 1fr;
        align-items: start
    }
}

.bd-author__avatar {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bl-accent);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800
}

.bd-author__name {
    margin: 0 0 .15rem;
    font-size: 1.25rem;
    font-weight: 800
}

.bd-author__role {
    margin: 0 0 .65rem;
    color: var(--bl-accent);
    font-size: .9rem;
    font-weight: 600
}

.bd-author__bio {
    margin: 0 0 1rem;
    color: var(--bl-muted);
    line-height: 1.65;
    font-size: .95rem
}

.bd-author__social {
    display: flex;
    gap: .5rem
}

.bd-author__social a {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bl-surface);
    color: var(--bl-muted);
    text-decoration: none;
    transition: background .2s ease, color .2s ease
}

.bd-author__social a:hover {
    background: var(--bl-accent);
    color: #fff
}

/* Post navigation */
.bd-post-nav {
    display: grid;
    gap: 1rem;
    margin-top: 2rem
}

@media (min-width:768px) {
    .bd-post-nav {
        grid-template-columns: 1fr 1fr
    }
}

.bd-post-nav__spacer {
    display: none
}

.bd-post-nav__link {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: 1.25rem;
    border-radius: 14px;
    background: var(--cp-surface, #fff);
    border: 1px solid var(--bl-border);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
}

.bd-post-nav__link:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 102, 0, .35);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .06)
}

.bd-post-nav__link--next {
    text-align: right
}

.bd-post-nav__label {
    color: var(--bl-accent);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em
}

.bd-post-nav__title {
    color: var(--bl-text);
    font-weight: 700;
    line-height: 1.4
}

/* Comments */
.bd-comments {
    margin-top: 2.5rem;
    padding: 1.75rem;
    border-radius: 16px;
    background: var(--cp-surface, #fff);
    border: 1px solid var(--bl-border)
}

.bd-comments__head p {
    margin: 0 0 1.25rem;
    color: var(--bl-muted)
}

.bd-comment-form__grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem
}

@media (min-width:640px) {
    .bd-comment-form__grid {
        grid-template-columns: 1fr 1fr
    }
}

.bd-field {
    display: grid;
    gap: .4rem;
    margin-bottom: 1rem
}

.bd-field label {
    font-size: .85rem;
    font-weight: 700;
    color: var(--bl-text)
}

.bd-field input,
.bd-field textarea {
    width: 100%;
    padding: .85rem 1rem;
    border: 1px solid var(--bl-border);
    border-radius: 12px;
    background: var(--bl-surface);
    color: var(--bl-text);
    font-size: .95rem;
    font-family: inherit;
    transition: border-color .2s ease, box-shadow .2s ease
}

.bd-field input:focus,
.bd-field textarea:focus {
    outline: none;
    border-color: var(--bl-accent);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, .12)
}

.bd-field textarea {
    resize: vertical;
    min-height: 120px
}

.bd-comment-form__note {
    margin: .85rem 0 0;
    font-size: .88rem;
    color: var(--bl-muted)
}

.bd-comment-form__note.is-success {
    color: #059669
}

.bd-comment-form__note.is-error {
    color: #dc2626
}

.bd-comments__empty {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border-radius: 12px;
    background: var(--bl-surface);
    text-align: center;
    color: var(--bl-muted)
}

.bd-comments__empty i {
    font-size: 1.75rem;
    color: var(--bl-accent);
    opacity: .6;
    margin-bottom: .5rem
}

.bd-comments__empty p {
    margin: 0
}

/* Related */
.bd-related {
    margin-top: 2.5rem
}

.bd-related__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr
}

@media (min-width:640px) {
    .bd-related__grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:992px) {
    .bd-related__grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (prefers-reduced-motion:reduce) {

    .bd-post-nav__link:hover {
        transform: none
    }
}

/* ============================================================
   Career & Project detail (cd-* / pd-*)
   ============================================================ */
.cp-hero--compact {
    padding: 5rem 0 2.5rem
}

.cp-hero--compact .cp-hero__title {
    font-size: clamp(1.65rem, 4vw, 2.5rem)
}

.cd-page,
.pd-page {
    background: var(--cp-bg, #f8f9fb)
}

.bl-btn--block {
    width: 100%
}

/* Career listing */
.cd-jobs-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr
}

@media (min-width:768px) {
    .cd-jobs-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:992px) {
    .cd-jobs-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.cd-job-card {
    padding: 1.5rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--cp-border, #e5e7eb);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
    transition: transform .25s ease, box-shadow .25s ease
}

.cd-job-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .08)
}

.cd-job-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    font-size: .8rem;
    color: var(--cp-muted, #6b7280)
}

.cd-job-card__title {
    margin: 0 0 .65rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--cp-text, #111827)
}

.cd-job-card__excerpt {
    margin: 0 0 1.15rem;
    color: var(--cp-muted, #6b7280);
    line-height: 1.6;
    font-size: .92rem
}

.cd-job-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem
}

.cd-alert {
    padding: .85rem 1rem;
    border-radius: 12px;
    font-size: .92rem
}

.cd-alert--success {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46
}

.cd-why {
    background: #fff
}

.cd-perks-grid {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
}

.cd-perk {
    padding: 1.35rem;
    border-radius: 14px;
    background: var(--cp-bg, #f8f9fb);
    border: 1px solid var(--cp-border, #e5e7eb);
    transition: transform .2s ease, box-shadow .2s ease
}

.cd-perk:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .06)
}

.cd-perk__icon {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
    border-radius: .75rem;
    background: rgba(255, 102, 0, .1);
    color: var(--cp-accent, #ff6600)
}

.cd-perk h3 {
    margin: 0 0 .35rem;
    font-size: 1rem;
    font-weight: 700
}

.cd-perk p {
    margin: 0;
    color: var(--cp-muted, #6b7280);
    font-size: .88rem;
    line-height: 1.55
}

.cd-cta-band {
    position: relative;
    padding: 3.5rem 0;
    background: linear-gradient(135deg, #111827 0%, #1f2937 55%, rgba(255, 102, 0, .35) 100%);
    overflow: hidden
}

.cd-cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255, 102, 0, .15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .05) 0%, transparent 40%);
    pointer-events: none
}

.cd-cta-band__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 36rem;
    margin: 0 auto;
    color: #fff
}

.cd-cta-band__inner h2 {
    margin: 0 0 .65rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800
}

.cd-cta-band__inner p {
    margin: 0 0 1.25rem;
    color: rgba(255, 255, 255, .82);
    line-height: 1.6
}

/* Career detail layout */
.cd-layout {
    display: grid;
    gap: 2rem;
    padding: 2rem 0 3rem
}

@media (min-width:1024px) {
    .cd-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
        align-items: start
    }
}

.cd-card,
.pd-card {
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--cp-border, #e5e7eb);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .04)
}

.cd-card__title,
.pd-card__title {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--cp-text, #111827);
    display: flex;
    align-items: center;
    gap: .55rem
}

.cd-card__title i,
.pd-card__title i {
    color: var(--cp-accent, #ff6600)
}

.cd-meta-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
}

.cd-meta-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem;
    border-radius: 12px;
    background: var(--cp-bg, #f8f9fb)
}

.cd-meta-item__icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .65rem;
    background: rgba(255, 102, 0, .1);
    color: var(--cp-accent, #ff6600)
}

.cd-meta-item__label {
    display: block;
    font-size: .75rem;
    color: var(--cp-muted, #6b7280);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em
}

.cd-meta-item__value {
    display: block;
    font-size: .92rem;
    font-weight: 700;
    color: var(--cp-text, #111827)
}

.cd-sidebar {
    display: none
}

@media (min-width:1024px) {
    .cd-sidebar {
        display: block;
        position: sticky;
        top: 5rem
    }
}

.cd-sticky-card {
    padding: 1.35rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--cp-border, #e5e7eb);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
    text-align: center
}

.cd-sticky-card h3 {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    font-weight: 800
}

.cd-sticky-card p {
    margin: 0 0 1rem;
    color: var(--cp-muted, #6b7280);
    font-size: .88rem;
    line-height: 1.55
}

.cd-sidebar__link {
    display: inline-block;
    margin-top: .85rem;
    color: var(--cp-accent, #ff6600);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none
}

.cd-cta,
.pd-cta {
    margin-top: 1rem;
    padding: 2rem;
    border-radius: 16px;
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 102, 0, .08), rgba(255, 102, 0, .02));
    border: 1px solid rgba(255, 102, 0, .15)
}

.cd-cta h2,
.pd-cta h2 {
    margin: 0 0 .5rem;
    font-size: 1.35rem;
    font-weight: 800
}

.cd-cta p,
.pd-cta p {
    margin: 0 0 1.15rem;
    color: var(--cp-muted, #6b7280);
    line-height: 1.6
}

/* Project listing */
.pd-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .55rem;
    margin-bottom: 2rem
}

.pd-filter {
    padding: .65rem 1.15rem;
    border-radius: 9999px;
    border: 1px solid var(--cp-border, #e5e7eb);
    background: #fff;
    color: var(--cp-text, #111827);
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease
}

.pd-filter.is-active,
.pd-filter:hover {
    background: var(--cp-accent, #ff6600);
    border-color: var(--cp-accent, #ff6600);
    color: #fff
}

.pd-projects-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr
}

@media (min-width:768px) {
    .pd-projects-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:992px) {
    .pd-projects-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.pd-project-card {
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--cp-border, #e5e7eb);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
    transition: transform .25s ease, box-shadow .25s ease
}

.pd-project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .08)
}

.pd-project-card__media {
    position: relative;
    overflow: hidden
}

.pd-project-card__media img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
    transition: transform .4s ease
}

.pd-project-card:hover .pd-project-card__media img {
    transform: scale(1.04)
}

.pd-project-card__placeholder {
    width: 100%;
    aspect-ratio: 16/10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-bg, #f8f9fb);
    color: var(--cp-muted, #6b7280);
    font-size: .85rem
}

.pd-project-card__body {
    padding: 1.25rem
}

.pd-project-card__body h3 {
    margin: 0 0 .5rem;
    font-size: 1.1rem;
    font-weight: 800
}

.pd-project-card__body p {
    margin: 0 0 1rem;
    color: var(--cp-muted, #6b7280);
    font-size: .9rem;
    line-height: 1.55
}

/* Project detail */
.pd-layout {
    padding: 2rem 0 3rem
}

.pd-gallery {
    margin-bottom: 1.25rem
}

.pd-gallery__hero,
.pd-gallery__item {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .08)
}

.pd-gallery__hero img,
.pd-gallery__item img {
    width: 100%;
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover
}

.pd-gallery__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
}

.pd-gallery__item figcaption {
    padding: .55rem .75rem;
    font-size: .78rem;
    color: var(--cp-muted, #6b7280);
    background: #fff
}

.pd-muted {
    margin: 0;
    color: var(--cp-muted, #6b7280);
    line-height: 1.65
}

.pd-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.pd-badge {
    padding: .4rem .8rem;
    border-radius: 9999px;
    background: rgba(255, 102, 0, .1);
    color: var(--cp-accent, #ff6600);
    font-size: .8rem;
    font-weight: 700
}

.pd-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem
}

.pd-timeline__step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start
}

.pd-timeline__num {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cp-accent, #ff6600);
    color: #fff;
    font-size: .75rem;
    font-weight: 800
}

.pd-timeline__step h3 {
    margin: 0 0 .25rem;
    font-size: 1rem;
    font-weight: 700
}

.pd-timeline__step p {
    margin: 0;
    color: var(--cp-muted, #6b7280);
    font-size: .9rem;
    line-height: 1.55
}

.pd-results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .65rem
}

.pd-results li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    color: var(--cp-text, #111827);
    line-height: 1.55
}

.pd-results i {
    color: var(--cp-accent, #ff6600);
    margin-top: .2rem
}

.pd-nav {
    display: grid;
    gap: 1rem;
    margin: 1.25rem 0
}

@media (min-width:768px) {
    .pd-nav {
        grid-template-columns: 1fr 1fr
    }
}

.pd-nav__btn {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.15rem;
    border-radius: 14px;
    border: 1px solid var(--cp-border, #e5e7eb);
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
}

.pd-nav__btn--next {
    text-align: right
}

.pd-nav__btn:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 102, 0, .35);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .06)
}

.pd-nav__label {
    color: var(--cp-accent, #ff6600);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em
}

.pd-nav__title {
    color: var(--cp-text, #111827);
    font-weight: 700;
    line-height: 1.35;
    font-size: .92rem
}

.pd-related {
    margin-top: 1.5rem
}

.pd-related__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
}

@media (prefers-reduced-motion:reduce) {

    .cd-job-card:hover,
    .pd-project-card:hover,
    .cd-perk:hover,
    .pd-nav__btn:hover,
    .pd-project-card:hover .pd-project-card__media img {
        transform: none
    }
}

/* ============================================================
   Service detail page (sv-*)
   ============================================================ */
.sv-page {
    background: var(--cp-bg, #f8f9fb)
}

.sv-section-lead {
    margin: .65rem auto 0;
    max-width: 34rem;
    color: var(--cp-muted, #6b7280);
    line-height: 1.65
}

/* Overview */
.sv-overview__grid {
    display: grid;
    gap: 2rem;
    align-items: center;
    margin-bottom: 2rem
}

@media (min-width:992px) {
    .sv-overview__grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem
    }
}

.sv-overview__media {
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .08)
}

.sv-overview__media img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    transition: transform .45s ease
}

.sv-overview__media:hover img {
    transform: scale(1.03)
}

.sv-overview__intro {
    margin-top: .85rem
}

.sv-card {
    padding: 1.75rem;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--cp-border, #e5e7eb);
    box-shadow: 0 10px 32px rgba(0, 0, 0, .05)
}

.sv-card__title {
    margin: 0 0 1rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--cp-text, #111827);
    display: flex;
    align-items: center;
    gap: .55rem
}

.sv-card__title i {
    color: var(--cp-accent, #ff6600)
}

.sv-card .bd-prose {
    max-width: none;
    width: 100%
}

/* Features */
.sv-features {
    background: #fff
}

.sv-features__grid {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
}

.sv-feature-card {
    padding: 1.5rem;
    border-radius: 18px;
    background: var(--cp-bg, #f8f9fb);
    border: 1px solid var(--cp-border, #e5e7eb);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.sv-feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 102, 0, .35);
    box-shadow: 0 14px 36px rgba(255, 102, 0, .1)
}

.sv-feature-card__icon {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .85rem;
    border-radius: .85rem;
    background: rgba(255, 102, 0, .1);
    color: var(--cp-accent, #ff6600);
    font-size: 1.1rem;
    transition: transform .25s ease, background .25s ease, color .25s ease
}

.sv-feature-card:hover .sv-feature-card__icon {
    transform: scale(1.08);
    background: var(--cp-accent, #ff6600);
    color: #fff
}

.sv-feature-card h3 {
    margin: 0 0 .45rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--cp-text, #111827)
}

.sv-feature-card p {
    margin: 0;
    color: var(--cp-muted, #6b7280);
    font-size: .9rem;
    line-height: 1.6
}

/* Benefits */
.sv-benefits {
    background: linear-gradient(180deg, var(--cp-bg, #f8f9fb) 0%, #fff 100%)
}

.sv-benefits__grid {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
}

.sv-benefit {
    padding: 1.5rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--cp-border, #e5e7eb);
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
    transition: transform .25s ease, box-shadow .25s ease
}

.sv-benefit:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .08)
}

.sv-benefit__icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 102, 0, .1);
    color: var(--cp-accent, #ff6600);
    font-size: 1.15rem
}

.sv-benefit h3 {
    margin: 0 0 .4rem;
    font-size: 1rem;
    font-weight: 800
}

.sv-benefit p {
    margin: 0;
    color: var(--cp-muted, #6b7280);
    font-size: .88rem;
    line-height: 1.55
}

/* Process */
.sv-process {
    background: #fff
}

.sv-process__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem
}

@media (min-width:768px) {
    .sv-process__track {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:1100px) {
    .sv-process__track {
        grid-template-columns: repeat(4, 1fr);
        position: relative
    }

    .sv-process__track::before {
        content: "";
        position: absolute;
        top: 2.6rem;
        left: 8%;
        right: 8%;
        height: 2px;
        background: linear-gradient(90deg, var(--cp-border, #e5e7eb), var(--cp-accent, #ff6600), var(--cp-border, #e5e7eb));
        z-index: 0
    }
}

.sv-process__step {
    position: relative;
    z-index: 1;
    padding: 1.35rem 1.15rem;
    border-radius: 18px;
    background: var(--cp-bg, #f8f9fb);
    border: 1px solid var(--cp-border, #e5e7eb);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.sv-process__step:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 102, 0, .3);
    box-shadow: 0 12px 28px rgba(255, 102, 0, .08)
}

.sv-process__num {
    display: block;
    margin-bottom: .5rem;
    font-size: .75rem;
    font-weight: 800;
    color: rgba(255, 102, 0, .45);
    letter-spacing: .08em
}

.sv-process__icon {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cp-accent, #ff6600);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 6px 16px rgba(255, 102, 0, .35)
}

.sv-process__step h3 {
    margin: 0 0 .35rem;
    font-size: 1rem;
    font-weight: 800
}

.sv-process__step p {
    margin: 0;
    color: var(--cp-muted, #6b7280);
    font-size: .85rem;
    line-height: 1.55
}

/* Why choose */
.sv-why {
    background: var(--cp-bg, #f8f9fb)
}

.sv-why__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
}

.sv-why-card {
    padding: 1.35rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--cp-border, #e5e7eb);
    transition: transform .25s ease, box-shadow .25s ease
}

.sv-why-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .06)
}

.sv-why-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
    border-radius: .75rem;
    background: rgba(255, 102, 0, .1);
    color: var(--cp-accent, #ff6600);
    font-size: 1rem
}

.sv-why-card h3 {
    margin: 0 0 .35rem;
    font-size: .98rem;
    font-weight: 800
}

.sv-why-card p {
    margin: 0;
    color: var(--cp-muted, #6b7280);
    font-size: .88rem;
    line-height: 1.55
}

/* CTA */
.sv-cta {
    padding: 4rem 0;
    background: linear-gradient(135deg, #111827 0%, #1f2937 55%, rgba(255, 102, 0, .45) 100%);
    position: relative;
    overflow: hidden
}

.sv-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 102, 0, .18) 0%, transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, .06) 0%, transparent 40%);
    pointer-events: none
}

.sv-cta__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 40rem;
    margin: 0 auto
}

.sv-cta__inner h2 {
    margin: 0 0 .65rem;
    color: #fff;
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    font-weight: 800;
    line-height: 1.15
}

.sv-cta__inner p {
    margin: 0 0 1.5rem;
    color: rgba(255, 255, 255, .88);
    line-height: 1.65
}

.sv-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center
}

@media (prefers-reduced-motion:reduce) {

    .sv-feature-card:hover,
    .sv-benefit:hover,
    .sv-process__step:hover,
    .sv-why-card:hover,
    .sv-overview__media:hover img {
        transform: none
    }
}

/* ============================================================
   Local SEO landing pages (ls-*)
   ============================================================ */
.ls-page {
    background: var(--cp-bg, #f8f9fb)
}

.ls-section-lead {
    margin: .65rem auto 0;
    max-width: 36rem;
    color: var(--cp-muted, #6b7280);
    line-height: 1.65
}

/* Overview */
.ls-overview {
    background: #fff
}

.ls-overview__grid {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    margin-bottom: 2rem
}

@media (min-width:992px) {
    .ls-overview__grid {
        grid-template-columns: 1.05fr .95fr;
        gap: 3.5rem
    }
}

.ls-overview__media {
    position: relative;
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 56px rgba(17, 24, 39, .12);
    animation: ls-float 6s ease-in-out infinite
}

.ls-overview__glow {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle, rgba(255, 102, 0, .18) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0
}

.ls-overview__media img {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    transition: transform .5s ease
}

.ls-overview__media:hover img {
    transform: scale(1.04)
}

@keyframes ls-float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}

.ls-overview__lead {
    margin: .85rem 0 1.25rem;
    color: var(--cp-muted, #6b7280);
    font-size: 1.05rem;
    line-height: 1.7
}

.ls-overview__block {
    margin-bottom: 1.15rem;
    padding: 1.15rem 1.25rem;
    border-radius: 16px;
    background: var(--cp-bg, #f8f9fb);
    border: 1px solid var(--cp-border, #e5e7eb)
}

.ls-overview__block h3 {
    margin: 0 0 .45rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--cp-text, #111827)
}

.ls-overview__block p {
    margin: 0;
    color: var(--cp-muted, #6b7280);
    line-height: 1.65
}

.ls-overview__link {
    margin-top: .5rem
}

.ls-contact-strip {
    display: grid;
    gap: 1rem;
    padding: 1.35rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(12px);
    border: 1px solid var(--cp-border, #e5e7eb);
    box-shadow: 0 12px 32px rgba(17, 24, 39, .06)
}

@media (min-width:768px) {
    .ls-contact-strip {
        grid-template-columns: repeat(3, 1fr)
    }
}

.ls-contact-strip__item {
    display: flex;
    gap: .85rem;
    align-items: flex-start
}

.ls-contact-strip__icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .75rem;
    background: rgba(255, 102, 0, .1);
    color: var(--cp-accent, #ff6600)
}

.ls-contact-strip__item strong {
    display: block;
    margin-bottom: .2rem;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cp-muted, #6b7280)
}

.ls-contact-strip__item address,
.ls-contact-strip__item a {
    color: var(--cp-text, #111827);
    font-size: .92rem;
    line-height: 1.5;
    text-decoration: none
}

.ls-contact-strip__item a:hover {
    color: var(--cp-accent, #ff6600)
}

/* Tech stack */
.ls-tech {
    background: linear-gradient(180deg, var(--cp-bg, #f8f9fb) 0%, #fff 100%)
}

.ls-tech__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr))
}

.ls-tech-card {
    padding: 1.25rem 1rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--cp-border, #e5e7eb);
    text-align: center;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .04);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.ls-tech-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 102, 0, .35);
    box-shadow: 0 16px 36px rgba(255, 102, 0, .1)
}

.ls-tech-card__icon {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto .65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .85rem;
    background: rgba(255, 102, 0, .08);
    color: var(--cp-accent, #ff6600);
    font-size: 1.25rem
}

.ls-tech-card__name {
    font-size: .88rem;
    font-weight: 700;
    color: var(--cp-text, #111827)
}

/* Service cards */
.ls-services {
    background: #fff
}

.ls-services__grid {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
}

.ls-service-card {
    padding: 1.65rem;
    border-radius: 20px;
    background: var(--cp-bg, #f8f9fb);
    border: 1px solid var(--cp-border, #e5e7eb);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease
}

.ls-service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 102, 0, .35);
    box-shadow: 0 18px 40px rgba(255, 102, 0, .1)
}

.ls-service-card__icon {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: .9rem;
    background: var(--cp-accent, #ff6600);
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 8px 20px rgba(255, 102, 0, .3);
    transition: transform .25s ease
}

.ls-service-card:hover .ls-service-card__icon {
    transform: scale(1.08) rotate(-4deg)
}

.ls-service-card h3 {
    margin: 0 0 .55rem;
    font-size: 1.1rem;
    font-weight: 800
}

.ls-service-card p {
    margin: 0;
    color: var(--cp-muted, #6b7280);
    line-height: 1.65;
    font-size: .92rem
}

/* Why choose */
.ls-why {
    background: var(--cp-bg, #f8f9fb)
}

.ls-why__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
}

.ls-why-card {
    padding: 1.4rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--cp-border, #e5e7eb);
    transition: transform .25s ease, box-shadow .25s ease
}

.ls-why-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(17, 24, 39, .08)
}

.ls-why-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
    border-radius: .75rem;
    background: rgba(255, 102, 0, .1);
    color: var(--cp-accent, #ff6600)
}

.ls-why-card h3 {
    margin: 0 0 .35rem;
    font-size: .98rem;
    font-weight: 800
}

.ls-why-card p {
    margin: 0;
    color: var(--cp-muted, #6b7280);
    font-size: .88rem;
    line-height: 1.55
}

/* Process */
.ls-process {
    background: #fff
}

.ls-process__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem
}

@media (min-width:640px) {
    .ls-process__track {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:1100px) {
    .ls-process__track {
        grid-template-columns: repeat(3, 1fr)
    }
}

.ls-process__step {
    padding: 1.35rem 1.15rem;
    border-radius: 20px;
    background: var(--cp-bg, #f8f9fb);
    border: 1px solid var(--cp-border, #e5e7eb);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.ls-process__step:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 102, 0, .3);
    box-shadow: 0 12px 28px rgba(255, 102, 0, .08)
}

.ls-process__num {
    display: block;
    margin-bottom: .45rem;
    font-size: .72rem;
    font-weight: 800;
    color: rgba(255, 102, 0, .5);
    letter-spacing: .1em
}

.ls-process__icon {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cp-accent, #ff6600);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 6px 16px rgba(255, 102, 0, .35)
}

.ls-process__step h3 {
    margin: 0 0 .35rem;
    font-size: 1rem;
    font-weight: 800
}

.ls-process__step p {
    margin: 0;
    color: var(--cp-muted, #6b7280);
    font-size: .85rem;
    line-height: 1.55
}

/* Industries */
.ls-industries {
    background: linear-gradient(180deg, var(--cp-bg, #f8f9fb) 0%, #fff 100%)
}

.ls-industries__grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))
}

.ls-industry {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: 1.15rem .75rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--cp-border, #e5e7eb);
    text-align: center;
    font-size: .88rem;
    font-weight: 700;
    color: var(--cp-text, #111827);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.ls-industry:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 102, 0, .3);
    box-shadow: 0 10px 24px rgba(17, 24, 39, .06)
}

.ls-industry__icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 102, 0, .1);
    color: var(--cp-accent, #ff6600);
    font-size: 1rem
}

/* Projects */
.ls-projects {
    background: #fff
}

.ls-projects__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
}

.ls-project-card {
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--cp-border, #e5e7eb);
    box-shadow: 0 10px 32px rgba(17, 24, 39, .06);
    transition: transform .28s ease, box-shadow .28s ease
}

.ls-project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(17, 24, 39, .12)
}

.ls-project-card__media {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--cp-bg, #f8f9fb)
}

.ls-project-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease
}

.ls-project-card:hover .ls-project-card__media img {
    transform: scale(1.05)
}

.ls-project-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cp-muted, #6b7280);
    font-size: .9rem
}

.ls-project-card__badges {
    position: absolute;
    top: .75rem;
    left: .75rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem
}

.ls-project-card__body {
    padding: 1.25rem 1.35rem 1.35rem
}

.ls-project-card__body h3 {
    margin: 0 0 .45rem;
    font-size: 1.05rem;
    font-weight: 800
}

.ls-project-card__body p {
    margin: 0 0 1rem;
    color: var(--cp-muted, #6b7280);
    font-size: .88rem;
    line-height: 1.55
}

.ls-projects__more {
    margin-top: 1.75rem;
    text-align: center
}

/* Stats */
.ls-stats {
    padding: 3rem 0;
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    position: relative;
    overflow: hidden
}

.ls-stats::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255, 102, 0, .2) 0%, transparent 55%);
    pointer-events: none
}

.ls-stats__grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr)
}

@media (min-width:768px) {
    .ls-stats__grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

.ls-stat {
    text-align: center;
    padding: 1.25rem .75rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .1)
}

.ls-stat__value {
    display: block;
    font-size: clamp(1.75rem, 4vw, 2.35rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.1
}

.ls-stat__label {
    display: block;
    margin-top: .35rem;
    font-size: .82rem;
    color: rgba(255, 255, 255, .78);
    text-transform: capitalize
}

/* Testimonials */
.ls-testimonials {
    background: var(--cp-bg, #f8f9fb)
}

.ls-testimonial {
    min-width: min(100%, 340px)
}

/* Related */
.ls-related {
    background: #fff
}

.ls-related__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
}

.ls-related-card {
    display: block;
    padding: 1.35rem;
    border-radius: 18px;
    background: var(--cp-bg, #f8f9fb);
    border: 1px solid var(--cp-border, #e5e7eb);
    text-decoration: none;
    color: inherit;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.ls-related-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 102, 0, .35);
    box-shadow: 0 12px 28px rgba(255, 102, 0, .08)
}

.ls-related-card h3 {
    margin: 0 0 .45rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--cp-accent, #ff6600)
}

.ls-related-card p {
    margin: 0 0 .75rem;
    color: var(--cp-muted, #6b7280);
    font-size: .88rem;
    line-height: 1.55
}

.ls-related-card__link {
    font-size: .85rem;
    font-weight: 700;
    color: var(--cp-text, #111827)
}

.ls-related-card__link i {
    margin-left: .25rem;
    color: var(--cp-accent, #ff6600);
    transition: transform .2s ease
}

.ls-related-card:hover .ls-related-card__link i {
    transform: translateX(4px)
}

/* CTA */
.ls-cta {
    padding: 4rem 0;
    background: linear-gradient(135deg, #111827 0%, #1f2937 55%, rgba(255, 102, 0, .45) 100%);
    position: relative;
    overflow: hidden
}

.ls-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 102, 0, .18) 0%, transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, .06) 0%, transparent 40%);
    pointer-events: none
}

.ls-cta__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 42rem;
    margin: 0 auto
}

.ls-cta__inner h2 {
    margin: 0 0 .65rem;
    color: #fff;
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    font-weight: 800;
    line-height: 1.15
}

.ls-cta__inner p {
    margin: 0 0 1.5rem;
    color: rgba(255, 255, 255, .88);
    line-height: 1.65
}

.ls-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center
}

@media (prefers-reduced-motion:reduce) {

    .ls-overview__media {
        animation: none
    }

    .ls-service-card:hover,
    .ls-tech-card:hover,
    .ls-why-card:hover,
    .ls-process__step:hover,
    .ls-industry:hover,
    .ls-project-card:hover,
    .ls-related-card:hover,
    .ls-overview__media:hover img,
    .ls-project-card:hover .ls-project-card__media img {
        transform: none
    }
}

/* ============================================================
   Shared visitor layout & responsive utilities
   ============================================================ */
.section {
    padding: clamp(3rem, 7vw, 5rem) 0
}

@media (max-width:767px) {
    .cta-banner {
        padding: clamp(2.5rem, 8vw, 3.5rem) 0
    }

    .cta-banner p {
        margin-bottom: 1.5rem;
        padding-inline: .5rem
    }

    .bl-toolbar {
        flex-direction: column;
        align-items: stretch
    }

    .bl-toolbar__filters,
    .bl-toolbar__actions {
        width: 100%
    }

    .bl-toolbar__filters select,
    .bl-toolbar__search input {
        width: 100%
    }

    .ab-section-head,
    .cp-section-head {
        margin-bottom: 2rem
    }

    .ab-heading {
        font-size: clamp(1.5rem, 6.5vw, 2rem)
    }

    .ab-cta__actions,
    .ls-cta__actions,
    .sv-cta__actions {
        flex-direction: column;
        align-items: stretch
    }

    .ab-cta__actions .ab-btn,
    .ls-cta__actions .cp-hero__cta,
    .ls-cta__actions .bl-btn,
    .sv-cta__actions .cp-hero__cta,
    .sv-cta__actions .bl-btn {
        width: 100%;
        justify-content: center
    }

    .ab-stats__grid {
        gap: 1.35rem
    }

    .ab-stats__item .stat-number {
        font-size: clamp(1.85rem, 8vw, 2.5rem)
    }

    .ls-contact-strip__item {
        flex-direction: column;
        align-items: flex-start
    }

    .ab-testimonials__wrap {
        gap: .5rem
    }

    .ab-testimonial {
        flex-basis: 92%
    }

    .ls-process__track {
        grid-template-columns: 1fr
    }
}

@media (prefers-reduced-motion:reduce) {

    .ab-reveal,
    .ab-reveal--delay,
    .bl-reveal,
    .bl-reveal--delay,
    .sv-reveal,
    .ls-reveal,
    .cd-reveal,
    .pd-reveal {
        opacity: 1;
        transform: none;
        transition: none
    }
}

/* ============================================================
   Site page loader
   ============================================================ */
.site-loader {
    background: linear-gradient(180deg, #fff 0%, #fff8f3 100%)
}

.site-loader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center
}

.site-loader__spinner {
    width: 3.25rem;
    height: 3.25rem;
    border: 3px solid rgba(255, 102, 0, .15);
    border-top-color: #ff6600;
    border-radius: 50%;
    animation: site-loader-spin .85s linear infinite
}

.site-loader__logo {
    width: auto;
    height: 2.25rem;
    object-fit: contain
}

.site-loader__text {
    margin: 0;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6b7280
}

@keyframes site-loader-spin {
    to {
        transform: rotate(360deg)
    }
}

@media (prefers-reduced-motion:reduce) {
    .site-loader__spinner {
        animation: none;
        border-top-color: #ff6600;
        border-right-color: #ff6600
    }

    .site-loader {
        transition: none
    }
}

.site-header__link-btn {
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit
}

.site-header__menu-toggle {
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem;
    border-radius: .4rem
}

.site-header__menu-toggle:focus-visible,
.site-header__link:focus-visible,
.site-header__link-btn:focus-visible,
.site-header__cta:focus-visible,
.site-header__apps:focus-visible,
.btn:focus-visible,
.hero-showcase__btn:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 2px solid #ff6600;
    outline-offset: 3px
}

.site-header .group:focus-within > [id="desktop-services-menu"] {
    opacity: 1;
    visibility: visible
}

.cp-social {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem
}

iframe {
    max-width: 100%
}

.cp-form input,
.cp-form textarea,
.cp-form select,
.cd-apply-form input,
.cd-apply-form textarea,
.cd-apply-form select,
.bl-toolbar input,
.bl-newsletter__form input {
    max-width: 100%
}

.bd-prose table,
.sv-overview table {
    display: block;
    width: 100%;
    overflow-x: auto
}

.offcanvas__panel {
    max-width: 100vw
}

@media (max-width:374px) {
    .hero-showcase {
        padding: 5.75rem .75rem 4.75rem;
        min-height: auto
    }

    .hero-showcase__title {
        font-size: clamp(1.85rem, 8vw, 2.35rem)
    }

    .hero-showcase__rotate {
        min-width: 9ch
    }

    .hero-showcase__btn {
        min-height: 48px
    }

    .site-header__cta {
        padding: .65rem 1rem
    }
}

@media (max-width:319px) {
    .container {
        padding-left: .75rem;
        padding-right: .75rem
    }
}

@media (max-width:1023px) {
    a, button, .btn, .home-btn, .site-header__cta, .site-footer__cta,
    .hero-showcase__btn, .hero-showcase__scroll, .site-header__menu-toggle,
    .site-footer__social a, .site-footer__col a, .site-footer__bottom-links a,
    .site-footer__contact a, .home-service__link, .home-location,
    .home-copy a, .home-lead a, .hero-showcase__lead a, .site-header__logo {
        min-height: 48px
    }

    .hero-showcase__scroll,
    .site-header__menu-toggle,
    .site-footer__social a,
    .site-header__apps {
        min-width: 48px
    }

    .home-copy a,
    .home-lead a,
    .hero-showcase__lead a {
        display: inline-flex;
        align-items: center;
        vertical-align: middle
    }

    .home-process,
    .home-why,
    .home-services,
    .home-testimonials,
    .home-faq,
    .home-tech,
    .home-locations,
    .site-footer {
        content-visibility: auto;
        contain-intrinsic-size: auto 640px
    }
}

.fas, .fab, .far, .fal, .fad {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1
}