﻿#hero{position:relative;padding-top:calc(32px + 2rem);color:#eee;background-image:url(/assets/img/hero-bg.jpg);background-size:auto;background-position:52% 118%;background-repeat:repeat;background-attachment:fixed}#hero::before{content:"";position:absolute;inset:0 0 0 0;background:rgba(0,63,125,.9)}#hero .container{align-items:center;padding-block:3rem}#hero .text{color:#eee;width:100%;justify-self:center}#hero .text .welcome{margin-inline:auto;text-align:center;font-size:clamp(3rem,4.4vw,3.5rem);font-weight:100;line-height:1.2}#hero .text .welcome strong{font-size:clamp(3.5rem,4.9vw,4.5rem)}@media only screen and (width < 428px){#hero .text .welcome{margin-bottom:1rem}}@media only screen and (width < 386px){#hero .text .welcome{font-size:clamp(2rem,3.2vw,2.75rem)}}#hero .text .welcome strong{font-weight:300}#hero .text #typewriter{font-size:clamp(4.5rem,5.7vw,5.5rem);font-weight:600;text-align:center;text-transform:uppercase;margin-inline:auto}@media only screen and (width < 728px){#hero .text #typewriter{font-size:clamp(3.5rem,4.9vw,4.5rem)}}@media only screen and (width < 428px){#hero .text #typewriter{font-size:clamp(3rem,4.4vw,3.5rem)}}@media only screen and (width < 386px){#hero .text #typewriter{font-size:clamp(2.2rem,3.2vw,2.75rem)}}#hero .text #typewriter::after{content:"|";font-weight:300;animation:blink 1000ms infinite}main a{color:#003f7d;cursor:pointer}main a.underline{bottom:6px;padding-block:0}main .container{grid-template-columns:repeat(1, 1fr)}main .container h1{width:fit-content;margin-bottom:2rem}main .container p{width:fit-content;text-align:left}main .container i{display:block}main .container .main,main .container .side,main .container .full{grid-column:1/-1}main .container .icon{font-size:clamp(4.5rem,5.7vw,5.5rem);place-self:start;padding-top:6rem}main #about li{list-style:none}main #about li::before{content:"•";margin-right:8px}main #overview .container{grid-template-columns:repeat(1, 1fr);justify-items:center;gap:1rem}main #overview .field{padding-block:1.5rem;width:100%;min-width:250px;background-color:#e3f2ff;text-align:center;border-radius:12px;font-size:clamp(.8rem,1vw,1.1rem)}main #overview .field i{font-size:clamp(1.2rem,1.8vw,1.4rem)}main #overview .field h2{font-size:clamp(1.75rem,2.5vw,2rem);letter-spacing:-1px;margin-bottom:.5rem}main #overview .field p{width:100%;text-align:center}main #overview .field ul{margin:0;padding:0;list-style:none}main #overview .field strong{font-weight:600}main #service_details{margin-top:0;padding-top:0}main #service_details h2{margin-bottom:1.25rem}main #service_details h2 ul{margin:0;padding:0;list-style:none}main #service_details h2 li{position:relative;list-style:none;display:block;margin:.5rem 0;font-size:clamp(1rem,1.5vw,1.2rem);cursor:pointer}main #service_details h2 li::before{content:"→";font-size:clamp(1.2rem,1.8vw,1.4rem);font-weight:800;margin-right:10px;left:0;position:relative;transition:left 200ms ease}main #service_details h2 li:hover{color:#003f7d;transition:color 200ms ease}main #service_details h2 li:hover::before{left:5px}main #service_details h2 li.active{color:#003f7d;font-weight:500}main #service_details h2 li.active::before{left:5px}main #service_details p.hidden{display:none}.textblock h2{max-width:100%;margin-inline:auto;text-align:center;margin-bottom:1.25rem;font-size:clamp(3rem,4.4vw,3.5rem);letter-spacing:-2px;line-height:1}.textblock h2 i{margin-bottom:1rem}.textblock ul{margin-inline:auto;padding:0;list-style:none}.textblock ul li{font-size:clamp(1rem,1.5vw,1.2rem)}.textblock ul li::before{content:"•";margin-right:8px}@media only screen and (width > 590px){#hero .container .profile::before{width:242px}#hero .container .profile .image_wrapper{overflow:hidden;border-radius:50%}#hero .container .profile img{width:230px}main #overview .container{grid-template-columns:repeat(2, 1fr)}main #overview .field{max-width:unset}main #overview .field.first{grid-column:span 2}main .textblock h2{letter-spacing:-1px;padding-inline:2ch}main #service_details h2 li{display:inline-block;margin:0 4rem 0 0}}@media only screen and (width > 768px){#hero{position:relative}main .container{grid-template-columns:repeat(10, 1fr)}main .textblock h2,main .textblock ul{width:unset;margin-inline:unset;text-align:left}main .textblock h2{padding-inline:0}main #about .container .main{grid-column:1/8}main #about .container .side{grid-column:9/10}main #service .container .main{grid-column:4/11}main #service .container .side{grid-column:2/3}}@media only screen and (width > 1024px){#hero{position:relative}#hero .container{grid-template-columns:1fr auto}#hero .container .profile{order:2;width:min(24vw - 12px,330px);height:min(24vw - 12px,330px)}#hero .container .profile::before{width:min(24vw,342px)}#hero .container .profile img{width:min(24vw - 12px,330px)}#hero .container .text{order:1;justify-self:start;text-align:left;width:100%}#hero .container .text .welcome{font-size:clamp(3.5rem,4.9vw,4.5rem);text-align:left;margin-inline:0;width:100%}#hero .container .text .welcome strong{font-size:clamp(5rem,6.9vw,6.5rem)}#hero .container .text #typewriter{font-size:clamp(4.5rem,5.7vw,5.5rem);text-align:left;margin-inline:0 auto}#hero .container .text #typewriter::after{content:"|";font-weight:300;animation:blink 1000ms infinite}main #overview .container{grid-template-columns:repeat(3, 1fr)}main #overview .field.first{grid-column:span 1}}@media only screen and (width > 1440px){main .container{margin-inline:7rem}main #overview .field h2{margin-bottom:1rem}}
