:root {
    --red: #8B0000;
    --red2: #b30000;
    --hot: #ff4d4d;
    --ink: #0b0b0d;
    --paper: #faf6f5;
    --line: rgba(255, 255, 255, .12)
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px
}

body {
    font-family: 'Inter', sans-serif;
    color: #2a2a2e;
    background: var(--paper);
    overflow-x: hidden
}

h1,
h2,
h3,
h4,
h5,
h6,
.price,
.eyebrow {
    font-family: 'Sora', sans-serif
}

img {
    max-width: 100%
}

.wnc-red {
    color: var(--red2)
}

.sec {
    padding: 110px 0;
    position: relative
}

.narrow {
    max-width: 820px
}

.dark {
    background: radial-gradient(circle at 85% 0, rgba(139, 0, 0, .3), transparent 45%), var(--ink);
    color: #e9e7e7;
    position: relative
}

.light {
    background: linear-gradient(180deg, #fff, #f6eeed);
    color: #2a2a2e
}

.sec>.container {
    position: relative;
    z-index: 1
}

.dark.sec {
    overflow: hidden
}

.dark.sec:after {
    content: '';
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 22% 30%, rgba(139, 0, 0, .2), transparent 40%);
    animation: drift 18s ease-in-out infinite alternate;
    pointer-events: none
}

@keyframes drift {
    to {
        transform: translate(12%, 8%) scale(1.15)
    }
}

h2 {
    font-weight: 800;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    line-height: 1.2;
    margin-bottom: 1rem
}

.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .75rem;
    font-weight: 700;
    color: var(--red2);
    margin-bottom: .8rem;
    padding-bottom: .4rem;
    position: relative
}

.eyebrow:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--red);
    transition: width .9s ease .35s
}

.in .eyebrow:after,
.eyebrow.in:after {
    width: 100%
}

.dark .eyebrow {
    color: #ff6b6b
}

.dark .eyebrow:after {
    background: #ff6b6b
}

.text-muted-w,
.lead-w {
    color: #b9b5b5
}

.lead-w {
    font-size: 1.08rem;
    line-height: 1.75;
    margin-bottom: 1.6rem
}

/* buttons */
.btn-wnc {
    background: linear-gradient(135deg, var(--red), var(--red2));
    color: #fff;
    border: 0;
    font-weight: 600;
    border-radius: 50px;
    padding: .6rem 1.4rem;
    box-shadow: 0 8px 24px rgba(139, 0, 0, .45);
    transition: box-shadow .3s, transform .25s
}

.btn-wnc:hover {
    color: #fff;
    box-shadow: 0 14px 32px rgba(139, 0, 0, .6)
}

.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    padding: .35rem .35rem .35rem 1.3rem;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--red), #c40000);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(139, 0, 0, .5);
    transition: .3s
}

.btn-pill .arr {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0b0b0d;
    display: grid;
    place-items: center;
    font-size: .8rem;
    transition: .3s
}

.btn-pill:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(139, 0, 0, .65)
}

.btn-pill:hover .arr {
    transform: rotate(-45deg);
    background: #fff;
    color: var(--red)
}

.btn-pill.big {
    font-size: 1rem;
    padding: .45rem .45rem .45rem 1.6rem
}

.btn-pill.big .arr {
    width: 44px;
    height: 44px
}

.btn-ghost {
    border: 2px solid rgba(255, 255, 255, .35);
    color: #fff;
    border-radius: 50px;
    font-weight: 600;
    transition: .3s
}

.btn-ghost:hover {
    background: #fff;
    color: var(--red);
    border-color: #fff
}

.tbtn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: var(--red);
    color: #fff;
    transition: .3s
}

.tbtn:hover {
    background: var(--red2);
    transform: scale(1.1)
}

/* scroll progress */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--red), var(--hot));
    transform-origin: left;
    transform: scaleX(0);
    z-index: 1100;
    pointer-events: none
}

/* nav: floating pill */
.navbar {
    padding: .7rem 0;
    transition: .35s
}

.navbar>.container,
.navbar>.container-fluid {
    max-width: none;
    width: calc(100% - 2 * var(--wnc-gutter));
    margin-inline: auto;
    background: rgba(11, 11, 13, .5);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 60px;
    padding: .45rem .9rem .45rem 1.3rem;
    transition: .35s
}

.navbar.scrolled>.container,
.navbar.scrolled>.container-fluid {
    background: rgba(11, 11, 13, .92);
    border-color: rgba(139, 0, 0, .7);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .45)
}

.navbar-brand img {
    height: 54px;
    width: auto;
    transition: .3s
}

.navbar .nav-link {
    color: #ddd;
    font-weight: 500;
    position: relative;
    padding: .5rem .8rem !important
}

.navbar .nav-link:after {
    content: '';
    position: absolute;
    left: .8rem;
    right: .8rem;
    bottom: 2px;
    height: 2px;
    background: var(--hot);
    transform: scaleX(0);
    transition: .3s
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #fff
}

.navbar .nav-link:hover:after,
.navbar .nav-link.active:after {
    transform: scaleX(1)
}

.navbar-toggler {
    border: 0;
    font-size: 1.4rem;
    color: #fff
}

.navbar-toggler:focus {
    box-shadow: none
}

@media(max-width:1199px) {

    .navbar>.container,
    .navbar>.container-fluid {
        border-radius: 26px
    }

    .navbar-collapse {
        padding: 1rem 0 .4rem
    }
}

@media(max-width:575px) {

    .navbar>.container,
    .navbar>.container-fluid {
        width: calc(100% - 20px)
    }
}

.wnc-dd {
    background: rgba(11, 11, 13, .97);
    border: 1px solid rgba(139, 0, 0, .7);
    border-radius: 14px;
    padding: .5rem
}

.wnc-dd .dropdown-item {
    color: #ddd;
    border-radius: 8px;
    padding: .5rem 1rem;
    transition: .25s
}

.wnc-dd .dropdown-item:hover {
    background: var(--red);
    color: #fff;
    padding-left: 1.3rem
}

@media(min-width:1200px) {
    .dropdown:hover>.wnc-dd {
        display: block
    }
}

/* hero */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 140px 0 110px;
    overflow: hidden;
    position: relative
}

.hero:before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 30%), rgba(255, 60, 60, .17), transparent 60%);
    pointer-events: none
}

.net {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.hero h1 {
    font-weight: 800;
    font-size: clamp(2.1rem, 4.7vw, 3.7rem);
    line-height: 1.15;
    margin: 1rem 0 1.2rem;
    color: #fff
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    animation: float 9s ease-in-out infinite;
    pointer-events: none
}

.o1 {
    width: 340px;
    height: 340px;
    background: rgba(139, 0, 0, .5);
    top: 8%;
    left: -80px
}

.o2 {
    width: 280px;
    height: 280px;
    background: rgba(179, 0, 0, .35);
    bottom: 5%;
    right: 5%;
    animation-delay: -4s
}

@keyframes float {
    50% {
        transform: translateY(-30px) scale(1.06)
    }
}

.hero-stage {
    position: relative;
    transition: transform .25s ease-out;
    will-change: transform
}

.hero-card {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(139, 0, 0, .6);
    border-radius: 26px;
    padding: 1.4rem;
    box-shadow: 0 0 70px rgba(139, 0, 0, .4);
    animation: float 8s ease-in-out infinite
}

.hero-img {
    width: 100%;
    border-radius: 16px;
    display: block
}

.fchip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .95rem;
    border-radius: 50px;
    background: rgba(11, 11, 13, .82);
    border: 1px solid rgba(255, 90, 90, .5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    animation: float 6s ease-in-out infinite;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .4)
}

.fchip i {
    color: var(--hot)
}

.fc1 {
    top: -16px;
    left: -26px
}

.fc2 {
    top: 20%;
    right: -34px;
    animation-delay: -2s
}

