/* =====================================================================
   COST ESTIMATE — SHEET E-01
   Designed as the last drawing in the set rather than a calculator
   bolted to the bottom of a page: a title block of your inputs, a
   priced take-off, and a month-by-month cash flow. Dark sheet.
   ===================================================================== */
.est{
  /* mirrors assets/ug.css — see the palette note there */
  --e-bg:#12151a;
  --e-fg:#f3f1ea;
  --e-dim:rgba(226,229,235,.58);
  --e-faint:rgba(160,180,196,.5);
  --e-line:rgba(160,180,196,.22);
  --e-soft:rgba(160,180,196,.10);
  --e-ochre:#c6763a;
  --e-slate:#6c8496;
  --e-pad:4.5vw;
  background:var(--e-bg);color:var(--e-fg);
  border-top:1px solid var(--e-line);
  padding:6.5rem var(--e-pad) 5rem;
  font-family:'Archivo',system-ui,sans-serif;
}
.est *{box-sizing:border-box}
.est .m{font-family:'DM Mono','Archivo',ui-monospace,monospace;font-weight:400;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
.est .m.lc{text-transform:none;letter-spacing:.03em}
.est .g{font-family:'Archivo',sans-serif;font-weight:800;font-stretch:118%;
  letter-spacing:-.035em;text-transform:uppercase;line-height:.9}
/* the editorial voice, same as every other heading in the reading half */
.est .ed{font-family:'Fraunces',Georgia,serif;font-weight:500;font-style:normal;
  letter-spacing:-.022em;line-height:1.02;text-transform:none;text-wrap:balance}
.est .ed em{font-style:italic;font-weight:400;color:var(--e-ochre)}
.est .m.lc{font-size:.72rem}
.est .dv{font-family:'Noto Serif Devanagari',serif;font-weight:600}
.est .n{font-variant-numeric:tabular-nums}

/* ---------- sheet header ---------- */
.est .ehead{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;
  flex-wrap:wrap;padding-bottom:1.4rem;border-bottom:1px solid var(--e-line);margin-bottom:2.6rem}
.est .ehead .k{color:var(--e-ochre);display:block;margin-bottom:.9rem}
.est .ehead h2{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.022em;
  line-height:1.02;text-wrap:balance;font-size:clamp(2rem,5.2vw,3.8rem)}
.est .ehead h2 em{font-style:italic;font-weight:400;color:var(--e-ochre)}
.est .ehead .sheetno{color:var(--e-faint);text-align:right;line-height:2}

/* ---------- two columns ---------- */
.est .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:3.4rem;
  align-items:start}
@media(max-width:1040px){.est .cols{grid-template-columns:1fr;gap:2.4rem}}

/* ---------- numbered input steps ---------- */
.est .step{border-top:1px solid var(--e-line);padding:1.5rem 0 1.7rem;
  display:grid;grid-template-columns:2.6rem 1fr;gap:1.2rem;align-items:start}
.est .step:first-child{border-top:0;padding-top:0}
.est .step .no{color:var(--e-ochre);padding-top:.15rem}
.est .step .lab{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  color:var(--e-dim);margin-bottom:.9rem;flex-wrap:wrap}
.est .step .lab b{color:var(--e-fg);font-weight:500;letter-spacing:.04em;
  font-variant-numeric:tabular-nums}

.est .chips{display:flex;gap:.45rem;flex-wrap:wrap}
.est .chip{border:1px solid var(--e-line);padding:.6rem 1rem;cursor:pointer;user-select:none;
  background:none;color:inherit;font-family:'DM Mono','Archivo',monospace;font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;line-height:1;
  transition:background .3s,color .3s,border-color .3s}
.est .chip:hover{border-color:rgba(243,241,234,.5)}
.est .chip.on{background:var(--e-ochre);border-color:var(--e-ochre);color:var(--e-bg)}

.est .two{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.3rem}
.est .rng{-webkit-appearance:none;appearance:none;width:100%;height:1px;padding:0;margin:.55rem 0;border:0;
  background:rgba(243,241,234,.28);outline:none;cursor:ew-resize}
.est .rng::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--e-ochre);cursor:ew-resize;border:0}
.est .rng::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--e-ochre);border:0}

