/* ============================================================
   Peak Concrete — Calculator UI
   Shared across all calculator pages. Loads after peak-concrete.css.
============================================================ */

.calc-wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
@media (max-width:900px){.calc-wrap{grid-template-columns:1fr}}

.calc-form{background:#fff;border:1px solid #EAEAEA;padding:40px}
.calc-form h2{color:var(--navy-darker);font-size:28px;margin-bottom:8px}
.calc-form p.sub{color:#666;margin-bottom:28px;font-size:14px}

.calc-row{display:flex;align-items:center;gap:16px;margin-bottom:16px;padding:14px 0;border-bottom:1px solid #F0F0F0}
.calc-row:last-of-type{border-bottom:none}
.calc-row label{flex:1;font-family:'Oswald';font-size:14px;letter-spacing:1px;color:var(--navy-darker);text-transform:uppercase;font-weight:500}
.calc-row .input-grp{display:flex;align-items:center;gap:8px}
.calc-row input[type=number]{width:90px;padding:12px 14px;background:#FAFAFA;border:1px solid #DDD;color:var(--navy-darker);font-family:inherit;font-size:18px;font-weight:600;text-align:right;border-radius:3px}
.calc-row input[type=number]:focus{outline:none;border-color:var(--copper);background:#fff}
.calc-row .unit{font-family:'Oswald';font-size:13px;letter-spacing:1px;color:#888;text-transform:uppercase;width:30px}
.calc-row select{padding:12px 14px;background:#FAFAFA;border:1px solid #DDD;color:var(--navy-darker);font-family:inherit;font-size:15px;border-radius:3px;cursor:pointer}

.calc-result{background:var(--navy-darker);color:#fff;padding:40px;position:sticky;top:120px}
.calc-result h2{color:#fff;font-size:22px;letter-spacing:2px;margin-bottom:8px}
.calc-result .pre{font-family:'Oswald';color:var(--copper);font-size:13px;letter-spacing:3px;text-transform:uppercase;margin-bottom:18px}

.metric{padding:18px 0;border-bottom:1px solid var(--line)}
.metric:last-of-type{border-bottom:none;padding-bottom:0}
.metric .lbl{font-family:'Oswald';font-size:12px;letter-spacing:2px;color:#9AA3AD;text-transform:uppercase;margin-bottom:6px}
.metric .val{font-family:'Oswald';font-weight:700;color:var(--copper);font-size:42px;line-height:1}
.metric .val.small{font-size:28px}
.metric .sub{color:#cbd0d6;font-size:13px;margin-top:4px;font-weight:300}

.cost-band{background:rgba(122,134,148,.15);border:1px solid var(--copper);padding:24px;margin-top:24px}
.cost-band .lbl{font-family:'Oswald';color:var(--copper);font-size:12px;letter-spacing:2px;margin-bottom:8px;text-transform:uppercase}
.cost-band .range{font-family:'Oswald';color:#fff;font-size:36px;font-weight:700;line-height:1}
.cost-band .note{color:#cbd0d6;font-size:13px;font-weight:300;margin-top:8px;line-height:1.5}

.calc-result .actions{margin-top:30px;display:flex;flex-direction:column;gap:10px}
.calc-result .actions .btn{text-align:center;justify-content:center}

.tip-box{background:rgba(255,255,255,.04);border-left:3px solid var(--copper);padding:18px 22px;margin-top:24px}
.tip-box .lbl{font-family:'Oswald';font-size:11px;letter-spacing:2px;color:var(--copper);text-transform:uppercase;margin-bottom:6px}
.tip-box p{color:var(--text-mute);font-size:13px;font-weight:300;margin:0}

/* Hub-page calculator tile grid */
.calc-tile{background:rgba(255,255,255,.03);border:1px solid var(--line);padding:36px;text-decoration:none;color:inherit;display:block;transition:.25s;position:relative}
.calc-tile:hover{border-color:var(--copper);background:rgba(122,134,148,.06)}
.calc-tile .num{font-family:'Oswald';color:var(--copper);font-size:13px;letter-spacing:3px;margin-bottom:14px;text-transform:uppercase}
.calc-tile h3{color:#fff;font-size:24px;margin-bottom:10px}
.calc-tile p{color:var(--text-mute);font-size:14px;font-weight:300;margin-bottom:18px}
.calc-tile .arrow{color:var(--copper);font-family:'Oswald';font-size:13px;letter-spacing:2px;text-transform:uppercase}
.calc-tile:hover .arrow{color:var(--copper-light)}