* {
    box-sizing: border-box
}

@keyframes topMarqueeMove {
    from { transform: translateX(0) }
    to { transform: translateX(-50%) }
}

.heroSignal {
    position: absolute;
    z-index: 3;
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 9px;
    align-items: center;
    padding: 10px 13px;
    min-width: 188px;
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(8, 11, 15, .96), rgba(20, 27, 36, .9));
    border: 1px solid rgba(255, 255, 255, .2);
    border-left: 3px solid #ff5b0a;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
    backdrop-filter: blur(8px);
    animation: signalFloat 5s ease-in-out infinite
}

.topMarqueeTrack {
    animation-duration: 22s
}

.heroSignal strong,
.heroSignal small {
    display: block
}

.heroSignal strong {
    font-size: 12px
}

.heroSignal small {
    grid-column: 2;
    color: #b8bec5;
    font-size: 10px
}

.signalIcon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: #ff5b0a;
    color: #111;
    font-size: 10px;
    font-weight: 900
}

.heroSignal strong {
    color: #fff;
    letter-spacing: .01em
}

.signalOne {
    top: 15%;
    right: -30px
}

.signalTwo {
    bottom: 17%;
    left: -25px;
    animation-delay: -2s
}

.heroScroll {
    position: absolute;
    bottom: 22px;
    left: 4%;
    z-index: 4;
    color: #89929b;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em
}

.heroScroll span {
    display: inline-block;
    width: 45px;
    height: 1px;
    margin-left: 9px;
    vertical-align: middle;
    background: #ff5b0a
}

.coverageTicker {
    overflow: hidden;
    background: #ff5b0a;
    color: #111;
    white-space: nowrap
}

.tickerTrack {
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-width: max-content;
    gap: 25px;
    padding: 12px 0;
    animation: tickerMove 28s linear infinite
}

.tickerTrack span {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .13em
}

.tickerTrack i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #111
}

html {
    scroll-behavior: smooth
}

.experienceBand {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, #0b1118 0%, #111c28 55%, #172735 100%);
    color: #fff;
    padding: 104px 0;
    border-top: 1px solid #263541;
    border-bottom: 1px solid #263541
}

.experienceBand:before {
    content: '';
    position: absolute;
    width: 460px;
    height: 460px;
    right: 8%;
    top: -190px;
    border: 1px solid rgba(255, 91, 10, .28);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(255, 91, 10, .035), 0 0 0 56px rgba(255, 91, 10, .02);
    transform: rotate(-18deg);
    pointer-events: none
}

.experienceBand:after {
    content: 'ON-SITE';
    position: absolute;
    right: -20px;
    bottom: -75px;
    color: rgba(255, 255, 255, .035);
    font-size: 150px;
    font-weight: 900;
    line-height: 1
}

.experienceGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 84px;
    align-items: center;
    position: relative;
    z-index: 1
}

.experienceIntro h2 {
    max-width: 620px;
    margin: 0 0 22px;
    font-size: clamp(34px, 4.4vw, 58px);
    line-height: .98;
    letter-spacing: -3px
}

.experienceIntro p {
    max-width: 520px;
    color: #b8c0c8;
    line-height: 1.8;
    font-size: 16px
}

.textLink {
    display: inline-block;
    margin-top: 18px;
    color: #ff5b0a;
    font-size: 12px;
    font-weight: 900;
    border-bottom: 1px solid #ff5b0a;
    padding-bottom: 7px
}

.experienceStats {
    display: grid;
    gap: 0;
    border: 1px solid #3c4956;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(5, 9, 14, .28);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .18)
}

.experienceStats div {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 23px 24px;
    border-bottom: 1px solid #3c4956;
    background: rgba(255, 255, 255, .025);
    transition: background .2s ease, padding-left .2s ease
}

.experienceStats div:last-child {
    border-bottom: 0
}

.experienceStats div:hover {
    padding-left: 30px;
    background: rgba(255, 91, 10, .1)
}

.experienceStats strong {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 91, 10, .55);
    border-radius: 50%;
    color: #ff5b0a;
    font-size: 13px
}

.experienceStats span {
    font-size: 18px;
    font-weight: 800
}

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #111;
    background: #fff
}

@keyframes signalFloat {
    0%, 100% { transform: translateY(0) }
    50% { transform: translateY(-9px) }
}