.est .pkgs{display:grid;gap:.5rem}
.est .pk{border:1px solid var(--e-line);padding:.95rem 1.1rem;display:flex;
  justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;
  transition:border-color .35s,background .35s}
.est .pk:hover{border-color:rgba(243,241,234,.45)}
.est .pk.on{border-color:var(--e-ochre);background:rgba(198,118,58,.1)}
.est .pk .t{font-weight:600;letter-spacing:-.01em;font-size:.98rem}
.est .pk .d{color:var(--e-dim);font-size:.84rem;font-weight:300;line-height:1.5;
  margin-top:.3rem;max-width:40ch}
.est .pk .rt{color:var(--e-ochre);white-space:nowrap}

/* ---------- the number ---------- */
.est .out{border:1px solid var(--e-line);background:rgba(243,241,234,.03)}
.est .fig{padding:1.7rem 1.8rem 1.5rem;border-bottom:1px solid var(--e-line)}
.est .fig .k{color:var(--e-faint);display:block;margin-bottom:.85rem}
.est .big{font-weight:800;font-stretch:112%;letter-spacing:-.045em;
  font-size:clamp(2rem,5vw,3.5rem);line-height:.9;font-variant-numeric:tabular-nums}
.est .fig .pl{color:var(--e-dim);margin-top:.85rem;line-height:1.8}
.est .sub{display:grid;grid-template-columns:repeat(3,1fr)}
.est .sub div{padding:1.1rem 1.8rem;border-right:1px solid var(--e-line)}
.est .sub div:last-child{border-right:0}
.est .sub b{display:block;font-size:1.2rem;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.est .sub span{display:block;color:var(--e-faint);margin-top:.35rem}
@media(max-width:520px){
  .est .sub{grid-template-columns:1fr}
  .est .sub div{border-right:0;border-bottom:1px solid var(--e-line)}
}

/* ---------- the massing, framed like a drawing ---------- */
.est .frame{position:relative;border-top:1px solid var(--e-line);
  background:
    linear-gradient(rgba(243,241,234,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(243,241,234,.03) 1px,transparent 1px);
  background-size:24px 24px}
.est #estcv{width:100%;aspect-ratio:16/10;display:block}
.est .frame .tag{position:absolute;left:1.1rem;bottom:.9rem;color:var(--e-faint)}
.est .frame .tag2{position:absolute;right:1.1rem;bottom:.9rem;color:var(--e-faint)}

/* ---------- where the money goes ---------- */
.est .money{margin-top:2.4rem}
.est .money .hd{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  color:var(--e-dim);padding-bottom:.9rem;border-bottom:1px solid var(--e-line)}
.est .stack{display:flex;height:12px;margin:1.2rem 0 1.4rem;gap:2px;overflow:hidden}
.est .stack i{display:block;cursor:default;transition:opacity .3s,transform .3s;transform-origin:bottom}
.est .stack i:hover{opacity:1!important;transform:scaleY(1.35)}
.est .trades{display:grid;grid-template-columns:1fr 1fr;gap:0 2.2rem}
@media(max-width:600px){.est .trades{grid-template-columns:1fr}}
.est .tr{display:grid;grid-template-columns:11px 1fr auto auto;gap:.7rem;align-items:baseline;
  padding:.52rem 0;border-bottom:1px solid var(--e-soft)}
.est .tr .sw{width:11px;height:11px;border-radius:2px;align-self:center}
.est .tr .nm{font-size:.88rem;font-weight:300;color:var(--e-fg)}
.est .tr .pc{color:var(--e-slate);font-variant-numeric:tabular-nums;min-width:2.6rem;
  text-align:right;letter-spacing:.01em;text-transform:none;font-size:.74rem}
.est .tr .am{font-variant-numeric:tabular-nums;min-width:5.6rem;text-align:right;
  color:var(--e-fg);letter-spacing:.01em;text-transform:none;font-size:.74rem}

/* ---------- cash flow ---------- */
.est .flow{margin-top:3rem;border-top:1px solid var(--e-line);padding-top:2rem}
.est .flow .hd{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  flex-wrap:wrap;margin-bottom:1.6rem}
.est .flow h3{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.02em;
  line-height:1.06;font-size:clamp(1.4rem,2.7vw,2rem)}
.est .flow .peak{color:var(--e-dim);max-width:46ch;line-height:1.8}
.est .flow .peak b{color:var(--e-ochre)}
.est .bars{display:flex;align-items:flex-end;gap:3px;height:150px;position:relative;
  border-bottom:1px solid var(--e-line);padding-bottom:1px}
.est .bars .b{flex:1;min-width:0;position:relative;background:rgba(108,132,150,.34);
  transition:background .3s;cursor:default}
.est .bars .b.hi{background:var(--e-ochre)}
.est .bars .b:hover{background:rgba(108,132,150,.6)}
.est .bars .b.hi:hover{background:var(--e-ochre)}
.est .bars .b .tip{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);
  background:var(--e-fg);color:var(--e-bg);padding:.3rem .5rem;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s;font-size:.6rem;letter-spacing:.08em;
  font-family:'DM Mono','Archivo',monospace;z-index:2}
.est .bars .b:hover .tip{opacity:1}
.est .bars .b:first-child .tip{left:0;transform:none}
.est .bars .b:last-child .tip{left:auto;right:0;transform:none}
/* nothing hovers on a phone, and the peak is already spelled out in the copy */
@media(hover:none){.est .bars .b .tip{display:none}}
.est .axis{display:flex;gap:3px;margin-top:.6rem;color:var(--e-faint)}
.est .axis span{flex:1;min-width:0;text-align:center;font-size:.58rem;letter-spacing:.02em;
  font-family:'DM Mono','Archivo',monospace}

/* ---------- phones: keep the number in view while the inputs change ---------- */
.est .stickybar{display:none}
@media(max-width:1040px){
  .est .stickybar{display:flex;position:sticky;bottom:0;z-index:20;
    align-items:center;justify-content:space-between;gap:1rem;
    margin:1.6rem calc(-1 * var(--e-pad)) 0;padding:.85rem var(--e-pad);
    background:rgba(20,18,15,.94);backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);border-top:1px solid var(--e-line)}
  .est .stickybar .k{display:block;color:var(--e-faint);margin-bottom:.3rem;font-size:.56rem}
  .est .stickybar .v{font-weight:800;font-stretch:112%;letter-spacing:-.03em;
    font-size:1.25rem;line-height:1;font-variant-numeric:tabular-nums}
  .est .stickybar .go{flex:0 0 auto;border:1px solid var(--e-ochre);color:var(--e-ochre);
    padding:.7rem .9rem;font-size:.6rem;letter-spacing:.1em}
}

