@font-face {font-display: swap; font-family: 'Rubik';font-style:normal;font-weight: 300 900;src: url('/assets/fonts/Rubik-VariableFont_wght.ttf') format('truetype-variations');}
@font-face {font-display: swap; font-family: 'Rubik';font-style: italic;font-weight: 300 900;src: url('/assets/fonts/Rubik-Italic-VariableFont_wght.ttf') format('truetype-variations');}



:root {
    --primary100: oklch(from var(--primary400) 10% c h);
    --primary200: oklch(from var(--primary400) 20% c h);
    --primary300: oklch(from var(--primary400) 30% c h);
    --primary400: oklch(0.45 0.08 207.21);
    --primary500: oklch(from var(--primary400) 50% c h);
    --primary600: oklch(from var(--primary400) 60% c h);
    --primary700: oklch(from var(--primary400) 70% c h);
    --primary800: oklch(from var(--primary400) 80% c h);
    --primary900: oklch(from var(--primary400) 90% c h);
    --primary-dark: oklch(0.47 0.2 28.9);
    --secondary100: oklch(from var(--secondary400) 10% c h);
    --secondary200: oklch(from var(--secondary400) 20% c h);
    --secondary300: oklch(from var(--secondary400) 30% c h);
    --secondary400: oklch(0.67 0.16 41.11);
    --secondary500: oklch(from var(--secondary400) 50% c h);
    --secondary600: oklch(from var(--secondary400) 60% c h);
    --secondary700: oklch(from var(--secondary400) 70% c h);
    --secondary800: oklch(from var(--secondary400) 80% c h);
    --secondary900: oklch(from var(--secondary400) 90% c h);

    --light-blue: oklch(0.96 0.01 208.78);
    --white: #ffffff;
    --off-white: #f1f1f1;
    --grey: #a4a4a4;
    --dark-grey: #71717a;
    --charcol: #3f3f46; 
    --black: #18181b;
    --background: #ecedec;
}

