; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-weight: 600; } .cost-input { width: 100%; padding: 1rem 1rem 1rem 2rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; color: white; font-size: 1rem; } .cost-input:focus { outline: none; border-color: var(--accent-cyan); } .cost-slider { width: 100%; -webkit-appearance: none; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); outline: none; margin-top: 0.5rem; } .cost-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--money-gold); cursor: pointer; } .contract-input { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05)); border-color: rgba(16, 185, 129, 0.3); } .contract-input:focus { border-color: var(--profit-green); } /* Profit Display */ .profit-display { background: rgba(26, 10, 46, 0.6); border: 1px solid rgba(233, 30, 140, 0.3); border-radius: 24px; padding: 2rem; } /* Profit Meter */ .profit-meter { position: relative; width: 100%; height: 250px; margin-bottom: 2rem; } .meter-dial { position: relative; width: 250px; height: 130px; margin: 0 auto; overflow: hidden; } .meter-bg { position: absolute; width: 250px; height: 250px; border-radius: 50%; background: conic-gradient( from 180deg, var(--loss-red) 0deg 45deg, #f59e0b 45deg 90deg, var(--profit-green) 90deg 180deg, transparent 180deg ); opacity: 0.3; } .meter-needle { position: absolute; bottom: 5px; left: 50%; width: 6px; height: 100px; background: linear-gradient(to top, var(--accent-magenta), var(--accent-cyan)); transform-origin: bottom center; transform: translateX(-50%) rotate(-90deg); transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); border-radius: 3px; } .meter-center { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; background: var(--primary-dark); border: 4px solid var(--money-gold); border-radius: 50%; } .meter-labels { display: flex; justify-content: space-between; padding: 0 20px; margin-top: 10px; } .meter-label { font-size: 0.75rem; font-weight: 600; } .meter-label.loss { color: var(--loss-red); } .meter-label.break { color: #f59e0b; } .meter-label.profit { color: var(--profit-green); } /* Profit Summary */ .profit-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 0.89rem; margin-bottom: 2rem; } .summary-card { background: rgba(255, 255, 255, 0.03); border-radius: 15px; padding: 1.5rem; text-align: center; } .summary-value { font-size: 1.75rem; font-weight: 800; margin-bottom: 0.25rem; } .summary-value.profit { color: var(--profit-green); } .summary-value.loss { color: var(--loss-red); } .summary-value.neutral { color: var(--money-gold); } .summary-label { font-size: 0.75rem; color: var(--text-secondary); } /* Money Flow */ .money-flow { background: rgba(255, 255, 255, 0.03); border-radius: 13px; padding: 1.5rem; } .flow-title { font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; text-align: center; } .flow-bar { height: 40px; background: rgba(255, 255, 255, 0.05); border-radius: 8px; overflow: hidden; display: flex; } .flow-segment { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; transition: width 0.5s ease; overflow: hidden; white-space: nowrap; } .flow-materials { background: #8B4513; } .flow-labor { background: #1e40af; } .flow-overhead { background: #7c3aed; } .flow-profit { background: var(--profit-green); } .flow-loss { background: var(--loss-red); } .flow-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.88rem; margin-top: 1rem; } .legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; } .legend-dot { width: 12px; height: 12px; border-radius: 3px; } /* Cost Breakdown Section */ .breakdown-section { padding: 5rem 2rem; position: relative; z-index: 1; } .section-container { max-width: 1000px; margin: 0 auto; } .section-intro { text-align: center; margin-bottom: 3rem; } .section-intro h2 { font-size: 2.75rem; font-weight: 800; margin-bottom: 1rem; } .section-intro p { color: var(--text-secondary); font-size: 1.1rem; } .breakdown-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.48rem; } .breakdown-card { background: rgba(26, 10, 46, 0.6); border: 1px solid rgba(233, 30, 140, 0.2); border-radius: 23px; padding: 2rem; text-align: center; transition: all 0.55s cubic-bezier(0.4, 0, 0.2, 1); } .breakdown-card:hover { transform: scale(1.03); border-color: var(--accent-cyan); } .breakdown-icon { width: 60px; height: 60px; background: linear-gradient(135deg, rgba(233, 30, 140, 0.2), rgba(0, 212, 255, 0.2)); border-radius: 14px; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; } .breakdown-icon svg { width: 28px; height: 28px; stroke: var(--accent-cyan); } .breakdown-percent { font-size: 2.5rem; font-weight: 900; background: linear-gradient(135deg, var(--accent-magenta), var(--accent-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; } .breakdown-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; } .breakdown-desc { font-size: 0.85rem; color: var(--text-secondary); } /* FAQ Section */ .reference-section { padding: 3rem 2rem; background: linear-gradient(180deg, transparent, rgba(26, 10, 46, 0.5)); position: relative; z-index: 1; } .faq-container { max-width: 800px; margin: 0 auto; } .guide-item { background: rgba(26, 10, 46, 0.6); border: 1px solid rgba(233, 30, 140, 0.2); border-radius: 17px; margin-bottom: 1rem; overflow: hidden; } .reveal-trigger { padding: 1.5rem 2rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 1.1rem; } .reveal-trigger svg { width: 24px; height: 24px; stroke: var(--accent-magenta); transition: transform 0.3s ease; flex-shrink: 0; } .guide-item.active .reveal-trigger svg { transform: rotate(180deg); } .info-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .guide-item.active .info-body { max-height: 300px; } .faq-answer-content { padding: 0 2rem 1.5rem; color: var(--text-secondary); line-height: 1.7; } /* CTA Section */ .finale-section { padding: 5rem 2rem; text-align: center; position: relative; z-index: 1; } .finale-section h2 { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; } .finale-section p { color: var(--text-secondary); font-size: 1.1rem; max-width: 500px; margin: 0 auto 2rem; } .btn { display: inline-flex; align-items: center; gap: 0.75rem; padding: 1.25rem 2.5rem; border-radius: 13px; font-weight: 700; font-size: 1.1rem; text-decoration: none; transition: all 0.4s ease; } .btn-action { background: linear-gradient(135deg, var(--accent-magenta), #c4177a); color: white; box-shadow: 0 4px 25px rgba(233, 30, 140, 0.4); } .btn-action:hover { transform: scale(1.03); box-shadow: 0 8px 35px rgba(233, 30, 140, 0.5); } .btn-other { background: rgba(0, 212, 255, 0.1); color: var(--accent-cyan); border: 1px solid var(--accent-cyan); margin-left: 1rem; } /* Footer */ footer { padding: 3rem 2rem; text-align: center; border-top: 1px solid rgba(233, 30, 140, 0.2); position: relative; z-index: 1; } .footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.50rem; margin-bottom: 1.5rem; } .footer-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; } .footer-links a:hover { color: var(--accent-cyan); } .footer-text { color: rgba(255, 255, 255, 0.4); font-size: 0.875rem; } .footer-text a { color: var(--accent-magenta); text-decoration: none; } /* Responsive */ @media (max-width: 1024px) { .calculator-layout { grid-template-columns: 1fr; } .hover-card { display: none; } } @media (max-width: 768px) { .nav-links { display: none; } .breakdown-cards { grid-template-columns: 1fr; } .profit-summary { grid-template-columns: 1fr; } .btn-other { margin-left: 0; margin-top: 1rem; } }

Job Costing Calculator

Know Your Numbers

Input your costs and contract price. Watch the profit meter move and see exactly where every dollar goes. In HVHZ, knowing your margins can make or break your business.

Enter Your Costs

Contract Price $50,000

Materials Cost $20,000

Labor Cost $15,000

Overhead (permits, insurance, etc.) $5,000

PE Seal & Engineering $500

Profit Analysis

LOSS BREAK EVEN PROFIT

$9,500

Net Profit

19%

Profit Margin

$40,500

Total Costs

$75

Effective Hourly

Where Your Dollar Goes

Materials

Labor

Overhead

Profit

Materials

Labor

Overhead

Profit

Typical Cost Breakdown

Where money typically goes on HVHZ construction projects

35-45%

Materials

Sheathing, fasteners, straps, and all HVHZ-approved products. Usually your biggest expense.

25-35%

Labor

Your crew's time including burdened labor rate. HVHZ takes longer due to extra fasteners and inspections.

10-15%

Overhead

Permits, insurance, equipment, vehicle costs, office expenses. Often underestimated.

Frequently Asked Questions

Common questions about job costing in HVHZ

What profit margin should contractors target in HVHZ?

Most successful contractors target 15-25% net profit margin. HVHZ work often commands higher margins due to specialized requirements and expertise. Factor in overhead (typically 10-20% of direct costs) before calculating profit. Remember: revenue is vanity, profit is sanity.

How do I estimate labor costs for hurricane construction?

Calculate total labor hours, multiply by your burdened labor rate (wages + benefits + taxes). HVHZ work requires more time for proper fastener installation and inspections. Add 15-20% buffer for inspection delays and rework. Track actual hours on jobs to improve future estimates.

What costs are often overlooked in job estimates?

Common missed costs include: permit fees, PE seal costs, material delivery, equipment rental, waste disposal, insurance per-job costs, inspection delays, punch list time, and warranty callbacks. These can add 10-15% to your base estimate. Build a checklist and use it every time.

Should I include PE seal costs in my bids?

Yes, always include PE seal and engineering costs in your estimates. In HVHZ, this is a required cost you can't avoid. It's typically $200-$1000 depending on project complexity. Including it protects your margin and sets proper expectations with clients. We can help with fast turnaround PE seals.

Get Accurate Wind Load Reports

Fast PE-sealed calculations so you can bid with confidence. Know your engineering costs upfront.

Get PE-Sealed Report Crew Safety