.fc3 {
    bottom: 24%;
    left: -40px;
    animation-delay: -4s
}

.fc4 {
    bottom: -18px;
    right: 8%;
    animation-delay: -1s
}

@media(max-width:575px) {
    .fchip {
        display: none
    }
}

.scue {
    position: absolute;
    left: 50%;
    bottom: 26px;
    margin-left: -22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35);
    color: #fff;
    display: grid;
    place-items: center;
    text-decoration: none;
    z-index: 2;
    animation: bob 2s ease-in-out infinite
}

.scue:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff
}

@keyframes bob {
    50% {
        transform: translateY(8px)
    }
}

/* marquee */
.mq {
    overflow: hidden;
    background: linear-gradient(90deg, #5c0000, var(--red), #5c0000);
    border-block: 1px solid rgba(255, 255, 255, .15);
    padding: 1rem 0
}

.mq-track {
    display: flex;
    width: max-content;
    animation: mq 45s linear infinite
}

.mq:hover .mq-track {
    animation-play-state: paused
}

.mq span {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: 0 1.6rem;
    color: #fff;
    font: 600 1rem 'Sora', sans-serif;
    white-space: nowrap
}

.mq span:after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    margin-left: 1.6rem
}

@keyframes mq {
    to {
        transform: translateX(-50%)
    }
}

/* reveal */
[data-reveal] {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .8s ease, transform .8s ease;
    transition-delay: var(--d, 0ms)
}

[data-reveal=left] {
    transform: translateX(-56px)
}

[data-reveal=right] {
    transform: translateX(56px)
}

[data-reveal=zoom] {
    transform: scale(.86)
}

[data-reveal=flip] {
    transform: perspective(900px) rotateX(-16deg) translateY(28px);
    transform-origin: 50% 0
}

[data-reveal].in {
    opacity: 1;
    transform: none
}

/* section heading */
.shead {
    margin-bottom: 3.2rem;
    text-align: center
}

.shead h2 {
    margin-bottom: .6rem
}

.ssub {
    max-width: 560px;
    margin: 0 auto;
    color: #77767c;
    font-size: 1.02rem
}

.dark .ssub {
    color: #b9b5b5
}

.shead-l {
    text-align: left;
    margin-bottom: 0
}

.shead-l .ssub {
    margin-left: 0
}

/* word-by-word text */
.lead-t {
    font-size: clamp(1.1rem, 1.9vw, 1.4rem);
    line-height: 1.75;
    font-weight: 500;
    margin: 0
}

.words span {
    opacity: .2;
    transition: opacity .3s
}

.words span.lit {
    opacity: 1
}

/* SERVICE EXPLORER */
.sx {
    display: grid;
    grid-template-columns: minmax(290px, .85fr) 1.4fr;
    gap: 1.4rem;
    align-items: stretch
}

.sx-list {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.sx-tab {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    text-align: left;
    padding: .95rem 1.1rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
    color: #ddd;
    font: 600 .92rem 'Sora', sans-serif;
    transition: .35s
}

.sx-n {
    font-size: .75rem;
    color: #ff8f8f;
    width: 1.5rem
}

.sx-tab>i:not(.sx-go) {
    width: 1.3rem;
    color: #ff7a7a;
    text-align: center
}

.sx-t {
    flex: 1
}

.sx-go {
    opacity: 0;
    transform: translateX(-8px);
    transition: .35s
}

.sx-tab:hover {
    background: rgba(139, 0, 0, .35);
    color: #fff
}

.sx-tab.on {
    background: linear-gradient(135deg, var(--red), var(--red2));
    color: #fff;
    border-color: transparent;
    transform: translateX(8px);
    box-shadow: 0 12px 28px rgba(139, 0, 0, .5)
}

.sx-tab.on .sx-go {
    opacity: 1;
    transform: none
}

.sx-tab.on .sx-n,
.sx-tab.on>i:not(.sx-go) {
    color: #fff
}

.light .sx-tab {
    background: #fff;
    border-color: rgba(139, 0, 0, .15);
    color: #2a2a2e
}

.light .sx-tab:hover {
    background: #fbeaea
}

.light .sx-tab.on {
    background: linear-gradient(135deg, var(--red), var(--red2));
    color: #fff
}

.sx-view {
    position: relative;
    min-height: 480px;
    border-radius: 24px;
    overflow: hidden;
    background: #150000;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .4)
}

.sx-panel {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, #3a0000, #0b0b0d) center/cover no-repeat;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.06);
    transition: opacity .6s, transform .9s, visibility .6s
}

.sx-panel.on {
    opacity: 1;
    visibility: visible;
    transform: none
}

.sx-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .9)), linear-gradient(135deg, rgba(139, 0, 0, .55), transparent 60%)
}

.sx-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.2rem;
    max-width: 580px;
    color: #fff
}

.sx-body>* {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s, transform .6s
}

.sx-panel.on .sx-body>* {
    opacity: 1;
    transform: none
}

.sx-panel.on .sx-body>:nth-child(2) {
    transition-delay: .1s
}

.sx-panel.on .sx-body>:nth-child(3) {
    transition-delay: .2s
}

.sx-panel.on .sx-body>:nth-child(4) {
    transition-delay: .3s
}

.sx-ico {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--red);
    font-size: 1.4rem;
    margin-bottom: 1rem
}

.sx-body h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff
}

.sx-body p {
    color: #e5e0e0;
    margin-bottom: 1.2rem
}

@media(max-width:991px) {
    .sx {
        grid-template-columns: 1fr
    }

    .sx-list {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: .5rem
    }

    .sx-tab {
        flex: none;
        width: auto;
        white-space: nowrap
    }

    .sx-n,
    .sx-go {
        display: none
    }

    .sx-tab.on {
        transform: none
    }

    .sx-view {
        min-height: 440px
    }
}

/* WHY: bento */
.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.1rem
}

.bx-w {
    grid-column: span 3
}

.bx-w.bx-4 {
    grid-column: span 4
}

.bx-w.bx-2 {
    grid-column: span 2
}

.bx-w.bx-6 {
    grid-column: span 6
}

.bx {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 190px;
    padding: 2rem 1.8rem;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(139, 0, 0, .14);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
    transition: transform .4s, box-shadow .4s
}

.bx:before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(139, 0, 0, .18), transparent 60%);
    opacity: 0;
    transition: opacity .4s;
    pointer-events: none
}

.bx:hover:before {
    opacity: 1
}

.bx:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(139, 0, 0, .22)
}

.bx>* {
    position: relative
}

.bx-n {
    display: block;
    font: 800 3rem/1 'Sora', sans-serif;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--red);
    margin-bottom: 1rem;
    transition: .4s
}

.bx:hover .bx-n {
    color: var(--red)
}

.bx p {
    margin: 0;
    font-weight: 500;
    font-size: 1.06rem;
    max-width: 36ch
}

.bx-4 p,
.bx-6 p {
    max-width: 50ch;
    font-size: 1.18rem
}

.bx-w:first-child .bx {
    background: linear-gradient(135deg, var(--red), #4a0000);
    color: #fff;
    border-color: transparent
}

.bx-w:first-child .bx-n {
    -webkit-text-stroke-color: #fff
}

.bx-w:first-child .bx:hover .bx-n {
    color: #fff
}

.dark .bx {
    background: rgba(255, 255, 255, .05);
    border-color: var(--line);
    box-shadow: none
}

.dark .bx p {
    color: #ece9e9
}

.dark .bx-n {
    -webkit-text-stroke-color: #ff5d5d
}

.dark .bx:hover .bx-n {
    color: #ff5d5d
}

.dark .bx-w:first-child .bx {
    background: linear-gradient(135deg, var(--red), #4a0000)
}

@media(max-width:991px) {

    .bx-w,
    .bx-w.bx-4,
    .bx-w.bx-2,
    .bx-w.bx-3 {
        grid-column: span 3
    }

    .bx-w.bx-6 {
        grid-column: span 6
    }
}

@media(max-width:575px) {

    .bx-w,
    .bx-w.bx-4,
    .bx-w.bx-2,
    .bx-w.bx-3,
    .bx-w.bx-6 {
        grid-column: span 6
    }
}

/* PORTFOLIO showcase */
.pfx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-bottom: 2rem
}

.pfx-chip {
    padding: .55rem 1.1rem;
    border-radius: 50px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .06);
    color: #ddd;
    font-size: .88rem;
    transition: .3s
}