/* ---------- payment schedule: a ladder of five stages ---------- */
.est .sched{margin-top:3rem;border-top:1px solid var(--e-line);padding-top:2rem}
.est .ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--e-line);
  border:1px solid var(--e-line)}
.est .ladder .cell{background:var(--e-bg);padding:1.1rem 1.2rem 1.2rem;position:relative}
.est .ladder .cell .top{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.85rem}
.est .ladder .cell .dv{color:var(--e-ochre);font-size:1.05rem;line-height:1}
.est .ladder .cell .pc{color:var(--e-slate);margin-left:auto}
.est .ladder .cell .nm{font-weight:500;letter-spacing:-.01em;font-size:.94rem;line-height:1.35;
  margin-bottom:.7rem;min-height:2.6em}
.est .ladder .cell .am{font-weight:600;font-size:1.05rem;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.est .ladbar{display:flex;height:5px;margin-top:2px;gap:1px}
.est .ladbar i{display:block;background:var(--e-ochre);opacity:.9}
@media(max-width:900px){
  .est .ladder{grid-template-columns:repeat(2,1fr)}
  .est .ladder .cell .nm{min-height:0}
}
@media(max-width:520px){.est .ladder{grid-template-columns:1fr}}

/* ---------- title block: your inputs, as sheet data ---------- */
.est .tb{margin-top:3rem;border:1px solid var(--e-line);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));background:var(--e-line);gap:1px}
.est .tb div{background:var(--e-bg);padding:1rem 1.2rem}
.est .tb .k{display:block;color:var(--e-slate);margin-bottom:.4rem}
.est .tb .v{font-weight:600;font-size:.92rem;letter-spacing:-.01em}