@keyframes tickerMove {
    from { transform: translateX(0) }
    to { transform: translateX(-38%) }
}

a {
    text-decoration: none;
    color: inherit
}

.heroSignal {
    right: 12px
}

.signalTwo {
    left: 12px
}

.experienceGrid {
    grid-template-columns: 1fr;
    gap: 36px
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid #ff5b0a;
    outline-offset: 3px
}

img {
    max-width: 100%;
    display: block
}

.wrap {
    max-width: 1180px;
    width: 92%;
    margin: auto
}

.top {
    background: #080b0f;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.top .wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0
}

.topMarquee {
    overflow: hidden;
    width: 100%;
    background: #080b0f
}

.topMarqueeTrack {
    display: flex;
    width: max-content;
    animation: topMarqueeMove 34s linear infinite;
    will-change: transform
}

.topMarqueeTrack.is-paused {
    animation-play-state: paused
}

.topMarqueeRun {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: space-around;
    min-width: 50vw;
    min-height: 38px;
    gap: 18px;
    padding: 0 18px
}

.topMarqueeRun span {
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: .08em
}

.topMarqueeRun a {
    color: #ff7a35;
    transition: color .2s ease
}

.topMarqueeRun a:hover {
    color: #fff
}

.topMarqueeSeparator {
    color: #ff5b0a;
    font-size: 14px;
    line-height: 1
}

.nav {
    height: 78px;
    background: #080b0f;
    color: #fff;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 50
}

.navin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px
}

.menuToggle {
    display: none;
    border: 1px solid #59616a;
    background: transparent;
    color: #fff;
    border-radius: 4px;
    padding: 10px 12px;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer
}

.logo {
    width: 185px;
    height: 64px;
    object-fit: contain;
    object-position: center;
    background: transparent;
    padding: 0;
    transform: none;
    transform-origin: left center;
    border-radius: 3px
}

.links {
    display: flex;
    align-items: center;
    gap: 23px;
    font-size: 13px;
    font-weight: 800
}

.links a:hover {
    color: #ff5b0a
}

.links a[aria-current="page"] {
    color: #ff5b0a
}

.call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #ff5b0a;
    color: #111 !important;
    padding: 12px 17px;
    border-radius: 3px
}

.navWhatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #52606d;
    padding: 11px 13px;
    border-radius: 3px
}

.hero {
    background: #090d12;
    color: #fff;
    position: relative;
    overflow: hidden
}

.hero:before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255, 91, 10, .16), transparent 28%);
    animation: heroGlow 8s ease-in-out infinite alternate;
    pointer-events: none
}

.hero:after {
    content: '';
    position: absolute;
    right: -10%;
    top: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 91, 10, .9) 31%, rgba(255, 91, 10, .9) 31.6%, transparent 32%), linear-gradient(90deg, transparent, rgba(255, 255, 255, .04));
    transform: skewX(-13deg)
}

.hero .wrap {
    position: relative;
    z-index: 2
}

.heroGrid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    min-height: 650px;
    align-items: center;
    gap: 40px
}

.eyebrow {
    color: #ff5b0a;
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 16px
}

.hero h1 {
    font-size: clamp(44px, 6.2vw, 78px);
    line-height: .91;
    letter-spacing: -4px;
    margin: 0;
    max-width: 760px
}

.hero h1 span {
    color: #ff5b0a
}

.hero p {
    color: #c5c9ce;
    font-size: 17px;
    max-width: 610px;
    line-height: 1.65;
    margin: 24px 0
}

.buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 14px 21px;
    border-radius: 5px;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .045em;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease
}

.btn:hover,
.call:hover,
.mobileBar a:hover {
    transform: translateY(-3px);
    filter: brightness(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .2)
}

.orange {
    background: #ff5b0a;
    color: #111
}

.white {
    background: #fff;
    color: #111
}

.outline {
    border: 1px solid #58606a;
    color: #fff
}

.heroImg {
    height: 470px;
    position: relative;
    display: flex;
    align-items: center
}

.heroImg:before {
    content: '';
    position: absolute;
    inset: 12px -12px -12px 12px;
    border: 1px solid rgba(255, 91, 10, .45);
    transform: rotate(3deg);
    pointer-events: none
}

.heroImg img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: brightness(.7);
    border-radius: 4px
}