.pfx-chip i {
    margin-right: .5rem;
    color: #ff7a7a
}

.pfx-chip:hover {
    background: rgba(139, 0, 0, .5);
    color: #fff;
    transform: translateY(-2px)
}

.pfx-chip.on {
    background: linear-gradient(135deg, var(--red), var(--red2));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(139, 0, 0, .5)
}

.pfx-chip.on i {
    color: #fff
}

@media(max-width:767px) {
    .pfx-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: .5rem
    }

    .pfx-chip {
        white-space: nowrap;
        flex: none
    }
}

.pfx-stage {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.4rem;
    align-items: stretch
}

.pfx-view {
    position: relative;
    margin: 0;
    min-height: 440px;
    border-radius: 24px;
    overflow: hidden;
    background: #1a0000;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5)
}

.pfx-img {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, #4a0000, #111) center/cover no-repeat;
    opacity: 0;
    transform: scale(1.07);
    transition: opacity .7s, transform 1.3s
}

.pfx-img.on {
    opacity: 1;
    transform: none
}

.pfx-view:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .92));
    pointer-events: none
}

.pfx-view figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.8rem;
    z-index: 2
}

.pfx-view figcaption.swap {
    animation: swap .55s
}

@keyframes swap {
    from {
        opacity: 0;
        transform: translateY(14px)
    }
}

.pfx-view small {
    color: #ff8f8f;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .72rem
}

.pfx-view h3 {
    color: #fff;
    font-size: 1.6rem;
    margin: .3rem 0 0
}

.pfx-arrows {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: .5rem;
    z-index: 3
}

.pfx-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    justify-content: center
}

.pfx-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    text-align: left;
    padding: 1.25rem 1.3rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
    color: #ddd;
    font-weight: 600;
    transition: .35s
}

.pfx-item b {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(139, 0, 0, .5);
    color: #fff;
    font: 700 .9rem 'Sora', sans-serif
}

.pfx-item span {
    flex: 1
}

.pfx-item i {
    opacity: 0;
    transition: .3s
}

.pfx-item:hover {
    background: rgba(139, 0, 0, .35);
    color: #fff
}

.pfx-item:hover i {
    opacity: 1
}

.pfx-item.on {
    background: linear-gradient(135deg, var(--red), var(--red2));
    color: #fff;
    border-color: transparent;
    transform: translateX(-8px);
    box-shadow: 0 12px 28px rgba(139, 0, 0, .5)
}

.pfx-item.on i {
    opacity: 1
}

@media(max-width:991px) {
    .pfx-stage {
        grid-template-columns: 1fr
    }

    .pfx-view {
        min-height: 340px
    }

    .pfx-item.on {
        transform: none
    }
}

/* PROCESS stepper */
.stp {
    position: relative
}

.stp-track {
    position: relative
}

.stp-nodes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--n), 1fr);
    position: relative;
    z-index: 1
}

.stp-node {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    text-align: center;
    padding: 0 .3rem;
    color: #77767c;
    font-weight: 600;
    font-size: .9rem;
    transition: color .3s
}

.stp-node b {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto .8rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(139, 0, 0, .25);
    color: var(--red);
    font: 700 1.1rem 'Sora', sans-serif;
    transition: .4s
}

.stp-node.done b {
    background: var(--red);
    color: #fff;
    border-color: var(--red)
}

.stp-node.on b {
    background: linear-gradient(135deg, var(--red), var(--red2));
    color: #fff;
    border-color: transparent;
    transform: scale(1.15);
    box-shadow: 0 0 0 8px rgba(139, 0, 0, .15)
}

.stp-node.on {
    color: #1c1c20
}

.stp-node:hover b {
    transform: scale(1.1)
}

.stp-bar {
    position: absolute;
    top: 26px;
    left: calc(50% / var(--n));
    right: calc(50% / var(--n));
    height: 3px;
    background: rgba(139, 0, 0, .16);
    border-radius: 3px;
    overflow: hidden
}

.stp-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--red), var(--hot));
    transform: scaleX(var(--p, 0));
    transform-origin: left;
    transition: transform .6s
}

.stp-panels {
    display: grid;
    margin-top: 2.4rem
}

.stp-panel {
    grid-area: 1/1;
    display: flex;
    gap: 1.8rem;
    align-items: center;
    padding: 2.2rem 2.4rem;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(139, 0, 0, .15);
    box-shadow: 0 18px 44px rgba(139, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity .5s, transform .5s, visibility .5s
}

.stp-panel.on {
    opacity: 1;
    visibility: visible;
    transform: none
}

.stp-big {
    font: 800 4.6rem/1 'Sora', sans-serif;
    color: transparent;
    -webkit-text-stroke: 2px var(--red)
}

.stp-panel h3 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: .4rem
}

.stp-panel p {
    margin: 0;
    color: #5b5b60;
    font-size: 1.02rem
}

.stp-ctl {
    display: flex;
    justify-content: center;
    gap: .8rem;
    margin-top: 1.4rem
}

@media(max-width:767px) {
    .stp-node span {
        display: none
    }

    .stp-node b {
        margin-bottom: 0
    }

    .stp-panel {
        flex-direction: column;
        text-align: center;
        padding: 1.6rem
    }

    .stp-big {
        font-size: 3.4rem
    }
}

/* TESTIMONIALS */
.tcar {
    max-width: 920px;
    margin: 0 auto;
    position: relative
}

.tst {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.8rem;
    align-items: start;
    background: #fff;
    color: #2a2a2e;
    border-radius: 22px;
    padding: 2.4rem;
    margin: 0;
    box-shadow: 0 18px 44px rgba(139, 0, 0, .18);
    border-left: 6px solid var(--red)
}

.tst-mark {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--red), var(--red2));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.6rem
}

.carousel-item.active .tst-mark {
    animation: pop .7s cubic-bezier(.3, 1.6, .5, 1)
}

@keyframes pop {
    from {
        transform: scale(.3) rotate(-30deg);
        opacity: 0
    }
}

.tst p {
    font-size: 1.15rem;
    font-style: italic;
    margin: 0 0 1rem
}

.tst footer {
    color: #555
}

.tst footer strong {
    color: var(--red)
}

.tnav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.6rem
}

.tnav .carousel-indicators {
    position: static;
    margin: 0;
    gap: 0
}

.tnav .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    border: 0;
    background-color: var(--red);
    opacity: .35;
    margin: 0 5px;
    padding: 0;
    transition: .4s
}

.tnav .carousel-indicators .active {
    opacity: 1;
    width: 28px
}

@media(max-width:575px) {
    .tst {
        grid-template-columns: 1fr;
        padding: 1.6rem
    }
}

/* FAQ */
.faq-sec {
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--red);
    background: radial-gradient(circle at 12% 18%, rgba(139, 0, 0, .10), transparent 42%), radial-gradient(circle at 92% 82%, rgba(179, 0, 0, .12), transparent 40%), linear-gradient(180deg, #fff, #fbf1f0)
}

.faq-sec:before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(139, 0, 0, .2) 1.2px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
    animation: dots 40s linear infinite;
    pointer-events: none
}

@keyframes dots {
    to {
        background-position: 260px 260px
    }
}

.faq-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none
}

.faq-blob.b1 {
    width: 340px;
    height: 340px;
    background: rgba(139, 0, 0, .16);
    top: -80px;
    left: -90px;
    animation: float 10s ease-in-out infinite
}

