:root{--white:#f7fbfc;--muted:rgba(226,238,241,.72);--cyan:#21d9d2;--blue:#3b91ff}*{box-sizing:border-box}html,body{width:100%;height:100%;height:100svh;margin:0;overflow:hidden;background:#071720;color:var(--white)}body{font-family:Manrope,sans-serif;-webkit-font-smoothing:antialiased}.brand-header{position:fixed;z-index:10;top:clamp(24px,4.2vh,48px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}.brand-header img{width:clamp(145px,13.5vw,202px);height:auto;filter:drop-shadow(0 12px 24px rgba(0,0,0,.28))}.brand-header p{margin:8px 0 0;font-size:8px;font-weight:700;line-height:1;letter-spacing:.44em;text-transform:uppercase;color:rgba(255,255,255,.62)}.split-screen{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr}.service{position:relative;min-width:0;overflow:hidden;isolation:isolate;color:var(--white);text-decoration:none}.service:before{content:"";position:absolute;z-index:2;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.2),#000 55%,rgba(0,0,0,.35));pointer-events:none}.service--digital{border-right:1px solid rgba(255,255,255,.18)}.service-bg{position:absolute;z-index:-2;inset:-18px;background-size:cover;background-position:center;filter:saturate(.58) contrast(1.06);transform:scale(1.025);transition:transform 1s cubic-bezier(.18,.8,.2,1),filter .8s ease}.service--digital .service-bg{background-image:url("../img/design.jpg")}.service--it .service-bg{background-image:url("../img/it.jpg")}.service:after{content:"";position:absolute;z-index:-1;inset:0;transition:opacity .65s ease}.service--digital:after{background:linear-gradient(100deg,rgba(4,25,34,.96) 0%,rgba(5,54,64,.91) 62%,rgba(8,87,93,.82) 100%)}.service--it:after{background:linear-gradient(100deg,rgba(7,26,48,.90) 0%,rgba(8,32,68,.93) 62%,rgba(6,20,38,.97) 100%)}.service-glow{position:absolute;z-index:0;width:70%;aspect-ratio:1;border-radius:50%;filter:blur(70px);opacity:.18;pointer-events:none;transition:opacity .6s ease,transform .8s ease}.service--digital .service-glow{right:-35%;bottom:-48%;background:var(--cyan)}.service--it .service-glow{left:-35%;top:-45%;background:var(--blue)}.service-content{position:absolute;z-index:3;top:50%;transform:translateY(-40%);width:min(550px,calc(100% - 80px))}.service--digital .service-content{right:clamp(54px,7.2vw,138px)}.service--it .service-content{left:clamp(54px,7.2vw,138px)}.service-number{display:flex;align-items:center;gap:12px;margin-bottom:clamp(20px,3.2vh,36px);font-size:10px;font-weight:700;letter-spacing:.21em;text-transform:uppercase;color:rgba(255,255,255,.65)}.service-number span{color:var(--white)}.service-number i{width:38px;height:1px;background:rgba(255,255,255,.35)}.service h1{margin:0;font-family:"Plus Jakarta Sans",sans-serif;font-size:clamp(42px,4.55vw,76px);font-weight:600;line-height:1.02;letter-spacing:-.055em}.service h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.8)}.service-content>p{max-width:470px;margin:clamp(20px,3vh,31px) 0 clamp(24px,3.8vh,40px);font-size:clamp(14px,1.15vw,17px);line-height:1.72;color:var(--muted)}.service-button{display:inline-flex;align-items:center;justify-content:space-between;width:210px;height:54px;padding:0 18px 0 21px;border:1px solid rgba(255,255,255,.34);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;background:rgba(255,255,255,.025);backdrop-filter:blur(10px);transition:.35s}.service-button b{font-size:18px;font-weight:400;transition:transform .35s}.corner-label{position:absolute;z-index:3;top:50%;font-size:8px;font-weight:700;letter-spacing:.38em;text-transform:uppercase;color:rgba(255,255,255,.38);writing-mode:vertical-rl}.service--digital .corner-label{left:30px;transform:translateY(-50%) rotate(180deg)}.service--it .corner-label{right:30px;transform:translateY(-50%)}.service:hover .service-bg{transform:scale(1.075);filter:saturate(.82) contrast(1.08)}.service:hover .service-glow{opacity:.34;transform:scale(1.15)}.service:hover .service-button{background:var(--white);border-color:var(--white);color:#071720}.service:hover .service-button b{transform:translate(3px,-3px)}.center-mark{position:fixed;z-index:11;left:50%;bottom:clamp(60px,8.5vh,92px);transform:translateX(-50%);width:45px;height:45px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.24);border-radius:50%;pointer-events:none;backdrop-filter:blur(8px)}.center-mark span,.center-mark span:before{display:block;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 15px rgba(33,217,210,.8)}.center-mark span:before{content:"";background:var(--blue);transform:translateX(8px)}.bottom-note{position:fixed;z-index:10;left:50%;bottom:clamp(22px,3.5vh,38px);transform:translateX(-50%);white-space:nowrap;font-size:8px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.46);pointer-events:none}.bottom-note span{margin:0 9px;color:rgba(255,255,255,.85)}
@media(max-width:820px){.brand-header{top:17px}.brand-header img{width:116px}.brand-header p{margin-top:4px;font-size:6px}.split-screen{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.service--digital{border-right:0;border-bottom:1px solid rgba(255,255,255,.18)}.service:before{background-size:50px 50px}.service--digital:after{background:linear-gradient(100deg,rgba(4,25,34,.96),rgba(5,65,71,.85))}.service--it:after{background:linear-gradient(100deg,rgba(7,26,48,.93),rgba(8,37,78,.88))}.service-content{top:auto;bottom:clamp(27px,4.5vh,42px);transform:none;width:calc(100% - 48px)}.service--digital .service-content,.service--it .service-content{left:24px;right:auto}.service--digital .service-content{bottom:28px}.service-number{margin-bottom:10px;font-size:8px}.service-number i{width:24px}.service h1{font-size:clamp(27px,8.5vw,38px);line-height:1}.service h1 br{display:none}.service-content>p{max-width:430px;margin:10px 0 15px;font-size:11px;line-height:1.5}.service-button{width:177px;height:39px;padding-inline:14px;font-size:8px}.service-button b{font-size:14px}.corner-label{display:none}.center-mark{bottom:auto;top:50%;width:36px;height:36px}.bottom-note{display:none}}
@media(max-height:700px) and (min-width:821px){.brand-header{top:20px}.brand-header img{width:132px}.service-content{transform:translateY(-34%)}.service-number{margin-bottom:17px}.service h1{font-size:clamp(39px,4.2vw,60px)}.service-content>p{margin:17px 0 22px;font-size:14px}.service-button{height:46px}.center-mark{bottom:48px}.bottom-note{bottom:17px}}
@media(max-height:660px) and (max-width:820px){.brand-header img{width:94px}.brand-header p{display:none}.service-content,.service--digital .service-content{bottom:15px}.service-number{margin-bottom:6px}.service-content>p{margin:7px 0 10px;line-height:1.35}.service-button{height:34px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}

/* Color study: deep navy for Digital, Versa cyan/blue gradient for IT */
.service--digital:after{background:linear-gradient(105deg,rgba(5,18,36,.97) 0%,rgba(7,31,64,.94) 58%,rgba(8,46,83,.89) 100%)}
.service--it:after{background:linear-gradient(110deg,rgba(5,52,101,.96) 0%,rgba(3,112,177,.91) 54%,rgba(10,185,216,.84) 100%)}
.service--digital .service-glow{background:#277dd8}
.service--it .service-glow{background:#16d9ec;opacity:.24}
@media(max-width:820px){.service--digital:after{background:linear-gradient(100deg,rgba(5,18,36,.97),rgba(8,46,83,.89))}.service--it:after{background:linear-gradient(100deg,rgba(5,52,101,.95),rgba(7,151,203,.86),rgba(13,194,218,.80))}}

/* Pure color panels with animated calls to action */
.service-bg{display:none}
.service-button{position:relative;overflow:hidden;animation:button-pulse-digital 3.2s ease-in-out infinite}
.service--it .service-button{animation-name:button-pulse-it}
.service-button:before{content:"";position:absolute;inset:-2px auto -2px -45%;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-18deg);animation:button-sheen 3.2s ease-in-out infinite;pointer-events:none}
@keyframes button-sheen{0%,36%{left:-45%}68%,100%{left:125%}}
@keyframes button-pulse-digital{0%,100%{border-color:rgba(255,255,255,.30);box-shadow:0 0 0 rgba(39,125,216,0)}50%{border-color:rgba(98,177,255,.72);box-shadow:0 0 24px rgba(39,125,216,.20)}}
@keyframes button-pulse-it{0%,100%{border-color:rgba(255,255,255,.34);box-shadow:0 0 0 rgba(22,217,236,0)}50%{border-color:rgba(132,246,255,.86);box-shadow:0 0 26px rgba(22,217,236,.28)}}
@media(prefers-reduced-motion:reduce){.service-button,.service-button:before{animation:none!important}}

/* Flat IT field to balance the visually solid Digital panel */
.service--it:after{background:#087cad}
.service--it .service-glow{display:none}
@media(max-width:820px){.service--it:after{background:#087cad}}

.service--digital:before{background-image:none}

/* Semantic headings, keyboard access, and viewport edge cases */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.service h2{margin:0;font-family:"Plus Jakarta Sans",sans-serif;font-size:clamp(42px,4.55vw,76px);font-weight:600;line-height:1.02;letter-spacing:-.055em}
.service h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.8)}
.service:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.service:focus-visible .service-button{background:#fff;color:#071720}
@media(max-width:820px){.brand-header{top:max(17px,env(safe-area-inset-top))}.service h2{font-size:clamp(27px,8.5vw,38px);line-height:1}.service h2 br{display:none}.service-button{min-height:44px}.service--it .service-content{bottom:max(27px,env(safe-area-inset-bottom))}}
@media(orientation:landscape) and (max-height:500px){.brand-header{top:12px}.brand-header img{width:88px}.brand-header p,.bottom-note,.corner-label{display:none}.service-content{top:54%;transform:translateY(-40%);width:calc(100% - 72px)}.service--digital .service-content{right:36px}.service--it .service-content{left:36px;bottom:auto}.service-number{margin-bottom:8px}.service h2{font-size:clamp(30px,4.5vw,44px)}.service-content>p{margin:10px 0 13px;font-size:11px;line-height:1.45}.service-button{height:42px;min-height:42px}}

@media(max-width:820px){.service--it{grid-row:1;border-bottom:1px solid rgba(255,255,255,.18)}.service--digital{grid-row:2;border-bottom:0}.service--it .service-content{bottom:28px}.service--digital .service-content{bottom:max(28px,env(safe-area-inset-bottom))}}

.button-arrow{display:block;width:18px;height:18px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s ease;flex:0 0 auto}
.service:hover .button-arrow,.service:focus-visible .button-arrow{transform:translate(3px,-3px)}
@media(max-width:820px){.button-arrow{width:16px;height:16px}}

.bottom-note{left:0;transform:none;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:24px;padding:0 clamp(24px,5vw,80px)}
.bottom-note span{margin:0;color:inherit}.bottom-note span:first-child{justify-self:end}.bottom-note span:last-child{justify-self:start}.bottom-note i{font-style:normal;color:rgba(255,255,255,.85)}
@media(max-width:820px),(orientation:landscape) and (max-height:500px){.bottom-note{display:none}}