.heroBadge {
    position: absolute;
    bottom: 22px;
    left: -25px;
    background: #ff5b0a;
    color: #111;
    padding: 22px;
    width: 285px;
    border: 5px solid #0a0d12
    ;
    animation: badgeFloat 4s ease-in-out infinite
}

.heroBadge b {
    font-size: 38px;
    display: block;
    line-height: 1
}

.heroBadge small {
    font-weight: 900
}

.reviewStrip {
    background: radial-gradient(circle at 0 30%, rgba(255, 91, 10, .18), transparent 34%), #0b121d;
    color: #fff;
    padding: 58px 0 66px;
    border-bottom: 1px solid #28313a
}

.reviewTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px
}

.reviewSummary {
    display: flex;
    align-items: center;
    gap: 24px
}

.googleRating {
    min-width: 164px;
    border-top: 4px solid #ff5b0a;
    border: 1px solid #364452;
    border-top-width: 4px;
    padding: 14px 17px;
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    column-gap: 9px
}

.googleRating .googleMark {
    grid-row: span 2
}

.googleRating strong {
    font-size: 30px;
    line-height: 1
}

.googleRating small {
    color: #aeb8c2;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase
}

.googleMark {
    color: #4285f4;
    font-size: 25px;
    font-weight: 900;
    font-family: Arial, sans-serif;
    text-shadow: 1px 0 #ea4335, 0 1px #fbbc05
}

.googleLogo {
    width: 25px;
    height: 25px;
    flex: 0 0 auto
}

.googleRating .googleLogo {
    grid-row: span 2
}

.reviewGoogle {
    margin-left: auto
}

.stars {
    color: #ff5b0a;
    font-size: 18px
}

.reviewCards {
    display: flex;
    gap: 12px;
    transition: transform .55s ease
}

.reviewViewport {
    overflow: hidden
}

.reviewCards .review {
    flex: 0 0 calc((100% - 24px) / 3)
}

.reviewControls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 26px;
    border-bottom: 3px solid #334252;
    padding-bottom: 10px
}

.reviewDots {
    display: flex;
    gap: 9px
}

.reviewDot {
    width: 31px;
    height: 6px;
    border: 0;
    border-radius: 10px;
    background: #455262;
    cursor: pointer
}

.reviewDot.is-active {
    width: 48px;
    background: #ff5b0a
}

.reviewPause {
    border: 1px solid #52606d;
    color: #fff;
    background: transparent;
    padding: 10px 14px;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer
}

.review {
    border: 1px solid #334252;
    border-top: 5px solid #ff5b0a;
    padding: 20px;
    background: #111b27;
    min-height: 285px;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease
}

.review[role="link"] {
    cursor: pointer
}

.review[role="link"]:focus-visible {
    outline: 3px solid #ff5b0a;
    outline-offset: 3px
}

.review:hover,
.serviceCard:hover,
.post:hover,
.smallService:hover,
.term:hover {
    transform: translateY(-5px);
    border-color: #ff5b0a;
    box-shadow: 0 16px 34px rgba(8, 11, 15, .14)
}

.review header {
    display: flex;
    align-items: center;
    gap: 12px
}

.review header div {
    flex: 1
}

.reviewAvatar {
    width: 47px;
    height: 47px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ff5b0a;
    color: #111;
    font-weight: 900
}

.review strong {
    display: block;
    font-size: 16px
}

.review header small {
    display: block;
    margin-top: 4px;
    color: #aeb8c2;
    font-size: 10px
}

.review p {
    font-size: 13px;
    color: #b9c0c8;
    line-height: 1.65;
    margin: 26px 0;
    flex: 1
}

.review a {
    font-size: 11px;
    color: #fff;
    font-weight: 900;
    border-bottom: 2px solid #ff5b0a;
    padding-bottom: 7px;
    width: max-content
}

.icon {
    display: inline-grid;
    place-items: center;
    width: 19px;
    height: 19px;
    margin-right: 6px;
    vertical-align: -4px;
    font-size: 14px;
    font-weight: 900
}

.iconPhone:before {
    content: "\260E";
    font-size: 19px
}

.iconWhatsApp:before {
    content: "\260E";
    border: 2px solid currentColor;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    line-height: 12px;
    transform: rotate(-25deg)
}

