Architecture & Design Salary Calculator 2026<\/title>\n <style>\n #bespoke-salary-calc *, #bespoke-salary-calc *::before, #bespoke-salary-calc *::after {\n box-sizing: border-box; margin: 0; padding: 0;\n }\n \/* Outer wrapper - transparent so the page background shows through *\/\n #bespoke-salary-calc {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n color: #111;\n padding: 48px 0;\n overflow-x: hidden;\n }\n \/* The rounded card that contains everything *\/\n #bespoke-salary-calc .calc-card {\n max-width: 1216px;\n margin: 0 auto;\n background: #fff;\n border-radius: 24px;\n box-shadow: 0 4px 40px rgba(0,0,0,0.08);\n overflow: hidden;\n border: 1px solid #e8e8e4;\n }\n @media (max-width: 560px) {\n #bespoke-salary-calc .calc-card { border-radius: 16px; }\n }\n \/* \u2500\u2500 SPLIT LAYOUT inside the card \u2500\u2500 *\/\n #bespoke-salary-calc .split-wrap {\n display: grid;\n grid-template-columns: 1fr 1fr;\n align-items: stretch;\n }\n \/* Grid children must have min-width:0 or content can force layout wider than viewport *\/\n #bespoke-salary-calc .hero-col,\n #bespoke-salary-calc .form-col { min-width: 0; }\n @media (max-width: 820px) {\n #bespoke-salary-calc .split-wrap { grid-template-columns: 1fr; }\n #bespoke-salary-calc { padding-left: 16px; padding-right: 16px; }\n }\n \/* \u2500\u2500 HERO COLUMN \u2500\u2500 *\/\n #bespoke-salary-calc .hero-col {\n padding: 52px 44px;\n display: flex;\n flex-direction: column;\n gap: 28px;\n background: #f7f7f5;\n border-right: 1px solid #e8e8e4;\n overflow: hidden;\n }\n @media (max-width: 820px) {\n #bespoke-salary-calc .hero-col {\n padding: 28px 24px;\n border-right: none;\n border-bottom: 1px solid #e8e8e4;\n }\n \/* Hide most hero content on mobile - keep sub-line visible *\/\n #bespoke-salary-calc .hero-body,\n #bespoke-salary-calc .discipline-pills,\n #bespoke-salary-calc .hero-stats { display: none !important; }\n }\n #bespoke-salary-calc .hero-col h1 {\n font-size: clamp(22px, 2.8vw, 40px);\n font-weight: 700;\n letter-spacing: -0.03em;\n color: #111;\n line-height: 1.2;\n }\n #bespoke-salary-calc .hero-col h1 span {\n color: #97d422;\n }\n #bespoke-salary-calc .hero-sub {\n font-size: 15px;\n font-weight: 600;\n color: #111;\n line-height: 1.4;\n }\n #bespoke-salary-calc .hero-body {\n font-size: 13px;\n color: #888;\n line-height: 1.7;\n }\n \/* \u2500\u2500 DISCIPLINE PILLS \u2500\u2500 *\/\n #bespoke-salary-calc .discipline-pills {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n #bespoke-salary-calc .discipline-pills-label {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: #bbb;\n }\n #bespoke-salary-calc .discipline-pill-list {\n display: flex;\n flex-wrap: wrap;\n gap: 7px;\n }\n #bespoke-salary-calc .discipline-pill {\n display: inline-block;\n padding: 5px 12px;\n border-radius: 100px;\n font-size: 12px;\n font-weight: 600;\n color: #2a4a00;\n background: #eef7d0;\n border: 1px solid #c8e87a;\n }\n \/* \u2500\u2500 STATS GRID \u2500\u2500 *\/\n #bespoke-salary-calc .hero-stats {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n }\n #bespoke-salary-calc .hero-stat {\n display: flex;\n flex-direction: column;\n gap: 3px;\n }\n #bespoke-salary-calc .hero-stat-num {\n font-size: 26px;\n font-weight: 800;\n color: #97d422;\n letter-spacing: -0.03em;\n line-height: 1;\n }\n #bespoke-salary-calc .hero-stat span:last-child {\n font-size: 11px;\n color: #999;\n line-height: 1.4;\n }\n \/* \u2500\u2500 FORM COLUMN \u2500\u2500 *\/\n #bespoke-salary-calc .form-col {\n padding: 56px 44px;\n background: #fff;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n @media (max-width: 820px) {\n #bespoke-salary-calc .form-col { padding: 24px 24px 36px; }\n }\n #bespoke-salary-calc .card-title {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: #ccc;\n margin-bottom: 22px;\n }\n #bespoke-salary-calc .form-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n }\n @media (max-width: 560px) {\n #bespoke-salary-calc .form-grid { grid-template-columns: 1fr; }\n }\n #bespoke-salary-calc .field { display: flex; flex-direction: column; gap: 7px; }\n #bespoke-salary-calc .field.full { grid-column: 1 \/ -1; }\n #bespoke-salary-calc label {\n font-size: 11px;\n font-weight: 700;\n color: #aaa;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n }\n #bespoke-salary-calc .field-optional {\n font-size: 10px;\n font-weight: 400;\n color: #bbb;\n letter-spacing: 0.02em;\n text-transform: none;\n margin-left: 3px;\n }\n #bespoke-salary-calc select,\n #bespoke-salary-calc input[type=\"text\"],\n #bespoke-salary-calc input[type=\"number\"],\n #bespoke-salary-calc input[type=\"email\"],\n #bespoke-salary-calc input[type=\"tel\"] {\n background: #fafaf8;\n border: 1.5px solid #e8e8e4;\n border-radius: 10px;\n color: #111;\n font-size: 14px;\n padding: 13px 14px;\n width: 100%;\n outline: none;\n transition: border-color 0.2s, box-shadow 0.2s;\n appearance: none;\n -webkit-appearance: none;\n font-family: inherit;\n }\n #bespoke-salary-calc select:focus,\n #bespoke-salary-calc input:focus {\n border-color: #97d422;\n box-shadow: 0 0 0 3px #97d42218;\n background: #fff;\n }\n #bespoke-salary-calc select {\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23bbb' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 14px center;\n background-color: #fafaf8;\n padding-right: 40px;\n cursor: pointer;\n }\n #bespoke-salary-calc .search-wrap { position: relative; }\n #bespoke-salary-calc .search-clear {\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n background: none;\n border: none;\n color: #ccc;\n cursor: pointer;\n font-size: 18px;\n line-height: 1;\n padding: 0;\n display: none;\n }\n #bespoke-salary-calc .search-clear.visible { display: block; }\n #bespoke-salary-calc .dropdown-list {\n position: absolute;\n top: calc(100% + 6px);\n left: 0; right: 0;\n background: #fff;\n border: 1.5px solid #e8e8e4;\n border-radius: 12px;\n max-height: 240px;\n overflow-y: auto;\n z-index: 100;\n display: none;\n box-shadow: 0 8px 24px rgba(0,0,0,0.08);\n }\n #bespoke-salary-calc .dropdown-list.open { display: block; }\n #bespoke-salary-calc .dropdown-item {\n padding: 10px 14px;\n font-size: 13px;\n cursor: pointer;\n color: #555;\n border-bottom: 1px solid #f4f4f2;\n transition: background 0.1s;\n }\n #bespoke-salary-calc .dropdown-item:last-child { border-bottom: none; }\n #bespoke-salary-calc .dropdown-item:hover,\n #bespoke-salary-calc .dropdown-item.selected { background: #f7f7f5; color: #111; }\n #bespoke-salary-calc .dropdown-item .cat { font-size: 11px; color: #ccc; margin-left: 6px; }\n #bespoke-salary-calc .salary-row { display: flex; align-items: center; gap: 10px; }\n #bespoke-salary-calc .currency-badge {\n background: #fafaf8;\n border: 1.5px solid #e8e8e4;\n border-radius: 10px;\n padding: 13px 12px;\n font-size: 13px;\n color: #aaa;\n white-space: nowrap;\n min-width: 52px;\n text-align: center;\n }\n #bespoke-salary-calc .btn-calculate {\n width: 100%;\n background: #97d422;\n color: #111;\n border: none;\n border-radius: 12px;\n font-size: 15px;\n font-weight: 700;\n padding: 16px;\n cursor: pointer;\n letter-spacing: 0.01em;\n transition: background 0.2s, transform 0.1s;\n margin-top: 10px;\n font-family: inherit;\n }\n #bespoke-salary-calc .btn-calculate:hover { background: #aee849; }\n #bespoke-salary-calc .btn-calculate:active { transform: scale(0.99); }\n @media (max-width: 820px) {\n #bespoke-salary-calc .btn-calculate {\n position: sticky;\n bottom: 12px;\n z-index: 5;\n box-shadow: 0 4px 20px rgba(0,0,0,0.13);\n }\n }\n \/* \u2500\u2500 RESULTS (inside same card, below the split) \u2500\u2500 *\/\n #bespoke-salary-calc .results-wrap {\n display: none;\n border-top: 1px solid #e8e8e4;\n padding: 40px 44px 48px;\n background: #fafaf8;\n }\n #bespoke-salary-calc .results-wrap.visible {\n display: block;\n }\n @media (max-width: 820px) {\n #bespoke-salary-calc .results-wrap { padding: 32px 24px 40px; }\n }\n #bespoke-salary-calc .result-card {\n display: none;\n margin-bottom: 24px;\n }\n #bespoke-salary-calc .result-card.visible { display: block; }\n #bespoke-salary-calc .result-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: 28px;\n gap: 16px;\n flex-wrap: wrap;\n }\n #bespoke-salary-calc .result-role {\n font-size: 20px;\n font-weight: 700;\n color: #111;\n letter-spacing: -0.02em;\n }\n #bespoke-salary-calc .result-location {\n font-size: 13px;\n color: #bbb;\n margin-top: 4px;\n }\n #bespoke-salary-calc .verdict-pill {\n padding: 7px 18px;\n border-radius: 100px;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n white-space: nowrap;\n flex-shrink: 0;\n }\n #bespoke-salary-calc .verdict-below { background: #fff0f0; color: #cc3333; border: 1px solid #ffd0d0; }\n #bespoke-salary-calc .verdict-low { background: #fffbea; color: #b07a00; border: 1px solid #ffe99a; }\n #bespoke-salary-calc .verdict-market { background: #f2fde0; color: #4a7a00; border: 1px solid #c8ed80; }\n #bespoke-salary-calc .verdict-above { background: #e8faf6; color: #007a60; border: 1px solid #a0e8d8; }\n #bespoke-salary-calc .verdict-top { background: #f3eeff; color: #5e3ab8; border: 1px solid #cdb8f0; }\n #bespoke-salary-calc .verdict-overview { background: #f0f4ff; color: #3355aa; border: 1px solid #b8c8f0; }\n \/* Unemployed toggle *\/\n \/* \u2500\u2500 MODE TOGGLE \u2500\u2500 *\/\n #bespoke-salary-calc .mode-toggle-wrap {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n #bespoke-salary-calc .mode-toggle-label {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: #999;\n }\n #bespoke-salary-calc .mode-toggle {\n display: flex;\n background: #f0f0ee;\n border-radius: 8px;\n padding: 3px;\n gap: 2px;\n }\n #bespoke-salary-calc .mode-btn {\n flex: 1;\n padding: 8px 10px;\n border: none;\n border-radius: 6px;\n background: transparent;\n font-size: 12px;\n font-weight: 500;\n color: #888;\n cursor: pointer;\n transition: background 0.18s, color 0.18s, box-shadow 0.18s;\n text-align: center;\n line-height: 1.3;\n white-space: nowrap;\n }\n #bespoke-salary-calc .mode-btn:hover { color: #333; }\n #bespoke-salary-calc .mode-btn.active {\n background: #fff;\n color: #111;\n font-weight: 600;\n box-shadow: 0 1px 4px rgba(0,0,0,0.1);\n }\n #bespoke-salary-calc #salaryFieldWrap {\n transition: opacity 0.25s, max-height 0.3s;\n max-height: 120px;\n overflow: hidden;\n }\n #bespoke-salary-calc #salaryFieldWrap.hidden {\n opacity: 0;\n max-height: 0;\n pointer-events: none;\n margin: 0;\n }\n #bespoke-salary-calc .range-section { margin-bottom: 28px; }\n #bespoke-salary-calc .range-label {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: #ccc;\n margin-bottom: 14px;\n }\n #bespoke-salary-calc .range-bar-wrap {\n position: relative;\n height: 6px;\n background: #eeeeeb;\n border-radius: 100px;\n margin-top: 38px;\n margin-bottom: 12px;\n }\n #bespoke-salary-calc .range-mine-label {\n position: absolute;\n bottom: calc(100% + 10px);\n left: 50%;\n transform: translateX(-50%);\n font-size: 11px;\n font-weight: 700;\n color: #111;\n white-space: nowrap;\n pointer-events: none;\n }\n #bespoke-salary-calc .range-fill {\n position: absolute;\n left: 0; top: 0; bottom: 0;\n background: linear-gradient(90deg, #d8f0a0, #97d422);\n border-radius: 100px;\n }\n #bespoke-salary-calc .range-marker {\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 20px;\n height: 20px;\n background: #fff;\n border-radius: 50%;\n box-shadow: 0 0 0 2.5px #97d422, 0 2px 8px rgba(0,0,0,0.12);\n }\n #bespoke-salary-calc .range-marker.v-red { box-shadow: 0 0 0 2.5px #e05050, 0 2px 8px rgba(0,0,0,0.12); }\n #bespoke-salary-calc .range-marker.v-amber { box-shadow: 0 0 0 2.5px #d99000, 0 2px 8px rgba(0,0,0,0.12); }\n #bespoke-salary-calc .range-ticks {\n position: relative;\n height: 36px;\n }\n #bespoke-salary-calc .range-tick { font-size: 11px; color: #bbb; }\n #bespoke-salary-calc .range-tick.mine { color: #111; font-weight: 700; }\n #bespoke-salary-calc .stats-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 10px;\n margin-bottom: 20px;\n }\n #bespoke-salary-calc .stat-box {\n background: #fff;\n border: 1.5px solid #e8e8e4;\n border-radius: 14px;\n padding: clamp(10px, 2.5vw, 18px) clamp(6px, 1.8vw, 16px);\n text-align: center;\n min-width: 0;\n }\n #bespoke-salary-calc .stat-box.mine {\n border-color: #97d422;\n background: #f6fde8;\n }\n \/* Red - below market *\/\n #bespoke-salary-calc .stat-box.mine.v-red { border-color: #e05050; background: #fff4f4; }\n #bespoke-salary-calc .stat-box.mine.v-red .stat-value { color: #c02020; }\n \/* Amber - low-mid *\/\n #bespoke-salary-calc .stat-box.mine.v-amber { border-color: #d99000; background: #fffbee; }\n #bespoke-salary-calc .stat-box.mine.v-amber .stat-value { color: #9a6400; }\n #bespoke-salary-calc .stat-label {\n font-size: clamp(8px, 1.8vw, 10px);\n font-weight: 700;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: #ccc;\n margin-bottom: 6px;\n }\n #bespoke-salary-calc .stat-value {\n font-size: clamp(13px, 3.8vw, 22px);\n font-weight: 300;\n color: #666;\n letter-spacing: -0.02em;\n }\n #bespoke-salary-calc .stat-box.mine .stat-value { color: #4a7a00; font-weight: 700; }\n \/* v-red \/ v-amber overrides are above; green (default mine) needs no extra rule *\/\n #bespoke-salary-calc .insight-box {\n background: #fff;\n border: 1.5px solid #e8e8e4;\n border-left: 3px solid #97d422;\n border-radius: 14px;\n padding: 20px 22px;\n }\n #bespoke-salary-calc .insight-title {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: #97d422;\n margin-bottom: 10px;\n }\n #bespoke-salary-calc .insight-text {\n font-size: 14px;\n color: #777;\n line-height: 1.7;\n }\n #bespoke-salary-calc .insight-text strong { color: #111; font-weight: 600; }\n #bespoke-salary-calc .error-msg {\n background: #fff0f0;\n border: 1px solid #ffd0d0;\n border-radius: 8px;\n padding: 12px 16px;\n font-size: 13px;\n color: #cc3333;\n margin-top: 14px;\n display: none;\n }\n #bespoke-salary-calc .error-msg.visible { display: block; }\n #bespoke-salary-calc .cta-strip {\n display: none;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n margin: 32px 0 24px;\n text-align: center;\n }\n #bespoke-salary-calc .cta-strip.visible { display: flex; }\n #bespoke-salary-calc .cta-strip-label {\n font-size: 15px;\n font-weight: 600;\n color: #111;\n margin-bottom: 4px;\n }\n #bespoke-salary-calc .cta-buttons {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n justify-content: center;\n }\n #bespoke-salary-calc .cta-btn {\n display: inline-block;\n padding: 13px 24px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n text-decoration: none;\n transition: opacity 0.2s, transform 0.15s;\n white-space: nowrap;\n }\n #bespoke-salary-calc .cta-btn:hover { opacity: 0.88; transform: translateY(-1px); }\n #bespoke-salary-calc .cta-btn-primary {\n background: #97d422;\n color: #1a2606;\n }\n #bespoke-salary-calc .cta-btn-secondary {\n background: #fff;\n color: #111;\n border: 1.5px solid #d8d8d4;\n }\n \/* \u2500\u2500 LEAD CAPTURE FORM (explore mode) \u2500\u2500 *\/\n #bespoke-salary-calc .lead-form-wrap {\n display: none;\n margin: 32px 0 24px;\n background: #fff;\n border: 1.5px solid #e8e8e4;\n border-radius: 18px;\n padding: 32px 36px;\n }\n #bespoke-salary-calc .lead-form-wrap.visible { display: block; }\n #bespoke-salary-calc .lead-form-title {\n font-size: 17px;\n font-weight: 700;\n color: #111;\n letter-spacing: -0.02em;\n margin-bottom: 6px;\n }\n #bespoke-salary-calc .lead-form-sub {\n font-size: 13px;\n color: #999;\n margin-bottom: 22px;\n }\n #bespoke-salary-calc .lead-form-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin-bottom: 14px;\n }\n @media (max-width: 560px) {\n #bespoke-salary-calc .lead-form-grid { grid-template-columns: 1fr; }\n #bespoke-salary-calc .lead-form-wrap { padding: 24px 20px; }\n }\n #bespoke-salary-calc .lead-submit-btn {\n width: 100%;\n background: #97d422;\n color: #111;\n border: none;\n border-radius: 12px;\n font-size: 15px;\n font-weight: 700;\n padding: 15px;\n cursor: pointer;\n transition: background 0.2s;\n font-family: inherit;\n margin-top: 4px;\n }\n #bespoke-salary-calc .lead-submit-btn:hover { background: #aee849; }\n #bespoke-salary-calc .lead-success {\n display: none;\n text-align: center;\n padding: 24px 0 8px;\n }\n #bespoke-salary-calc .lead-success.visible { display: block; }\n #bespoke-salary-calc .lead-success-icon {\n margin-bottom: 14px;\n display: flex;\n justify-content: center;\n }\n #bespoke-salary-calc .lead-success-icon svg {\n display: block;\n }\n #bespoke-salary-calc .lead-success-title {\n font-size: 17px;\n font-weight: 700;\n color: #111;\n margin-bottom: 6px;\n }\n #bespoke-salary-calc .lead-success-body {\n font-size: 14px;\n color: #999;\n }\n #bespoke-salary-calc .lead-error {\n font-size: 12px;\n color: #cc3333;\n margin-top: 8px;\n display: none;\n }\n #bespoke-salary-calc .lead-error.visible { display: block; }\n #bespoke-salary-calc .source-note {\n text-align: center;\n font-size: 12px;\n color: #ccc;\n margin-top: 28px;\n line-height: 1.7;\n }\n #bespoke-salary-calc .source-note strong { color: #aaa; font-weight: 500; }\n #bespoke-salary-calc ::-webkit-scrollbar { width: 5px; }\n #bespoke-salary-calc ::-webkit-scrollbar-track { background: #f4f4f2; }\n #bespoke-salary-calc ::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }\n \/* \u2500\u2500 Range bar animation \u2500\u2500 *\/\n #bespoke-salary-calc .range-fill {\n transition: width 0.65s cubic-bezier(.4,0,.2,1);\n }\n @keyframes bsc-markerIn {\n from { opacity: 0; transform: translate(-50%, calc(-50% - 7px)); }\n to { opacity: 1; transform: translate(-50%, -50%); }\n }\n #bespoke-salary-calc .range-marker.animate {\n animation: bsc-markerIn 0.35s 0.6s ease both;\n }\n \/* \u2500\u2500 City comparison strip \u2500\u2500 *\/\n #bespoke-salary-calc .city-compare {\n margin-top: 20px;\n padding-top: 18px;\n border-top: 1px solid #f0f0ee;\n }\n #bespoke-salary-calc .city-compare-title {\n font-size: 11px;\n font-weight: 600;\n letter-spacing: .07em;\n text-transform: uppercase;\n color: #999;\n margin-bottom: 12px;\n }\n #bespoke-salary-calc .city-compare-scroll {\n display: flex;\n gap: 10px;\n overflow-x: auto;\n padding-bottom: 6px;\n scrollbar-width: none;\n }\n #bespoke-salary-calc .city-compare-scroll::-webkit-scrollbar { display: none; }\n #bespoke-salary-calc .me-disclaimer {\n background: #f7f4ff;\n border: 1px solid #d8ccf5;\n border-radius: 12px;\n padding: 16px 18px;\n display: flex;\n gap: 12px;\n align-items: flex-start;\n margin-top: 4px;\n }\n #bespoke-salary-calc .me-disclaimer-icon {\n font-size: 20px;\n flex-shrink: 0;\n margin-top: 1px;\n }\n #bespoke-salary-calc .me-disclaimer-body > strong {\n font-size: 13px;\n font-weight: 700;\n color: #3a2278;\n display: block;\n margin-bottom: 8px;\n }\n #bespoke-salary-calc .me-disclaimer-body p strong {\n display: inline;\n font-size: inherit;\n color: #3a2278;\n }\n #bespoke-salary-calc .me-disclaimer-body p {\n font-size: 12.5px;\n color: #555;\n line-height: 1.6;\n margin: 0 0 8px;\n }\n #bespoke-salary-calc .me-disclaimer-body p:last-child { margin-bottom: 0; }\n #bespoke-salary-calc .city-chip {\n flex: 0 0 auto;\n background: #f7f7f5;\n border-radius: 8px;\n padding: 9px 14px;\n text-align: center;\n min-width: 96px;\n }\n #bespoke-salary-calc .city-chip-name {\n font-size: 11px;\n color: #888;\n margin-bottom: 3px;\n }\n #bespoke-salary-calc .city-chip-avg {\n font-size: 15px;\n font-weight: 700;\n color: #222;\n }\n #bespoke-salary-calc .city-chip-sub {\n font-size: 10px;\n color: #aaa;\n margin-top: 2px;\n }\n \/* \u2500\u2500 Advice tip \u2500\u2500 *\/\n #bespoke-salary-calc .needle-tip {\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid #eee;\n display: flex;\n gap: 8px;\n align-items: flex-start;\n }\n #bespoke-salary-calc .needle-tip-icon {\n font-size: 14px;\n flex-shrink: 0;\n margin-top: 1px;\n }\n #bespoke-salary-calc .needle-tip-text {\n font-size: 13px;\n color: #555;\n line-height: 1.6;\n }\n #bespoke-salary-calc .needle-tip-label {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: #bbb;\n display: block;\n margin-bottom: 3px;\n }\n \/* \u2500\u2500 Email my results \u2500\u2500 *\/\n \/* \u2500\u2500 EMAIL OPT-IN (pre-calculate checkbox) \u2500\u2500 *\/\n #bespoke-salary-calc .email-optin-wrap {\n margin-top: 6px;\n }\n #bespoke-salary-calc .email-optin-check {\n display: flex;\n align-items: center;\n gap: 9px;\n cursor: pointer;\n font-size: 13.5px;\n font-weight: 600;\n color: #444;\n user-select: none;\n }\n #bespoke-salary-calc .email-optin-check--subtle {\n margin-top: 16px;\n margin-bottom: 12px;\n font-size: 11px;\n font-weight: 400;\n color: #aaa;\n gap: 6px;\n text-transform: none;\n letter-spacing: 0;\n }\n #bespoke-salary-calc .email-optin-check--subtle:hover {\n color: #888;\n }\n #bespoke-salary-calc .email-optin-check input[type=\"checkbox\"] {\n width: 17px;\n height: 17px;\n accent-color: #97d422;\n cursor: pointer;\n flex-shrink: 0;\n }\n #bespoke-salary-calc .email-optin-check--subtle input[type=\"checkbox\"] {\n width: 13px;\n height: 13px;\n accent-color: #aaa;\n }\n #bespoke-salary-calc .email-optin-fields {\n margin-top: 10px;\n display: flex;\n flex-direction: row;\n gap: 8px;\n }\n #bespoke-salary-calc .email-optin-fields .field {\n flex: 1;\n min-width: 0;\n }\n @media (max-width: 600px) {\n #bespoke-salary-calc .email-optin-fields {\n flex-direction: column;\n }\n }\n #bespoke-salary-calc .email-optin-input {\n width: 100%;\n border: 1.5px solid #ddd;\n border-radius: 8px;\n padding: 10px 13px;\n font-size: 13.5px;\n color: #333;\n font-family: inherit;\n outline: none;\n transition: border-color 0.15s;\n background: #fff;\n box-sizing: border-box;\n }\n #bespoke-salary-calc .email-optin-input:focus {\n border-color: #97d422;\n }\n #bespoke-salary-calc .email-optin-input.input-error {\n border-color: #e05a5a;\n background: #fff8f8;\n }\n #bespoke-salary-calc .email-optin-input.input-error:focus {\n border-color: #e05a5a;\n }\n #bespoke-salary-calc .email-optin-sent {\n display: flex;\n align-items: center;\n gap: 7px;\n font-size: 13px;\n color: #555;\n margin-top: 10px;\n }\n #bespoke-salary-calc .email-results-wrap {\n margin-top: 16px;\n background: #f8f9fb;\n border: 1px solid #eee;\n border-radius: 10px;\n padding: 14px 16px;\n }\n #bespoke-salary-calc .email-results-label {\n font-size: 12px;\n font-weight: 700;\n color: #555;\n letter-spacing: 0.04em;\n margin-bottom: 9px;\n text-transform: uppercase;\n }\n #bespoke-salary-calc .email-results-row {\n display: flex;\n gap: 8px;\n }\n #bespoke-salary-calc .email-results-input {\n flex: 1;\n border: 1.5px solid #ddd;\n border-radius: 7px;\n padding: 9px 12px;\n font-size: 13.5px;\n color: #333;\n font-family: inherit;\n outline: none;\n transition: border-color 0.15s;\n background: #fff;\n }\n #bespoke-salary-calc .email-results-input:focus {\n border-color: #97d422;\n }\n #bespoke-salary-calc .email-results-btn {\n background: #97d422;\n color: #fff;\n border: none;\n border-radius: 7px;\n padding: 9px 18px;\n font-size: 13.5px;\n font-weight: 700;\n cursor: pointer;\n font-family: inherit;\n transition: background 0.15s;\n white-space: nowrap;\n }\n #bespoke-salary-calc .email-results-btn:hover {\n background: #85bc1c;\n }\n #bespoke-salary-calc .email-results-error {\n font-size: 12px;\n color: #e03;\n margin-top: 6px;\n }\n #bespoke-salary-calc .email-results-success {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13.5px;\n color: #4a7a0a;\n font-weight: 600;\n padding: 4px 0;\n }\n \/* \u2500\u2500 Try another role \u2500\u2500 *\/\n #bespoke-salary-calc .try-again-wrap {\n text-align: center;\n margin-top: 18px;\n padding-bottom: 4px;\n }\n #bespoke-salary-calc .try-again-btn {\n font-size: 13px;\n color: #97d422;\n cursor: pointer;\n background: none;\n border: none;\n padding: 0;\n font-family: inherit;\n text-decoration: underline;\n text-underline-offset: 3px;\n text-decoration-color: transparent;\n transition: text-decoration-color 0.2s;\n }\n #bespoke-salary-calc .try-again-btn:hover { text-decoration-color: #97d422; }\n <\/style>\n<\/head>\n<body>\n \n <h1>Architecture and Design<br \/>Salary Calculator 2026<\/h1>\n <p>Is your salary keeping pace with the market?<\/p>\n <p>Enter your role, location, and salary to benchmark yourself against the 2026 Architecture & Design market.<\/p>\n \n Locations covered\n \ud83c\uddec\ud83c\udde7 United Kingdom\n \ud83c\udde6\ud83c\uddfa Australia\n \ud83c\uddfa\ud83c\uddf8 United States\n \ud83c\uddf3\ud83c\uddff New Zealand\n \ud83c\udde6\ud83c\uddea\ud83c\uddf8\ud83c\udde6 Middle East\n \n 100+\n roles covered\n 20\n global cities\n 1,890\n survey responses\n 3,000+\n active vacancies\n 1,200+\n successful placements\n 65\n recruitment experts\n I want to…\n <button type=\"button\" id=\"modeBenchmark\" onclick=\"setMode('benchmark')\">Benchmark my salary<\/button>\n <button type=\"button\" id=\"modeExplore\" onclick=\"setMode('explore')\">Explore market rates<\/button>\n <label>Location<\/label>\n <select id=\"locationSelect\">\n <option value=\"\">Select a city…<\/option>\n <optgroup label=\"United Kingdom\">\n <option value=\"london\">London<\/option>\n <option value=\"manchester\">Manchester<\/option>\n <\/optgroup>\n <optgroup label=\"Australia\">\n <option value=\"sydney\">Sydney<\/option>\n <option value=\"melbourne\">Melbourne<\/option>\n <option value=\"brisbane\">Brisbane<\/option>\n <option value=\"adelaide\">Adelaide<\/option>\n <option value=\"perth\">Perth<\/option>\n <\/optgroup>\n <optgroup label=\"United States\">\n <option value=\"newyork\">New York<\/option>\n <option value=\"losangeles\">Los Angeles<\/option>\n <option value=\"sanfrancisco\">San Francisco<\/option>\n <option value=\"dallas\">Dallas<\/option>\n <option value=\"austin\">Austin<\/option>\n <option value=\"houston\">Houston<\/option>\n <option value=\"sanantonio\">San Antonio<\/option>\n <\/optgroup>\n <optgroup label=\"New Zealand\">\n <option value=\"newzealand\">Auckland<\/option>\n <option value=\"wellington\">Wellington<\/option>\n <option value=\"christchurch\">Christchurch<\/option>\n <option value=\"queenstown\">Queenstown<\/option>\n <\/optgroup>\n <optgroup label=\"Middle East\">\n <option value=\"dubai\">Dubai<\/option>\n <option value=\"riyadh\">Riyadh<\/option>\n <\/optgroup>\n <\/select>\n <label>Category (optional filter)<\/label>\n <select id=\"categorySelect\" disabled>\n <option value=\"\">Select location first…<\/option>\n <\/select>\n <label>Job Title<\/label>\n <input type=\"text\" id=\"jobSearch\" placeholder=\"Search or select a job title…\" autocomplete=\"off\" disabled \/>\n <button id=\"searchClear\" title=\"Clear\">×<\/button>\n <label id=\"salaryLabel\">Your Annual Base Salary (excl. bonus)<\/label>\n —\n <input type=\"text\" inputmode=\"numeric\" id=\"salaryInput\" placeholder=\"e.g. 85000\" disabled \/>\n Please select a location, job title, and enter your salary.\n \n <label for=\"emailOptinName\">First Name<\/label>\n <input type=\"text\" id=\"emailOptinName\" placeholder=\"Your name\" autocomplete=\"name\" oninput=\"this.classList.remove('input-error')\" \/>\n <label for=\"emailOptinEmail\">Email<\/label>\n <input type=\"email\" id=\"emailOptinEmail\" placeholder=\"your@email.com\" autocomplete=\"email\" oninput=\"this.classList.remove('input-error')\" \/>\n <label>\n <input type=\"checkbox\" id=\"emailOptinCheck\" onchange=\"toggleEmailOptin()\" checked \/>\n Email me my results\n <\/label>\n Sent – check your inbox.\n <button id=\"calcBtn\" onclick=\"calculate()\">Calculate My Position →<\/button>\n \n \n —\n —\n —\n Salary Range\n Market Low\n —\n Market Avg\n —\n Market High\n —\n Your Salary\n —\n Bespoke Careers Insight\n —\n 💬\n Advice from our team\n \n 📋\n <strong>How we benchmark Middle East salaries<\/strong>\n <p>Dubai and Riyadh are unique markets where total compensation is typically structured across multiple components: base salary, housing allowance (usually 25-40% of total package), transport allowance, annual return flights home, and health insurance. In the UAE and Saudi Arabia there is no personal income tax, which meaningfully increases take-home pay compared to equivalent roles in the UK, Australia or the US.<\/p>\n <p>The figures shown in this calculator have been calculated by Bespoke Careers to reflect <strong>total core package value<\/strong>, incorporating these primary components. They are presented as monthly figures in line with how compensation is typically quoted in these markets. Individual packages will vary depending on firm size, seniority, nationality, and whether benefits are provided as cash allowances or in-kind. Always clarify the full package structure (what is included and what is not) before comparing offers across markets.<\/p>\n \n How this role pays in other cities (guidance only)\n Want to go deeper?\n <a href=\"https:\/\/www.bespokecareers.com\/salary-guide\" id=\"ctaPrimary\" target=\"_blank\" rel=\"noopener\" onclick=\"_track('cta_click',{event_label:'download_salary_guide'})\">Download the Full Salary Guide<\/a>\n <a href=\"https:\/\/www.bespokecareers.com\/contact\" id=\"ctaSecondary\" target=\"_blank\" rel=\"noopener\" onclick=\"_track('cta_click',{event_label:'talk_to_our_team'})\">Talk to Our Team<\/a>\n <a href=\"https:\/\/www.bespokecareers.com\/contractors\/\" id=\"ctaContractors\" target=\"_blank\" rel=\"noopener\" onclick=\"_track('cta_click',{event_label:'explore_contract_roles'})\">Explore Contract Roles<\/a>\n \n Email me my results\n <input type=\"text\" id=\"emailResultsName\" placeholder=\"Your name\" autocomplete=\"name\" \/>\n <input type=\"email\" id=\"emailResultsInput\" placeholder=\"your@email.com\" autocomplete=\"email\" \/>\n <button onclick=\"submitEmailResults()\">Send<\/button>\n Please enter your name and a valid email address.\n Sent – check your inbox.\n <button onclick=\"tryAgain()\">\u2190 Try another role<\/button>\n \n Would you like to discuss your hiring strategy with one of our team?\n Leave your details and a consultant will be in touch.\n <label>Name<\/label>\n <input type=\"text\" id=\"leadName\" placeholder=\"Your name\" autocomplete=\"name\" \/>\n <label>Company<\/label>\n <input type=\"text\" id=\"leadCompany\" placeholder=\"Company name\" autocomplete=\"organization\" \/>\n <label>Email<\/label>\n <input type=\"email\" id=\"leadEmail\" placeholder=\"you@company.com\" autocomplete=\"email\" \/>\n <label>Phone<\/label>\n <input type=\"tel\" id=\"leadPhone\" placeholder=\"+1 555 000 0000\" autocomplete=\"tel\" \/>\n <button onclick=\"submitLead()\">Get in Touch →<\/button>\n Please enter your name and email to continue.\n Thanks! We’ll be in touch shortly.\n One of our consultants will reach out to discuss your hiring needs.\n \n\n\n\n<\/body>\n<\/html>\n\t<style>\n .jobs-footer-links a { color: #333; text-decoration: none; }\n .jobs-footer-links a:hover { color: #97D422; }\n<\/style>\n <h2>Browse Jobs by Location<\/h2>\n \n <a href=\"\/jobs\/in-london-uk-gb\/\">London<\/a> |\n <a href=\"\/jobs\/in-sydney-nsw\/\">Sydney<\/a> |\n <a href=\"\/jobs\/in-melbourne-vic\/\">Melbourne<\/a> |\n <a href=\"\/jobs\/in-brisbane-qld\/\">Brisbane<\/a> |\n <a href=\"\/jobs\/in-adelaide\/\">Adelaide<\/a> |\n <a href=\"\/jobs\/in-perth-wa\/\">Perth<\/a> |\n <a href=\"\/jobs\/in-new-york\/\">New York<\/a> |\n <a href=\"\/jobs\/in-los-angeles\/\">Los Angeles<\/a> |\n <a href=\"\/jobs\/in-austin\/\">Austin<\/a> |\n <a href=\"\/jobs\/in-dallas-104690\/\">Dallas<\/a> |\n <a href=\"\/jobs\/in-washington-dc\/\">Washington DC<\/a> |\n <a href=\"\/jobs\/in-manchester\/\">Manchester<\/a> |\n <a href=\"\/jobs\/in-auckland\/\">Auckland<\/a>\n \n <h2>Browse Jobs by Category<\/h2>\n \n <a href=\"\/jobs\/cla_architecture-6528545\/\">Architecture<\/a> |\n <a href=\"\/jobs\/cla_interior-design-6545805\/\">Interior Design<\/a> |\n <a href=\"\/jobs\/cla_landscape-and-urban-design\/\">Landscape & Urban Design<\/a> |\n <a href=\"\/jobs\/cla_business-support-6545815\/\">Business Support<\/a> |\n <a href=\"\/jobs\/cla_architectural-and-interior-products\/\">Architectural & Interior Products<\/a> |\n <a href=\"\/jobs\/cla_strategic-appointments\/\">Strategic Appointments<\/a>\n \n <h2>Popular Searches<\/h2>\n \n <a href=\"\/jobs\/in-london-uk-gb\/cla_architecture-6528545\/\">Architecture Jobs in London<\/a> |\n <a href=\"\/jobs\/in-sydney-nsw\/cla_architecture-6528545\/\">Architecture Jobs in Sydney<\/a> |\n <a href=\"\/jobs\/in-new-york\/cla_architecture-6528545\/\">Architecture Jobs in New York<\/a> |\n <a href=\"\/jobs\/in-melbourne-vic\/cla_architecture-6528545\/\">Architecture Jobs in Melbourne<\/a> |\n <a href=\"\/jobs\/in-austin\/cla_architecture-6528545\/\">Architecture Jobs in Austin<\/a> |\n <a href=\"\/jobs\/in-london-uk-gb\/cla_interior-design-6545805\/\">Interior Design Jobs in London<\/a> |\n <a href=\"\/jobs\/in-sydney-nsw\/cla_interior-design-6545805\/\">Interior Design Jobs in Sydney<\/a> |\n <a href=\"\/jobs\/in-new-york\/cla_interior-design-6545805\/\">Interior Design Jobs in New York<\/a> |\n <a href=\"\/jobs\/in-melbourne-vic\/cla_interior-design-6545805\/\">Interior Design Jobs in Melbourne<\/a> |\n <a href=\"\/jobs\/in-sydney-nsw\/cla_landscape-and-urban-design\/\">Landscape Jobs in Sydney<\/a> |\n <a href=\"\/jobs\/in-melbourne-vic\/cla_landscape-and-urban-design\/\">Landscape Jobs in Melbourne<\/a> |\n <a href=\"\/jobs\/in-los-angeles\/cla_architecture-6528545\/\">Architecture Jobs in Los Angeles<\/a> |\n <a href=\"\/jobs\/in-los-angeles\/cla_interior-design-6545805\/\">Interior Design Jobs in Los Angeles<\/a> |\n <a href=\"\/jobs\/in-dallas-104690\/cla_architecture-6528545\/\">Architecture Jobs in Dallas<\/a> |\n <a href=\"\/jobs\/in-dallas-104690\/cla_interior-design-6545805\/\">Interior Design Jobs in Dallas<\/a>\n \n\n","protected":false},"excerpt":{"rendered":"<p>Architecture & Design Salary Calculator 2026 Architecture and DesignSalary Calculator 2026 Is your salary keeping pace with the market? Enter your role, location, and salary to benchmark yourself against the 2026 Architecture & Design market. Locations covered \ud83c\uddec\ud83c\udde7 United Kingdom \ud83c\udde6\ud83c\uddfa Australia \ud83c\uddfa\ud83c\uddf8 United States \ud83c\uddf3\ud83c\uddff New Zealand \ud83c\udde6\ud83c\uddea\ud83c\uddf8\ud83c\udde6 Middle East 100+ roles covered 20…<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":5508,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_robots_primary_cat":"","footnotes":""},"class_list":["post-9167","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/pages\/9167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/comments?post=9167"}],"version-history":[{"count":30,"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/pages\/9167\/revisions"}],"predecessor-version":[{"id":10990,"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/pages\/9167\/revisions\/10990"}],"up":[{"embeddable":true,"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/pages\/5508"}],"wp:attachment":[{"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/media?parent=9167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":9167,"date":"2026-03-10T20:14:28","date_gmt":"2026-03-10T20:14:28","guid":{"rendered":"https:\/\/www.bespokecareers.com\/?page_id=9167"},"modified":"2026-03-28T10:45:50","modified_gmt":"2026-03-28T10:45:50","slug":"salary-calculator","status":"publish","type":"page","link":"https:\/\/www.bespokecareers.com\/salary-guide\/salary-calculator\/","title":{"rendered":"Salary Calculator"},"content":{"rendered":"\n\n\t\n\n\n \n \n Architecture & Design Salary Calculator 2026<\/title>\n <style>\n #bespoke-salary-calc *, #bespoke-salary-calc *::before, #bespoke-salary-calc *::after {\n box-sizing: border-box; margin: 0; padding: 0;\n }\n \/* Outer wrapper - transparent so the page background shows through *\/\n #bespoke-salary-calc {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n color: #111;\n padding: 48px 0;\n overflow-x: hidden;\n }\n \/* The rounded card that contains everything *\/\n #bespoke-salary-calc .calc-card {\n max-width: 1216px;\n margin: 0 auto;\n background: #fff;\n border-radius: 24px;\n box-shadow: 0 4px 40px rgba(0,0,0,0.08);\n overflow: hidden;\n border: 1px solid #e8e8e4;\n }\n @media (max-width: 560px) {\n #bespoke-salary-calc .calc-card { border-radius: 16px; }\n }\n \/* \u2500\u2500 SPLIT LAYOUT inside the card \u2500\u2500 *\/\n #bespoke-salary-calc .split-wrap {\n display: grid;\n grid-template-columns: 1fr 1fr;\n align-items: stretch;\n }\n \/* Grid children must have min-width:0 or content can force layout wider than viewport *\/\n #bespoke-salary-calc .hero-col,\n #bespoke-salary-calc .form-col { min-width: 0; }\n @media (max-width: 820px) {\n #bespoke-salary-calc .split-wrap { grid-template-columns: 1fr; }\n #bespoke-salary-calc { padding-left: 16px; padding-right: 16px; }\n }\n \/* \u2500\u2500 HERO COLUMN \u2500\u2500 *\/\n #bespoke-salary-calc .hero-col {\n padding: 52px 44px;\n display: flex;\n flex-direction: column;\n gap: 28px;\n background: #f7f7f5;\n border-right: 1px solid #e8e8e4;\n overflow: hidden;\n }\n @media (max-width: 820px) {\n #bespoke-salary-calc .hero-col {\n padding: 28px 24px;\n border-right: none;\n border-bottom: 1px solid #e8e8e4;\n }\n \/* Hide most hero content on mobile - keep sub-line visible *\/\n #bespoke-salary-calc .hero-body,\n #bespoke-salary-calc .discipline-pills,\n #bespoke-salary-calc .hero-stats { display: none !important; }\n }\n #bespoke-salary-calc .hero-col h1 {\n font-size: clamp(22px, 2.8vw, 40px);\n font-weight: 700;\n letter-spacing: -0.03em;\n color: #111;\n line-height: 1.2;\n }\n #bespoke-salary-calc .hero-col h1 span {\n color: #97d422;\n }\n #bespoke-salary-calc .hero-sub {\n font-size: 15px;\n font-weight: 600;\n color: #111;\n line-height: 1.4;\n }\n #bespoke-salary-calc .hero-body {\n font-size: 13px;\n color: #888;\n line-height: 1.7;\n }\n \/* \u2500\u2500 DISCIPLINE PILLS \u2500\u2500 *\/\n #bespoke-salary-calc .discipline-pills {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n #bespoke-salary-calc .discipline-pills-label {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: #bbb;\n }\n #bespoke-salary-calc .discipline-pill-list {\n display: flex;\n flex-wrap: wrap;\n gap: 7px;\n }\n #bespoke-salary-calc .discipline-pill {\n display: inline-block;\n padding: 5px 12px;\n border-radius: 100px;\n font-size: 12px;\n font-weight: 600;\n color: #2a4a00;\n background: #eef7d0;\n border: 1px solid #c8e87a;\n }\n \/* \u2500\u2500 STATS GRID \u2500\u2500 *\/\n #bespoke-salary-calc .hero-stats {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n }\n #bespoke-salary-calc .hero-stat {\n display: flex;\n flex-direction: column;\n gap: 3px;\n }\n #bespoke-salary-calc .hero-stat-num {\n font-size: 26px;\n font-weight: 800;\n color: #97d422;\n letter-spacing: -0.03em;\n line-height: 1;\n }\n #bespoke-salary-calc .hero-stat span:last-child {\n font-size: 11px;\n color: #999;\n line-height: 1.4;\n }\n \/* \u2500\u2500 FORM COLUMN \u2500\u2500 *\/\n #bespoke-salary-calc .form-col {\n padding: 56px 44px;\n background: #fff;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n @media (max-width: 820px) {\n #bespoke-salary-calc .form-col { padding: 24px 24px 36px; }\n }\n #bespoke-salary-calc .card-title {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: #ccc;\n margin-bottom: 22px;\n }\n #bespoke-salary-calc .form-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n }\n @media (max-width: 560px) {\n #bespoke-salary-calc .form-grid { grid-template-columns: 1fr; }\n }\n #bespoke-salary-calc .field { display: flex; flex-direction: column; gap: 7px; }\n #bespoke-salary-calc .field.full { grid-column: 1 \/ -1; }\n #bespoke-salary-calc label {\n font-size: 11px;\n font-weight: 700;\n color: #aaa;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n }\n #bespoke-salary-calc .field-optional {\n font-size: 10px;\n font-weight: 400;\n color: #bbb;\n letter-spacing: 0.02em;\n text-transform: none;\n margin-left: 3px;\n }\n #bespoke-salary-calc select,\n #bespoke-salary-calc input[type=\"text\"],\n #bespoke-salary-calc input[type=\"number\"],\n #bespoke-salary-calc input[type=\"email\"],\n #bespoke-salary-calc input[type=\"tel\"] {\n background: #fafaf8;\n border: 1.5px solid #e8e8e4;\n border-radius: 10px;\n color: #111;\n font-size: 14px;\n padding: 13px 14px;\n width: 100%;\n outline: none;\n transition: border-color 0.2s, box-shadow 0.2s;\n appearance: none;\n -webkit-appearance: none;\n font-family: inherit;\n }\n #bespoke-salary-calc select:focus,\n #bespoke-salary-calc input:focus {\n border-color: #97d422;\n box-shadow: 0 0 0 3px #97d42218;\n background: #fff;\n }\n #bespoke-salary-calc select {\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23bbb' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 14px center;\n background-color: #fafaf8;\n padding-right: 40px;\n cursor: pointer;\n }\n #bespoke-salary-calc .search-wrap { position: relative; }\n #bespoke-salary-calc .search-clear {\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n background: none;\n border: none;\n color: #ccc;\n cursor: pointer;\n font-size: 18px;\n line-height: 1;\n padding: 0;\n display: none;\n }\n #bespoke-salary-calc .search-clear.visible { display: block; }\n #bespoke-salary-calc .dropdown-list {\n position: absolute;\n top: calc(100% + 6px);\n left: 0; right: 0;\n background: #fff;\n border: 1.5px solid #e8e8e4;\n border-radius: 12px;\n max-height: 240px;\n overflow-y: auto;\n z-index: 100;\n display: none;\n box-shadow: 0 8px 24px rgba(0,0,0,0.08);\n }\n #bespoke-salary-calc .dropdown-list.open { display: block; }\n #bespoke-salary-calc .dropdown-item {\n padding: 10px 14px;\n font-size: 13px;\n cursor: pointer;\n color: #555;\n border-bottom: 1px solid #f4f4f2;\n transition: background 0.1s;\n }\n #bespoke-salary-calc .dropdown-item:last-child { border-bottom: none; }\n #bespoke-salary-calc .dropdown-item:hover,\n #bespoke-salary-calc .dropdown-item.selected { background: #f7f7f5; color: #111; }\n #bespoke-salary-calc .dropdown-item .cat { font-size: 11px; color: #ccc; margin-left: 6px; }\n #bespoke-salary-calc .salary-row { display: flex; align-items: center; gap: 10px; }\n #bespoke-salary-calc .currency-badge {\n background: #fafaf8;\n border: 1.5px solid #e8e8e4;\n border-radius: 10px;\n padding: 13px 12px;\n font-size: 13px;\n color: #aaa;\n white-space: nowrap;\n min-width: 52px;\n text-align: center;\n }\n #bespoke-salary-calc .btn-calculate {\n width: 100%;\n background: #97d422;\n color: #111;\n border: none;\n border-radius: 12px;\n font-size: 15px;\n font-weight: 700;\n padding: 16px;\n cursor: pointer;\n letter-spacing: 0.01em;\n transition: background 0.2s, transform 0.1s;\n margin-top: 10px;\n font-family: inherit;\n }\n #bespoke-salary-calc .btn-calculate:hover { background: #aee849; }\n #bespoke-salary-calc .btn-calculate:active { transform: scale(0.99); }\n @media (max-width: 820px) {\n #bespoke-salary-calc .btn-calculate {\n position: sticky;\n bottom: 12px;\n z-index: 5;\n box-shadow: 0 4px 20px rgba(0,0,0,0.13);\n }\n }\n \/* \u2500\u2500 RESULTS (inside same card, below the split) \u2500\u2500 *\/\n #bespoke-salary-calc .results-wrap {\n display: none;\n border-top: 1px solid #e8e8e4;\n padding: 40px 44px 48px;\n background: #fafaf8;\n }\n #bespoke-salary-calc .results-wrap.visible {\n display: block;\n }\n @media (max-width: 820px) {\n #bespoke-salary-calc .results-wrap { padding: 32px 24px 40px; }\n }\n #bespoke-salary-calc .result-card {\n display: none;\n margin-bottom: 24px;\n }\n #bespoke-salary-calc .result-card.visible { display: block; }\n #bespoke-salary-calc .result-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: 28px;\n gap: 16px;\n flex-wrap: wrap;\n }\n #bespoke-salary-calc .result-role {\n font-size: 20px;\n font-weight: 700;\n color: #111;\n letter-spacing: -0.02em;\n }\n #bespoke-salary-calc .result-location {\n font-size: 13px;\n color: #bbb;\n margin-top: 4px;\n }\n #bespoke-salary-calc .verdict-pill {\n padding: 7px 18px;\n border-radius: 100px;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n white-space: nowrap;\n flex-shrink: 0;\n }\n #bespoke-salary-calc .verdict-below { background: #fff0f0; color: #cc3333; border: 1px solid #ffd0d0; }\n #bespoke-salary-calc .verdict-low { background: #fffbea; color: #b07a00; border: 1px solid #ffe99a; }\n #bespoke-salary-calc .verdict-market { background: #f2fde0; color: #4a7a00; border: 1px solid #c8ed80; }\n #bespoke-salary-calc .verdict-above { background: #e8faf6; color: #007a60; border: 1px solid #a0e8d8; }\n #bespoke-salary-calc .verdict-top { background: #f3eeff; color: #5e3ab8; border: 1px solid #cdb8f0; }\n #bespoke-salary-calc .verdict-overview { background: #f0f4ff; color: #3355aa; border: 1px solid #b8c8f0; }\n \/* Unemployed toggle *\/\n \/* \u2500\u2500 MODE TOGGLE \u2500\u2500 *\/\n #bespoke-salary-calc .mode-toggle-wrap {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n #bespoke-salary-calc .mode-toggle-label {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: #999;\n }\n #bespoke-salary-calc .mode-toggle {\n display: flex;\n background: #f0f0ee;\n border-radius: 8px;\n padding: 3px;\n gap: 2px;\n }\n #bespoke-salary-calc .mode-btn {\n flex: 1;\n padding: 8px 10px;\n border: none;\n border-radius: 6px;\n background: transparent;\n font-size: 12px;\n font-weight: 500;\n color: #888;\n cursor: pointer;\n transition: background 0.18s, color 0.18s, box-shadow 0.18s;\n text-align: center;\n line-height: 1.3;\n white-space: nowrap;\n }\n #bespoke-salary-calc .mode-btn:hover { color: #333; }\n #bespoke-salary-calc .mode-btn.active {\n background: #fff;\n color: #111;\n font-weight: 600;\n box-shadow: 0 1px 4px rgba(0,0,0,0.1);\n }\n #bespoke-salary-calc #salaryFieldWrap {\n transition: opacity 0.25s, max-height 0.3s;\n max-height: 120px;\n overflow: hidden;\n }\n #bespoke-salary-calc #salaryFieldWrap.hidden {\n opacity: 0;\n max-height: 0;\n pointer-events: none;\n margin: 0;\n }\n #bespoke-salary-calc .range-section { margin-bottom: 28px; }\n #bespoke-salary-calc .range-label {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: #ccc;\n margin-bottom: 14px;\n }\n #bespoke-salary-calc .range-bar-wrap {\n position: relative;\n height: 6px;\n background: #eeeeeb;\n border-radius: 100px;\n margin-top: 38px;\n margin-bottom: 12px;\n }\n #bespoke-salary-calc .range-mine-label {\n position: absolute;\n bottom: calc(100% + 10px);\n left: 50%;\n transform: translateX(-50%);\n font-size: 11px;\n font-weight: 700;\n color: #111;\n white-space: nowrap;\n pointer-events: none;\n }\n #bespoke-salary-calc .range-fill {\n position: absolute;\n left: 0; top: 0; bottom: 0;\n background: linear-gradient(90deg, #d8f0a0, #97d422);\n border-radius: 100px;\n }\n #bespoke-salary-calc .range-marker {\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 20px;\n height: 20px;\n background: #fff;\n border-radius: 50%;\n box-shadow: 0 0 0 2.5px #97d422, 0 2px 8px rgba(0,0,0,0.12);\n }\n #bespoke-salary-calc .range-marker.v-red { box-shadow: 0 0 0 2.5px #e05050, 0 2px 8px rgba(0,0,0,0.12); }\n #bespoke-salary-calc .range-marker.v-amber { box-shadow: 0 0 0 2.5px #d99000, 0 2px 8px rgba(0,0,0,0.12); }\n #bespoke-salary-calc .range-ticks {\n position: relative;\n height: 36px;\n }\n #bespoke-salary-calc .range-tick { font-size: 11px; color: #bbb; }\n #bespoke-salary-calc .range-tick.mine { color: #111; font-weight: 700; }\n #bespoke-salary-calc .stats-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 10px;\n margin-bottom: 20px;\n }\n #bespoke-salary-calc .stat-box {\n background: #fff;\n border: 1.5px solid #e8e8e4;\n border-radius: 14px;\n padding: clamp(10px, 2.5vw, 18px) clamp(6px, 1.8vw, 16px);\n text-align: center;\n min-width: 0;\n }\n #bespoke-salary-calc .stat-box.mine {\n border-color: #97d422;\n background: #f6fde8;\n }\n \/* Red - below market *\/\n #bespoke-salary-calc .stat-box.mine.v-red { border-color: #e05050; background: #fff4f4; }\n #bespoke-salary-calc .stat-box.mine.v-red .stat-value { color: #c02020; }\n \/* Amber - low-mid *\/\n #bespoke-salary-calc .stat-box.mine.v-amber { border-color: #d99000; background: #fffbee; }\n #bespoke-salary-calc .stat-box.mine.v-amber .stat-value { color: #9a6400; }\n #bespoke-salary-calc .stat-label {\n font-size: clamp(8px, 1.8vw, 10px);\n font-weight: 700;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: #ccc;\n margin-bottom: 6px;\n }\n #bespoke-salary-calc .stat-value {\n font-size: clamp(13px, 3.8vw, 22px);\n font-weight: 300;\n color: #666;\n letter-spacing: -0.02em;\n }\n #bespoke-salary-calc .stat-box.mine .stat-value { color: #4a7a00; font-weight: 700; }\n \/* v-red \/ v-amber overrides are above; green (default mine) needs no extra rule *\/\n #bespoke-salary-calc .insight-box {\n background: #fff;\n border: 1.5px solid #e8e8e4;\n border-left: 3px solid #97d422;\n border-radius: 14px;\n padding: 20px 22px;\n }\n #bespoke-salary-calc .insight-title {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: #97d422;\n margin-bottom: 10px;\n }\n #bespoke-salary-calc .insight-text {\n font-size: 14px;\n color: #777;\n line-height: 1.7;\n }\n #bespoke-salary-calc .insight-text strong { color: #111; font-weight: 600; }\n #bespoke-salary-calc .error-msg {\n background: #fff0f0;\n border: 1px solid #ffd0d0;\n border-radius: 8px;\n padding: 12px 16px;\n font-size: 13px;\n color: #cc3333;\n margin-top: 14px;\n display: none;\n }\n #bespoke-salary-calc .error-msg.visible { display: block; }\n #bespoke-salary-calc .cta-strip {\n display: none;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n margin: 32px 0 24px;\n text-align: center;\n }\n #bespoke-salary-calc .cta-strip.visible { display: flex; }\n #bespoke-salary-calc .cta-strip-label {\n font-size: 15px;\n font-weight: 600;\n color: #111;\n margin-bottom: 4px;\n }\n #bespoke-salary-calc .cta-buttons {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n justify-content: center;\n }\n #bespoke-salary-calc .cta-btn {\n display: inline-block;\n padding: 13px 24px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n text-decoration: none;\n transition: opacity 0.2s, transform 0.15s;\n white-space: nowrap;\n }\n #bespoke-salary-calc .cta-btn:hover { opacity: 0.88; transform: translateY(-1px); }\n #bespoke-salary-calc .cta-btn-primary {\n background: #97d422;\n color: #1a2606;\n }\n #bespoke-salary-calc .cta-btn-secondary {\n background: #fff;\n color: #111;\n border: 1.5px solid #d8d8d4;\n }\n \/* \u2500\u2500 LEAD CAPTURE FORM (explore mode) \u2500\u2500 *\/\n #bespoke-salary-calc .lead-form-wrap {\n display: none;\n margin: 32px 0 24px;\n background: #fff;\n border: 1.5px solid #e8e8e4;\n border-radius: 18px;\n padding: 32px 36px;\n }\n #bespoke-salary-calc .lead-form-wrap.visible { display: block; }\n #bespoke-salary-calc .lead-form-title {\n font-size: 17px;\n font-weight: 700;\n color: #111;\n letter-spacing: -0.02em;\n margin-bottom: 6px;\n }\n #bespoke-salary-calc .lead-form-sub {\n font-size: 13px;\n color: #999;\n margin-bottom: 22px;\n }\n #bespoke-salary-calc .lead-form-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin-bottom: 14px;\n }\n @media (max-width: 560px) {\n #bespoke-salary-calc .lead-form-grid { grid-template-columns: 1fr; }\n #bespoke-salary-calc .lead-form-wrap { padding: 24px 20px; }\n }\n #bespoke-salary-calc .lead-submit-btn {\n width: 100%;\n background: #97d422;\n color: #111;\n border: none;\n border-radius: 12px;\n font-size: 15px;\n font-weight: 700;\n padding: 15px;\n cursor: pointer;\n transition: background 0.2s;\n font-family: inherit;\n margin-top: 4px;\n }\n #bespoke-salary-calc .lead-submit-btn:hover { background: #aee849; }\n #bespoke-salary-calc .lead-success {\n display: none;\n text-align: center;\n padding: 24px 0 8px;\n }\n #bespoke-salary-calc .lead-success.visible { display: block; }\n #bespoke-salary-calc .lead-success-icon {\n margin-bottom: 14px;\n display: flex;\n justify-content: center;\n }\n #bespoke-salary-calc .lead-success-icon svg {\n display: block;\n }\n #bespoke-salary-calc .lead-success-title {\n font-size: 17px;\n font-weight: 700;\n color: #111;\n margin-bottom: 6px;\n }\n #bespoke-salary-calc .lead-success-body {\n font-size: 14px;\n color: #999;\n }\n #bespoke-salary-calc .lead-error {\n font-size: 12px;\n color: #cc3333;\n margin-top: 8px;\n display: none;\n }\n #bespoke-salary-calc .lead-error.visible { display: block; }\n #bespoke-salary-calc .source-note {\n text-align: center;\n font-size: 12px;\n color: #ccc;\n margin-top: 28px;\n line-height: 1.7;\n }\n #bespoke-salary-calc .source-note strong { color: #aaa; font-weight: 500; }\n #bespoke-salary-calc ::-webkit-scrollbar { width: 5px; }\n #bespoke-salary-calc ::-webkit-scrollbar-track { background: #f4f4f2; }\n #bespoke-salary-calc ::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }\n \/* \u2500\u2500 Range bar animation \u2500\u2500 *\/\n #bespoke-salary-calc .range-fill {\n transition: width 0.65s cubic-bezier(.4,0,.2,1);\n }\n @keyframes bsc-markerIn {\n from { opacity: 0; transform: translate(-50%, calc(-50% - 7px)); }\n to { opacity: 1; transform: translate(-50%, -50%); }\n }\n #bespoke-salary-calc .range-marker.animate {\n animation: bsc-markerIn 0.35s 0.6s ease both;\n }\n \/* \u2500\u2500 City comparison strip \u2500\u2500 *\/\n #bespoke-salary-calc .city-compare {\n margin-top: 20px;\n padding-top: 18px;\n border-top: 1px solid #f0f0ee;\n }\n #bespoke-salary-calc .city-compare-title {\n font-size: 11px;\n font-weight: 600;\n letter-spacing: .07em;\n text-transform: uppercase;\n color: #999;\n margin-bottom: 12px;\n }\n #bespoke-salary-calc .city-compare-scroll {\n display: flex;\n gap: 10px;\n overflow-x: auto;\n padding-bottom: 6px;\n scrollbar-width: none;\n }\n #bespoke-salary-calc .city-compare-scroll::-webkit-scrollbar { display: none; }\n #bespoke-salary-calc .me-disclaimer {\n background: #f7f4ff;\n border: 1px solid #d8ccf5;\n border-radius: 12px;\n padding: 16px 18px;\n display: flex;\n gap: 12px;\n align-items: flex-start;\n margin-top: 4px;\n }\n #bespoke-salary-calc .me-disclaimer-icon {\n font-size: 20px;\n flex-shrink: 0;\n margin-top: 1px;\n }\n #bespoke-salary-calc .me-disclaimer-body > strong {\n font-size: 13px;\n font-weight: 700;\n color: #3a2278;\n display: block;\n margin-bottom: 8px;\n }\n #bespoke-salary-calc .me-disclaimer-body p strong {\n display: inline;\n font-size: inherit;\n color: #3a2278;\n }\n #bespoke-salary-calc .me-disclaimer-body p {\n font-size: 12.5px;\n color: #555;\n line-height: 1.6;\n margin: 0 0 8px;\n }\n #bespoke-salary-calc .me-disclaimer-body p:last-child { margin-bottom: 0; }\n #bespoke-salary-calc .city-chip {\n flex: 0 0 auto;\n background: #f7f7f5;\n border-radius: 8px;\n padding: 9px 14px;\n text-align: center;\n min-width: 96px;\n }\n #bespoke-salary-calc .city-chip-name {\n font-size: 11px;\n color: #888;\n margin-bottom: 3px;\n }\n #bespoke-salary-calc .city-chip-avg {\n font-size: 15px;\n font-weight: 700;\n color: #222;\n }\n #bespoke-salary-calc .city-chip-sub {\n font-size: 10px;\n color: #aaa;\n margin-top: 2px;\n }\n \/* \u2500\u2500 Advice tip \u2500\u2500 *\/\n #bespoke-salary-calc .needle-tip {\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid #eee;\n display: flex;\n gap: 8px;\n align-items: flex-start;\n }\n #bespoke-salary-calc .needle-tip-icon {\n font-size: 14px;\n flex-shrink: 0;\n margin-top: 1px;\n }\n #bespoke-salary-calc .needle-tip-text {\n font-size: 13px;\n color: #555;\n line-height: 1.6;\n }\n #bespoke-salary-calc .needle-tip-label {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: #bbb;\n display: block;\n margin-bottom: 3px;\n }\n \/* \u2500\u2500 Email my results \u2500\u2500 *\/\n \/* \u2500\u2500 EMAIL OPT-IN (pre-calculate checkbox) \u2500\u2500 *\/\n #bespoke-salary-calc .email-optin-wrap {\n margin-top: 6px;\n }\n #bespoke-salary-calc .email-optin-check {\n display: flex;\n align-items: center;\n gap: 9px;\n cursor: pointer;\n font-size: 13.5px;\n font-weight: 600;\n color: #444;\n user-select: none;\n }\n #bespoke-salary-calc .email-optin-check--subtle {\n margin-top: 16px;\n margin-bottom: 12px;\n font-size: 11px;\n font-weight: 400;\n color: #aaa;\n gap: 6px;\n text-transform: none;\n letter-spacing: 0;\n }\n #bespoke-salary-calc .email-optin-check--subtle:hover {\n color: #888;\n }\n #bespoke-salary-calc .email-optin-check input[type=\"checkbox\"] {\n width: 17px;\n height: 17px;\n accent-color: #97d422;\n cursor: pointer;\n flex-shrink: 0;\n }\n #bespoke-salary-calc .email-optin-check--subtle input[type=\"checkbox\"] {\n width: 13px;\n height: 13px;\n accent-color: #aaa;\n }\n #bespoke-salary-calc .email-optin-fields {\n margin-top: 10px;\n display: flex;\n flex-direction: row;\n gap: 8px;\n }\n #bespoke-salary-calc .email-optin-fields .field {\n flex: 1;\n min-width: 0;\n }\n @media (max-width: 600px) {\n #bespoke-salary-calc .email-optin-fields {\n flex-direction: column;\n }\n }\n #bespoke-salary-calc .email-optin-input {\n width: 100%;\n border: 1.5px solid #ddd;\n border-radius: 8px;\n padding: 10px 13px;\n font-size: 13.5px;\n color: #333;\n font-family: inherit;\n outline: none;\n transition: border-color 0.15s;\n background: #fff;\n box-sizing: border-box;\n }\n #bespoke-salary-calc .email-optin-input:focus {\n border-color: #97d422;\n }\n #bespoke-salary-calc .email-optin-input.input-error {\n border-color: #e05a5a;\n background: #fff8f8;\n }\n #bespoke-salary-calc .email-optin-input.input-error:focus {\n border-color: #e05a5a;\n }\n #bespoke-salary-calc .email-optin-sent {\n display: flex;\n align-items: center;\n gap: 7px;\n font-size: 13px;\n color: #555;\n margin-top: 10px;\n }\n #bespoke-salary-calc .email-results-wrap {\n margin-top: 16px;\n background: #f8f9fb;\n border: 1px solid #eee;\n border-radius: 10px;\n padding: 14px 16px;\n }\n #bespoke-salary-calc .email-results-label {\n font-size: 12px;\n font-weight: 700;\n color: #555;\n letter-spacing: 0.04em;\n margin-bottom: 9px;\n text-transform: uppercase;\n }\n #bespoke-salary-calc .email-results-row {\n display: flex;\n gap: 8px;\n }\n #bespoke-salary-calc .email-results-input {\n flex: 1;\n border: 1.5px solid #ddd;\n border-radius: 7px;\n padding: 9px 12px;\n font-size: 13.5px;\n color: #333;\n font-family: inherit;\n outline: none;\n transition: border-color 0.15s;\n background: #fff;\n }\n #bespoke-salary-calc .email-results-input:focus {\n border-color: #97d422;\n }\n #bespoke-salary-calc .email-results-btn {\n background: #97d422;\n color: #fff;\n border: none;\n border-radius: 7px;\n padding: 9px 18px;\n font-size: 13.5px;\n font-weight: 700;\n cursor: pointer;\n font-family: inherit;\n transition: background 0.15s;\n white-space: nowrap;\n }\n #bespoke-salary-calc .email-results-btn:hover {\n background: #85bc1c;\n }\n #bespoke-salary-calc .email-results-error {\n font-size: 12px;\n color: #e03;\n margin-top: 6px;\n }\n #bespoke-salary-calc .email-results-success {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13.5px;\n color: #4a7a0a;\n font-weight: 600;\n padding: 4px 0;\n }\n \/* \u2500\u2500 Try another role \u2500\u2500 *\/\n #bespoke-salary-calc .try-again-wrap {\n text-align: center;\n margin-top: 18px;\n padding-bottom: 4px;\n }\n #bespoke-salary-calc .try-again-btn {\n font-size: 13px;\n color: #97d422;\n cursor: pointer;\n background: none;\n border: none;\n padding: 0;\n font-family: inherit;\n text-decoration: underline;\n text-underline-offset: 3px;\n text-decoration-color: transparent;\n transition: text-decoration-color 0.2s;\n }\n #bespoke-salary-calc .try-again-btn:hover { text-decoration-color: #97d422; }\n <\/style>\n<\/head>\n<body>\n \n <h1>Architecture and Design<br \/>Salary Calculator 2026<\/h1>\n <p>Is your salary keeping pace with the market?<\/p>\n <p>Enter your role, location, and salary to benchmark yourself against the 2026 Architecture & Design market.<\/p>\n \n Locations covered\n \ud83c\uddec\ud83c\udde7 United Kingdom\n \ud83c\udde6\ud83c\uddfa Australia\n \ud83c\uddfa\ud83c\uddf8 United States\n \ud83c\uddf3\ud83c\uddff New Zealand\n \ud83c\udde6\ud83c\uddea\ud83c\uddf8\ud83c\udde6 Middle East\n \n 100+\n roles covered\n 20\n global cities\n 1,890\n survey responses\n 3,000+\n active vacancies\n 1,200+\n successful placements\n 65\n recruitment experts\n I want to…\n <button type=\"button\" id=\"modeBenchmark\" onclick=\"setMode('benchmark')\">Benchmark my salary<\/button>\n <button type=\"button\" id=\"modeExplore\" onclick=\"setMode('explore')\">Explore market rates<\/button>\n <label>Location<\/label>\n <select id=\"locationSelect\">\n <option value=\"\">Select a city…<\/option>\n <optgroup label=\"United Kingdom\">\n <option value=\"london\">London<\/option>\n <option value=\"manchester\">Manchester<\/option>\n <\/optgroup>\n <optgroup label=\"Australia\">\n <option value=\"sydney\">Sydney<\/option>\n <option value=\"melbourne\">Melbourne<\/option>\n <option value=\"brisbane\">Brisbane<\/option>\n <option value=\"adelaide\">Adelaide<\/option>\n <option value=\"perth\">Perth<\/option>\n <\/optgroup>\n <optgroup label=\"United States\">\n <option value=\"newyork\">New York<\/option>\n <option value=\"losangeles\">Los Angeles<\/option>\n <option value=\"sanfrancisco\">San Francisco<\/option>\n <option value=\"dallas\">Dallas<\/option>\n <option value=\"austin\">Austin<\/option>\n <option value=\"houston\">Houston<\/option>\n <option value=\"sanantonio\">San Antonio<\/option>\n <\/optgroup>\n <optgroup label=\"New Zealand\">\n <option value=\"newzealand\">Auckland<\/option>\n <option value=\"wellington\">Wellington<\/option>\n <option value=\"christchurch\">Christchurch<\/option>\n <option value=\"queenstown\">Queenstown<\/option>\n <\/optgroup>\n <optgroup label=\"Middle East\">\n <option value=\"dubai\">Dubai<\/option>\n <option value=\"riyadh\">Riyadh<\/option>\n <\/optgroup>\n <\/select>\n <label>Category (optional filter)<\/label>\n <select id=\"categorySelect\" disabled>\n <option value=\"\">Select location first…<\/option>\n <\/select>\n <label>Job Title<\/label>\n <input type=\"text\" id=\"jobSearch\" placeholder=\"Search or select a job title…\" autocomplete=\"off\" disabled \/>\n <button id=\"searchClear\" title=\"Clear\">×<\/button>\n <label id=\"salaryLabel\">Your Annual Base Salary (excl. bonus)<\/label>\n —\n <input type=\"text\" inputmode=\"numeric\" id=\"salaryInput\" placeholder=\"e.g. 85000\" disabled \/>\n Please select a location, job title, and enter your salary.\n \n <label for=\"emailOptinName\">First Name<\/label>\n <input type=\"text\" id=\"emailOptinName\" placeholder=\"Your name\" autocomplete=\"name\" oninput=\"this.classList.remove('input-error')\" \/>\n <label for=\"emailOptinEmail\">Email<\/label>\n <input type=\"email\" id=\"emailOptinEmail\" placeholder=\"your@email.com\" autocomplete=\"email\" oninput=\"this.classList.remove('input-error')\" \/>\n <label>\n <input type=\"checkbox\" id=\"emailOptinCheck\" onchange=\"toggleEmailOptin()\" checked \/>\n Email me my results\n <\/label>\n Sent – check your inbox.\n <button id=\"calcBtn\" onclick=\"calculate()\">Calculate My Position →<\/button>\n \n \n —\n —\n —\n Salary Range\n Market Low\n —\n Market Avg\n —\n Market High\n —\n Your Salary\n —\n Bespoke Careers Insight\n —\n 💬\n Advice from our team\n \n 📋\n <strong>How we benchmark Middle East salaries<\/strong>\n <p>Dubai and Riyadh are unique markets where total compensation is typically structured across multiple components: base salary, housing allowance (usually 25-40% of total package), transport allowance, annual return flights home, and health insurance. In the UAE and Saudi Arabia there is no personal income tax, which meaningfully increases take-home pay compared to equivalent roles in the UK, Australia or the US.<\/p>\n <p>The figures shown in this calculator have been calculated by Bespoke Careers to reflect <strong>total core package value<\/strong>, incorporating these primary components. They are presented as monthly figures in line with how compensation is typically quoted in these markets. Individual packages will vary depending on firm size, seniority, nationality, and whether benefits are provided as cash allowances or in-kind. Always clarify the full package structure (what is included and what is not) before comparing offers across markets.<\/p>\n \n How this role pays in other cities (guidance only)\n Want to go deeper?\n <a href=\"https:\/\/www.bespokecareers.com\/salary-guide\" id=\"ctaPrimary\" target=\"_blank\" rel=\"noopener\" onclick=\"_track('cta_click',{event_label:'download_salary_guide'})\">Download the Full Salary Guide<\/a>\n <a href=\"https:\/\/www.bespokecareers.com\/contact\" id=\"ctaSecondary\" target=\"_blank\" rel=\"noopener\" onclick=\"_track('cta_click',{event_label:'talk_to_our_team'})\">Talk to Our Team<\/a>\n <a href=\"https:\/\/www.bespokecareers.com\/contractors\/\" id=\"ctaContractors\" target=\"_blank\" rel=\"noopener\" onclick=\"_track('cta_click',{event_label:'explore_contract_roles'})\">Explore Contract Roles<\/a>\n \n Email me my results\n <input type=\"text\" id=\"emailResultsName\" placeholder=\"Your name\" autocomplete=\"name\" \/>\n <input type=\"email\" id=\"emailResultsInput\" placeholder=\"your@email.com\" autocomplete=\"email\" \/>\n <button onclick=\"submitEmailResults()\">Send<\/button>\n Please enter your name and a valid email address.\n Sent – check your inbox.\n <button onclick=\"tryAgain()\">\u2190 Try another role<\/button>\n \n Would you like to discuss your hiring strategy with one of our team?\n Leave your details and a consultant will be in touch.\n <label>Name<\/label>\n <input type=\"text\" id=\"leadName\" placeholder=\"Your name\" autocomplete=\"name\" \/>\n <label>Company<\/label>\n <input type=\"text\" id=\"leadCompany\" placeholder=\"Company name\" autocomplete=\"organization\" \/>\n <label>Email<\/label>\n <input type=\"email\" id=\"leadEmail\" placeholder=\"you@company.com\" autocomplete=\"email\" \/>\n <label>Phone<\/label>\n <input type=\"tel\" id=\"leadPhone\" placeholder=\"+1 555 000 0000\" autocomplete=\"tel\" \/>\n <button onclick=\"submitLead()\">Get in Touch →<\/button>\n Please enter your name and email to continue.\n Thanks! We’ll be in touch shortly.\n One of our consultants will reach out to discuss your hiring needs.\n \n\n\n\n<\/body>\n<\/html>\n\t<style>\n .jobs-footer-links a { color: #333; text-decoration: none; }\n .jobs-footer-links a:hover { color: #97D422; }\n<\/style>\n <h2>Browse Jobs by Location<\/h2>\n \n <a href=\"\/jobs\/in-london-uk-gb\/\">London<\/a> |\n <a href=\"\/jobs\/in-sydney-nsw\/\">Sydney<\/a> |\n <a href=\"\/jobs\/in-melbourne-vic\/\">Melbourne<\/a> |\n <a href=\"\/jobs\/in-brisbane-qld\/\">Brisbane<\/a> |\n <a href=\"\/jobs\/in-adelaide\/\">Adelaide<\/a> |\n <a href=\"\/jobs\/in-perth-wa\/\">Perth<\/a> |\n <a href=\"\/jobs\/in-new-york\/\">New York<\/a> |\n <a href=\"\/jobs\/in-los-angeles\/\">Los Angeles<\/a> |\n <a href=\"\/jobs\/in-austin\/\">Austin<\/a> |\n <a href=\"\/jobs\/in-dallas-104690\/\">Dallas<\/a> |\n <a href=\"\/jobs\/in-washington-dc\/\">Washington DC<\/a> |\n <a href=\"\/jobs\/in-manchester\/\">Manchester<\/a> |\n <a href=\"\/jobs\/in-auckland\/\">Auckland<\/a>\n \n <h2>Browse Jobs by Category<\/h2>\n \n <a href=\"\/jobs\/cla_architecture-6528545\/\">Architecture<\/a> |\n <a href=\"\/jobs\/cla_interior-design-6545805\/\">Interior Design<\/a> |\n <a href=\"\/jobs\/cla_landscape-and-urban-design\/\">Landscape & Urban Design<\/a> |\n <a href=\"\/jobs\/cla_business-support-6545815\/\">Business Support<\/a> |\n <a href=\"\/jobs\/cla_architectural-and-interior-products\/\">Architectural & Interior Products<\/a> |\n <a href=\"\/jobs\/cla_strategic-appointments\/\">Strategic Appointments<\/a>\n \n <h2>Popular Searches<\/h2>\n \n <a href=\"\/jobs\/in-london-uk-gb\/cla_architecture-6528545\/\">Architecture Jobs in London<\/a> |\n <a href=\"\/jobs\/in-sydney-nsw\/cla_architecture-6528545\/\">Architecture Jobs in Sydney<\/a> |\n <a href=\"\/jobs\/in-new-york\/cla_architecture-6528545\/\">Architecture Jobs in New York<\/a> |\n <a href=\"\/jobs\/in-melbourne-vic\/cla_architecture-6528545\/\">Architecture Jobs in Melbourne<\/a> |\n <a href=\"\/jobs\/in-austin\/cla_architecture-6528545\/\">Architecture Jobs in Austin<\/a> |\n <a href=\"\/jobs\/in-london-uk-gb\/cla_interior-design-6545805\/\">Interior Design Jobs in London<\/a> |\n <a href=\"\/jobs\/in-sydney-nsw\/cla_interior-design-6545805\/\">Interior Design Jobs in Sydney<\/a> |\n <a href=\"\/jobs\/in-new-york\/cla_interior-design-6545805\/\">Interior Design Jobs in New York<\/a> |\n <a href=\"\/jobs\/in-melbourne-vic\/cla_interior-design-6545805\/\">Interior Design Jobs in Melbourne<\/a> |\n <a href=\"\/jobs\/in-sydney-nsw\/cla_landscape-and-urban-design\/\">Landscape Jobs in Sydney<\/a> |\n <a href=\"\/jobs\/in-melbourne-vic\/cla_landscape-and-urban-design\/\">Landscape Jobs in Melbourne<\/a> |\n <a href=\"\/jobs\/in-los-angeles\/cla_architecture-6528545\/\">Architecture Jobs in Los Angeles<\/a> |\n <a href=\"\/jobs\/in-los-angeles\/cla_interior-design-6545805\/\">Interior Design Jobs in Los Angeles<\/a> |\n <a href=\"\/jobs\/in-dallas-104690\/cla_architecture-6528545\/\">Architecture Jobs in Dallas<\/a> |\n <a href=\"\/jobs\/in-dallas-104690\/cla_interior-design-6545805\/\">Interior Design Jobs in Dallas<\/a>\n \n\n","protected":false},"excerpt":{"rendered":"<p>Architecture & Design Salary Calculator 2026 Architecture and DesignSalary Calculator 2026 Is your salary keeping pace with the market? Enter your role, location, and salary to benchmark yourself against the 2026 Architecture & Design market. Locations covered \ud83c\uddec\ud83c\udde7 United Kingdom \ud83c\udde6\ud83c\uddfa Australia \ud83c\uddfa\ud83c\uddf8 United States \ud83c\uddf3\ud83c\uddff New Zealand \ud83c\udde6\ud83c\uddea\ud83c\uddf8\ud83c\udde6 Middle East 100+ roles covered 20…<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":5508,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_robots_primary_cat":"","footnotes":""},"class_list":["post-9167","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/pages\/9167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/comments?post=9167"}],"version-history":[{"count":30,"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/pages\/9167\/revisions"}],"predecessor-version":[{"id":10990,"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/pages\/9167\/revisions\/10990"}],"up":[{"embeddable":true,"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/pages\/5508"}],"wp:attachment":[{"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/media?parent=9167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}