.faq-blob.b2 {
    width: 300px;
    height: 300px;
    background: rgba(255, 80, 80, .16);
    bottom: -80px;
    right: -60px;
    animation: float 12s -5s ease-in-out infinite
}

.faq-tools {
    position: relative;
    max-width: 520px;
    margin: -1rem auto 2.4rem
}

.faq-tools i {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--red)
}

.faq-search {
    width: 100%;
    padding: .85rem 1.2rem .85rem 2.8rem;
    border-radius: 50px;
    border: 1px solid rgba(139, 0, 0, .25);
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .06);
    outline: none;
    transition: .3s
}

.faq-search:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 .25rem rgba(139, 0, 0, .15)
}

.faq-none {
    text-align: center;
    color: #666;
    margin-top: 1rem
}

.faq-i {
    margin-bottom: 1rem
}

.wnc-acc .accordion-item {
    background: #fff;
    border: 1px solid rgba(139, 0, 0, .16);
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .06);
    transition: box-shadow .35s, border-color .35s
}

.wnc-acc .accordion-item:hover {
    box-shadow: 0 14px 30px rgba(139, 0, 0, .16);
    border-color: rgba(139, 0, 0, .4)
}

.wnc-acc .accordion-button {
    background: transparent;
    color: #1c1c20;
    font: 600 .95rem 'Sora', sans-serif;
    padding: 1.1rem 1.2rem;
    box-shadow: none;
    gap: .8rem
}

.wnc-acc .accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, var(--red), var(--red2));
    color: #fff
}

.wnc-acc .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1)
}

.wnc-acc .accordion-body {
    color: #4a4a50;
    padding: 1.1rem 1.2rem 1.3rem
}

/* ABOUT */
.tick {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    height: 100%;
    padding: 1.2rem 1.3rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    transition: .35s
}

.tick:hover {
    background: rgba(139, 0, 0, .3);
    border-color: var(--red2);
    transform: translateY(-4px)
}

.tick i {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--red);
    color: #fff;
    font-size: .85rem;
    transition: transform .6s
}

.tick:hover i {
    transform: rotate(360deg)
}

.tick span {
    padding-top: .35rem
}

.vx {
    display: flex;
    gap: 1rem;
    min-height: 300px
}

.vx-item {
    position: relative;
    flex: 1;
    overflow: hidden;
    padding: 1.6rem 1.3rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
    cursor: pointer;
    outline: none;
    transition: flex .6s cubic-bezier(.3, .8, .3, 1), background .4s, border-color .4s
}

.vx-item.on {
    flex: 2.6;
    background: linear-gradient(160deg, var(--red), #3a0000);
    border-color: var(--red2)
}

.vx-l {
    display: block;
    font: 800 3.4rem/1 'Sora', sans-serif;
    color: transparent;
    -webkit-text-stroke: 1.5px #ff7a7a;
    margin-bottom: 1rem;
    transition: .4s
}

.vx-item.on .vx-l {
    color: #fff;
    -webkit-text-stroke-color: #fff
}

.vx-item h5 {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .6rem;
    word-break: break-word
}

.vx-item p {
    margin: 0;
    color: #ece3e3;
    font-size: .92rem;
    opacity: 0;
    max-height: 0;
    transition: opacity .5s, max-height .5s
}

.vx-item.on p {
    opacity: 1;
    max-height: 220px
}

@media(max-width:767px) {
    .vx {
        flex-direction: column;
        min-height: 0
    }

    .vx-item,
    .vx-item.on {
        flex: none
    }

    .vx-item p {
        opacity: 1;
        max-height: none
    }
}

/* SERVICES: find your fit */
.fit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
    max-width: 1000px;
    margin: 0 auto
}

.fit-list {
    display: flex;
    flex-direction: column;
    gap: .6rem
}

.fit-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    text-align: left;
    padding: 1.05rem 1.2rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
    color: #e9e7e7;
    font-weight: 600;
    transition: .35s
}

.fit-q i {
    opacity: 0;
    transition: .3s
}

.fit-q:hover {
    background: rgba(139, 0, 0, .3)
}

.fit-q.on {
    background: rgba(139, 0, 0, .55);
    border-color: var(--hot);
    transform: translateX(6px)
}

.fit-q.on i {
    opacity: 1
}

.fit-a {
    position: relative;
    overflow: hidden;
    padding: 2.4rem;
    border-radius: 24px;
    background: linear-gradient(160deg, var(--red), #3a0000);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    box-shadow: 0 24px 60px rgba(139, 0, 0, .4)
}

.fit-a small {
    color: #ffd0d0;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    font-size: .72rem
}

.fit-a h3 {
    font-size: 1.6rem;
    margin: .6rem 0 0
}

.fit-a h3.swap {
    animation: swap .5s
}

.fit-a .btn {
    background: #fff;
    color: var(--red);
    box-shadow: none
}

@media(max-width:767px) {
    .fit {
        grid-template-columns: 1fr
    }

    .fit-q.on {
        transform: none
    }
}

/* PACKAGES */
.wnc-tabs {
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2.2rem
}

.wnc-tabs .nav-link {
    color: #ddd;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
    border-radius: 50px;
    font-size: .88rem;
    transition: .3s
}

.wnc-tabs .nav-link:hover {
    background: rgba(139, 0, 0, .5);
    color: #fff
}

.wnc-tabs .nav-link.active {
    background: linear-gradient(135deg, var(--red), var(--red2));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(139, 0, 0, .5)
}

@media(max-width:767px) {
    .wnc-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: .6rem
    }

    .wnc-tabs .nav-link {
        white-space: nowrap
    }
}

.pkg {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: transform .4s, border-color .4s, box-shadow .4s
}

.pkg:before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 80, 80, .18), transparent 60%);
    opacity: 0;
    transition: opacity .4s;
    pointer-events: none
}

.pkg:hover:before {
    opacity: 1
}

.pkg:hover {
    transform: translateY(-10px);
    border-color: var(--red2);
    box-shadow: 0 24px 50px rgba(139, 0, 0, .45)
}

.pkg>* {
    position: relative
}

.pkg-head {
    padding: 1.8rem 1.6rem 1.3rem;
    text-align: center;
    background: linear-gradient(160deg, rgba(139, 0, 0, .5), rgba(139, 0, 0, .12))
}

.pkg.pop {
    border-color: var(--red2);
    box-shadow: 0 0 0 1px var(--red2), 0 20px 50px rgba(139, 0, 0, .35)
}