.ctaIcon {
    display: inline-block;
    flex: 0 0 17px;
    margin-right: 0;
    width: 17px;
    height: 17px;
    font-size: 0;
    line-height: 1;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2A19.8 19.8 0 0 1 3.1 5.2 2 2 0 0 1 5.1 3h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.5 2.1L9 10.9a16 16 0 0 0 4.1 4.1l1.2-1.3a2 2 0 0 1 2.1-.5c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
    mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2A19.8 19.8 0 0 1 3.1 5.2 2 2 0 0 1 5.1 3h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.5 2.1L9 10.9a16 16 0 0 0 4.1 4.1l1.2-1.3a2 2 0 0 1 2.1-.5c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E")
}

.whatsappIcon {
    display: inline-grid;
    place-items: center;
    flex-basis: 18px;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 0;
    font-size: 0;
    transform: none;
    -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 11.5a8.2 8.2 0 0 1-12.2 7.1L4 20l1.4-3.6A8.2 8.2 0 1 1 20 11.5Z'/%3E%3Cpath d='M8.8 8.6c.3-.5.6-.5.9-.1l.8 1c.2.3.2.5 0 .8l-.4.5c.6 1.1 1.5 2 2.6 2.6l.5-.4c.3-.2.5-.2.8 0l1 .8c.4.3.4.6-.1.9-.5.4-1.2.5-1.8.2-2.5-1.1-4.4-3-5.5-5.5-.3-.6-.2-1.3.2-1.8Z'/%3E%3C/svg%3E");
    mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 11.5a8.2 8.2 0 0 1-12.2 7.1L4 20l1.4-3.6A8.2 8.2 0 1 1 20 11.5Z'/%3E%3Cpath d='M8.8 8.6c.3-.5.6-.5.9-.1l.8 1c.2.3.2.5 0 .8l-.4.5c.6 1.1 1.5 2 2.6 2.6l.5-.4c.3-.2.5-.2.8 0l1 .8c.4.3.4.6-.1.9-.5.4-1.2.5-1.8.2-2.5-1.1-4.4-3-5.5-5.5-.3-.6-.2-1.3.2-1.8Z'/%3E%3C/svg%3E");
    background-color: currentColor
}

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .65s ease, transform .65s ease
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0)
}

.metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid #ddd
}

.metric {
    padding: 20px;
    border-right: 1px solid #ddd;
    text-align: center
}

.metric:last-child {
    border: 0
}

.metric b {
    display: block;
    font-size: 22px
}

.metric span {
    font-size: 11px;
    color: #777;
    font-weight: 800
}

.quickAction {
    background: #ff5b0a;
    color: #111;
    padding: 20px 0
}

.quickActionIn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px
}

.quickAction strong,
.quickAction span {
    display: block
}

.quickAction strong {
    font-size: 20px
}

.quickActionIn>div:first-child span {
    margin-top: 4px;
    font-size: 13px
}

.quickAction .buttons {
    flex-shrink: 0
}

.quickAction .dark {
    background: #080b0f;
    color: #fff
}

.section {
    padding: 96px 0
}

.light {
    background: #f0f2f4
}

.sectionHead {
    max-width: 730px;
    margin-bottom: 46px
}

.sectionHead .eyebrow {
    color: #ff5b0a
}

.sectionHead h2 {
    font-size: clamp(34px, 4.5vw, 58px);
    line-height: .96;
    letter-spacing: -3px;
    margin: 0 0 18px;
    max-width: 680px
}

.sectionHead p {
    color: #666;
    line-height: 1.7
}

.serviceStack {
    display: grid;
    gap: 18px
}

.serviceCard {
    min-height: 310px;
    background: #080b0f;
    color: #fff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border: 1px solid #26313b;
    border-radius: 6px;
    box-shadow: 0 16px 35px rgba(8, 11, 15, .08)
}

.serviceCard:nth-child(even) {
    direction: rtl
}

.serviceCard:nth-child(even)>* {
    direction: ltr
}

.serviceText {
    padding: 46px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.serviceText .num {
    color: #ff5b0a;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 22px
}

.serviceText h3 {
    font-size: 35px;
    line-height: .98;
    letter-spacing: -1.5px;
    margin: 0 0 13px
}

.serviceText p {
    color: #b8bec5;
    line-height: 1.65;
    font-size: 14px
}

.serviceText .link {
    color: #ff5b0a;
    font-weight: 900;
    margin-top: 12px
}

.serviceImg {
    min-height: 280px;
    background: #20262d
}

.serviceImg img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.smallServices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 18px
}