/* ---------- lead capture ---------- */
.est .lead{margin-top:2.6rem;border-top:1px solid var(--e-line);padding-top:2rem;
  display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:start}
.est .lead form{max-width:30rem}
@media(max-width:860px){.est .lead{grid-template-columns:1fr;gap:1.6rem}}
.est .lead h3{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.02em;
  line-height:1.06;font-size:clamp(1.4rem,2.7vw,2.1rem);margin-bottom:.9rem}
.est .lead .why{color:var(--e-dim);font-weight:300;line-height:1.75;font-size:.93rem;max-width:46ch}
.est .grp{display:flex;align-items:stretch;border:1px solid rgba(243,241,234,.26);
  transition:border-color .3s}
.est .grp:focus-within{border-color:var(--e-ochre)}
.est .pfx{display:flex;align-items:center;padding:0 .95rem;
  border-right:1px solid rgba(243,241,234,.2);color:var(--e-dim);white-space:nowrap}
.est .lead input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--e-fg);
  font-family:'Archivo',sans-serif;font-size:1rem;padding:.95rem 1rem;letter-spacing:.01em}
.est .lead input::placeholder{color:rgba(243,241,234,.32)}
.est .name{margin-top:.6rem;border:1px solid rgba(243,241,234,.26);transition:border-color .3s}
.est .name:focus-within{border-color:var(--e-ochre)}
.est .acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.est .btn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--e-line);padding:1rem 1.6rem;position:relative;overflow:hidden;
  background:none;color:inherit;transition:color .45s,border-color .45s;
  font-family:'DM Mono','Archivo',monospace;font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;line-height:1}
.est .btn span{position:relative;z-index:2}
.est .btn::before{content:'';position:absolute;inset:0;background:var(--e-ochre);
  transform:translateY(101%);transition:transform .55s cubic-bezier(.76,0,.24,1)}
.est .btn:hover{color:var(--e-bg);border-color:var(--e-ochre)}
.est .btn:hover::before{transform:none}
.est .btn.go{border-color:var(--e-ochre);color:var(--e-ochre)}
.est .msg{margin-top:.85rem;min-height:1.2rem;color:#e0714f}
.est .msg.ok{color:#6ac08b}
.est .done{border:1px solid rgba(198,118,58,.5);background:rgba(198,118,58,.09);padding:1.5rem}
.est .done h4{font-weight:700;font-stretch:110%;font-size:1.1rem;letter-spacing:-.02em;margin-bottom:.6rem}
.est .done p{color:var(--e-dim);font-weight:300;line-height:1.7;font-size:.92rem}
.est .done .sm{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--e-line);color:var(--e-faint)}
.est .note{color:var(--e-faint);font-size:.8rem;font-weight:300;line-height:1.7;
  margin-top:1.6rem;max-width:60ch}

@media(max-width:760px){
  .est{--e-pad:5vw;padding:3.8rem var(--e-pad) 3.2rem}
  .est .ehead{margin-bottom:1.8rem}
  .est .ehead .sheetno{display:none}
  .est .step{grid-template-columns:1.9rem 1fr;gap:.8rem;padding:1.2rem 0 1.3rem}
  .est .two{grid-template-columns:1fr;gap:1.1rem}
  .est .pk{flex-direction:column;align-items:flex-start;gap:.4rem}
  .est .pk .rt{align-self:flex-start}
  .est .fig{padding:1.2rem 1.2rem 1.1rem}
  .est .sub div{padding:.95rem 1.2rem}
  .est #estcv{aspect-ratio:4/3}
  .est .bars{height:110px}
  .est .acts{flex-direction:column;align-items:stretch}
  /* 16px keeps iOS from zooming the page when a field takes focus */
  .est .lead input{font-size:16px;padding:.9rem .85rem}
}
@media(pointer:coarse){
  .est .rng{height:2px}
  .est .rng::-webkit-slider-thumb{width:24px;height:24px}
  .est .rng::-moz-range-thumb{width:24px;height:24px}
  .est .chip{min-height:44px;display:inline-flex;align-items:center}
}