/* RougeSites - Components */

.services{
  padding:120px 5vw;
  background:#080808;
  border-bottom:1px solid var(--line);
}
.section-head{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:60px;
  align-items:end;
  margin-bottom:70px;
}
.section-head h2{font-size:clamp(48px,6vw,92px);max-width:760px}
.section-head p{max-width:540px}
.service-row{
  display:grid;
  grid-template-columns:.22fr .82fr 1fr .24fr;
  gap:36px;
  align-items:center;
  padding:46px 0;
  border-top:1px solid var(--line);
}
.service-row:last-child{border-bottom:1px solid var(--line)}
.service-row .num{color:var(--red);font-family:Georgia,"Times New Roman",serif;font-size:28px}
.service-row h3{font-size:clamp(32px,4vw,58px)}

.comparison{
  background:var(--cream);
  color:#090909;
  padding:120px 5vw;
}
.comparison .section-head p{color:rgba(0,0,0,.64)}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.compare-card{
  min-height:490px;
  border:1px solid rgba(0,0,0,.12);
  padding:42px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:rgba(255,255,255,.22);
  overflow:hidden;
}
.compare-card.bad{filter:saturate(.55);opacity:.82}
.compare-card.good{
  background:#0c0c0c;
  color:var(--white);
  border-color:rgba(168,55,47,.5);
  animation:breatheGlow 3.4s ease-in-out infinite;
}
@keyframes breatheGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(168,55,47,.13),0 40px 90px rgba(168,55,47,.12)}
  50%{box-shadow:0 0 0 1px rgba(168,55,47,.36),0 50px 125px rgba(168,55,47,.22)}
}
.compare-card h3{font-size:42px;letter-spacing:-.04em}
.compare-list{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:18px}
.compare-list li{display:flex;align-items:center;gap:14px;color:rgba(0,0,0,.7)}
.good .compare-list li{color:rgba(255,255,255,.72)}
.mark{
  width:22px;height:22px;border-radius:50%;
  display:inline-grid;place-items:center;flex:0 0 22px;
  font-size:13px;color:#fff;background:#292929;
}
.good .mark{background:var(--red)}

.process{
  padding:120px 5vw;
  background:#070707;
  border-bottom:1px solid var(--line);
}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:64px}
.step{border-top:1px solid var(--line);padding-top:28px}
.step span{color:var(--red);font-size:11px;letter-spacing:.18em;font-weight:800}
.step h3{font-size:30px;margin:22px 0 16px;letter-spacing:-.04em}
.step p{font-size:14px}

.work{
  padding:120px 5vw;
  background:#050505;
  border-bottom:1px solid var(--line);
}
.featured-project{
  margin-top:70px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:72px;
  align-items:center;
}
.project-img{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 50px 120px rgba(0,0,0,.55);
  position:relative;
}
.project-img::after{
  content:"";position:absolute;inset:0;background:rgba(168,55,47,0);transition:.45s var(--ease);
}
.project-img img{width:100%;height:100%;object-fit:cover;transition:.7s var(--ease)}
.project-img:hover img{transform:scale(1.035)}
.project-img:hover::after{background:rgba(168,55,47,.1)}
.project-info h3{font-size:clamp(46px,5vw,78px);margin:12px 0 24px}
.thumb-grid{margin-top:38px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.thumb{border:1px solid var(--line);background:#111;overflow:hidden;transition:.4s var(--ease)}
.thumb:hover{transform:translateY(-6px);box-shadow:0 25px 70px rgba(0,0,0,.46)}
.thumb img{width:100%;height:200px;object-fit:cover}
.thumb div{padding:18px;font-size:13px;color:rgba(255,255,255,.72)}

.experimental{
  padding:120px 5vw;
  background:#080808;
  border-bottom:1px solid var(--line);
}
.exp-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:70px}
.exp-card{
  min-height:610px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  display:flex;
  align-items:flex-end;
  padding:42px;
  isolation:isolate;
}
.exp-card img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  filter:brightness(.78) contrast(1.06);
  transition:.75s var(--ease);
}
.exp-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,.1) 58%,rgba(0,0,0,.3));
}
.exp-card:hover img{transform:scale(1.045)}
.exp-card h3{font-size:clamp(44px,5vw,80px)}