.smallService {
    padding: 28px;
    background: #17202a;
    color: #fff;
    min-height: 175px;
    border: 1px solid #27343f;
    border-radius: 6px
}

.smallService.active {
    background: #ff5b0a;
    color: #111
}

.smallService .num {
    font-weight: 900;
    font-size: 12px
}

.smallService h4 {
    font-size: 20px;
    margin: 25px 0 5px
}

.smallService p {
    font-size: 12px;
    color: #b8bec5
}

.smallService.active p {
    color: #111
}

.sectionAction {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px
}

.sectionAction .dark,
.processAction .dark {
    background: #080b0f;
    color: #fff
}

.processAction {
    margin-top: 28px;
    display: flex;
    justify-content: center
}

.orangeSection {
    background: #ff5b0a;
    color: #111
}

.orangeSection .sectionHead p {
    color: #321500
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px
}

.step {
    padding: 30px 26px;
    border: 1px solid rgba(0, 0, 0, .22);
    border-radius: 6px;
    background: rgba(255, 255, 255, .12)
}

.step:last-child {
    border: 0
}

.step b {
    font-size: 12px
}

.step h3 {
    font-size: 22px;
    margin: 28px 0 6px
}

.step p {
    font-size: 13px
}

.trustGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px
}

.terms {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px
}

.term {
    border: 1px solid #d5d9dc;
    border-top: 3px solid #ff5b0a;
    padding: 24px;
    min-height: 165px;
    background: #fff;
    border-radius: 5px
}

.term b {
    font-size: 13px
}

.term p {
    font-size: 12px;
    color: #666;
    line-height: 1.6
}

.brands {
    display: flex;
    gap: 9px;
    flex-wrap: wrap
}

.brand {
    border: 1px solid #ddd;
    padding: 14px 18px;
    background: #fff;
    font-weight: 900;
    font-size: 12px
}

.areaHero {
    background: #10151b;
    color: #fff;
    padding: 85px 0;
    background-image: linear-gradient(90deg, rgba(8, 11, 15, .95), rgba(8, 11, 15, .48)), url(tyre-repair-dubai.png);
    background-size: cover;
    background-position: center
}

.areaHero h2 {
    font-size: clamp(42px, 6vw, 70px);
    line-height: .95;
    letter-spacing: -3px;
    margin: 0;
    max-width: 780px
}

.areas {
    display: flex;
    gap: 9px;
    flex-wrap: wrap
}

.area {
    background: #000;
    border: 1px solid #ddd;
    padding: 12px 15px;
    font-size: 12px;
    font-weight: 900;
    color: #fff;
    transition: background .2s ease, color .2s ease, transform .2s ease
}

.area:hover {
    background: #ff5b0a;
    color: #111;
    transform: translateY(-3px)
}

.areaDirectory {
    background: #080b0f;
    color: #fff
}

.areaDirectory .sectionHead h2 {
    color: #fff
}

.areaDirectory .sectionHead p,
.areaDirectory> .wrap > p {
    color: #c5c9ce !important
}

.columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 45px
}

.list {
    display: grid;
    gap: 0
}

.list a {
    padding: 14px 0;
    border-bottom: 1px solid #ddd;
    font-weight: 800;
    font-size: 14px
}

.list a:before {
    content: '→';
    color: #ff5b0a;
    margin-right: 10px
}

.faq {
    max-width: 920px
}

.faq details {
    border-bottom: 1px solid #ddd;
    padding: 18px 0
}

.faq summary {
    font-weight: 900;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between
}

.faq summary:after {
    content: '+';
    color: #ff5b0a;
    font-size: 22px
}

.faq details[open] summary:after {
    content: '−'
}

.faq p {
    color: #666;
    line-height: 1.7;
    font-size: 14px
}

.cta {
    background: #ff5b0a;
    padding: 65px 0
}

.ctaIn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px
}

.cta h2 {
    font-size: clamp(35px, 5vw, 62px);
    letter-spacing: -3px;
    line-height: .94;
    margin: 0;
    max-width: 750px
}

.cta p {
    max-width: 620px
}

.footer {
    background: #080b0f;
    color: #aeb5bc;
    padding: 60px 0 20px
}

.footerGrid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 35px
}

.footer h4 {
    color: #fff;
    margin: 0 0 14px
}

.footer a {
    display: block;
    font-size: 13px;
    margin: 8px 0
}

