@charset "UTF-8";

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

:root{
  --brand:#EC5327;
  --brand-deep:#C33F17;
  --ink:#12161C;
  --slate:#2B333D;
  --text:#48525D;
  --muted:#79828C;
  --paper:#FFFFFF;
  --stone:#F7F5F3;
  --line:#E4E0DC;
  --max:1180px;
}
/* Make selected text gold on a red background */
::selection {
  color: #ffffff;
  background-color: #EC5327;
} 
/* Make selected text gold on a red background */
::-moz-selection {
  color: #ffffff;
  background-color: #EC5327;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Newsreader",Georgia,serif;color:var(--text);background:var(--paper);font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:"Public Sans",system-ui,-apple-system,sans-serif;color:var(--ink);font-weight:400;line-height:1.14;letter-spacing:-0.005em}
h1{font-size:clamp(2.25rem,4.6vw,3.7rem);font-weight:300}
h2{font-size:clamp(1.7rem,2.9vw,2.4rem);font-weight:300}
h3{font-size:1.25rem;font-weight:400;line-height:1.26}
h4{font-size:1.02rem;font-weight:500}
/*p{max-width:70ch; padding: auto;}*/
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.label{font-size:.7rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:22px}
.label::before{content:"";display:inline-block;width:26px;height:2px;background:var(--brand);vertical-align:middle;margin-right:12px;margin-bottom:3px}
.label-chat{font-size:.7rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:22px}
.label-chat::before{content:"";display:inline-block;width:26px;height:2px;background:var(--line);vertical-align:middle;margin-right:12px;margin-bottom:3px}
.sec{padding:96px 0}
.sec.stone{background:var(--stone)}
.sec.ruled{border-top:1px solid var(--line)}
.sec .social-links a {
  color: color-mix(in srgb, var(--brand), transparent 0%);
  line-height: 0;
  transition: 0.3s;
  margin-right: 8px;
  font-size:2.0rem;
}

.sec .social-links a:hover {
  color: color-mix(in srgb, var(--brand-deep), transparent 0%);
}
.lede{font-family:"Newsreader",Georgia,serif;font-size:1.3rem;font-weight:300;line-height:1.55;color:var(--slate);max-width:62ch}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--ink);color:#fff;padding:12px 18px}

.topbar{background:var(--ink);color:#D6DAE0;font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;gap:18px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none;font-weight:500}
.topbar a:hover{color:var(--brand)}
.topbar .chan a{margin-left:22px}
.topbar .chan a:first-child{margin-left:0}

.mast{border-bottom:1px solid var(--line);background:var(--paper)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;padding-top:22px;padding-bottom:22px;flex-wrap:wrap}
.mast img{width:232px;height:auto}
.mast .where{font-size:.84rem;color:var(--muted);text-align:right;line-height:1.5}

.hero .btn, .sec .btn {display:inline-block;font-size:.9rem;font-weight:600;padding:15px 30px;text-decoration:none;border:1.5px solid var(--ink);color:var(--ink);background:transparent;transition:background .16s,color .16s,border-color .16s}
.hero .btn:hover, .sec .btn:hover{background:var(--ink);color:#fff}
.hero .btn-solid, .sec .btn-solid{background:var(--brand);border-color:var(--brand);color:#fff}
.hero .btn:hover, .sec .btn-solid:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.hero .btns, .sec .btns{display:flex;gap:15px;flex-wrap:wrap;margin-top:36px}
.sec .btn-solid i {font-size:1.6rem;}
p a {color:var(--brand);}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

.hero{padding:64px 0 92px}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:70px;align-items:center}
.hero h1{margin-bottom:28px;max-width:15ch}
.hero figure img{width:auto;max-height:500px;object-fit:cover;object-position:center;background:var(--stone)} /*aspect-ratio:2/1;*/
.langs{margin-top:38px;padding-top:22px;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted);max-width:52ch}
.langs b{color:var(--slate);font-weight:600}

.band img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--stone)}

.two{display:grid;grid-template-columns:330px 1fr;gap:70px;align-items:start}
.two-body > p + p{margin-top:20px}