@media (prefers-reduced-motion: reduce) {
*, ::before, ::after {animation-delay: -1ms !important;animation-duration: 1ms !important;animation-iteration-count: 1 !important;background-attachment: initial !important;scroll-behavior: auto !important;transition-delay: 0s !important;transition-duration: 0s !important;}
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
.sreen-reader-only {position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
#skip a {position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
#skip a:focus {position:static;width:auto;height:auto;}

:target {scroll-margin-top: 2rem;}

body {font-family: system-ui, arial, serif;color: var(--primary100);margin: 0;padding: 0;line-height: 1.7;}
h1,h2,h3,h4,h5,h6, .font-heading {margin: 0;padding: 0;line-height: 1.2;text-wrap:balance;font-family: 'Poppins',system-ui, arial, serif;}
h1 {font-size: clamp(2rem, 4vw, 2.675rem);letter-spacing: -0.05em;margin-bottom: 2rem;color: var(--primary400);}
h2 {font-size: 1.75rem; margin-block: 2rem 1rem;color: var(--primary200);}
h3 {
    color: var(--secondary300);
}
h4 {font-size: 1.2rem;}

hr {margin-block: 1rem;}
a {color: var(--prime-500);padding-inline: .2em; transition: all .5s ease-out;}
a:hover {text-decoration: none;}
p a:hover, ul a:hover {    background: var(--secondary900);
    color: var(--primary400);
padding-inline: .2rem;text-decoration: none;}
a:hover img {background: inherit;padding-inline: .2rem;box-sizing: border-box;}
p a[href^="https"]:after, li a[href^="https"]:after {content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2318181b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5'/%3E%3C/svg%3E");padding: 0 0 0 .25em;}
:focus {display:inline-block; outline: 2px solid var(--primary800);}

sub {display: inline-block;max-width: 85ch;line-height: 1.3;}

.left {float:left;margin: auto;padding: 1rem;}
.right {float: right;margin: auto;padding: 1rem;corner-shape: squircle;border-radius: 4rem;}
.right-right {float: right;margin: auto;padding: 1rem;corner-shape: squircle;border-radius: 4rem;max-width:40%;}
.img-center {margin: 3rem auto;display: block;corner-shape: squircle;border-radius: 4rem;}
.youtube{display: block;width: 100%;max-width:70ch;aspect-ratio: 560 / 315;height: auto;}


.content-container {
    padding-inline: 1rem;
    max-width: 1280px;
    margin: auto;
    transition: padding 0.3s ease;
}
@media(max-width: 670px) {
    .content-container {
    padding-inline: 1.5rem;}
}
main {    padding-block: 3rem 0;
    position: relative;}


article {container-type: inline-size;container-name: main-article;}
article h2:first-of-type:not(p + h2), article p:not(p + p)  {margin-block-start: 0;}
article ol, article ul {max-width: 70ch;margin: .5rem 0 1rem 0;}
article p {max-width:70ch;text-wrap:pretty;letter-spacing: 0.5px;}
img {max-width: 100%;height: auto;vertical-align: middle;font-style:italic;background-repeat:no-repeat;background-size:cover;shape-margin:1rem;}
blockquote {font-style: italic;margin: 0.25rem auto;padding: 0.25rem 2.5rem;position: relative;}
blockquote:before {content: "\201C";font-size: 5rem;position: absolute;left: -3px;top: -20px;color: var(--primary400);}

/**************SYSTEM ERROR PAGE****************************************************/
.system-page, .system_page {padding:130px 10px; text-align:center;}
.system-page p, .system_page p {margin:2rem auto 4rem;text-wrap-style: balance;}
.system_form {margin-inline: auto;max-width: 400px;text-align: left;}
.system_table {margin:auto;}
.system_page .big_letter {font-size: 5em;color: var(--dark-red);}
.system_svg{width:45px;height:45px;margin:0 auto 35px;display:block}
.system_table td:nth-child(1) {text-align: right;padding:.25rem;}
.system_table td:nth-child(2) {text-align: left;padding:.25rem;}


/**************     NAVIGATION     **********/
nav.utility {
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: center;    margin-block-end: .5rem;
}
nav.utility .a-btn {
    padding: .15em 1em;}
nav.utility p {
    font-size: 1.5rem;
    margin: 0;
    line-height: 1;
}


nav.main {z-index: 3;}
.nav-container {display: flex;justify-content: space-between;align-items: center;max-width: 1280px;margin-inline: auto;padding-inline: 1rem;}
.nav-container img {width: 175px;}
.nav-dropdown > [aria-haspopup]:after { content: "\25BE"; font-size: 1.3rem;line-height: 1;padding-inline: 4px;display: inline-block;transition: transform 0.2s ease;}
.nav-dropdown > [aria-expanded="true"]:after { transform: rotate(180deg); }
.selected > a:first-of-type, .selected > span:first-of-type, .side-nav .selected { color: var(--white); background-color: var(--primary300);
 }
.main ul {padding: 0;    margin-block: 1rem 0; list-style-type: none; max-width: 1280px; display: flex; justify-content: flex-end;column-gap: .5rem; }
.main ul li {display: block; position: relative;}
.main ul li a, .main ul li span { text-decoration: none; display: block; padding: .625rem 1rem; font-size: .9rem;font-weight: 500; cursor: pointer;text-align: left; transition: all .5s ease-out;text-transform: uppercase;    border-radius: 1rem;
    line-height: 1;}
.main ul li a:hover, .main ul li span:hover, .main button:hover, .highlight a:hover, .mobile-menu-wrapper a:hover {  background-color: var(--secondary400);
    color: var(--white); }
.main button#mobile_btn:hover {     background-color: var(--primary400);    color: var(--white); }
/* Submenu Styling */
.main ul ul { position: absolute; z-index: 100; min-width: 220px; width: max-content;display: none; flex-direction: column;text-align: left; background: var(--white); box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 0 0 8px 8px; overflow: hidden; left: 50%; transform: translateX(-50%); }
.main ul ul li { width: 100%; }
.main ul ul li a { color: var(--primary100); width: 100%; padding: 0.8rem 1.5rem; border: none; }
/* Mobile Styles */
.main button#mobile_btn {font-family: inherit;font-size: 1.3rem;font-weight: 500;cursor: pointer;display: none;padding: .5rem .75rem;color: currentColor;background: none;border: none;align-items: center;gap: 8px;line-height: 1.45;    border-radius: 1rem;}

.highlight a {    background-color: oklch(0.67 0.12 181.25);
    color: #161616;}

.mobile-menu-wrapper a {display:none;}
@media(max-width: 1010px) {
    .nav-container {padding-inline: 1rem 0;}
    .mobile-menu-wrapper {display: flex;}
.main button#mobile_btn { display: flex; margin-left: auto; }
.main ul#main-menu { display: none; flex-direction: column; background: var(--white); position: absolute; top: 60px; right: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 10;}
.main ul#main-menu.mobilenav {color: var(--primary100); display: flex; min-width: 350px;        top: 5.65rem;
        right: 1rem;
        padding: 1rem;}
.main ul li { width: 100%; border-bottom: 1px solid var(--white); }
.main ul ul { position: static; left: 0; transform: none; width: 100%; box-shadow: none; border-radius: 0; background-color: var(--white); }
.main ul ul li a { padding-left: 2.5rem; box-sizing: border-box;}
}
@media(max-width: 670px) {
.main button#mobile_btn {margin: 0 auto;}
}


/**********     HEADER     **********/
header {background-color: var(--light-blue);color:var(--primary100);position: sticky;
    top: 0;
    z-index: 100;}
header .content-container {width:auto;max-width: 1280px;display: flex;justify-content: space-between;padding: 1rem;gap:2rem;text-align:center;font-size:1.1rem;align-items: center;margin-inline:auto;}
header img {max-width: 250px;}
nav.utility ul {display: flex;gap: 3rem;list-style: none;padding-inline-start: 0;margin-block-start: 0;}
nav.utility a {text-decoration: none;}
.call-to-action a {background-color: var(--secondary-500);color: var(--prime-900);padding: .5em 1em;display: inline-block;margin-inline: auto;}
.a-btn {        background-color: var(--secondary800);
    color: var(--primary100);
padding: .5em 1em;display: block;text-align: center;width: fit-content;text-decoration: none;    border-radius: 1rem;}
.btn-center {margin-inline: auto;}
.call-to-action a:hover, .a-btn:hover {    background: var(--secondary400);
    color: var(--white);}

@media(max-width: 670px) {
header .content-container{flex-direction: column;}
header {position:relative;}
body {background-position-y: 350px;}
}




.service-head {
    display: grid;
    gap: 3rem;
    grid-template-columns: 1fr 1fr;
}
.service-head-image {
    order: 1;
    height: 100%;
}
@media(max-width: 950px) {
.service-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
    .service-head-image {
        order:0;
    height: 350px;
}
}


.service-head-image img {
    width: 100%;
    object-fit: cover;
    height: 100%;
}




.service-feature-wrapper {
    display: flex;
    gap: 2rem;
    padding: 2rem;
    align-items: center;
}
.service-feature-wrapper svg {
    width: 100px;
    height: auto;
    fill: var(--primary600);
}
.service-feature-wrapper h2 {
    font-size: 1.25rem;
    margin-block: 0 .5em;
}
.service-feature-wrapper p {
    margin: 0;
}

@media(max-width: 500px) {
.service-feature-wrapper {
    flex-direction: column;
    text-align:center;
}
}

.service-section {
    text-align: center;
    padding-block-start: 6rem;
}
.service-section h2 {
    font-size: 2.5rem;
}
service-section h3 {
    font-size: 1.5rem;
    font-weight: normal;
    margin-block: -.5rem 1rem;
}
.service-section p {margin-inline:auto;}

.services-card-grid {
    margin-block-start: 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: 3rem;
}
.services-card {
    background-color: var(--white);
    
}
.service-card-text {
    padding: 2rem;
    text-align: left;
}
.service-card-text p { margin-inline:0;}
.service-card-text h3 {
    font-size: 1.5rem;
    padding-block-end: 1rem;
}


.brand-card-grid {
    width: 75%;
    max-width: 800px;
    margin-inline: auto;
    margin-block-start: 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 3rem;
    
}
.brand-card {
    background-color: var(--white);
    padding: 2rem;
}
.brand-card-text {
    
    text-align: left;
}
.brand-card-text p { margin-inline:0;}
.brand-card h3 {
    font-size: 1.5rem;
    padding-block: 2rem 1rem;
}


/** TEAM **/
.team-wrapper {width:100%;display: flex;gap: 2rem;row-gap: 3rem;margin-block: 5rem;}
.team-wrapper img{
    corner-shape: squircle;
    border-radius: 4rem;
    box-shadow: 3px 3px 10px 0px #d9d9d9; position: sticky;
    top: 1rem;
min-width: 175px;max-width: 300px;}
.team-wrapper h3 {margin-block-start: 0;}
@container main-article (width < 600px) {
    .team-wrapper {flex-wrap: wrap;}
    .team-wrapper img {max-width: 500px;    justify-content: center;}
}




section.faq-wrapper {
    padding-block: 6rem 0;
}
.faq-grid {
        display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: 3rem;}
.faq-grid p {
    padding-block-start: .5rem;
    padding-inline-start: 3.5rem;
    margin: 0;
}
.faq-grid span {
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--primary400);
}
.faq-grid h3 svg {
    width:50px;
    height:50px;
}
.faq-grid h3 {
        display: grid;
    align-items: center;
    gap: .5rem;
    grid-template-columns: 50px 1fr;
}
  


.finance-banner {
    text-align: center;
    padding-block: 6rem 5rem;
}
.finance-banner h3 {
    font-size: 1.75rem;
    margin-block-end: 1rem;
}

.estimate-banner {
    margin-block-start: 3rem;
    padding-block: 5rem;
    background-color: var(--primary400);
    color: var(--white);
    text-align: center; text-wrap-style: balance;
}
.estimate-banner h3 {color: var(--white);    font-size: 2.5rem;}
.estimate-banner .a-btn {margin-inline:auto;}


/**********      FOOTER      **********/
footer {    color: var(--white);
    background-color: var(--primary400);
    padding-block: 3rem 6rem;}
.footer-flex {    display: flex;
    width: 96%;
    max-width: 1280px;
    margin-inline: auto;
    gap: 2rem;
    flex-wrap: wrap;    justify-content: space-evenly;text-align: center;}
footer h3 {
    font-size: inherit;
    margin-block: 0 .25em;}
.footer-info {
    margin-inline-start: 1.5rem;
}
.footer-contact {
    min-width: 150px;
}

footer a, footer h3 {
    color: var(--white);
}
footer a:hover {color:#000000;}
footer ul { padding:0;}
footer li {
    list-style: none;
    font-size: .9rem;
}
footer ul a {
    text-decoration: none;
    padding-block: .5rem;    display: inline-block;}

.social-icons {display: flex;column-gap: 20px;    padding-block-start: 2rem;}
.social-icon {width: 35px;height: auto;border-radius:50%; }
footer a img:hover {filter: invert(1);}
.social-round {border-radius:50%;}

.copyright {     width: 75%;
    max-width: 800px;
    text-align: center;
    font-size: .8rem;
    margin-block-start: 3rem;
    margin-inline: auto;}

.credential-banner {
    display: flex;
    gap: 2rem;
    margin: 2rem;
}
.credential-banner img {
    width: 100px;
}


@media screen and (max-width: 660px) {
    .footer-flex {flex-direction: column;        align-items: center;}
    .footer-flex > div {
    text-align: center;}
    .social-icons {justify-content: center;}
.a-btn {    margin: auto;}
.footer-info {
    margin-inline-start: 0;
}
}

/*****************************************************
 				Contact
*****************************************************/
/**********  LOCATION DETAIL  **********/
.location-map iframe {width: 100%;height: 300px;border: none;margin-block: 3rem;}
.location-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));gap: 3rem;}
.location-contact-grid {display: grid;grid-template-columns: 100px 1fr;gap: 1rem;align-content: start;}
.location-hours-grid {display: grid;grid-template-columns: 100px 1fr;column-gap: 1rem;align-content: start;}
.location-hours-grid > span:nth-child(odd) {
    font-weight: bold;
    text-align: right;
}