.pkg.pop .pkg-head {
    background: linear-gradient(160deg, var(--red), #4a0000)
}

.pkg small {
    color: #ff8f8f;
    font-weight: 700;
    letter-spacing: .12em
}

.pkg.pop small {
    color: #ffd0d0
}

.price {
    font-size: 2.4rem;
    font-weight: 800;
    color: #fff;
    margin: .3rem 0
}

.pkg h4 {
    font-size: 1rem;
    color: #ddd;
    margin: 0
}

.pkg ul {
    list-style: none;
    padding: 0 1.6rem;
    margin: 1.2rem 0;
    flex: 1
}

.pkg li {
    padding: .35rem 0;
    font-size: .9rem;
    color: #d0cccc;
    display: flex;
    gap: .6rem
}

.pkg li i {
    color: #ff5d5d;
    margin-top: .3rem;
    font-size: .75rem
}

.pkg-list li:nth-child(n+7) {
    display: none
}

.pkg-list.open li:nth-child(n+7) {
    display: flex
}

.pkg-more {
    background: none;
    border: 0;
    color: #ff8f8f;
    font-weight: 600;
    font-size: .85rem;
    margin: -.4rem 1.6rem 1rem;
    text-align: left;
    padding: 0
}

.pkg-more:hover {
    color: #fff
}

.days {
    font-size: .85rem;
    margin: 0 1.6rem 1rem;
    padding: .6rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    text-align: center
}

.pkg-btn {
    display: block;
    margin: 0 1.6rem 1.6rem
}

.badge-pop {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    background: #fff;
    color: var(--red);
    font-size: .7rem;
    font-weight: 700;
    padding: .25rem .8rem;
    border-radius: 50px;
    text-transform: uppercase;
    animation: pop .8s cubic-bezier(.3, 1.6, .5, 1) both
}

/* banner / cta */
.banner {
    padding: 160px 0 90px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(90deg, rgba(11, 11, 13, .94), rgba(60, 0, 0, .75)), var(--bg) center/cover no-repeat
}

.banner h1 {
    font-weight: 800;
    font-size: clamp(1.9rem, 4vw, 3.1rem);
    line-height: 1.2;
    color: #fff;
    margin-bottom: 1rem
}

.banner .container.in h1:after {
    width: 90px
}

.banner h1:after {
    content: '';
    display: block;
    width: 0;
    height: 4px;
    border-radius: 4px;
    margin-top: 1rem;
    background: linear-gradient(90deg, var(--hot), var(--red));
    transition: width 1s ease .5s
}

.banner>.container {
    position: relative;
    z-index: 1
}

.narrow-l {
    max-width: 900px
}

.cta {
    background: linear-gradient(135deg, #5c0000, var(--red) 55%, #3a0000);
    color: #fff;
    overflow: hidden
}

.cta:before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .12), transparent 40%)
}

.cta-orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    animation: float 9s ease-in-out infinite;
    pointer-events: none
}

.cta-orb.c1 {
    width: 220px;
    height: 220px;
    top: -60px;
    left: -40px
}

.cta-orb.c2 {
    width: 160px;
    height: 160px;
    bottom: -40px;
    right: 8%;
    animation-delay: -4s
}

.cta .cta-btn {
    color: var(--red);
    font-weight: 700;
    border-radius: 50px;
    padding: .8rem 2rem;
    animation: ctapulse 2.6s ease-out infinite
}

@keyframes ctapulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .55)
    }

    70%,
    100% {
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0)
    }
}

.rel a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px
}

.rel a:hover {
    color: #ffb3b3
}

/* contact */
.cform {
    background: rgba(11, 11, 13, .9);
    padding: 2rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .4)
}

.cform .form-control,
.cform .form-select {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    border-radius: 12px
}

.cform .form-floating>label {
    color: #a9a5a5
}

.cform .form-floating>label:after {
    background: transparent !important
}

.cform .form-floating>.form-control:focus~label,
.cform .form-floating>.form-control:not(:placeholder-shown)~label,
.cform .form-floating>.form-select~label {
    color: #ff9a9a
}

.cform .form-select option {
    color: #000
}

.cform .form-control:focus,
.cform .form-select:focus {
    background: rgba(255, 255, 255, .1);
    border-color: #ff5d5d;
    box-shadow: 0 0 0 .2rem rgba(179, 0, 0, .35);
    color: #fff
}

.info {
    padding: 1.2rem;
    border-radius: 14px;
    background: #fff;
    border-left: 5px solid var(--red);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06)
}

.dark-text {
    color: #2a2a2e
}

.next {
    list-style: none;
    counter-reset: n;
    padding: 0;
    margin: 0
}

.next li {
    counter-increment: n;
    position: relative;
    padding: .2rem 0 1.3rem 3.2rem
}

.next li:before {
    content: counter(n);
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: grid;
    place-items: center;
    font: 700 .95rem 'Sora', sans-serif
}

.next li:after {
    content: '';
    position: absolute;
    left: 17px;
    top: 40px;
    bottom: 4px;
    width: 2px;
    background: rgba(139, 0, 0, .25)
}

.next li:last-child:after {
    display: none
}

/* footer */
.footer {
    background: #050506;
    color: #ddd;
    padding: 70px 0 20px;
    border-top: 3px solid var(--red)
}

.footer-logo {
    height: 80px;
    width: auto
}

@media (max-width: 575px) {
    .navbar-brand img {
        height: 42px
    }

    .footer-logo {
        height: 62px
    }
}

.footer h6 {
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #fff;
    margin-bottom: 1rem
}

.footer a {
    color: #aaa;
    text-decoration: none;
    transition: .3s
}

.footer li {
    margin-bottom: .5rem
}

.footer li a:hover {
    color: #fff;
    padding-left: 6px
}

.social {
    display: flex;
    gap: .6rem
}

.social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    display: grid;
    place-items: center;
    color: #fff
}

.social a:hover {
    background: var(--red);
    transform: translateY(-4px)
}

.footer-bottom {
    border-top: 1px solid var(--line);
    margin-top: 2.5rem;
    padding-top: 1.2rem;
    text-align: center;
    font-size: .85rem;
    color: #888
}

/* back to top with progress ring + section dots */
.to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: grid;
    place-items: center;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: .4s;
    z-index: 99;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .4)
}

.to-top.show {
    opacity: 1;
    visibility: visible;
    transform: none
}

.to-top:hover {
    background: var(--red);
    color: #fff
}

.to-top svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg)
}

.to-top circle {
    fill: none;
    stroke-width: 3
}

.to-top .rbg {
    stroke: rgba(255, 255, 255, .15)
}

.to-top .rfg {
    stroke: var(--hot);
    stroke-dasharray: 132;
    stroke-dashoffset: 132;
    stroke-linecap: round
}

.secnav {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    display: none;
    flex-direction: column;
    gap: 14px
}

@media(min-width:768px) {
    .secnav.has {
        display: flex
    }
}

@media(max-width:1299px) {
    .secnav {
        right: 8px;
        gap: 12px
    }

    .secnav a {
        width: 10px;
        height: 10px
    }

    /* touch par tap karna aasan ho */
    .secnav a:after {
        content: '';
        position: absolute;
        inset: -8px
    }
}

.secnav a {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(139, 0, 0, .45);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
    transition: .3s
}

.secnav a:hover,
.secnav a.on {
    background: var(--red2);
    transform: scale(1.35)
}

.secnav a:before {
    content: attr(data-l);
    position: absolute;
    right: 26px;
    top: 50%;
    transform: translate(8px, -50%);
    padding: .25rem .7rem;
    border-radius: 50px;
    background: var(--ink);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: .3s
}

.secnav a:hover:before,
.secnav a.on:before {
    opacity: 1;
    transform: translate(0, -50%)
}

/* cursor */
.cursor-dot,
.cursor-ring {
    display: none
}

body.has-cursor,
body.has-cursor a,
body.has-cursor button {
    cursor: none
}

body.has-cursor .cursor-dot,
body.has-cursor .cursor-ring {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    margin: -4px 0 0 -4px;
    opacity: 0;
    transition: opacity .3s
}

body.cursor-on .cursor-dot,
body.cursor-on .cursor-ring {
    opacity: 1
}

.cursor-dot {
    width: 8px;
    height: 8px;
    background: #ff2b2b
}

.cursor-ring {
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px !important;
    border: 2px solid var(--red2);
    transition: width .25s, height .25s, margin .25s, background .25s, opacity .3s
}

.cursor-ring.hover {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px !important;
    background: rgba(139, 0, 0, .25);
    border-color: #ff5d5d
}

.cursor-ring.down {
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px !important
}

@media(max-width:575px) {
    .sec {
        padding: 76px 0
    }

    .hero {
        padding-top: 120px
    }

    .cform {
        padding: 1.3rem
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important
    }

    .words span {
        opacity: 1
    }

    .eyebrow:after {
        width: 100%
    }

    .banner h1:after {
        width: 90px
    }
}

/* =====================================================
   "WHO WE ARE" section
   ===================================================== */
.ab-media {
    position: relative;
    padding: 0 0 22px 22px
}

.ab-frame {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% - 22px);
    height: calc(100% - 22px);
    border: 2px solid var(--red);
    border-radius: 28px
}