.structs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px}
.struct{background:var(--paper);padding:30px 28px}
.struct h4{margin-bottom:9px;color:var(--ink)}
.struct p{font-size:.93rem;color:var(--muted)}

.split{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);margin-top:44px;background:var(--paper)}
.split > div{padding:32px 30px}
.split > div + div{border-left:1px solid var(--line)}
.split h3{margin-bottom:18px}
.ticks{list-style:none}
.ticks li{padding:11px 0 11px 26px;position:relative;border-bottom:1px solid var(--line);font-size:.95rem}
.ticks li:last-child{border-bottom:0}
.ticks li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:9px;background:var(--brand)}
.ticks.gov li::before{background:none;border:1.5px solid var(--muted);border-radius:50%}

.stage{display:grid;grid-template-columns:84px 1fr;gap:36px;padding:32px 0;border-top:1px solid var(--line)}
.approach .stage:last-child{border-bottom:1px solid var(--line)}
.stage-n{font-family:"Newsreader",serif;font-size:2.1rem;font-weight:300;color:var(--brand);line-height:1}
.stage h3{margin-bottom:10px}
.stage p{font-size:.96rem;max-width:60ch}

details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:26px 44px 26px 0;position:relative;font-family:"Newsreader",serif;font-size:1.18rem;font-weight:400;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:8px;top:34px;width:11px;height:11px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(45deg)}
details[open] summary::after{transform:rotate(-135deg);top:38px}
details .ans{padding:0 56px 28px 0;font-size:.97rem;color:var(--muted);max-width:74ch}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.detail dt{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:20px}
.detail dd{font-size:.98rem;color:var(--ink);margin-top:5px;line-height:1.6}
.detail dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--brand)}
.map{margin-top:34px;border:1px solid var(--line);line-height:0}
.map iframe{width:100%;height:290px;border:0;display:block}
form{border-top:2px solid var(--ink);padding-top:32px}
.field{margin-bottom:22px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
label{display:block;font-size:.73rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
input,select,textarea{width:100%;padding:13px 0;border:0;border-bottom:1px solid var(--line);font-family:"Public Sans",sans-serif;font-size:.98rem;color:var(--ink);background:transparent;border-radius:0}
input:focus,select:focus,textarea:focus{border-bottom-color:var(--brand)}
textarea{min-height:82px;resize:vertical}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.83rem;color:var(--muted);margin:26px 0}
.consent input{width:auto;margin-top:4px;flex:0 0 auto;border-bottom:0}
.formfoot{display:flex;gap:15px;flex-wrap:wrap;align-items:center}
.formfoot button{cursor:pointer;font-family:"Public Sans",sans-serif}
.formnote{font-size:.8rem;color:var(--muted);margin-top:18px}
.sent{display:none;border:1.5px solid var(--brand);padding:22px 24px;margin-top:24px;font-size:.94rem;color:var(--ink);background:var(--paper)}
.sent.on{display:block}

.cta-section{background:var(--ink);color:#D6DAE0;padding:88px 0;position:relative;overflow:hidden}
.cta-section::after{content:"";position:absolute;right:-150px;top:-180px;width:430px;height:430px;border:1px solid rgba(236,83,39,.3);border-radius:50%;pointer-events:none}
.cta-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:72px;align-items:center;position:relative;z-index:1}
.cta-kicker{display:block;font-size:.7rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:#FF8A68;margin-bottom:20px}
.cta-section h2{color:#fff;font-size:clamp(2rem,3.6vw,3.15rem);max-width:17ch;margin-bottom:22px}
.cta-lede{font-size:1.08rem;line-height:1.7;color:#C6CCD3;max-width:62ch}
.cta-title{font-size:2.08rem;line-height:1.7;color:#FFFFFF;max-width:62ch}
.cta-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:34px;list-style:none}
.cta-proof li{border-top:1px solid #343B45;padding:15px 8px 0 20px;position:relative;font-size:.88rem;line-height:1.5;color:#B7BEC7}
.cta-proof li::before{content:"";position:absolute;left:0;top:20px;width:8px;height:8px;background:var(--brand)}
.cta-actions{border-left:1px solid #343B45;padding-left:44px}
.cta-actions .btn{display:block;text-align:center;width:100%;padding:17px 22px}
.cta-actions .btn-solid{color:#fff;background-color:var(--brand)}
.cta-actions .btn-solid:hover{color:#fff;background-color:var(--brand-deep)}
.cta-actions .btn-outline-light{color:#fff;border-color:#69727D;margin-top:13px}
.cta-actions .btn-outline-light:hover{background:#fff;border-color:#fff;color:var(--ink)}
.cta-note{font-size:.82rem;line-height:1.65;color:#8F98A3;margin-top:20px;text-align:center}
.cta-note a{color:#D6DAE0;text-decoration:none;border-bottom:1px solid var(--brand)}

footer{background:var(--ink);color:#98A1AB;padding:70px 0 40px;font-size:.9rem}
footer h4{font-family:"Public Sans",sans-serif;color:#fff;font-size:.73rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;margin-bottom:16px}
.flogo{width:196px;height:auto;margin-bottom:24px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:52px;padding-bottom:50px;border-bottom:1px solid #262C34}
.fgrid p{max-width:36ch;line-height:1.72}
.fgrid a{color:#C6CCD3;text-decoration:none}
.fgrid a:hover{color:#fff}
.fnote{padding-top:32px;font-size:.79rem;line-height:1.78;color:#6C747D}
.fnote p{max-width:92ch;margin-bottom:14px}
.fbase{padding-top:20px;border-top:1px solid #262C34;margin-top:20px;font-size:.78rem;color:#6C747D}

@media (max-width:860px){
  .sec{padding:62px 0}
  .wrap{padding:0 22px}
  .hero{padding:34px 0 58px}
  .hero-grid,.two,.contact-grid,.f2,.split{grid-template-columns:1fr;gap:36px}
  .cta-section{padding:64px 0}
  .cta-grid{grid-template-columns:1fr;gap:38px}
  .cta-proof{grid-template-columns:1fr;gap:10px}
  .cta-actions{border-left:0;border-top:1px solid #343B45;padding:30px 0 0}
  .split > div + div{border-left:0;border-top:1px solid var(--line)}
  .stage{grid-template-columns:1fr;gap:12px}
  .fgrid{grid-template-columns:1fr;gap:36px}
  .mast .where{text-align:left}
  .mast img{width:196px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}


/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 72px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 60px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title  {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
  max-width: 60%;
  margin: 0 auto;
}

.section-title h1 {
  font-size: 42px;
  margin-bottom: 10px;
}

.section-title h2 {
  font-size: 32px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:before {
  content: "";
  position: absolute;
  display: block;
  width: 160px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 60%);
  left: 0;
  right: 0;
  bottom: 1px;
  margin: auto;
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.section-title h3 {
  font-size: 24px;
  margin-bottom: 10px;
}
.section-title p {
  margin-bottom: 0;
  font-family:"Newsreader",Georgia,serif;font-size:1.3rem;font-weight:300;line-height:1.55;
  color:var(--slate);
  
}
@media (max-width: 576px) {
  .section-title {
    max-width: 95%; 
    margin: 0 auto;
  }
}



/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {border-top:1px solid color-mix(in srgb, var(--line), transparent 0%);}
.contact .contact-main-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

@media (min-width: 992px) {
  .contact .contact-main-wrapper {
    grid-template-columns: 40% 60%;
    min-height: 600px;
  }
}

.contact .contact-main-wrapper h1 {
  font-size: 42px;
  margin-bottom: 20px;
}

.contact .map-wrapper {
  height: 300px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

@media (min-width: 992px) {
  .contact .map-wrapper {
    height: 100%;
    position: sticky;
    top: 100px;
  }
}

.contact .contact-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.contact .details-wrapper {
  width: 500%;
  border-radius: 16px;
  overflow: hidden;
}

.contact .contact-cards-container,
.pricing .contact-cards-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

.contact .contact-cards-container2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

@media (min-width: 576px) {
  .contact .contact-cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact .contact-card {
  background-color: var(--paper);
  padding: 20px;
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact .contact-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.contact .contact-card .icon-box {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  background-color: color-mix(in srgb, var(--brand), transparent 95%);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact .contact-card .icon-box i {
  font-size: 22px;
  color: var(--accent-color);
}

.contact .contact-card .contact-text h4 {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--heading-color);
}

.contact .contact-card .contact-text p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--default-color);
  margin-bottom: 0;
}

.contact .contact-form-container {
  background-color: var(--paper);
  /*padding: 30px;*/
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.contact .contact-form-container h3 {
  font-size: 24px;
  margin-bottom: 15px;
  color: var(--heading-color);
  position: relative;
  padding-left: 24px;
  padding-top: 24px;
}

.contact .contact-form-container h3:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background-color: var(--accent-color);
  border-radius: 2px;
}

.contact .contact-form-container>p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 25px;
  padding-left: 24px;
  color: var(--default-color);
}

.contact .contact-form-container .form-control {
  height: auto;
  padding: 14px 20px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--background-color), #f5f8fd 30%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--default-color);
  transition: all 0.3s ease;
}

.contact .contact-form-container .form-control:focus {
  background-color: var(--surface-color);
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 85%);
}

.contact .contact-form-container .form-control::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.contact .contact-form-container textarea.form-control {
  min-height: 140px;
}

.contact .contact-form-container .form-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 10px;
}

@media (max-width: 576px) {
  .contact .contact-form-container .form-submit {
    flex-direction: column;
    align-items: flex-start;
  }
}

.contact .contact-form-container button {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 15px;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.contact .contact-form-container button:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000 15%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px color-mix(in srgb, var(--accent-color), transparent 75%);
}

.contact .contact-form-container .social-links {
  display: flex;
  gap: 12px;
}

.contact .contact-form-container .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--background-color), #f5f8fd 20%);
  color: var(--heading-color);
  font-size: 16px;
  transition: all 0.3s ease;
}

.contact .contact-form-container .social-links a:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-3px);
}

@media (max-width: 768px) {
  .contact .contact-form-container {
    padding: 25px 20px;
  }

  .contact .contact-form-container h3 {
    font-size: 22px;
  }
}

/*--------------------------------------------------------------
# Error 404 Section
--------------------------------------------------------------*/
.error-404 {
  padding: 80px 0;
  margin: 0 auto;
}

.error-404 .error-icon {
  font-size: 5rem;
  color: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.error-404 .error-code {
  font-size: clamp(6rem, 15vw, 12rem);
  color: color-mix(in srgb, var(--heading-color), transparent 10%);
  font-family: var(--heading-font);
  line-height: 1;
}

.error-404 .error-title {
  font-size: 2rem;
  color: var(--heading-color);
  
}

.error-404 .error-text {
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  max-width: 600px;
  margin: 0 auto;
}

.error-404 .search-box {
  max-width: 500px;
  margin: 0 auto;
}

.error-404 .search-box .input-group {
  border-radius: 50px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.error-404 .search-box .form-control {
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  color: var(--default-color);
  background-color: var(--surface-color);
  border-radius: 50px;
}

.error-404 .search-box .form-control:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.error-404 .search-box .form-control::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.error-404 .search-box .search-btn {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  padding: 0.75rem 1.5rem;
  transition: all 0.3s ease;
}

.error-404 .search-box .search-btn:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.error-404 .error-action .btn-primary {
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  background-color: var(--accent-color);
  border: none;
  color: var(--contrast-color);
  border-radius: 50px;
  transition: all 0.3s ease;
}

.error-404 .error-action .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 15%);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .error-404 {
    padding: 60px 0;
  }

  .error-404 .error-code {
    font-size: clamp(4rem, 12vw, 8rem);
  }

  .error-404 .error-title {
    font-size: 1.5rem;
  }

  .error-404 .error-text {
    font-size: 1rem;
    padding: 0 20px;
  }

  .error-404 .search-box {
    margin: 0 20px;
  }
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}