.calculator { background: var(--sand); }
.calculator__head { display: flex; flex-wrap: wrap; gap: 3rem; align-items: flex-end; margin-bottom: 3.5rem; }
.calculator__title { flex: 1 1 420px; min-width: 300px; margin: 0; color: var(--navy); text-transform: uppercase; font-weight: 700; }
.calculator__copy { flex: 1 1 480px; min-width: 300px; margin: 0; color: var(--ink); text-wrap: pretty; }
.calculator__body { display: flex; flex-wrap: wrap; gap: 3rem; align-items: flex-start; }
.calculator__form { flex: 1 1 380px; min-width: 300px; display: flex; flex-direction: column; gap: 1.5rem; }
.calculator__label { display: block; font-size: .95rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1rem; color: var(--navy); margin-bottom: .5rem; }
.calculator__input { width: 100%; background: #fff; border: 1px solid var(--navy); padding: .9rem 1rem; font-size: var(--p); color: var(--navy); font-weight: 700; border-radius: 0; line-height: 1.3; }
.calculator__input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.calculator__input--select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 3rem; cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><path d='M1 1l7 7 7-7' fill='none' stroke='%230d4269' stroke-width='2.2' stroke-linecap='square'/></svg>"); background-repeat: no-repeat; background-position: right 1.1rem center; }
.calculator__input--select:hover { border-color: var(--green); }
.calculator__note { color: #6b6f66; font-size: .9rem; line-height: 1.5; margin: 0; }
.calculator__result { flex: 1 1 460px; min-width: 300px; background: #fff; border: 1px solid var(--line); padding: 2.5rem 2.25rem; }
.calculator__result-label { display: block; font-size: .85rem; font-weight: 900; letter-spacing: .12rem; text-transform: uppercase; color: var(--green); margin-bottom: .5rem; }
.calculator__result-value { display: block; font-size: var(--h2); font-weight: 900; color: var(--navy); line-height: 1.1; }
.calculator__summary { color: var(--ink); margin: 1rem 0 0; text-wrap: pretty; }
.calculator__rule { height: 1px; border: 0; background: var(--line); margin: 2rem 0; }
.calculator__breakdown { display: flex; flex-direction: column; gap: 1.25rem; }
.calculator__legend { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .8rem; font-weight: 900; letter-spacing: .1rem; text-transform: uppercase; color: var(--ink); }
.calculator__legend-item { display: flex; align-items: center; gap: .5rem; }
.calculator__swatch { width: 14px; height: 14px; display: inline-block; }
.calculator__swatch--from { background: var(--navy); }
.calculator__swatch--nd { background: var(--green); }
.calculator__rows { display: flex; flex-direction: column; gap: 1.25rem; }
.calculator__row-head { display: flex; justify-content: space-between; font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: .4rem; }
.calculator__bars { display: flex; flex-direction: column; gap: 4px; }
.calculator__bar { height: 10px; background: #eef0ea; }
.calculator__bar-fill { height: 100%; display: block; }
.calculator__bar-fill--from { background: var(--navy); }
.calculator__bar-fill--nd { background: var(--green); }

@media screen and (max-width: 991px) {
  .calculator__head { gap: 2rem; }
  .calculator__title { font-size: 2rem; }
  .calculator__copy { font-size: 1.2rem; }
  .calculator__form { gap: 1.25rem; }
  .calculator__label { font-size: .85rem; }
  .calculator__input { font-size: 1rem; }
  .calculator__result { padding: 2rem 1.75rem; }
  .calculator__result-label { font-size: .75rem; }
  .calculator__result-value { font-size: 2rem; }
  .calculator__inner{
    padding:3rem 2rem;
  }
}
@media screen and (max-width: 767px) {
  .calculator__inner{
    padding:3rem 1.5rem;
  }
}