:root { --ink: #171714; --cream: #f7f5ef; --muted: #69685f; --orange: #ff6500; }
body { background: var(--cream); }
header { max-width: none; padding: 22px max(5%, calc((100vw - 1320px)/2)); background: #141411ef; color: #f8f5ed; border-color: #ffffff14; }
header.is-scrolled { background: #141411f5; border-color: #ffffff14; box-shadow: 0 8px 30px #0002; }
.brand > span { font-size: 22px; }
.contact-link { border-color: #ffffff35; border-radius: 100px; padding: 11px 20px; }
.contact-link:hover { background: var(--orange); border-color: var(--orange); }
.languages button { color: #c5c3b8; }
.menu { color: #fff; }
.hero { max-width: none; min-height: 690px; padding: 75px max(5%, calc((100vw - 1320px)/2)) 65px; grid-template-columns: 1.25fr 1fr; gap: 20px; background: #141411; color: #fffaf0; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 85% 55%, #ff650016, transparent 55%); pointer-events: none; }
.hero .eyebrow { color: #c5c1b6; font-size: 10px; }
h1 { font-size: clamp(48px, 5.3vw, 80px); line-height: 1.12; letter-spacing: -3.5px; margin-bottom: 28px; font-weight: 600; }
h1 em { background: none; color: var(--orange); }
.intro { color: #bbb7ad; font-size: 14px; line-height: 1.9; max-width: 520px; }
.hero-buttons { margin: 34px 0 45px; gap: 30px; }
.primary { padding: 17px 25px; border-radius: 100px; box-shadow: none; font-size: 13px; }
.hero .text-link { color: #fff9ee; font-size: 13px; }
.hero-bottom { padding-top: 23px; border-top: 1px solid #ffffff1a; max-width: 465px; }
.hero-bottom p { color: #a7a398; font-size: 11px; }
.vertical-rule { background: #ffffff25; }
.hero-art { height: 520px; overflow: visible; background: none; box-shadow: none; border: none; border-radius: 0; }
.hero-art::before { inset: 12%; background: #ff650032; filter: blur(75px); }
.art-grid { background-image: linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px); background-size: 45px 45px; mask-image: radial-gradient(ellipse, #000, transparent 68%); }
.art-center { inset: 90px 30px 75px; background: none; border: none; box-shadow: none; border-radius: 0; }
.art-center img { width: auto; height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 0 40px #ff650035) drop-shadow(12px 18px 0 #ff65001a); }
.orbit { width: 500px; height: 350px; left: calc(50% - 250px); top: 90px; border-color: #ff65003c; }
.orbit-two { width: 470px; height: 370px; left: calc(50% - 235px); top: 80px; border-color: #ffffff1b; }
.floating { color: #eee7dc; background: #24231cdd; border: 1px solid #ffffff18; border-radius: 100px; box-shadow: 0 8px 30px #0003; padding: 13px 17px; }
.floating.top { left: 0; top: 40px; }
.floating.code { right: 0; bottom: 40px; color: #ff8b3e; }
.code span { color: #d0cabc; }
.art-label, .coordinate { color: #77766b; }
.spark { right: 20px; top: 65px; color: #ff8a3c; }
.capability-strip { background: var(--orange); color: #171714; padding: 23px 5%; font-size: 11px; font-weight: 600; }
.capability-strip b { color: #171714; }
.section { max-width: 1440px; padding: 100px 5%; }
h2 { font-size: clamp(35px, 3.5vw, 52px); font-weight: 600; line-height: 1.22; letter-spacing: -1.8px; }
.eyebrow { font-size: 10px; letter-spacing: 2px; }
.section-description { font-size: 13px; line-height: 1.9; max-width: 375px; }
.section-head { margin-bottom: 52px; }
.services { color: var(--ink); background: var(--cream); }
.services::before { display: none; }
.services h2 { font-size: clamp(35px,3.5vw,52px); }
.services h2 em { color: var(--orange); }
.services .eyebrow { color: #79766d; }
.services .section-description { color: var(--muted); padding-left: 0; border: 0; }
.services .service-grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid #d9d6ca; }
.services .service-grid article, .services .service-grid article:first-child { display: grid; grid-template-columns: 95px 1.1fr 1fr; grid-template-rows: auto auto; column-gap: 30px; align-items: center; min-height: 180px; padding: 32px 22px; border: none; border-bottom: 1px solid #d9d6ca; border-radius: 0; background: none; box-shadow: none; }
.services .service-grid article::before { display: none; }
.services .card-top { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column-reverse; gap: 12px; margin: 0; align-self: center; }
.services .card-top > span:last-child { font-size: 12px; letter-spacing: 1px; color: #99958a; }
.services .icon { border: 1px solid #ded9ce; background: transparent; color: var(--orange); width: 58px; height: 58px; border-radius: 50%; }
.services .service-grid h3 { grid-column: 2; grid-row: 1; color: var(--ink); font-size: 26px; letter-spacing: -.8px; line-height: 1.4; margin: 0 0 12px; }
.services .service-grid p { grid-column: 3; grid-row: 1 / 3; color: var(--muted); font-size: 13px; margin: 0; }
.services .tags { grid-column: 2; grid-row: 2; margin: 0; padding: 0; border: 0; }
.services .tags span { border: 1px solid #ded9ce; color: #797468; background: none; border-radius: 100px; font-size: 9px; padding: 4px 10px; }
.projects { background: #eeece3; border: 0; border-radius: 28px; max-width: 1296px; padding: 70px 50px; margin: 0 auto; }
.project-grid { gap: 30px; }
.project-art { height: 300px; border-radius: 14px; }
.project-art .project-number { top: 22px; left: 25px; }
.project-caption { padding: 18px 3px 0; }
.project-caption h3 { font-size: 18px; font-weight: 600; }
.project-caption p { font-size: 11px; }
.project-esboxs .project-logo { width: 210px; max-height: 240px; }
.project-tbc .project-logo { width: 255px; }
.project-airlines .project-logo, .project-emart .project-logo { width: 360px; }
.partners { border-top: none; align-items: center; padding-top: 100px; padding-bottom: 100px; }
.partner-content > p { font-size: 13px; }
.partner-placeholder { border-style: solid; border-radius: 12px; background: #eeece3; border-color: #ded9ce; }
.partner-placeholder h3 { font-size: 14px; }
.partner-placeholder p { font-size: 11px; }
.contact-section { border-radius: 22px; padding: 70px; margin-bottom: 55px; background: #ff6500; color: #171714; box-shadow: none; }
.contact-section h2 { font-size: clamp(34px,4.5vw,65px); line-height: 1.2; letter-spacing: -2px; font-weight: 600; }
.contact-section .eyebrow { color: #6b2b03; }
.contact-section > p:not(.eyebrow) { font-size: 14px; color: #522d14; }
.contact-note { background: var(--ink); color: white; border-radius: 100px; padding: 17px 24px; font-size: 13px; margin-top: 20px; }
.contact-art { font-size: 260px; opacity: .15; right: 5%; }
.contact-section::before, .contact-section::after { border-color: #17171420; }
footer { border-top: 1px solid #ded9ce; padding: 30px 5%; }
footer p, footer > a:last-child { font-size: 10px; }
@media(hover:hover) and (pointer:fine) {
  .services .service-grid article:hover { background: #eee9df; box-shadow: none; transform: none; }
  .services .service-grid article:hover .icon { background: var(--orange); color: white; border-color: var(--orange); transform: rotate(-8deg); }
  .services .service-grid article:hover h3 { color: #df5900; }
}
@media (min-width: 1441px) { .projects { max-width: 1320px; } }
@media (max-width: 1100px) { h1 { font-size: 56px; } .hero { grid-template-columns: 1.2fr 1fr; min-height: 620px; } .hero-art { height: 430px; } .art-center { inset: 85px 20px 60px; } .orbit { width: 380px; left: calc(50% - 190px); height: 260px; } .orbit-two { width: 360px; left: calc(50% - 180px); height: 290px; } .services .service-grid h3 { font-size: 23px; } .projects { margin: 0 5%; padding: 60px 35px; } }
@media (max-width: 850px) { .hero { grid-template-columns: 1fr; padding-top: 55px; gap: 10px; } .hero-copy { max-width: 650px; } h1 { font-size: clamp(42px,7.5vw,65px); } .hero-art { height: 390px; width: min(100%, 520px); justify-self: center; } .art-center { inset: 45px 65px; } .hero-bottom { margin-bottom: 10px; } .floating.top { top: 10px; } .floating.code { bottom: 15px; } .art-label { bottom: 0; } .coordinate { top: 0; } .services .service-grid article { grid-template-columns: 70px 1fr; column-gap: 20px; } .services .service-grid p { grid-column: 2; grid-row: 3; margin-top: 14px; } .services .card-top { grid-row: 1 / 4; } }
@media (max-width: 700px) { header { padding: 18px 6%; } nav { background: #141411; border-color: #ffffff18; } .hero { padding: 50px 6% 35px; } h1 { font-size: 44px; letter-spacing: -2px; } .intro { font-size: 13px; } .hero-buttons { gap: 22px; flex-wrap: wrap; margin-bottom: 30px; } .primary { padding: 15px 20px; font-size: 12px; } .hero-art { height: 335px; } .art-center { inset: 45px 40px; } .orbit { width: 330px; height: 230px; left: calc(50% - 165px); top: 55px; } .orbit-two { width: 320px; height: 255px; left: calc(50% - 160px); top: 40px; } .spark { top: 30px; } .floating { font-size: 7px; padding: 10px 13px; } .floating.code { font-size: 22px; } .code span { font-size: 6px; } .capability-strip { font-size: 9px; gap: 12px; padding: 18px 6%; } .section { padding: 60px 6%; } h2, .services h2 { font-size: 35px; } .section-head { margin-bottom: 30px; } .services .service-grid article, .services .service-grid article:first-child { padding: 27px 0; min-height: 0; column-gap: 15px; grid-template-columns: 58px 1fr; } .services .icon { width: 46px; height: 46px; font-size: 21px; } .services .icon svg { width: 27px; height: 27px; } .services .service-grid h3 { font-size: 21px; } .services .service-grid p { font-size: 12px; } .services .section-description { margin-top: 20px; } .projects { padding: 40px 22px; border-radius: 20px; margin: 0 6%; } .project-grid { grid-template-columns: 1fr; gap: 26px; } .project-art { height: 225px; } .project-esboxs .project-logo { width: 150px; max-height: 175px; } .project-tbc .project-logo { width: 205px; } .project-airlines .project-logo, .project-emart .project-logo { width: 270px; } .project-caption h3 { font-size: 16px; } .partners { gap: 28px; } .contact-section { margin: 0 6% 35px; padding: 40px 25px; border-radius: 18px; } .contact-section h2 { font-size: 35px; letter-spacing: -1.5px; } .contact-section > p:not(.eyebrow) { font-size: 12px; } .contact-art { font-size: 170px; right: -5px; } .contact-note { font-size: 12px; padding: 15px 21px; } footer { padding: 25px 6%; } }
@media (max-width: 380px) { h1 { font-size: 38px; } .header-actions { gap: 10px; } .brand > span { font-size: 18px; } .hero-art { height: 300px; } .services .service-grid h3 { font-size: 19px; } }

.partner-logos { display: grid; grid-template-columns: 1fr; gap: 18px; }
.partner-logo-card { min-width: 0; height: 135px; display: grid; place-items: center; background: #fff; border: 1px solid #e6e1d7; border-radius: 14px; padding: 22px; transition: transform .35s var(--ease-out), box-shadow .35s; }
.partner-logo-card img { display: block; width: 100%; height: auto; max-height: 80px; object-fit: contain; }
.partner-logo-tbc img { max-width: 135px; }
@media (hover: hover) and (pointer: fine) { .partner-logo-card:hover { transform: translateY(-4px); box-shadow: 0 12px 25px #29251f0a; } }
@media (max-width: 700px) { .partner-logos { gap: 12px; } .partner-logo-card { height: 110px; padding: 16px; } .partner-logo-tbc img { max-height: 65px; } }

.project-wizmetic { background: #683191; color: #fff; }
.project-limo { background: #fff; color: #252525; }
.project-wizmetic .project-logo, .project-limo .project-logo { width: 190px; max-height: 200px; }
.project-wizmetic::before, .project-wizmetic::after, .project-limo::before, .project-limo::after { display: none; }
@media (max-width: 700px) { .project-wizmetic .project-logo, .project-limo .project-logo { width: 150px; max-height: 160px; } }

.project-trithuchub { background: #fff; color: #006d48; }
.project-trithuchub .project-logo { width: 200px; max-height: 220px; border-radius: 22px; }
.project-trithuchub::before, .project-trithuchub::after { display: none; }
.partner-logos { grid-template-columns: 1fr 1fr; }
.partner-logo-esboxs { background: #000; color: #fff; height: auto; min-height: 160px; gap: 10px; text-align: center; }
.partner-logo-esboxs img { width: 80px; max-height: 80px; }
.partner-logo-esboxs span { font-size: 11px; line-height: 1.5; }
.partner-logo-esboxs small { display: block; color: #ff9b56; font-size: 10px; margin-top: 3px; }
.partner-logo-tbc { height: auto; min-height: 160px; }
@media (max-width: 700px) { .project-trithuchub .project-logo { width: 160px; max-height: 175px; } .partner-logo-esboxs, .partner-logo-tbc { min-height: 155px; } }

/* Keep the partner card focused on its logo. */
.partner-logo-esboxs > span { display: none; }

.partner-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.partner-logo-wizmetic { background: #683191; border-color: #683191; height: auto; min-height: 160px; }
.partner-logo-wizmetic img { width: 80px; max-height: 80px; }
@media (max-width: 700px) { .partner-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .partner-logo-wizmetic { min-height: 155px; } }