.ab-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 4/3.5;
    object-fit: cover;
    object-position: center 18%;
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(139, 0, 0, .22)
}

.ab-chip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .95rem;
    border-radius: 50px;
    background: #fff;
    border: 1px solid rgba(139, 0, 0, .15);
    color: var(--red);
    font-weight: 700;
    font-size: .8rem;
    white-space: nowrap;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
    animation: float 6s ease-in-out infinite
}

.ab-chip.c1 {
    top: 16px;
    right: -14px
}

.ab-chip.c2 {
    left: 0;
    bottom: 26%;
    animation-delay: -2s
}

.ab-chip.c3 {
    right: 10px;
    bottom: 4px;
    animation-delay: -4s
}

.ab-eb {
    color: var(--red2)
}

.ab-eb i {
    font-size: .6rem
}

.ab-h {
    font-size: clamp(1.7rem, 3.3vw, 2.5rem);
    line-height: 1.18;
    color: #1c1c20;
    margin: .3rem 0 1.2rem
}

.ab-p1 {
    font-size: 1.1rem;
    line-height: 1.65;
    font-weight: 500;
    color: #1c1c20;
    margin-bottom: .9rem
}

.ab-p2 {
    font-size: .95rem;
    line-height: 1.7;
    color: #4a4a50;
    margin-bottom: 1.6rem
}

.ab-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
    margin-bottom: 1.8rem
}

.ab-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: 1.1rem .5rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(139, 0, 0, .18);
    color: #2a2a2e;
    font-weight: 600;
    font-size: .82rem;
    text-align: center;
    transition: transform .3s, box-shadow .3s, border-color .3s
}

.ab-tile i {
    color: var(--red);
    font-size: 1.25rem
}

.ab-tile:hover {
    transform: translateY(-5px);
    border-color: var(--red2);
    box-shadow: 0 14px 30px rgba(139, 0, 0, .18)
}

/* =====================================================
   MOBILE FIX: side-scroll band + chhote numbers/fonts
   ===================================================== */
html {
    overflow-x: hidden
}

@supports (overflow: clip) {
    .sec {
        overflow-x: clip
    }
}

.stp-nodes {
    grid-template-columns: repeat(var(--n), minmax(0, 1fr))
}

.stp,
.stp-panels,
.stp-panel {
    min-width: 0;
    max-width: 100%
}

@media(max-width:991px) {

    /* side se aane wali animation hi page ko chaura kar deti thi */
    [data-reveal=left],
    [data-reveal=right] {
        transform: translateY(30px)
    }


    .ab-media {
        max-width: 520px;
        margin: 0 auto
    }
}

@media(max-width:767px) {
    .stp-node b {
        width: 38px;
        height: 38px;
        font-size: .85rem;
        border-width: 1.5px
    }

    .stp-node.on b {
        transform: scale(1.06);
        box-shadow: 0 0 0 4px rgba(139, 0, 0, .15)
    }

    .stp-bar {
        top: 18px;
        height: 2px
    }

    .stp-panels {
        margin-top: 1.6rem
    }

    .stp-panel {
        padding: 1.2rem;
        gap: .6rem;
        border-radius: 18px
    }

    .stp-big {
        font-size: 2.3rem;
        -webkit-text-stroke-width: 1.5px
    }

    .stp-panel h3 {
        font-size: 1.08rem
    }

    .stp-panel p {
        font-size: .9rem
    }

    .bx-n {
        font-size: 2rem;
        margin-bottom: .6rem
    }

    .ab-tiles {
        gap: .55rem
    }

    .ab-tile {
        padding: .85rem .3rem;
        font-size: .74rem
    }
}

@media(max-width:575px) {
    h2 {
        font-size: 1.5rem
    }






    .lead-t {
        font-size: 1rem
    }

    .ab-h {
        font-size: 1.5rem
    }

    .ab-p1 {
        font-size: 1rem
    }

    .ab-p2 {
        font-size: .9rem
    }

    .ab-chip {
        font-size: .7rem;
        padding: .4rem .7rem
    }

    .ab-chip.c1 {
        right: 4px
    }

}

/* ===== MOBILE: buttons chhote + responsive ===== */
@media(max-width:767px){
  .btn,.btn-wnc,.btn-ghost,.btn-light,.pkg-btn,.cta .cta-btn,.btn-lg{font-size:.82rem!important;padding:.5rem 1.1rem!important;line-height:1.3;white-space:normal;max-width:100%}
  .btn-pill,.btn-pill.big{font-size:.8rem;gap:.6rem;padding:.25rem .25rem .25rem 1rem;max-width:100%}
  .btn-pill .arr,.btn-pill.big .arr{width:30px;height:30px;font-size:.7rem}
  .btn.w-100,.pkg-btn{width:100%}
  .navbar .btn-pill{width:100%;justify-content:space-between}
  .to-top{width:42px;height:42px}
}
@media(max-width:400px){
  .btn,.btn-wnc,.btn-ghost,.btn-light,.pkg-btn,.cta .cta-btn,.btn-lg{font-size:.78rem!important;padding:.45rem .9rem!important}
}

/* ===== v12: home banner buttons - mobile pe chote + responsive ===== */
@media(max-width:767px){
  .hero .d-flex.flex-wrap.gap-3{gap:.6rem!important}
  .hero .d-flex.flex-wrap>.btn-pill,.hero .d-flex.flex-wrap>.btn-lg{flex:1 1 calc(50% - .3rem);min-width:0;justify-content:center}
}
@media(max-width:380px){.hero .d-flex.flex-wrap>.btn-pill,.hero .d-flex.flex-wrap>.btn-lg{flex:1 1 100%}}

/* ===== v13: SAME font size for every button (desktop + mobile) ===== */
:root{--btn-fs:.9rem}
.btn,.btn-wnc,.btn-ghost,.btn-light,.btn-lg,.btn-pill,.btn-pill.big,.pkg-btn,.cta .cta-btn,.lp-cta,.lp-gh,.wpop-nav .btn{font-size:var(--btn-fs)!important}
.btn-pill .arr,.btn-pill.big .arr{width:34px;height:34px;font-size:.75rem}
.btn-pill,.btn-pill.big{padding:.3rem .3rem .3rem 1.3rem}
.hero .btn-ghost.btn-lg{padding:.72rem 1.5rem!important;line-height:1.3}
@media(max-width:767px){:root{--btn-fs:.78rem}
  .btn-pill,.btn-pill.big{padding:.25rem .25rem .25rem 1rem}.btn-pill .arr,.btn-pill.big .arr{width:30px;height:30px;font-size:.68rem}
  .hero .btn-ghost.btn-lg{padding:.6rem 1.1rem!important}}