.footer a:hover {
    color: #ff5b0a
}

.copy {
    border-top: 1px solid #242a30;
    margin-top: 40px;
    padding-top: 20px;
    font-size: 11px
}

.mobileBar {
    display: none
}

.breadcrumb {
    width: 92%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px 0 0;
    color: #707780;
    font-size: 12px
}

.breadcrumb a {
    color: #111;
    font-weight: 800
}

.pageHero {
    background: #0c1015;
    color: #fff;
    padding: 75px 0
}

.pageHero h1 {
    font-size: clamp(42px, 6vw, 72px);
    line-height: .95;
    letter-spacing: -3px;
    margin: 0 0 16px
}

.pageHero p {
    max-width: 750px;
    color: #b8bec5;
    line-height: 1.7
}

.content {
    max-width: 850px
}

.content h2 {
    font-size: 32px;
    margin-top: 38px
}

.content h3 {
    font-size: 22px;
    margin-top: 30px
}

.content p,
.content li {
    color: #555;
    line-height: 1.8
}

.blogGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

.post {
    border: 1px solid #ddd;
    background: #fff
}

.post img {
    height: 190px;
    width: 100%;
    object-fit: cover
}

.postBody {
    padding: 22px
}

.postBody small {
    color: #ff5b0a;
    font-weight: 900
}

.postBody h3 {
    font-size: 21px;
    line-height: 1.1;
    margin: 10px 0
}

.postBody p {
    color: #666;
    font-size: 13px;
    line-height: 1.6
}

.postBody a {
    color: #ff5b0a;
    font-weight: 900;
    font-size: 12px
}

.contactGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.contactCard {
    background: #f0f2f4;
    padding: 30px
}

.contactCard h3 {
    font-size: 25px;
    margin-top: 0
}

.contactCard p {
    color: #666;
    line-height: 1.7
}

.map {
    min-height: 360px;
    background: #151b21;
    display: grid;
    place-items: center;
    color: #fff;
    text-align: center;
    padding: 30px
}

.notice {
    padding: 18px;
    background: #fff4ee;
    border-left: 4px solid #ff5b0a;
    margin: 20px 0;
    color: #444
}

@media(max-width:900px) {
    .links {
        display: none
    }

    .menuToggle {
        display: block;
        margin-left: auto
    }

    .links.open {
        display: flex;
        position: absolute;
        top: 100%;
        left: 4%;
        right: 4%;
        width: auto;
        padding: 14px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #080b0f;
        border: 1px solid #303841;
        box-shadow: 0 14px 30px rgba(0, 0, 0, .3)
    }

    .links.open a {
        padding: 12px 8px
    }

    .links.open .call {
        text-align: center;
        margin-top: 6px
    }

    .links.open .navWhatsapp {
        border: 0
    }

    .heroGrid,
    .trustGrid,
    .columns,
    .contactGrid {
        grid-template-columns: 1fr
    }

    .heroImg {
        height: 390px
    }

    .heroSignal {
        right: auto;
        min-width: 0;
        width: 205px
    }

    .signalOne {
        top: 10%;
        right: 12px
    }

    .signalTwo {
        bottom: 10%;
        left: 12px;
        right: auto
    }

    .heroBadge {
        left: 15px
    }

    .reviewCards,
    .blogGrid {
        grid-template-columns: 1fr
    }

    .reviewCards .review {
        flex-basis: 100%
    }

    .reviewTop {
        align-items: flex-start;
        gap: 18px;
        flex-direction: column
    }

    .metrics,
    .terms {
        grid-template-columns: repeat(2, 1fr)
    }

    .metric:nth-child(2) {
        border: 0
    }

    .serviceCard {
        grid-template-columns: 1fr
    }

    .serviceCard:nth-child(even) {
        direction: ltr
    }

    .serviceImg {
        min-height: 240px
    }

    .smallServices,
    .steps {
        grid-template-columns: 1fr
    }

    .step {
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, .3)
    }

    .footerGrid {
        grid-template-columns: 1fr 1fr
    }

    .ctaIn {
        display: block
    }

    .quickActionIn {
        display: block
    }

    .quickAction .buttons {
        margin-top: 16px
    }

    .cta .buttons {
        margin-top: 25px
    }
}

