section#hero{height:clamp(30rem,50rem - 50dvw,50rem);--_bg: #061f38}section#hero>picture>img{object-position:60% 20%;filter:brightness(.5)}section#hero [data-el=content-layout]{position:relative;height:100%;align-items:flex-end;justify-content:flex-end}#hero-content{color:#ddd;padding:1rem 2rem;border-radius:.75rem;box-shadow:0 0 100px #0009;background-color:#0009;max-width:35rem}#hero-content :is(h1,h2){margin-block:.5rem}#hero-content h1{font-size:2.5rem}#hero-content h2{font-size:1.5rem;font-weight:400;margin-top:.25rem}#hero-content p{font-size:1rem;margin-top:1rem}button[data-el=button]{--_color: var(--button__color, #ddd);--_bg: var(--button__bg, #0b3460);--_stoke: 2px;position:relative;cursor:pointer;width:max-content;border-radius:.25rem;color:var(--_color);padding:0;border:none;background-color:var(--_bg);transition:all .3s ease;border:2px solid var(--_bg)}button[data-el=button]:before,button[data-el=button]:after,button[data-el=button]>span:before,button[data-el=button]>span:after{position:absolute;content:"";background:var(--_color);box-shadow:0 0 0 var(--_color);transition:all .3s ease}button[data-el=button]:focus{--_color: var(--neon_blue);outline:none}button[data-el=button]>span{position:relative;display:block;padding:.5rem 1rem;width:100%;height:100%}button[data-el=button]>span:before,button[data-el=button]>span:after{left:0;top:0}button[data-el=button]>span:before{width:var(--_stoke);height:50%}button[data-el=button]>span:after{height:var(--_stoke);width:20%}button[data-el=button]:before,button[data-el=button]:after{right:0;bottom:0}button[data-el=button]:before{height:50%;width:var(--_stoke)}button[data-el=button]:after{width:20%;height:var(--_stoke)}button[data-el=button].wide{width:100%}:is(button[data-el=button]:hover,button[data-el=button]:focus,:is(a:hover,a:focus) button[data-el=button]){--_bg: #104884 !important}:is(button[data-el=button]:hover,button[data-el=button]:focus,:is(a:hover,a:focus) button[data-el=button]):before,:is(button[data-el=button]:hover,button[data-el=button]:focus,:is(a:hover,a:focus) button[data-el=button])>span:before{height:100%!important}:is(button[data-el=button]:hover,button[data-el=button]:focus,:is(a:hover,a:focus) button[data-el=button]):after,:is(button[data-el=button]:hover,button[data-el=button]:focus,:is(a:hover,a:focus) button[data-el=button])>span:after{width:100%!important}section#services{--_skew: 5rem;--_bg: #e7a16e;color:#111}section#services ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.5rem;margin:0;padding:0;z-index:1}section#services ul article{box-shadow:var(--shadow-3);padding:1rem;border-radius:.75rem;height:100%;display:grid;grid-template-rows:max-content 1fr max-content;background-color:#eee;position:relative;transition:box-shadow .3s;cursor:pointer}section#services ul article>main{height:100%}section#services ul article>picture{display:grid;place-items:center}section#services ul article>picture img{width:10rem;aspect-ratio:1;object-fit:cover}section#services ul article:hover,section#services ul article:focus-within{box-shadow:var(--shadow-5)}section#methodology{color:#ddd;--_bg: #1f2025;--_skew: 5rem}section#methodology [data-parallax] svg{font-size:1rem;font-family:Courier New,Courier,monospace;border:1px solid #ddd;roke:#ddd}section#methodology [data-parallax] svg *{fill:#ddd;vector-effect:non-scaling-stroke}section#methodology [data-parallax] svg rect{fill:transparent;stroke-width:.1rem;stroke:#ddd}section#contact{color:#ccc;padding-bottom:15rem;--_bg: #061f38;--_skew: 5rem}section#contact>picture>img{filter:brightness(.5)}section#contact [data-parallax] form{color:#ddd;padding:1rem 2rem;border-radius:.75rem;box-shadow:0 0 100px #0009;background-color:#0009;max-width:35rem;display:grid;gap:1rem}section#contact [data-parallax] form a{color:var(--neon_blue)}[data-current-page=home]>section[id]{position:relative;overflow:visible;width:100%;margin-top:calc(var(--_skew, 0) * -1);padding-top:var(--_skew);min-height:10rem}[data-current-page=home]>section[id]>picture{inset:0;position:absolute;background-color:var(--_bg)}[data-current-page=home]>section[id]>picture>img{width:100%;height:100%;object-fit:cover}[data-current-page=home]>section[id] h2{font-size:2.5rem;margin-top:0;z-index:1}[data-current-page=home]>section[id].shape_biggerthan>picture{clip-path:polygon(0% 100%,0% 0%,100% var(--_skew, 0),100% 100%)}[data-current-page=home]>section[id].shape_smallerthan h2{text-align:right}[data-current-page=home]>section[id].shape_smallerthan>picture{clip-path:polygon(0% 100%,0% var(--_skew, 0),100% 0%,100% 100%)}