/* ===== v13: home banner Get a Quote form (glass / backdrop blur) ===== */
.hq-w{position:relative;isolation:isolate}
.hq-w:before{content:'';position:absolute;inset:-6%;background:radial-gradient(circle at 30% 20%,rgba(179,0,0,.55),transparent 62%),radial-gradient(circle at 85% 90%,rgba(255,77,77,.25),transparent 55%);filter:blur(34px);z-index:-1;pointer-events:none}
.hq{position:relative;border-radius:24px;padding:clamp(1.2rem,2.6vw,1.9rem);border:1px solid rgba(255,255,255,.2);background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.04));-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:0 0 70px rgba(139,0,0,.35),0 24px 50px rgba(0,0,0,.45);overflow:hidden;color:#fff}
.hq-t{font:800 clamp(1.3rem,2.4vw,1.65rem) 'Sora',sans-serif;color:#fff;margin:0 0 .35rem}
.hq-s{color:#c9c5c5;font-size:.9rem;line-height:1.55;margin:0 0 1.1rem}
.hq-g{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}.hq-g .hq-w2{grid-column:1/-1}
.hq input,.hq select,.hq textarea{width:100%;min-width:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:12px;padding:.72rem .9rem;font:500 .9rem 'Inter',sans-serif;transition:.25s;resize:vertical}
.hq input::placeholder,.hq textarea::placeholder{color:#b3aeae}
.hq select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.2rem;color:#b3aeae}
.hq select:valid{color:#fff}.hq select option{color:#111;background:#fff}
.hq input:focus,.hq select:focus,.hq textarea:focus{outline:0;border-color:#ff5d5d;background:rgba(255,255,255,.12);box-shadow:0 0 0 3px rgba(179,0,0,.35)}
.hq-msg{display:none;margin-top:.8rem;border-radius:12px;padding:.65rem .9rem;font-size:.85rem}
.hq-msg.err{display:block;background:rgba(255,193,7,.12);border:1px solid rgba(255,193,7,.4);color:#ffe08a}
.hq-b{width:100%;margin-top:1rem}.hq-b[disabled]{opacity:.7;pointer-events:none}
.hq-n{margin:.9rem 0 0;text-align:center;font-size:.82rem;color:#b3aeae}
.hq-n button{background:none;border:0;padding:0;font:700 .82rem 'Inter',sans-serif;color:#ff9a9a;cursor:pointer;text-decoration:underline}
.hq-ok{display:none;position:absolute;inset:0;z-index:2;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.5rem;background:rgba(14,8,9,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hq.done .hq-ok{display:flex}
.hq-ok .t{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;color:#fff;background:linear-gradient(135deg,var(--red2),var(--red));margin-bottom:.9rem}
.hq-ok h3{font-size:1.3rem;color:#fff;margin:0 0 .3rem}.hq-ok p{color:#c9c5c5;font-size:.9rem;margin:0}
@media(max-width:575.98px){.hq-g{grid-template-columns:1fr}.hq{border-radius:20px}.hq-s{font-size:.84rem}.hq input,.hq select,.hq textarea{font-size:.85rem;padding:.65rem .8rem}}


/* ===== v17: Packages - mobile "Get Started" button card ke andar fit (width:100% + side margin se bahar nikal jata tha) ===== */
@media(max-width:767px){
  .pkg .pkg-btn{width:auto!important;margin:0 1.6rem 1.6rem!important;text-align:center;justify-content:center}
}
/* ===== v17: Portfolio link add hone ke baad desktop menu 1 line me rahe ===== */
@media(min-width:1200px) and (max-width:1399px){.navbar .nav-link{padding:.5rem .55rem!important;font-size:.9rem}}

/* ===== v18: sticky kaam kare - body overflow-x:hidden scroll-container bana deta tha, clip nahi banata ===== */
@supports (overflow: clip) {
  body { overflow-x: clip }
}

/* ===== v18: Services menu - "Services" par click = /services page, submenu hover (desktop) / arrow (mobile) ===== */
.navbar .nav-split{display:flex;flex-wrap:wrap;align-items:center;position:relative}
.navbar .nav-split>.nav-link{flex:0 1 auto}
.dd-caret{background:none;border:0;color:#ddd;padding:.5rem .5rem .5rem .1rem;margin-left:-.35rem;font-size:.7rem;line-height:1;cursor:pointer;transition:transform .25s,color .25s}
.dd-caret:hover,.nav-split:hover .dd-caret{color:#ff5d5d}
.dd-caret.show,.dd-caret[aria-expanded="true"]{transform:rotate(180deg);color:#ff5d5d}
.navbar .nav-split>.wnc-dd{flex:0 0 100%}
@media(min-width:1200px){
  .navbar .nav-split>.wnc-dd{position:absolute;top:100%;left:0;margin:0;min-width:270px}
  .navbar .nav-split:hover>.dd-caret{transform:rotate(180deg)}
  .navbar .nav-split:before{content:'';position:absolute;left:0;right:0;top:100%;height:10px} /* hover gap band, menu na tute */
}
@media(max-width:1199.98px){
  .navbar .nav-split{justify-content:space-between}
  .navbar .nav-split>.nav-link{flex:1 1 auto}
  .dd-caret{padding:.6rem 1rem;font-size:.85rem}
  .navbar .nav-split>.wnc-dd{position:static!important;transform:none!important;margin:.2rem 0 .5rem}
}

/* ===== footer legal links ===== */
.footer-bottom a{color:inherit;text-decoration:none;transition:color .25s}
.footer-bottom a:hover{color:#ff5d5d}

/* ===== v20: TOPBAR (contact + social) ===== */
.topbar{position:absolute;top:0;left:0;right:0;z-index:1031;height:40px;background:linear-gradient(90deg,#120000,#3a0000 55%,#120000);border-bottom:1px solid rgba(255,255,255,.1);font-size:.82rem}
.topbar>.container,.topbar>.container-fluid{height:100%;max-width:none;padding-inline:calc(var(--wnc-gutter) + 1rem);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.tb-info{display:flex;align-items:center;gap:1.4rem;min-width:0}
.tb-info a,.tb-loc{display:inline-flex;align-items:center;gap:.5rem;color:#e6e0e0;text-decoration:none;white-space:nowrap;transition:color .25s}
.tb-info a:hover{color:#fff}
.tb-info i{color:#ff5d5d;font-size:.78rem}
.tb-social{display:flex;align-items:center;gap:.35rem;flex:none}
.tb-social a{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.78rem;text-decoration:none;background:rgba(255,255,255,.08);transition:background .25s,transform .25s}
.tb-social a:hover{background:var(--red2);transform:translateY(-2px)}
.navbar.fixed-top{top:40px}
.navbar.fixed-top.scrolled{top:0}
.banner{padding-top:195px}
.hero{padding-top:178px}
@media(max-width:991px){.hero{padding-top:156px}}
@media(max-width:767px){.tb-loc{display:none}}
@media(max-width:575px){
  .topbar{height:36px;font-size:.78rem}
  .navbar.fixed-top{top:36px}
  .tb-info{gap:.9rem}
  .tb-t{display:none}
  .banner{padding-top:178px}
  .hero{padding-top:150px}
}

/* ===== v20: FOOTER (new look) ===== */
.footer.ft2{position:relative;padding:0 0 22px;border-top:0;background:radial-gradient(circle at 12% 0,rgba(139,0,0,.28),transparent 45%),radial-gradient(circle at 92% 100%,rgba(139,0,0,.18),transparent 40%),#070708;overflow:hidden}
.footer.ft2:before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,transparent,var(--hot),var(--red),transparent)}
.ft-cta{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;margin:-1px 0 3.2rem;padding:1.7rem 2rem;border-radius:0 0 26px 26px;background:linear-gradient(135deg,#5c0000,var(--red) 55%,#3a0000);border:1px solid rgba(255,255,255,.15);border-top:0;box-shadow:0 18px 44px rgba(139,0,0,.35)}
.ft-cta h3{font:800 clamp(1.15rem,2.4vw,1.5rem) 'Sora',sans-serif;color:#fff;margin:0 0 .25rem}
.ft-cta p{margin:0;color:#f3dcdc}
.ft-cols{position:relative;z-index:1}
.ft2 .ft-logo{display:inline-block}
.ft2 .ft-about{margin:1rem 0 1.2rem;color:#a9a3a3;line-height:1.75;max-width:380px}
.ft-contact{margin:0 0 1.3rem}
.ft-contact li{display:flex;align-items:center;gap:.8rem;margin-bottom:.7rem;color:#c9c3c3;font-size:.94rem}
.ft-contact li i{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(179,0,0,.22);color:#ff6b6b;font-size:.82rem}
.ft2 .ft-contact a{color:#e6e0e0}
.ft2 .ft-contact a:hover{color:#fff;padding-left:0}
.ft2 h6{position:relative;font:700 .86rem 'Sora',sans-serif;padding-bottom:.8rem;margin-bottom:1.2rem}
.ft2 h6:after{content:'';position:absolute;left:0;bottom:0;width:34px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--hot),var(--red))}
.ft-links li{margin-bottom:.55rem}
.ft2 .ft-links a{position:relative;display:inline-block;padding-left:0;color:#b2acac;font-size:.93rem}
.ft2 .ft-links a:before{content:'\f105';font:900 .8rem 'Font Awesome 6 Free';position:absolute;left:-14px;top:.12rem;color:#ff5d5d;opacity:0;transition:opacity .25s,left .25s}
.ft2 .ft-links a:hover{color:#fff;padding-left:14px}
.ft2 .ft-links a:hover:before{opacity:1;left:0}
.ft2 .social{gap:.55rem}
.ft2 .social a{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#fff}
.ft2 .social a:hover{background:linear-gradient(135deg,var(--red),var(--red2));border-color:transparent;transform:translateY(-4px);box-shadow:0 10px 22px rgba(139,0,0,.5)}
.ft-bottom{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.5rem;text-align:left}
.ft-legal{display:flex;gap:1.3rem}
.ft2 .ft-bottom a,.footer-bottom a{color:#a9a3a3;text-decoration:none}
.ft2 .ft-bottom a:hover{color:#ff5d5d}
@media(max-width:575px){
  .ft-cta{padding:1.4rem 1.2rem;border-radius:0 0 20px 20px}
  .ft-cta .btn{width:100%}
  .ft-bottom{justify-content:center;text-align:center}
}

/* ===== v21: trust stats (home, who we are) ===== */
.ab-stats .ab-tile{padding:1.2rem .5rem 1.1rem;gap:.35rem}
.ab-stats .ab-tile b{font:800 clamp(1.5rem,3vw,2rem)/1.1 'Sora',sans-serif;color:var(--red);letter-spacing:-.01em}
.ab-stats .ab-tile span{font-weight:600;font-size:.8rem;color:#555}
.ab-stats .ab-tile i{font-size:1.1rem;margin-bottom:.1rem}
@media(max-width:767px){.ab-stats .ab-tile span{font-size:.7rem}}

/* ===== v22: quick quote - budget select (disabled jab tak service na chuni jaye) ===== */
.hq select:disabled{color:#b3aeae;opacity:.65;cursor:not-allowed}

/* =====================================================
   V36 - MOBILE: har section ke left/right me 15px spacing
   (Bootstrap container ka 12px padding 15px kiya, rows ka gutter bhi 30px
    taake columns ka content bhi exactly 15px par rahe aur side scroll na aaye)
   ===================================================== */
@media (max-width: 767.98px) {
    .container,
    .container-fluid {
        --bs-gutter-x: 30px
    }

    .row,
    .row.g-2,
    .row.g-3,
    .row.g-4,
    .row.g-5 {
        --bs-gutter-x: 30px
    }

    /* landing / home / service pages ka .lp-w wrapper */
    body .lp-w {
        width: calc(100% - 30px)
    }
}

/* ===== cut (strike-through) package prices ===== */
.price .was,
.lp-st .ft s.was {
    color: rgba(255, 255, 255, .55);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    font-weight: 600;
    margin-right: .15rem
}

.price .was {
    font-size: .52em
}

.lp-st .ft s.was {
    font-size: .9em
}

/* ===== v58: inner-page banner = picture + RED shade (image stays visible, white text stays readable) ===== */
.banner {
    background-color: #2a0000;
    background-image: linear-gradient(90deg, #3a0000 0%, #8b0000 55%, #c40000 100%), var(--bg);
    background-size: cover, cover;
    background-position: center, center 88%;
    background-repeat: no-repeat, no-repeat;
    background-blend-mode: multiply, normal
}

.banner:after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .22))
}

.banner>.container,
.banner .orb,
.banner canvas.net {
    z-index: 1
}

@media(max-width:767px) {
    .banner {
        background-position: center, 62% 90%
    }
}

/* ===== v58: responsive safety net (no sideways scroll, images/media never wider than the screen) ===== */
html {
    max-width: 100%;
    -webkit-text-size-adjust: 100%
}

img,
video,
svg,
canvas,
iframe,
embed,
object {
    max-width: 100%
}

img,
video {
    height: auto
}

.sx-panel,
.pf-thumb img,
.abx-mpic img,
.ab-img {
    max-width: none
}

.container,
.row>*,
.sx-body,
.pf-card,
.pf-body {
    min-width: 0
}

h1,
h2,
h3,
h4 {
    overflow-wrap: break-word
}

table {
    max-width: 100%
}

.table-responsive,
.lg-tw,
.pk-scroll {
    -webkit-overflow-scrolling: touch
}

pre,
code {
    white-space: pre-wrap;
    word-break: break-word
}

/* services slider: on small screens panel grows with its text, image stays as the backdrop */
@media(max-width:767px) {
    .sx-view {
        min-height: 440px
    }

    .sx-body {
        padding: 1.4rem 1.15rem
    }

    .sx-body h3 {
        font-size: 1.25rem
    }
}

@media(max-width:575px) {
    .sx-view {
        min-height: 480px;
        border-radius: 18px
    }

    .topbar .container,
    .topbar .container-fluid {
        gap: .5rem
    }

    .tb-info a span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 46vw
    }

    .navbar-brand img {
        max-width: 150px;
        height: auto
    }

    .btn,
    .btn-wnc,
    .btn-ghost {
        max-width: 100%
    }
}

/* quick quote forms: new optional "Business name" + "Website link" fields stack on phones */
@media(max-width:575.98px) {

    .hq-g,
    .lp-qg {
        grid-template-columns: minmax(0, 1fr)
    }
}

/* =====================================================
   v59 - full-width top bar + navbar, one-line menu,
   dark page background, no sideways overflow
   ===================================================== */
:root { --wnc-gutter: clamp(10px, 2vw, 40px) }

/* page canvas stays dark behind/below everything; footer sits at the bottom on short pages */
html { background: #0b0b0d }
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column }
body>main { flex: 1 0 auto; min-width: 0 }
body:has(.st-sec) { background: var(--ink) }

/* store pages: the animated glow (.dark.sec:after, inset:-20%) must not spill out of the section.
   overflow:clip keeps the sticky sidebars working (overflow:visible let the glow add ~20% width + extra height) */
body .st-sec.dark.sec { overflow: visible; overflow: clip }

/* top bar: contact info shrinks with an ellipsis instead of pushing the social icons out */
.tb-info { flex: 1 1 0; min-width: 0 }
.tb-info a { min-width: 0; flex: 0 1 auto }
.tb-info a span { min-width: 0; overflow: hidden; text-overflow: ellipsis }
.tb-loc { min-width: 0; overflow: hidden; text-overflow: ellipsis }

/* desktop menu: always one line, nothing shrinks or wraps */
@media(min-width:1200px) {
    .navbar .navbar-nav { flex-wrap: nowrap; align-items: center }
    .navbar .navbar-nav>.nav-item { flex: 0 0 auto }
    .navbar .nav-link,
    .navbar .btn-pill { white-space: nowrap }
    .navbar .nav-split { flex-wrap: nowrap }
    .navbar-brand { flex: 0 0 auto; margin-right: clamp(.5rem, 1.2vw, 1.5rem) }
}

/* 1200-1299px: slightly tighter menu so every item + the quote button stay on one line */
@media(min-width:1200px) and (max-width:1299px) {
    .navbar .navbar-nav .nav-link { padding: .5rem .42rem !important; font-size: .86rem }
    .navbar .navbar-nav .nav-link:after { left: .42rem; right: .42rem }
    .navbar .navbar-nav .nav-acct .nav-link { padding: .5rem .5rem !important }
    .navbar-brand img { height: 48px }
    .navbar>.container-fluid { padding-left: 1rem }
}

/* hamburger open: the menu scrolls inside the bar instead of running off short screens */
@media(max-width:1199px) {
    .navbar-collapse { max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain }
}