@media(max-width:900px) {
    .nav {
        height: auto;
        min-height: 78px;
        padding: 10px 0
    }

    .navin {
        align-items: stretch;
        gap: 10px
    }

    .heroGrid,
    .trustGrid,
    .columns,
    .contactGrid {
        grid-template-columns: 1fr
    }

    .heroImg {
        height: 390px
    }

    .heroBadge {
        left: 15px
    }

    .reviewCards,
    .blogGrid {
        grid-template-columns: 1fr
    }

    .metrics,
    .terms {
        grid-template-columns: repeat(2, 1fr)
    }

    .metric:nth-child(2) {
        border: 0
    }

    .serviceCard {
        grid-template-columns: 1fr
    }

    .serviceCard:nth-child(even) {
        direction: ltr
    }

    .serviceImg {
        min-height: 240px
    }

    .smallServices,
    .steps {
        grid-template-columns: 1fr
    }

    .step {
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, .3)
    }

    .footerGrid {
        grid-template-columns: 1fr 1fr
    }

    .ctaIn {
        display: block
    }

    .cta .buttons {
        margin-top: 25px
    }
}

@media(max-width:560px) {
    .top .wrap {
        display: block;
        text-align: center
    }

    @keyframes heroGlow {
        from { transform: scale(1); opacity: .65 }
        to { transform: scale(1.12); opacity: 1 }
    }

    @keyframes badgeFloat {
        0%, 100% { transform: translateY(0) }
        50% { transform: translateY(-8px) }
    }

    @media(prefers-reduced-motion: reduce) {
        *,
        *:before,
        *:after {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            scroll-behavior: auto !important;
            transition-duration: .01ms !important
        }

        .reveal {
            opacity: 1;
            transform: none
        }
    }

    .nav {
        height: 66px;
        min-height: 66px
    }

    .logo {
        width: 168px;
        height: 60px;
        transform: none
    }

    .heroGrid {
        min-height: auto;
        padding: 60px 0
    }

    .hero h1 {
        letter-spacing: -2px
    }

    .hero p {
        font-size: 15px
    }

    .heroImg {
        height: 300px;
        margin-top: 20px
    }

    .heroSignal {
        width: 174px;
        padding: 8px 9px;
        grid-template-columns: 29px 1fr;
        column-gap: 7px
    }

    .heroSignal strong {
        font-size: 10px
    }

    .heroSignal small {
        font-size: 9px;
        line-height: 1.2
    }

    .signalIcon {
        width: 27px;
        height: 27px;
        font-size: 9px
    }

    .signalOne {
        top: 8%;
        right: 8px
    }

    .signalTwo {
        bottom: 28%;
        left: auto;
        right: 8px;
        width: 120px
    }

    .heroBadge {
        left: 10px;
        bottom: 12px;
        width: 218px;
        padding: 16px;
        z-index: 4
    }

    .heroBadge b {
        font-size: 30px
    }

    .section {
        padding: 62px 0
    }

    .sectionHead h2 {
        letter-spacing: -2px;
        font-size: 35px
    }

    .metrics,
    .terms {
        grid-template-columns: 1fr
    }

    .metric {
        border-right: 0;
        border-bottom: 1px solid #ddd
    }

    .term {
        min-height: auto
    }

    .serviceText {
        padding: 28px
    }

    .serviceText h3 {
        font-size: 29px
    }

    .footerGrid {
        grid-template-columns: 1fr
    }

    .experienceBand {
        padding: 64px 0
    }

    .experienceStats {
        margin-top: 14px
    }

    .experienceStats span {
        font-size: 15px
    }

    .steps {
        gap: 10px
    }

    .step {
        padding: 24px 20px
    }

    .term {
        padding: 20px
    }

    .sectionAction {
        justify-content: stretch
    }

    .sectionAction .btn,
    .processAction .btn {
        width: 100%
    }

    .mobileBar {
        display: grid;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: #fff;
        grid-template-columns: 1fr 1fr;
        box-shadow: 0 -4px 18px rgba(0, 0, 0, .18)
    }

    .mobileBar a {
        padding: 15px;
        text-align: center;
        font-weight: 900;
        font-size: 13px
    }

    .mobileBar a:first-child {
        background: #ff5b0a;
        color: #111
    }

    .mobileBar a:last-child {
        background: #111;
        color: #fff
    }

    body {
        padding-bottom: 54px
    }

    .breadcrumb {
        padding-top: 12px
    }
}