:root {
            --brand-green: #85B746;
            --text-main: #1f2937;
            --text-soft: #4b5563;
            --surface: #ffffff;
            --divider: #F6F8FB;
            --border-soft: #e5e7eb;
            --section-side-pad: clamp(18px, 6vw, 72px);
            --content-max-width: 1200px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Manrope', sans-serif; color: var(--text-main); background: #ffffff; }
        .page-shell { min-height: 100vh; }
        h1, h2, h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; }

        .navbar-wrap { background: var(--surface); border-bottom: 1px solid rgba(229, 231, 235, 0.7); padding: 14px var(--section-side-pad); }
        .navbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
        .nav-links { display: flex; align-items: center; gap: 24px; list-style: none; }
        .nav-links a { text-decoration: none; color: var(--text-main); font-size: 16px; font-weight: 600; }
        .brand img { width: 180px; display: block; }
        .nav-actions { display: flex; justify-content: flex-end; }
        .quote-btn { text-decoration: none; padding: 12px 18px; border-radius: 12px; background: var(--brand-green); color: #fff; font-size: 15px; font-weight: 700; }

        .hero { padding: 80px var(--section-side-pad) 70px; background: var(--divider); text-align: center; }
        .hero h1 { font-size: clamp(42px, 5.2vw, 62px); line-height: 1.06; margin-bottom: 12px; }
        .hero p { max-width: 760px; margin: 0 auto; color: var(--text-soft); font-size: 18px; line-height: 1.55; }

        .calculator-section { padding: 90px var(--section-side-pad); background: #fff; }
        .calculator-wrap { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; }
        .panel { background: #fff; border: 1px solid #e8edf3; border-radius: 16px; padding: 26px; }
        .panel h2 { font-size: clamp(32px, 3.5vw, 44px); line-height: 1.1; margin-bottom: 14px; color: #0f172a; }
        .panel-copy { color: var(--text-soft); font-size: 16px; line-height: 1.55; margin-bottom: 20px; }

        .form-grid { display: grid; gap: 14px; }
        .field label { display: inline-block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: #374151; }
        .field select, .field input { width: 100%; border: 1px solid #d9dee7; border-radius: 12px; background: #fff; color: #111827; font-size: 15px; padding: 12px 12px; outline: none; }
        .field textarea { width: 100%; border: 1px solid #d9dee7; border-radius: 12px; background: #fff; color: #111827; font-size: 15px; padding: 12px 12px; outline: none; resize: vertical; min-height: 96px; }
        .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        [data-commercial-area-field][hidden] { display: none; }
        .form-section-divider { margin-top: 8px; padding-top: 18px; border-top: 1px solid #e8edf3; }
        .form-section-title { font-size: 18px; font-weight: 700; color: #111827; margin-bottom: 4px; }
        .form-section-copy { font-size: 14px; color: #6b7280; line-height: 1.45; margin-bottom: 4px; }
        .helper { font-size: 13px; color: #6b7280; margin-top: 6px; }
        .calc-btn { border: 0; border-radius: 12px; background: var(--brand-green); color: #fff; font-size: 16px; font-weight: 700; padding: 13px 18px; cursor: pointer; margin-top: 6px; }
        .calc-btn:disabled { opacity: 0.7; cursor: not-allowed; }

        .summary-card { background: var(--divider); border: 1px solid #e4eaf3; border-radius: 14px; padding: 18px; margin-bottom: 14px; }
        .summary-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px dashed #d8e0eb; }
        .summary-row:last-child { border-bottom: 0; }
        .summary-label { color: #4b5563; font-size: 14px; font-weight: 600; }
        .summary-row-gst { border-bottom: 0; padding-bottom: 0; }
        .summary-value { color: #111827; font-size: 15px; font-weight: 700; text-align: right; }
        .summary-row [data-summary-subtotal] { font-size: 14px; max-width: 62%; line-height: 1.4; }
        .estimate { border: 1px solid #d8eab8; background: #eef6e4; border-radius: 14px; padding: 16px; }
        .estimate-unavailable { border-color: #e8edf3; background: #f8fafc; }
        .estimate-unavailable .estimate-label { color: #6b7280; }
        .estimate-unavailable .estimate-value { color: #6b7280; font-size: 28px; }
        .estimate-label { font-size: 14px; color: #6fa038; font-weight: 700; margin-bottom: 6px; }
        .estimate-value { font-family: 'Cormorant Garamond', serif; color: #527a24; font-size: 42px; line-height: 1; margin-bottom: 8px; }
        .estimate-note { font-size: 13px; color: #4b5563; line-height: 1.45; }

        .info-list { list-style: none; display: grid; gap: 10px; margin-top: 16px; }
        .info-list li { background: #fff; border: 1px solid #e8edf3; border-radius: 12px; padding: 12px 13px; color: #374151; font-size: 14px; line-height: 1.45; }
        .info-list strong { color: #111827; }

        @media (max-width: 960px) {
            .navbar { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
            .nav-actions { justify-content: center; }
            .calculator-wrap { grid-template-columns: 1fr; }
            .calculator-section { padding: 70px var(--section-side-pad); }
        }

        @media (max-width: 620px) {
            .hero { padding: 56px var(--section-side-pad); }
            .hero p { font-size: 16px; }
            .calculator-section { padding: 52px var(--section-side-pad); }
            .panel { padding: 20px; }
            .field-row { grid-template-columns: 1fr; }
            .estimate-value { font-size: 36px; }
        }

        @media (min-width: 1280px) {
            .navbar,
            .calculator-wrap {
                max-width: var(--content-max-width);
                margin-left: auto;
                margin-right: auto;
                width: 100%;
            }

            .hero h1,
            .hero p {
                max-width: var(--content-max-width);
                margin-left: auto;
                margin-right: auto;
            }
        }