.investment{
  min-height:95vh;
  display:grid;
  grid-template-columns:1fr .8fr;
  align-items:center;
  padding:120px 5vw;
  color:#090909;
  background:var(--cream);
  isolation:isolate;
}
.investment-bg{
  position:absolute;inset:0;z-index:-2;
  background:url('images/investment-bg.png') center/cover no-repeat;
  filter:brightness(1.02) contrast(1.02);
}
.investment::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(239,232,220,.92) 0%,rgba(239,232,220,.72) 44%,rgba(239,232,220,.14) 100%);
}
.investment h2{font-size:clamp(50px,6.6vw,102px);max-width:840px}
.investment p{color:rgba(0,0,0,.72);max-width:420px;font-size:18px;margin-top:28px}
.price{
  margin-top:42px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(28px,3vw,46px);
  line-height:1.13;
  letter-spacing:-.04em;
  color:#090909;
}

.site-footer{
  position:relative;
  padding:84px 5vw 42px;
  background:#050505;
  isolation:isolate;
}
.site-footer::before{
  content:"";position:absolute;inset:0;
  background:url('images/modal-bg.png') center/cover no-repeat;
  opacity:.16;z-index:-2;filter:brightness(.8);
}
.site-footer::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,5,5,.2),rgba(5,5,5,.92));
  z-index:-1;
}
.footer-top{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:end;
  padding-bottom:70px;
  border-bottom:1px solid var(--line);
}
.footer-top h2{font-size:clamp(44px,6vw,88px);max-width:700px}
.footer-info{display:grid;gap:14px;justify-items:end;color:rgba(255,255,255,.72)}
.footer-bottom{
  padding-top:30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  color:rgba(255,255,255,.5);
  font-size:13px;
}

/* ROUGESITES CLEAN FORM */

#rs-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  width: 100vw;
  height: 100vh;
  padding: 32px 16px;
  background: rgba(0, 0, 0, 0.92);
  overflow-y: auto;
}

#rs-overlay.open {
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
}

.rs-modal {
  position: relative;
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 52px 56px;
  background: #050505;
  color: #fff;
  border: 1px solid rgba(239, 232, 220, 0.22);
  box-shadow: 0 40px 140px rgba(0, 0, 0, 0.78);
}

.rs-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.25);
  background: #fff;
  color: #000;
  font-size: 20px;
  cursor: pointer;
}

.rs-progress-wrap {
  height: 3px;
  background: rgba(255,255,255,.12);
  margin-bottom: 34px;
}

.rs-progress-bar {
  height: 100%;
  width: 20%;
  background: #a8372f;
  transition: width .3s ease;
}

.rs-modal-header {
  margin-bottom: 24px;
}

.rs-wordmark {
  display: block;
  font-size: 18px;
  margin-bottom: 4px;
}

.rs-step-label {
  font-size: 14px;
  color: rgba(255,255,255,.78);
}

.rs-modal-header h2 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1;
  margin: 6px 0 8px;
}

.rs-modal-header p {
  font-size: 17px;
  color: rgba(255,255,255,.68);
  margin: 0;
}

.rs-step {
  display: none !important;
}

.rs-step.active {
  display: block !important;
}

.rs-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.rs-field {
  margin-bottom: 24px;
}

.rs-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

.rs-field input,
.rs-field textarea {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid rgba(239,232,220,.25);
  background: #e8eef8;
  color: #050505;
  padding: 10px 12px;
  font-size: 18px;
  outline: none;
}

.rs-field textarea {
  min-height: 120px;
  resize: vertical;
}

.rs-err {
  display: none !important;
  margin-top: 8px;
  color: #ff7a70;
  font-size: 14px;
}

.rs-err.show {
  display: block !important;
}

.rs-options {
  display: grid;
  gap: 12px;
}

.rs-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.16);
  cursor: pointer;
}

.rs-option input {
  width: auto;
  min-height: 0;
  margin-top: 4px;
}

.rs-option strong {
  display: block;
  color: #fff;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.rs-option small {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.62);
  font-size: 13px;
  line-height: 1.4;
}

.rs-option.selected {
  border-color: #a8372f;
  background: rgba(168,55,47,.14);
}

.rs-nav {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.rs-nav button,
.rs-wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,.24);
  background: #fff;
  color: #050505;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
}

.rs-summary-block {
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: 18px;
  margin-bottom: 22px;
}

.rs-summary-block h4 {
  margin: 0 0 12px;
}

.rs-summary-block p {
  margin: 8px 0;
  color: rgba(255,255,255,.75);
}

#rs-success {
  display: none;
}

#rs-success h3 {
  font-size: 38px;
  margin-bottom: 14px;
}

@media (max-width: 760px) {
  #rs-overlay {
    padding: 16px 10px;
  }

  .rs-modal {
    padding: 42px 18px 28px;
  }

  .rs-field-row,
  .section-head,
  .featured-project,
  .footer-top,
  .investment,
  .compare-grid,
  .exp-grid {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .service-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .rs-modal-header h2 {
    font-size: 30px;
  }

  .rs-nav,
  .footer-bottom {
    flex-wrap: wrap;
  }
}