.contact-title {font-weight: 600;text-align: right;}

.hours-grid {
    display: grid;
    grid-template-columns: 40px 140px;
    column-gap: 1em;
    text-align: left;

}
.hours-grid span:nth-child(odd) {
    text-align: right;
}


/*****************************************************
 				FORM STYLE 
*****************************************************/

.form-wrapper {
  container-type: inline-size;
  container-name: form-container; /* Optional: helpful if you have multiple containers */
  width: 100%;
}

form {max-width:800px;margin:auto;}

.form-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;    align-items: end;
}

.form-item {
  display: flex;
  flex-direction: column;
    row-gap: .2em;
}
.form-item label:not(.checkbox-card label) {
    line-height: 1;
}
.form-item.checkbox-card {
    position:relative;
  padding: .5em;
  border: thin solid #ccc;
  border-radius: .25em;
  transition: background 0.2s;
  display: flex;
  flex-direction: row-reverse; /* Puts checkbox on the left */
    justify-content: flex-end;
    gap:.5rem;
    background-color: var(--white);
}

.form-item.checkbox-card label::after {content:'';position:absolute;inset:0;}


.form-item.checkbox-card:hover {
  background-color: var(--secondary900);
}

.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }

.grecaptcha-badge {visibility: hidden;}
    .recapv3 {color:#555; display: flex;gap: 1rem;grid-column: span 6; }
    .recapv3 div {font-size: 0.9em;line-height: 1;}


@container (max-width: 560px) {
  .form-grid{
    grid-template-columns: 1fr;
  }
  .form-item, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .recapv3  {
    grid-column: span 1;
  }
  .form-item.empty {
    display:none;
  }
}

fieldset {
    width: 100%;
    box-sizing: border-box;    border-radius: .25rem;
}

.form-terms.span-6 {
    font-size: .8rem;
    margin-block-end: -.75rem;
}

.form-flex {display: flex;flex-wrap: wrap;column-gap: 2rem;}
.form-flex > div {flex: 1 1 auto;}


label:has(+ input:required):after, label:has(+ textarea:required):after, label:has(+ select:required):after {content: ' *';color: red;}
label:has(+ input[type=radio])::after {
    content: '';
}

input, select, textarea {
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    background-color: var(--white);
    box-sizing: border-box;
    padding: .5em;
    border: thin solid #ccc;border-radius: .25em;}



input[type=text],  input[type=email], textarea, select, input[type=url] {width: 100%;}
input[type=password] {width: 100%; max-width:500px;}
textarea {field-sizing: content;}
select {appearance:none;}

input[type=datetime-local], input[type=date], input[type=tel], input[type=number] {}
input[type=file] {}

#login input[type=text], #login input[type=password] { width: 300px;}

.form-note {padding-left:20px; font-size: .8em; color: #8d1212; font-weight: 300;}
.tiny-body {padding:10px 2%;}

input:optional, select:optional {border-left-color: #999;}
input:required:valid, select:required:valid {border-left-color: palegreen;}
input:invalid, select:invalid {border-left-color: salmon;}
input:required:focus:valid, select:required:focus:valid {border-left-color: palegreen;}
input:focus:invalid, select:focus:invalid {border-left-color: salmon;}

input[type=submit] { background-color: var(--secondary800);color: var(--primary100);border: none;cursor: pointer;
padding: .5em 1em;text-align: center;text-decoration: none;    border-radius: 1rem; font-weight:bold;-webkit-appearance: button; }
input[type=submit]:hover { background: var(--secondary400);
    color: var(--white); }
input[type=submit]:focus { background-color:var(--primary800);}