/* Shared, mobile-first layout for every page. */
.site-shell { display:flex; min-height:100vh; flex-direction:column; width:min(100%,var(--page-width)); margin:auto; background:rgba(18,25,29,.75) }
header { border-bottom:0 }
.component-nav { min-height:7.25rem; display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; position:relative; background:linear-gradient(to bottom,var(--background-color-4) 0%, var(--background-color-4) 70%, transparent 95%) }
.component-nav>a { display:flex; align-items:center; gap:.75rem }
.component-nav>a img { width:4.75rem; height:4.75rem; object-fit:contain }
.component-nav h1 { color:var(--background-color-2); font-size:1.25rem; font-weight:500; line-height:1.1 }
.component-nav h1 { display:none }
.component-nav h1 span { color:var(--foreground-color); font-size:.85rem; font-weight:400 }
.nav-page-title { position:absolute; left:50%; max-width:48%; transform:translateX(-50%); color:var(--foreground-color-2); font-size:1.05rem; text-align:center }
.component-nav>ul { display:none; position:absolute; z-index:10; inset:100% 0 auto; background:#172025; border-bottom:0; padding:.5rem 1.25rem 1rem }
.component-nav.is-open>ul { display:block }
.component-nav>ul>li { border-top:1px solid var(--border-color) }
.component-nav>ul>li>a { display:inline-block; padding:.85rem 0 }
.component-nav>ul>li>a[aria-current="page"] { color:var(--foreground-color-2); font-weight:700; border-bottom:2px solid var(--foreground-color-2) }
.component-nav .arrow { display:inline-block; margin-left:.25rem; transition:transform 180ms ease,color 180ms ease }
.component-dropdown-btn[aria-current="page"]+.arrow { color:var(--foreground-color-2) }
.component-dropdown:hover .arrow { color:var(--button-accent-1); transform:translateY(50%) }
.component-dropdown-content { display:none; padding:0 0 .75rem 1rem }
.component-dropdown-content a { padding:.35rem 0; color:var(--foreground-color-5) }
.component-nav a:hover { color:var(--button-accent-1) }
.nav-toggle { width:2.75rem; height:2.75rem; border:0; background:transparent; color:var(--foreground-color); cursor:pointer; font-size:0 }
.nav-toggle::before { content:"☰"; font-size:2rem; line-height:1 }
.component-nav.is-open .nav-toggle::before { content:"×" }

main { flex:1; padding:2.25rem clamp(1rem,5vw,2rem) var(--section-space) }
main>.title { display:none; margin-bottom:2.75rem }
main>section+section { margin-top:var(--section-space) }
.component-description,.component-description-3,.component-description-4,.component-description-5 { color:#e4e5e2; font-size:.83rem; line-height:1.4 }
.button-1,.button-2 { display:inline-flex; min-height:2.4rem; align-items:center; justify-content:center; border:1px solid #dcaf46; border-radius:4px; background:linear-gradient(var(--button-accent-1),var(--button-accent-2)); color:#172025; font-size:.72rem; font-weight:700; padding:.65rem 1.35rem; text-align:center }

.component-explanation { display:grid; gap:2rem }
.component-explanation>div:first-child>span,.component-cards>div:first-child>span,.component-cards-vertical>div:first-child>span,.component-proccess>div:first-child>span,.component-proccess-vertical>div:first-child>span,.component-featured-work>div:first-child>span,.component-team>div:first-child>span,.component-mission>div:first-child>span,.component-what-we-do>div:first-child>span,.component-support>div:first-child>span,.component-cloud>div:first-child>span { display:block; margin-bottom:.65rem; font-size:.7rem; text-transform:uppercase }
.component-explanation h3 { max-width:16ch; font-size:clamp(1.8rem,8vw,3.3rem); font-weight:400; line-height:1.08 }
.component-explanation p { max-width:60ch; margin-top:1rem }
.component-explanation>div:first-child>div>div { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.3rem }
.component-explanation>div:last-child img { width:100%; height:auto; max-height:25rem; object-fit:contain }

.component-services { display:grid; gap:2rem }
.component-services h3 { max-width:20ch; font-size:1.8rem; font-weight:400 }
.component-services ul { display:none }
.component-services>div:last-child { display:grid; gap:2rem }
.component-services>div:last-child>div>h4 { margin-bottom:.75rem; text-align:center; font-size:1.2rem; font-weight:400 }
.component-services>div:last-child>div>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem }
.component-card,.component-what-we-do>div:last-child>div>div,.component-contact-form,.component-what-to-expect,.component-contact-info { border:1px solid #536066; border-radius:5px; background:#354047 }
.component-card { min-width:0; padding:.75rem }
.component-card>div:first-child { display:flex; align-items:center; gap:.65rem; margin-bottom:.65rem }
.component-card>div:first-child img { width:2rem; height:2rem; object-fit:contain }
.component-card h4,.component-card h5 { color:#fff; font-size:.82rem; line-height:1.15 }
.component-card .component-description { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:7 }
.component-services .component-card { min-height:12rem; text-align:center; position:relative }
.component-services .component-card h5 { color:var(--foreground-color-2); margin-bottom:.4rem }
.component-services .component-card>a { position:absolute; right:.7rem; bottom:.45rem; color:var(--foreground-color-2) }

.component-why>h3,.component-featured>h3 { margin-bottom:1rem; font-size:.7rem; text-transform:uppercase }
.component-why>div { display:grid; gap:1.5rem }
.component-why>div>div>h4 { margin-bottom:.45rem; text-align:center; font-weight:400 }
.component-why>div>div>div { border-radius:4px; background:#354047; padding:1rem }
.component-why>a,.component-featured>a { display:block; margin-top:.75rem; color:var(--foreground-color-2); text-align:right }
.component-featured>div { display:grid; gap:.65rem; border:1px solid var(--foreground-color-4); border-radius:5px; padding:.4rem }
.component-featured>div>div { overflow:hidden; border-radius:3px; background:#354047 }
.component-featured>div img { width:100%; aspect-ratio:16/8; object-fit:cover }
.component-featured>div>div>div { padding:.45rem; font-size:.7rem }
.component-featured>div>div>div>div { display:flex; justify-content:space-between }
.component-get-started { border:1px solid var(--foreground-color-4); border-radius:6px; background:rgba(87,112,49,.35); padding:1.5rem; text-align:center }
.component-get-started span { font-size:.75rem }
.component-get-started p { margin:1rem auto; max-width:55rem; font-size:.85rem }

.component-cards,.component-cards-vertical { display:grid; gap:1.4rem }
.component-cards>div:first-child h3,.component-cards-vertical>div:first-child h3,.component-proccess>div:first-child h3,.component-proccess-vertical>div:first-child h3,.component-featured-work>div:first-child h3,.component-team>div:first-child h3,.component-mission>div:first-child h3 { font-size:1.1rem; font-weight:400; line-height:1.15 }
.component-cards>div:first-child p { margin-top:.75rem }
.component-cards>div:last-child,.component-cards-vertical>div:last-child { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem }
.component-proccess,.component-proccess-vertical { display:grid; gap:1.4rem }
.component-proccess ul,.component-proccess-vertical ul { display:grid; gap:1.5rem }
.component-proccess li,.component-proccess-vertical li { display:grid; grid-template-columns:2.2rem 1fr; column-gap:.75rem }
.component-proccess li>div,.component-proccess-vertical li>div { grid-row:1/3; display:flex; align-items:center; flex-direction:column }
.component-proccess li>div>span,.component-proccess-vertical li>div>span { display:grid; width:2rem; height:2rem; place-items:center; border:1px solid var(--foreground-color-2); border-radius:50%; color:var(--foreground-color-2) }
.component-proccess li>div>hr,.component-proccess-vertical li>div>hr { flex:1; border:0; border-left:1px solid var(--border-color) }
.component-proccess li:last-child>div>hr,.component-proccess-vertical li:last-child>div>hr { display:none }
.component-proccess li h4,.component-proccess-vertical li h4 { margin-bottom:.4rem; font-size:.82rem }

.component-featured-work,.component-team,.component-mission { display:grid; gap:1.4rem }
.component-team>div:last-child { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem }
.component-team .component-card { display:flex; padding:0; flex-direction:column; overflow:hidden }
.component-team .component-card>img { width:100%; aspect-ratio:1; object-fit:cover }
.component-team .component-card h5,.component-team .component-card>span,.component-team .component-card p { padding-inline:.6rem }
.component-team .component-card h5 { padding-top:.6rem }
.component-team .component-card p { margin:.45rem 0; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:5 }
.component-team .component-card a { margin:auto .55rem .55rem; background:#eee; color:#222; text-align:center; font-size:.72rem }
.component-mission>div:last-child>div { display:grid; gap:0; padding:1rem; border:1px solid #536066; border-radius:5px; background:#354047 }
.component-mission>div:last-child>div>div { display:grid; grid-template-columns:5rem 1fr; gap:.8rem; padding:1rem 0 }
.component-mission>div:last-child img { grid-row:1/3; width:4.5rem; aspect-ratio:1; object-fit:cover }
.component-mission hr { border:0; border-top:1px solid var(--border-color) }

.component-what-we-do>div:last-child { display:grid; gap:.8rem }
.component-what-we-do>div:last-child>div>div { padding:1rem }
.component-what-we-do>div:last-child>div>div>div { display:flex; align-items:center; gap:.65rem }
.component-what-we-do h3 { font-size:1rem }
.component-what-we-do img { width:2.5rem; height:2.5rem; object-fit:contain }
.component-what-we-do p { margin:.75rem 0; font-size:.8rem }
.component-what-we-do a { display:block; color:var(--foreground-color-2); text-align:right; font-size:1.1rem }
.component-what-we-do ul { margin-top:.8rem; display:grid; gap:.35rem }
.component-what-we-do li { display:flex; align-items:center; gap:.45rem; border:1px solid var(--border-color); border-radius:4px; padding:.35rem; font-size:.75rem }
.component-what-we-do li img { width:1.5rem; height:1.5rem }
.component-support>div:last-child { padding:1rem; border:1px solid #536066; border-radius:5px; background:#354047 }
.component-support>div:last-child>div>hr { border:0; border-top:1px solid var(--border-color) }
.component-support>div:last-child>div:first-child>hr { display:none }
.component-support>div:last-child>div>div { display:grid; grid-template-columns:5.5rem 1fr; gap:.9rem; padding:1.2rem 0 }
.component-support img { width:5.5rem; height:5.5rem; object-fit:contain }
.component-support h4 { margin-bottom:.35rem; font-size:.82rem }
.component-cloud>div:last-child { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem }
.component-cloud>div:last-child>span { display:flex; align-items:center; gap:.35rem; border:1px solid var(--border-color-2); border-radius:3px; padding:.3rem .45rem }
.component-cloud img { width:1.4rem; height:1.4rem; object-fit:cover }
.component-cloud h4 { font-size:.72rem; font-weight:400 }

.component-contact-form-expect { display:grid; gap:1rem }
.component-contact-form-expect>div:first-child { display:grid; gap:1rem }
.component-what-to-expect,.component-contact-info,.component-contact-form { padding:1rem }
.component-what-to-expect ul { margin-top:.75rem }
.component-what-to-expect li { display:grid; grid-template-columns:2.2rem 1fr; gap:.6rem }
.component-what-to-expect li>div:first-child { display:flex; align-items:center; flex-direction:column }
.border-circle { display:grid; width:2rem; height:2rem; place-items:center; border:1px solid var(--foreground-color-2); border-radius:50%; color:var(--foreground-color-2); font-size:.7rem }
.component-what-to-expect li hr { flex:1; border:0; border-left:1px solid var(--border-color) }
.component-what-to-expect li:last-child hr { display:none }
.component-what-to-expect h4 { margin:.35rem 0; font-size:.82rem }
.component-what-to-expect p { margin-bottom:1rem }
.component-contact-info ul { display:grid; gap:.75rem }
.component-contact-info li { display:flex; align-items:center; gap:.75rem }
.component-contact-info img { width:2rem; height:2rem; object-fit:cover }
.component-contact-form { display:grid; gap:.8rem }
.component-contact-form>div:not(.component-contact-form-checkboxes):not(.component-contact-form-aditional-details):not(.component-contact-form-preferred-contact-method):not(.component-contact-form-agree) { display:grid; gap:.65rem }
.component-contact-form label { color:#f1f1ef; font-size:.72rem }
.component-contact-form input[type="text"],.component-contact-form input[type="email"],.component-contact-form input[type="tel"],.component-contact-form textarea { width:100%; border:1px solid #a7aaab; border-radius:2px; background:#e7e8e8; color:#1b2023; padding:.45rem }
.component-contact-form-checkboxes>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin-top:.35rem }
.component-contact-form-checkboxes>div>label { display:grid; min-height:2.2rem; place-items:center; border:1px solid var(--foreground-color-2); border-radius:4px; color:var(--foreground-color-5); text-align:center }
.component-contact-form-checkboxes input:checked+label { background:var(--foreground-color-2); color:#172025 }
.component-contact-form-preferred-contact-method>div { display:flex; flex-wrap:wrap; gap:.35rem .75rem }
.component-contact-form hr { border:0; border-top:1px solid var(--border-color) }
.component-contact-form>a { color:var(--foreground-color-5); font-size:.65rem; text-align:right }

.component-footer { display:grid; gap:1.5rem; padding:2.5rem clamp(1.25rem,5vw,3rem) 1rem; border-top:0; background-color:var(--background-color-4) }
.component-footer>div:first-child { text-align:center }
.component-footer .logo { width:7rem; height:7rem; margin:0 auto .7rem; object-fit:contain }
.component-footer h2 { color:var(--foreground-color-2); font-size:1.15rem; font-weight:400 }
.component-footer h2 span { color:var(--background-color-2) }
.component-footer>div:first-child>span { display:block; margin:1rem 0 }
.component-footer ul { display:flex; flex-wrap:wrap; justify-content:center; gap:.65rem }
.component-footer>div:first-child>ul img { width:2.8rem; height:2.8rem; object-fit:contain }
.component-footer>div:not(:first-child) { border-top:1px solid var(--border-color); padding-top:1rem }
.component-footer>div:not(:first-child) h2 { margin-bottom:.6rem }
.component-footer>div:not(:first-child) ul { color:var(--foreground-color-5); font-size:.7rem }
.component-footer>div:last-child ul { display:grid; justify-content:start }
.component-footer>div:last-child li { display:flex; align-items:center; gap:.6rem }
.component-footer>div:last-child li img { width:2rem; height:2rem; object-fit:contain }
.component-footer>div:first-child>div { margin-top:1.5rem; display:flex; align-items:center; justify-content:center; gap:.5rem; font-size:.65rem }
.component-footer>div:first-child>div .logo { width:2rem; height:2rem; margin:0 }
.component-footer .terms { margin-top:1.5rem; color:var(--foreground-color-5); font-size:.65rem; text-align:right }

@media (min-width:720px) {
  body { padding-inline:1.5rem }
  .component-nav { padding-inline:2.5rem }
  .component-nav>ul { position:static; display:flex; align-items:center; gap:1.8rem; background:none; border:0; padding:0 }
  .component-nav h1 { display:block }
  .nav-page-title { display:none }
  .component-nav>ul>li { border:0; position:relative }
  .component-nav>ul>li>a { padding:.5rem 0 }
  .nav-toggle { display:none }
  .component-dropdown-content { position:absolute; top:100%; left:0; min-width:14rem; background:var(--background-color-4); border:1px solid var(--border-color); padding:.6rem }
  .component-dropdown:hover .component-dropdown-content,.component-dropdown:focus-within .component-dropdown-content { display:grid }
  main { padding:2.5rem clamp(2rem,7vw,6rem) var(--section-space) }
  main>.title { display:block }
  .component-explanation { grid-template-columns:minmax(0,1fr) minmax(18rem,1fr); align-items:center }
  .component-explanation>div:last-child img { min-height:18rem }
  .component-services { grid-template-columns:15rem minmax(0,1fr) }
  .component-services ul { display:grid; gap:1.5rem; margin-top:2rem; font-size:1.1rem }
  .component-services>div:last-child>div>div { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .component-why>div { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.25rem 5rem }
  .component-featured>div { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .component-cards,.component-proccess,.component-featured-work,.component-team,.component-mission { grid-template-columns:14rem minmax(0,1fr) }
  .component-cards>div:last-child { grid-template-columns:repeat(4,minmax(0,1fr)) }
  .component-cards-vertical { grid-template-columns:1fr; text-align:center }
  .component-cards-vertical>div:last-child { grid-template-columns:repeat(3,minmax(0,1fr)); text-align:left }
  .component-proccess ul,.component-proccess-vertical ul { grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 }
  .component-proccess li,.component-proccess-vertical li { display:block; padding-right:.6rem }
  .component-proccess li>div,.component-proccess-vertical li>div { flex-direction:row }
  .component-proccess li>div>hr,.component-proccess-vertical li>div>hr { border:0; border-top:1px solid var(--border-color) }
  .component-proccess li:last-child>div>hr,.component-proccess-vertical li:last-child>div>hr { display:block }
  .component-proccess li h4,.component-proccess-vertical li h4 { margin-top:.65rem }
  .component-proccess-vertical { grid-template-columns:1fr; text-align:center }
  .component-proccess-vertical li { text-align:left }
  .component-team>div:last-child { grid-template-columns:repeat(4,minmax(0,1fr)) }
  .component-mission>div:last-child>div { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .component-mission>div:last-child>div>div { display:block; padding:.5rem 1rem }
  .component-mission>div:last-child img { width:2rem; height:2rem; float:left; margin-right:.5rem }
  .component-mission>div:last-child hr { border:0; border-left:1px solid var(--border-color) }
  .component-what-we-do>div:last-child { grid-template-columns:repeat(4,minmax(0,1fr)) }
  .component-support>div:last-child { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 2rem }
  .component-support>div:last-child>div:nth-child(2)>hr { display:none }
  .component-contact-form-expect { grid-template-columns:minmax(14rem,.7fr) minmax(0,1.5fr) }
  .component-contact-form>div:not(.component-contact-form-checkboxes):not(.component-contact-form-aditional-details):not(.component-contact-form-preferred-contact-method):not(.component-contact-form-agree) { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .component-contact-form-state-city>div:first-child { display:grid; grid-template-columns:.6fr 1.4fr; gap:.65rem }
  .component-contact-form-checkboxes>div { grid-template-columns:repeat(4,minmax(0,1fr)) }
  .component-footer { grid-template-columns:1.4fr .8fr 1fr 1fr; gap:2rem; padding-top:3rem }
  .component-footer>div:first-child { text-align:left }
  .component-footer .logo { margin-inline:0 }
  .component-footer ul { display:grid; justify-content:start }
  .component-footer>div:first-child>ul { display:flex }
  .component-footer>div:not(:first-child) { border-top:0; padding-top:0 }
  .component-footer>div:first-child>div { justify-content:flex-start; margin-top:3rem }
}

@media (min-width:1040px) { body{padding-inline:3rem}.component-nav{padding-inline:4rem}main{padding-inline:5rem} }