{"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-10-07T20:18:44","modified_gmt":"2026-10-07T20:18:44","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<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <title>Architecture &#038; 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    #bespoke-salary-calc {\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      color: #111; padding: 48px 0; overflow-x: hidden;\n    }\n    #bespoke-salary-calc .calc-card {\n      max-width: 1216px; margin: 0 auto; background: #fff;\n      border-radius: 24px; box-shadow: 0 4px 40px rgba(0,0,0,0.08);\n      overflow: hidden; border: 1px solid #e8e8e4;\n    }\n    @media (max-width: 560px) { #bespoke-salary-calc .calc-card { border-radius: 16px; } }\n    #bespoke-salary-calc .split-wrap { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }\n    #bespoke-salary-calc .hero-col, #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    #bespoke-salary-calc .hero-col {\n      padding: 52px 44px; display: flex; flex-direction: column; gap: 28px;\n      background: #f7f7f5; border-right: 1px solid #e8e8e4; overflow: hidden;\n    }\n    @media (max-width: 820px) {\n      #bespoke-salary-calc .hero-col { padding: 28px 24px; border-right: none; border-bottom: 1px solid #e8e8e4; }\n      #bespoke-salary-calc .hero-body, #bespoke-salary-calc .discipline-pills, #bespoke-salary-calc .hero-stats { display: none !important; }\n    }\n    #bespoke-salary-calc .hero-col h1 {\n      font-size: clamp(22px, 2.8vw, 40px); font-weight: 700;\n      letter-spacing: -0.03em; color: #111; line-height: 1.2;\n    }\n    #bespoke-salary-calc .hero-col h1 span { color: #97d422; }\n    #bespoke-salary-calc .hero-sub { font-size: 15px; font-weight: 600; color: #111; line-height: 1.4; }\n    #bespoke-salary-calc .hero-body { font-size: 13px; color: #888; line-height: 1.7; }\n    #bespoke-salary-calc .discipline-pills { display: flex; flex-direction: column; gap: 10px; }\n    #bespoke-salary-calc .discipline-pills-label {\n      font-size: 10px; font-weight: 700; letter-spacing: 0.08em;\n      text-transform: uppercase; color: #bbb;\n    }\n    #bespoke-salary-calc .discipline-pill-list { display: flex; flex-wrap: wrap; gap: 7px; }\n    #bespoke-salary-calc .discipline-pill {\n      display: inline-block; padding: 5px 12px; border-radius: 100px;\n      font-size: 12px; font-weight: 600; color: #2a4a00;\n      background: #eef7d0; border: 1px solid #c8e87a;\n    }\n    #bespoke-salary-calc .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n    #bespoke-salary-calc .hero-stat { display: flex; flex-direction: column; gap: 3px; }\n    #bespoke-salary-calc .hero-stat-num {\n      font-size: 26px; font-weight: 800; color: #97d422;\n      letter-spacing: -0.03em; line-height: 1;\n    }\n    #bespoke-salary-calc .hero-stat span:last-child { font-size: 11px; color: #999; line-height: 1.4; }\n    #bespoke-salary-calc .form-col {\n      padding: 56px 44px; background: #fff;\n      display: flex; flex-direction: column; justify-content: center;\n    }\n    @media (max-width: 820px) { #bespoke-salary-calc .form-col { padding: 24px 24px 36px; } }\n    #bespoke-salary-calc .card-title {\n      font-size: 10px; font-weight: 700; letter-spacing: 0.14em;\n      text-transform: uppercase; color: #ccc; margin-bottom: 22px;\n    }\n    #bespoke-salary-calc .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }\n    @media (max-width: 560px) { #bespoke-salary-calc .form-grid { grid-template-columns: 1fr; } }\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; font-weight: 700; color: #aaa;\n      letter-spacing: 0.06em; text-transform: uppercase;\n    }\n    #bespoke-salary-calc .field-optional {\n      font-size: 10px; font-weight: 400; color: #bbb;\n      letter-spacing: 0.02em; text-transform: none; 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; border: 1.5px solid #e8e8e4; border-radius: 10px;\n      color: #111; font-size: 14px; padding: 13px 14px; width: 100%;\n      outline: none; transition: border-color 0.2s, box-shadow 0.2s;\n      appearance: none; -webkit-appearance: none; font-family: inherit;\n    }\n    #bespoke-salary-calc select:focus, #bespoke-salary-calc select:focus-visible,\n    #bespoke-salary-calc input:focus, #bespoke-salary-calc input:focus-visible {\n      border-color: #97d422 !important; box-shadow: 0 0 0 3px #97d42218 !important;\n      outline: none !important; 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; background-position: right 14px center;\n      background-color: #fafaf8; padding-right: 40px; cursor: pointer;\n    }\n    #bespoke-salary-calc .search-wrap { position: relative; }\n    #bespoke-salary-calc .search-clear {\n      position: absolute; right: 12px; top: 50%; transform: translateY(-50%);\n      background: none; border: none; color: #ccc; cursor: pointer;\n      font-size: 18px; line-height: 1; padding: 0; display: none;\n    }\n    #bespoke-salary-calc .search-clear.visible { display: block; }\n    #bespoke-salary-calc .dropdown-list {\n      position: absolute; top: calc(100% + 6px); left: 0; right: 0;\n      background: #fff; border: 1.5px solid #e8e8e4; border-radius: 12px;\n      max-height: 240px; overflow-y: auto; z-index: 100; 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; font-size: 13px; cursor: pointer;\n      color: #555; border-bottom: 1px solid #f4f4f2; transition: background 0.1s;\n    }\n    #bespoke-salary-calc .dropdown-item:last-child { border-bottom: none; }\n    #bespoke-salary-calc .dropdown-item:hover, #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; border: 1.5px solid #e8e8e4; border-radius: 10px;\n      padding: 13px 12px; font-size: 13px; color: #aaa;\n      white-space: nowrap; min-width: 52px; text-align: center;\n    }\n    #bespoke-salary-calc .btn-calculate {\n      width: 100%; background: #97d422; color: #111; border: none;\n      border-radius: 12px; font-size: 15px; font-weight: 700; padding: 16px;\n      cursor: pointer; letter-spacing: 0.01em;\n      transition: background 0.2s, transform 0.1s; margin-top: 10px; 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 { position: sticky; bottom: 12px; z-index: 5; box-shadow: 0 4px 20px rgba(0,0,0,0.13); }\n    }\n    #bespoke-salary-calc .results-wrap {\n      display: none; border-top: 1px solid #e8e8e4;\n      padding: 40px 44px 48px; background: #fafaf8;\n    }\n    #bespoke-salary-calc .results-wrap.visible { display: block; }\n    @media (max-width: 820px) { #bespoke-salary-calc .results-wrap { padding: 32px 24px 40px; } }\n    #bespoke-salary-calc .result-card { display: none; margin-bottom: 24px; }\n    #bespoke-salary-calc .result-card.visible { display: block; }\n    #bespoke-salary-calc .result-header {\n      display: flex; align-items: flex-start; justify-content: space-between;\n      margin-bottom: 28px; gap: 16px; flex-wrap: wrap;\n    }\n    #bespoke-salary-calc .result-role {\n      font-size: 20px; font-weight: 700; color: #111; letter-spacing: -0.02em;\n    }\n    #bespoke-salary-calc .result-location { font-size: 13px; color: #bbb; margin-top: 4px; }\n    #bespoke-salary-calc .verdict-pill {\n      padding: 7px 18px; border-radius: 100px; font-size: 11px;\n      font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;\n      white-space: nowrap; 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: #111; color: #97d422; border: 1px solid #111; }\n    #bespoke-salary-calc .verdict-overview{ background: #f4f4f2; color: #555; border: 1px solid #ddd; }\n    #bespoke-salary-calc .mode-toggle-wrap { display: flex; flex-direction: column; gap: 6px; }\n    #bespoke-salary-calc .mode-toggle-label {\n      font-size: 11px; font-weight: 700; letter-spacing: 0.06em;\n      text-transform: uppercase; color: #999;\n    }\n    #bespoke-salary-calc .mode-toggle { display: flex; background: #f0f0ee; border-radius: 8px; padding: 3px; gap: 2px; }\n    #bespoke-salary-calc .mode-btn {\n      flex: 1; padding: 8px 10px; border: none; border-radius: 6px;\n      background: transparent; font-size: 12px; font-weight: 500;\n      color: #888; cursor: pointer;\n      transition: background 0.18s, color 0.18s, box-shadow 0.18s;\n      text-align: center; line-height: 1.3; white-space: nowrap; font-family: inherit;\n    }\n    #bespoke-salary-calc .mode-btn:hover { color: #333; }\n    #bespoke-salary-calc .mode-btn.active {\n      background: #fff; color: #111; font-weight: 600;\n      box-shadow: 0 1px 4px rgba(0,0,0,0.1);\n    }\n    #bespoke-salary-calc #salaryFieldWrap { transition: opacity 0.25s, max-height 0.3s; max-height: 120px; overflow: hidden; }\n    #bespoke-salary-calc #salaryFieldWrap.hidden { opacity: 0; max-height: 0; pointer-events: none; margin: 0; }\n    #bespoke-salary-calc .range-section { margin-bottom: 28px; }\n    #bespoke-salary-calc .range-label {\n      font-size: 10px; font-weight: 700; letter-spacing: 0.12em;\n      text-transform: uppercase; color: #ccc; margin-bottom: 14px;\n    }\n    #bespoke-salary-calc .range-bar-wrap {\n      position: relative; height: 6px; background: #eeeeeb;\n      border-radius: 100px; margin-top: 38px; margin-bottom: 12px;\n    }\n    #bespoke-salary-calc .range-mine-label {\n      position: absolute; bottom: calc(100% + 10px); left: 50%;\n      transform: translateX(-50%); font-size: 11px; font-weight: 700;\n      color: #111; white-space: nowrap; pointer-events: none;\n    }\n    #bespoke-salary-calc .range-fill {\n      position: absolute; left: 0; top: 0; bottom: 0;\n      background: linear-gradient(90deg, #d8f0a0, #97d422); border-radius: 100px;\n      transition: width 0.65s cubic-bezier(.4,0,.2,1);\n    }\n    #bespoke-salary-calc .range-marker {\n      position: absolute; top: 50%; transform: translate(-50%, -50%);\n      width: 20px; height: 20px; background: #fff; 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 { position: relative; height: 36px; }\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; grid-template-columns: repeat(3, minmax(0, 1fr));\n      gap: 10px; margin-bottom: 20px;\n    }\n    #bespoke-salary-calc .stat-box {\n      background: #fff; border: 1.5px solid #e8e8e4; border-radius: 14px;\n      padding: clamp(10px, 2.5vw, 18px) clamp(6px, 1.8vw, 16px);\n      text-align: center; min-width: 0;\n    }\n    #bespoke-salary-calc .stat-box.mine { border-color: #97d422; background: #f6fde8; }\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    #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); font-weight: 700; letter-spacing: 0.06em;\n      text-transform: uppercase; color: #ccc; margin-bottom: 6px;\n    }\n    #bespoke-salary-calc .stat-value {\n      font-size: clamp(13px, 3.8vw, 22px); font-weight: 300;\n      color: #666; letter-spacing: -0.02em;\n    }\n    #bespoke-salary-calc .stat-box.mine .stat-value { color: #4a7a00; font-weight: 700; }\n    #bespoke-salary-calc .insight-box {\n      background: #fff; border: 1.5px solid #e8e8e4;\n      border-radius: 14px; padding: 20px 22px;\n    }\n    #bespoke-salary-calc .insight-title {\n      font-size: 14px; font-weight: 700; letter-spacing: -0.01em;\n      color: #111; margin-bottom: 8px;\n    }\n    #bespoke-salary-calc .insight-text { font-size: 14px; color: #777; line-height: 1.7; }\n    #bespoke-salary-calc .insight-text strong { color: #111; font-weight: 600; }\n    #bespoke-salary-calc .error-msg {\n      background: #fff0f0; border: 1px solid #ffd0d0; border-radius: 8px;\n      padding: 12px 16px; font-size: 13px; color: #cc3333; margin-top: 14px; display: none;\n    }\n    #bespoke-salary-calc .error-msg.visible { display: block; }\n    #bespoke-salary-calc .cta-strip {\n      display: none; flex-direction: column; align-items: center; gap: 12px;\n      margin: 32px 0 24px; text-align: center;\n    }\n    #bespoke-salary-calc .cta-strip.visible { display: flex; }\n    #bespoke-salary-calc .cta-strip-label { font-size: 15px; font-weight: 600; color: #111; margin-bottom: 4px; }\n    #bespoke-salary-calc .cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }\n    #bespoke-salary-calc .cta-btn {\n      display: inline-block; padding: 13px 24px; border-radius: 8px;\n      font-size: 14px; font-weight: 600; text-decoration: none;\n      transition: opacity 0.2s, transform 0.15s; white-space: nowrap;\n    }\n    #bespoke-salary-calc .cta-btn:hover { opacity: 0.88; transform: translateY(-1px); }\n    #bespoke-salary-calc .cta-btn-primary { background: #97d422; color: #1a2606; }\n    #bespoke-salary-calc .cta-btn-secondary { background: #fff; color: #111; border: 1.5px solid #d8d8d4; }\n    #bespoke-salary-calc .source-note {\n      text-align: center; font-size: 12px; color: #ccc;\n      margin-top: 28px; 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    @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    #bespoke-salary-calc .city-compare { margin-top: 20px; padding-top: 18px; border-top: 1px solid #f0f0ee; }\n    #bespoke-salary-calc .city-compare-title {\n      font-size: 11px; font-weight: 600; letter-spacing: .07em;\n      text-transform: uppercase; color: #999; margin-bottom: 12px;\n    }\n    #bespoke-salary-calc .city-compare-scroll {\n      display: flex; gap: 10px; overflow-x: auto;\n      padding-bottom: 6px; scrollbar-width: none;\n    }\n    #bespoke-salary-calc .city-compare-scroll::-webkit-scrollbar { display: none; }\n    #bespoke-salary-calc .city-chip {\n      flex: 0 0 auto; background: #f7f7f5; border-radius: 8px;\n      padding: 9px 14px; text-align: center; min-width: 96px;\n    }\n    #bespoke-salary-calc .city-chip-name { font-size: 11px; color: #888; margin-bottom: 3px; }\n    #bespoke-salary-calc .city-chip-avg { font-size: 15px; font-weight: 700; color: #222; }\n    #bespoke-salary-calc .city-chip-sub { font-size: 10px; color: #aaa; margin-top: 2px; }\n    #bespoke-salary-calc .me-disclaimer {\n      background: #fff; border: 1.5px solid #e8e8e4; border-radius: 12px;\n      padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start; margin-top: 4px;\n    }\n    #bespoke-salary-calc .me-disclaimer-body > strong {\n      font-size: 13px; font-weight: 700; color: #111;\n      display: block; margin-bottom: 8px;\n    }\n    #bespoke-salary-calc .me-disclaimer-body p strong { display: inline; font-size: inherit; color: #111; }\n    #bespoke-salary-calc .me-disclaimer-body p {\n      font-size: 12.5px; color: #555; line-height: 1.6; margin: 0 0 8px;\n    }\n    #bespoke-salary-calc .me-disclaimer-body p:last-child { margin-bottom: 0; }\n    #bespoke-salary-calc .needle-tip {\n      margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee;\n      display: flex; gap: 8px; align-items: flex-start;\n    }\n    #bespoke-salary-calc .needle-tip-text { font-size: 13px; color: #555; line-height: 1.6; }\n    #bespoke-salary-calc .needle-tip-label {\n      font-size: 13px; font-weight: 700; letter-spacing: 0;\n      color: #111; display: block; margin-bottom: 3px;\n    }\n    #bespoke-salary-calc .email-optin-wrap { margin-top: 6px; }\n    #bespoke-salary-calc .email-optin-check {\n      display: flex; align-items: center; gap: 9px; cursor: pointer;\n      font-size: 13.5px; font-weight: 600; color: #444; user-select: none;\n    }\n    #bespoke-salary-calc .email-optin-check--subtle {\n      margin-top: 16px; margin-bottom: 12px; font-size: 11px;\n      font-weight: 400; color: #aaa; gap: 6px;\n      text-transform: none; letter-spacing: 0;\n    }\n    #bespoke-salary-calc .email-optin-check--subtle:hover { color: #888; }\n    #bespoke-salary-calc .email-optin-check input[type=\"checkbox\"] {\n      width: 17px; height: 17px; accent-color: #97d422; cursor: pointer; flex-shrink: 0;\n    }\n    #bespoke-salary-calc .email-optin-check--subtle input[type=\"checkbox\"] {\n      width: 13px; height: 13px; accent-color: #aaa;\n    }\n    #bespoke-salary-calc .email-optin-fields {\n      margin-top: 10px; display: flex; flex-direction: row; gap: 8px;\n    }\n    #bespoke-salary-calc .email-optin-fields .field { flex: 1; min-width: 0; }\n    @media (max-width: 600px) { #bespoke-salary-calc .email-optin-fields { flex-direction: column; } }\n    #bespoke-salary-calc .email-optin-input {\n      width: 100%; border: 1.5px solid #ddd; border-radius: 8px;\n      padding: 10px 13px; font-size: 13.5px; color: #333;\n      font-family: inherit; outline: none; transition: border-color 0.15s;\n      background: #fff; box-sizing: border-box;\n    }\n    #bespoke-salary-calc .email-optin-input:focus { border-color: #97d422 !important; box-shadow: 0 0 0 3px #97d42218 !important; outline: none !important; }\n    #bespoke-salary-calc .email-optin-input.input-error { border-color: #e05a5a; background: #fff8f8; }\n    #bespoke-salary-calc .email-optin-input.input-error:focus { border-color: #e05a5a !important; box-shadow: 0 0 0 3px #e05a5a18 !important; }\n    #bespoke-salary-calc .email-optin-sent {\n      display: flex; align-items: center; gap: 7px;\n      font-size: 13px; color: #555; margin-top: 10px;\n    }\n    #bespoke-salary-calc .email-results-wrap {\n      margin-top: 16px; background: #f8f9fb; border: 1px solid #eee;\n      border-radius: 10px; padding: 14px 16px;\n    }\n    #bespoke-salary-calc .email-results-label {\n      font-size: 12px; font-weight: 700; color: #555;\n      letter-spacing: 0.04em; margin-bottom: 9px; text-transform: uppercase;\n    }\n    #bespoke-salary-calc .email-results-row { display: flex; gap: 8px; }\n    #bespoke-salary-calc .email-results-input {\n      flex: 1; border: 1.5px solid #ddd; border-radius: 7px;\n      padding: 9px 12px; font-size: 13.5px; color: #333;\n      font-family: inherit; outline: none; transition: border-color 0.15s; background: #fff;\n    }\n    #bespoke-salary-calc .email-results-input:focus { border-color: #97d422 !important; box-shadow: 0 0 0 3px #97d42218 !important; outline: none !important; }\n    #bespoke-salary-calc .email-results-btn {\n      background: #97d422; color: #fff; border: none; border-radius: 7px;\n      padding: 9px 18px; font-size: 13.5px; font-weight: 700;\n      cursor: pointer; font-family: inherit; transition: background 0.15s; white-space: nowrap;\n    }\n    #bespoke-salary-calc .email-results-btn:hover { background: #85bc1c; }\n    #bespoke-salary-calc .email-results-error { font-size: 12px; color: #e03; margin-top: 6px; }\n    #bespoke-salary-calc .email-results-success {\n      display: flex; align-items: center; gap: 8px;\n      font-size: 13.5px; color: #4a7a0a; font-weight: 600; padding: 4px 0;\n    }\n    #bespoke-salary-calc .try-again-wrap { text-align: center; margin-top: 18px; padding-bottom: 4px; }\n    #bespoke-salary-calc .try-again-btn {\n      font-size: 13px; color: #97d422; cursor: pointer;\n      background: none; border: none; padding: 0; font-family: inherit;\n      text-decoration: underline; text-underline-offset: 3px;\n      text-decoration-color: transparent; transition: text-decoration-color 0.2s;\n    }\n    #bespoke-salary-calc .try-again-btn:hover { text-decoration-color: #97d422; }\n    #bespoke-salary-calc .lead-form-wrap {\n      display: none; margin: 32px 0 24px;\n      background: #fff; border: 1.5px solid #e8e8e4;\n      border-radius: 18px; 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; font-weight: 700; color: #111;\n      letter-spacing: -0.02em; margin-bottom: 6px;\n    }\n    #bespoke-salary-calc .lead-form-sub { font-size: 13px; color: #999; margin-bottom: 22px; }\n    #bespoke-salary-calc .lead-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }\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%; background: #97d422; color: #111;\n      border: none; border-radius: 12px; font-size: 15px;\n      font-weight: 700; padding: 15px; cursor: pointer;\n      transition: background 0.2s; font-family: inherit; margin-top: 4px;\n    }\n    #bespoke-salary-calc .lead-submit-btn:hover { background: #aee849; }\n    #bespoke-salary-calc .lead-success { display: none; text-align: center; padding: 24px 0 8px; }\n    #bespoke-salary-calc .lead-success.visible { display: block; }\n    #bespoke-salary-calc .lead-success-icon { margin-bottom: 14px; display: flex; justify-content: center; }\n    #bespoke-salary-calc .lead-success-icon svg { display: block; }\n    #bespoke-salary-calc .lead-success-title { font-size: 17px; font-weight: 700; color: #111; margin-bottom: 6px; }\n    #bespoke-salary-calc .lead-success-body { font-size: 14px; color: #999; }\n    #bespoke-salary-calc .lead-error { font-size: 12px; color: #cc3333; margin-top: 8px; display: none; }\n    #bespoke-salary-calc .lead-error.visible { display: block; }\n    #bespoke-salary-calc button:focus, #bespoke-salary-calc button:focus-visible,\n    #bespoke-salary-calc button:active, #bespoke-salary-calc a.cta-btn:focus,\n    #bespoke-salary-calc a.cta-btn:focus-visible {\n      outline: none !important;\n    }\n    \/* ===== 2026-10 redesign: open layout, big form ===== *\/\n    #bespoke-salary-calc {\n      font-family: \"F37 Ginger\", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      padding-top: clamp(32px, 7vw, 96px); padding-bottom: 56px; overflow-x: visible;\n    }\n    #bespoke-salary-calc .calc-card {\n      background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;\n    }\n    #bespoke-salary-calc .split-wrap {\n      grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);\n      gap: clamp(40px, 6vw, 88px); align-items: center;\n    }\n    #bespoke-salary-calc .hero-col {\n      padding: 0; background: none; border: 0; gap: 0; overflow: visible;\n    }\n    #bespoke-salary-calc .hero-col h1 {\n      font-size: clamp(38px, 4.8vw, 68px); font-weight: 700;\n      letter-spacing: -0.035em; line-height: 1.04; margin: 0;\n    }\n    #bespoke-salary-calc .hero-sub {\n      font-size: clamp(17px, 1.6vw, 21px); font-weight: 400; color: #555;\n      line-height: 1.45; margin-top: 24px; max-width: 26em;\n    }\n    #bespoke-salary-calc .hero-stats {\n      display: flex; gap: clamp(24px, 3.4vw, 48px); grid-template-columns: none;\n      margin-top: clamp(32px, 4vw, 56px); padding-top: 28px; border-top: 1px solid #e4e4df;\n    }\n    #bespoke-salary-calc .hero-stat { gap: 6px; }\n    #bespoke-salary-calc .hero-stat-num { font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; color: #111; }\n    #bespoke-salary-calc .hero-stat span:last-child { font-size: 14px; color: #777; }\n    #bespoke-salary-calc .form-col {\n      display: block; background: #fff; border-radius: 32px;\n      box-shadow: 0 24px 70px -20px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.05);\n      padding: clamp(24px, 3.2vw, 44px);\n    }\n    #bespoke-salary-calc .form-grid { gap: 20px 16px; }\n    #bespoke-salary-calc .field { gap: 9px; }\n    #bespoke-salary-calc label {\n      font-size: 14px; font-weight: 600; color: #111;\n      letter-spacing: 0; text-transform: none;\n    }\n    #bespoke-salary-calc .field-optional { font-size: 13px; font-weight: 400; color: #8a8a84; margin-left: 4px; }\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    #bespoke-salary-calc .email-optin-input {\n      height: 60px; padding: 0 20px; font-size: 17px; line-height: normal;\n      background-color: #f5f5f2; border: 1.5px solid transparent; border-radius: 16px;\n      color: #111; box-shadow: none;\n    }\n    #bespoke-salary-calc select { padding-right: 46px; background-position: right 20px center; text-overflow: ellipsis; }\n    #bespoke-salary-calc input::placeholder { color: #9a9a94; opacity: 1; }\n    #bespoke-salary-calc select:focus, #bespoke-salary-calc select:focus-visible,\n    #bespoke-salary-calc input:focus, #bespoke-salary-calc input:focus-visible {\n      background-color: #fff; border-color: #97d422 !important; box-shadow: 0 0 0 4px #97d42240 !important;\n    }\n    #bespoke-salary-calc select:disabled, #bespoke-salary-calc input:disabled { background-color: #f5f5f2; color: #a3a39d; opacity: 1; cursor: not-allowed; }\n    #bespoke-salary-calc input:disabled::placeholder { color: #b0b0aa; }\n    #bespoke-salary-calc .search-clear { right: 18px; font-size: 22px; color: #999; }\n    #bespoke-salary-calc .dropdown-list {\n      border: 0; border-radius: 16px; max-height: 300px; padding: 6px;\n      box-shadow: 0 16px 48px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.05);\n    }\n    #bespoke-salary-calc .dropdown-item { padding: 12px 14px; font-size: 16px; border: 0; border-radius: 10px; color: #333; }\n    #bespoke-salary-calc .dropdown-item .cat { font-size: 13px; color: #999; }\n    #bespoke-salary-calc .salary-row { gap: 10px; }\n    #bespoke-salary-calc .currency-badge {\n      height: 60px; min-width: 68px; padding: 0 16px; border: 0; border-radius: 16px;\n      background: #f5f5f2; font-size: 16px; font-weight: 600; color: #111;\n      display: flex; align-items: center; justify-content: center;\n    }\n    #bespoke-salary-calc #salaryFieldWrap { max-height: 140px; overflow: visible; }\n    #bespoke-salary-calc #salaryFieldWrap.hidden { overflow: hidden; }\n    #bespoke-salary-calc .mode-toggle { background: #f5f5f2; border-radius: 18px; padding: 5px; gap: 4px; }\n    #bespoke-salary-calc .mode-btn {\n      height: 52px; padding: 0 12px; border-radius: 14px;\n      font-size: 16px; font-weight: 600; color: #6b6b66;\n    }\n    #bespoke-salary-calc .mode-btn:hover { color: #111; }\n    #bespoke-salary-calc .mode-btn.active { background: #fff; color: #111; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,0.10); }\n    #bespoke-salary-calc .email-optin-wrap { margin-top: 20px; }\n    #bespoke-salary-calc .email-optin-fields { margin-top: 16px; gap: 16px; }\n    #bespoke-salary-calc .email-optin-check--subtle { margin-top: 0; margin-bottom: 0; font-size: 16px; font-weight: 600; color: #111; gap: 11px; }\n    #bespoke-salary-calc .email-optin-check--subtle:hover { color: #111; }\n    #bespoke-salary-calc .email-optin-check--subtle input[type=\"checkbox\"] { width: 20px; height: 20px; accent-color: #97d422; }\n    #bespoke-salary-calc .email-optin-sent { font-size: 15px; color: #111; }\n    #bespoke-salary-calc .error-msg { background: #fff0f0; color: #c02020; border: 0; border-radius: 14px; font-size: 15px; padding: 14px 18px; margin-top: 18px; }\n    #bespoke-salary-calc .btn-calculate {\n      height: 68px; padding: 0 24px; margin-top: 24px; border-radius: 100px;\n      font-size: 19px; font-weight: 700; letter-spacing: -0.01em;\n      transition: background 0.2s, transform 0.15s, box-shadow 0.2s;\n    }\n    #bespoke-salary-calc .btn-calculate:hover { background: #a6e332; transform: translateY(-2px); box-shadow: 0 12px 28px #97d42255; }\n    #bespoke-salary-calc .btn-calculate:active { transform: translateY(0) scale(0.99); }\n    #bespoke-salary-calc .results-wrap {\n      border: 0; border-radius: 28px; background: #f7f7f5;\n      margin-top: clamp(40px, 6vw, 80px); padding: clamp(28px, 4vw, 56px);\n    }\n    #bespoke-salary-calc .result-role { font-size: clamp(22px, 2.4vw, 30px); }\n    #bespoke-salary-calc .result-location { font-size: 15px; color: #777; }\n    #bespoke-salary-calc .insight-title { font-size: 16px; }\n    #bespoke-salary-calc .insight-text, #bespoke-salary-calc .needle-tip-text { font-size: 16px; color: #555; }\n    @media (min-width: 821px) and (max-width: 1280px) {\n      #bespoke-salary-calc { padding-left: 24px; padding-right: 24px; }\n    }\n    @media (max-width: 820px) {\n      #bespoke-salary-calc .split-wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }\n      #bespoke-salary-calc .hero-sub { margin-top: 16px; }\n      #bespoke-salary-calc .hero-col { padding: 0; border: 0; }\n      #bespoke-salary-calc .hero-stats { display: none !important; }\n      #bespoke-salary-calc .form-col { padding: 22px 18px 24px; border-radius: 24px; }\n      #bespoke-salary-calc .mode-btn { font-size: 14px; padding: 0 6px; }\n      #bespoke-salary-calc .results-wrap { border-radius: 20px; }\n    }\n    #bespoke-salary-calc .email-results-wrap { background: #fff; border: 0; border-radius: 20px; padding: 24px; margin-top: 24px; }\n    #bespoke-salary-calc .email-results-label { font-size: 17px; font-weight: 700; color: #111; letter-spacing: 0; text-transform: none; margin-bottom: 14px; }\n    #bespoke-salary-calc .email-results-row { gap: 10px; flex-wrap: wrap; }\n    #bespoke-salary-calc .email-results-input { height: 56px; flex: 1 1 200px; }\n    #bespoke-salary-calc .email-results-btn { height: 56px; padding: 0 32px; border-radius: 100px; font-size: 16px; color: #111; }\n    #bespoke-salary-calc .email-results-btn:hover { background: #a6e332; }\n    \/* ===== results ===== *\/\n    #bespoke-salary-calc .results-wrap { background: none; padding: 0; border-radius: 0; }\n    #bespoke-salary-calc .result-card { margin-bottom: 0; }\n    #bespoke-salary-calc .res-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }\n    #bespoke-salary-calc .res-main { background: #f7f7f5; border-radius: 32px; padding: clamp(24px, 3.4vw, 48px); min-width: 0; }\n    #bespoke-salary-calc .res-side { display: flex; min-width: 0; }\n    #bespoke-salary-calc .result-header { margin-bottom: clamp(24px, 3vw, 40px); align-items: center; }\n    #bespoke-salary-calc .result-role { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; }\n    #bespoke-salary-calc .result-location { font-size: 15px; color: #777; margin-top: 6px; }\n    #bespoke-salary-calc .verdict-pill { font-size: 13px; letter-spacing: 0.04em; padding: 10px 20px; }\n    #bespoke-salary-calc .verdict-top { background: #97d422; color: #111; border-color: #97d422; }\n    #bespoke-salary-calc .stat-box.mine,\n    #bespoke-salary-calc .stat-box.mine.v-red,\n    #bespoke-salary-calc .stat-box.mine.v-amber { background: none; border: 0; border-radius: 0; padding: 0; text-align: left; }\n    #bespoke-salary-calc .stat-box.mine .stat-label { font-size: 15px; font-weight: 400; color: #777; letter-spacing: 0; text-transform: none; margin-bottom: 4px; }\n    #bespoke-salary-calc .stat-box.mine .stat-value { font-size: clamp(44px, 5.4vw, 76px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: #111; }\n    #bespoke-salary-calc .range-section { margin: clamp(20px, 2.4vw, 32px) -18px 0; padding: 40px 18px 0; overflow: hidden; }\n    #bespoke-salary-calc .range-label { display: none; }\n    #bespoke-salary-calc .range-bar-wrap { height: 16px; background: #e6e6e1; margin-top: 0; margin-bottom: 14px; }\n    #bespoke-salary-calc .range-fill { left: 0; right: auto; background: #97d422; }\n    #bespoke-salary-calc .range-avg { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: #111; border-radius: 2px; left: 50%; }\n    #bespoke-salary-calc .range-marker { width: 30px; height: 30px; box-shadow: 0 0 0 3px #111, 0 4px 12px rgba(0,0,0,0.18); }\n    #bespoke-salary-calc .range-marker.v-red   { box-shadow: 0 0 0 3px #e05050, 0 4px 12px rgba(0,0,0,0.18); }\n    #bespoke-salary-calc .range-marker.v-amber { box-shadow: 0 0 0 3px #d99000, 0 4px 12px rgba(0,0,0,0.18); }\n    #bespoke-salary-calc .range-mine-label { font-size: 14px; bottom: calc(100% + 12px); }\n    #bespoke-salary-calc .range-ticks { height: 40px; }\n    #bespoke-salary-calc .range-tick { font-size: 14px; color: #666; }\n    #bespoke-salary-calc .stats-grid { gap: 12px; margin: 20px 0 0; }\n    #bespoke-salary-calc .stat-box { background: #fff; border: 0; border-radius: 18px; padding: 18px 20px; text-align: left; }\n    #bespoke-salary-calc .stat-label { font-size: 13px; font-weight: 400; color: #777; letter-spacing: 0; text-transform: none; margin-bottom: 6px; }\n    #bespoke-salary-calc .stat-value { font-size: clamp(20px, 2.2vw, 30px); font-weight: 700; color: #111; }\n    #bespoke-salary-calc .insight-box { flex: 1; background: #fff; border: 1.5px solid #e6e6e1; border-radius: 32px; padding: clamp(24px, 3vw, 40px); }\n    #bespoke-salary-calc .insight-title { font-size: 20px; margin-bottom: 14px; }\n    #bespoke-salary-calc .insight-text, #bespoke-salary-calc .needle-tip-text { font-size: 17px; line-height: 1.65; color: #444; }\n    #bespoke-salary-calc .needle-tip { margin-top: 20px; padding-top: 20px; border-top: 1.5px solid #e6e6e1; }\n    #bespoke-salary-calc .needle-tip-label { font-size: 17px; margin-bottom: 6px; }\n    #bespoke-salary-calc .me-disclaimer { background: #f7f7f5; border: 0; border-radius: 24px; padding: 28px; margin-top: 24px; }\n    #bespoke-salary-calc .me-disclaimer-body > strong { font-size: 18px; margin-bottom: 10px; }\n    #bespoke-salary-calc .me-disclaimer-body p { font-size: 15px; line-height: 1.65; }\n    #bespoke-salary-calc .city-compare { margin-top: clamp(36px, 4.5vw, 64px); padding-top: 0; border-top: 0; }\n    #bespoke-salary-calc .city-compare-title { font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -0.02em; text-transform: none; color: #111; margin-bottom: 20px; }\n    #bespoke-salary-calc .city-compare-title span { font-size: 15px; font-weight: 400; letter-spacing: 0; color: #888; margin-left: 6px; }\n    #bespoke-salary-calc .city-compare-scroll { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; overflow: visible; padding-bottom: 0; }\n    #bespoke-salary-calc .city-chip { background: #f7f7f5; border-radius: 20px; padding: 20px; text-align: left; min-width: 0; }\n    #bespoke-salary-calc .city-chip-name { font-size: 15px; font-weight: 600; color: #111; margin-bottom: 10px; }\n    #bespoke-salary-calc .city-chip-avg { font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -0.02em; color: #111; white-space: nowrap; }\n    #bespoke-salary-calc .city-chip-sub { font-size: 13px; color: #888; margin-top: 4px; }\n    #bespoke-salary-calc .city-chip-role { font-size: 13px; color: #666; line-height: 1.35; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e3e3de; }\n    #bespoke-salary-calc .cta-strip { margin: clamp(40px, 5vw, 72px) 0 0; gap: 18px; }\n    #bespoke-salary-calc .cta-strip-label { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0; }\n    #bespoke-salary-calc .cta-btn { padding: 0 28px; height: 56px; line-height: 56px; border-radius: 100px; font-size: 16px; font-weight: 700; }\n    #bespoke-salary-calc .cta-btn-primary { color: #111; }\n    #bespoke-salary-calc .email-results-wrap { background: #f7f7f5; max-width: 760px; margin: 32px auto 0; }\n    #bespoke-salary-calc .email-results-input { background: #fff; }\n    #bespoke-salary-calc .try-again-wrap { margin-top: 28px; }\n    #bespoke-salary-calc .try-again-btn { font-size: 16px; font-weight: 600; color: #111; text-decoration-color: #97d422; text-decoration-thickness: 2px; }\n    #bespoke-salary-calc .lead-form-wrap { background: #f7f7f5; border: 0; border-radius: 32px; padding: clamp(24px, 3.4vw, 48px); margin: 40px 0 0; }\n    #bespoke-salary-calc .lead-form-wrap input { background-color: #fff; }\n    #bespoke-salary-calc .lead-form-title { font-size: clamp(20px, 2vw, 26px); }\n    #bespoke-salary-calc .lead-form-sub { font-size: 16px; color: #666; }\n    #bespoke-salary-calc .lead-form-grid { gap: 16px; }\n    #bespoke-salary-calc .lead-submit-btn { height: 60px; padding: 0 24px; border-radius: 100px; font-size: 17px; }\n    #bespoke-salary-calc .source-note { font-size: 13px; color: #999; margin-top: 40px; }\n    #bespoke-salary-calc .source-note strong { color: #777; }\n    @media (max-width: 960px) {\n      #bespoke-salary-calc .res-grid { grid-template-columns: minmax(0, 1fr); }\n      #bespoke-salary-calc .res-main, #bespoke-salary-calc .insight-box { border-radius: 24px; }\n    }\n    @media (max-width: 560px) {\n      #bespoke-salary-calc .stats-grid { gap: 8px; }\n      #bespoke-salary-calc .stat-box { padding: 14px 12px; border-radius: 14px; }\n      #bespoke-salary-calc .stats-grid .stat-value { font-size: 16px; white-space: nowrap; letter-spacing: -0.03em; }\n      #bespoke-salary-calc .stats-grid .stat-label { font-size: 12px; white-space: nowrap; }\n      #bespoke-salary-calc .stats-grid .stat-box { padding: 12px 10px; }\n      #bespoke-salary-calc .city-compare-scroll { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n      #bespoke-salary-calc .cta-buttons { flex-direction: column; width: 100%; }\n      #bespoke-salary-calc .cta-btn { text-align: center; }\n    }\n    #bespoke-salary-calc .hero-col h1 { text-wrap: balance; }\n    #bespoke-salary-calc .hero-col h1 span.h1-sub {\n      display: block; margin-top: 24px; color: #555;\n      font-size: clamp(17px, 1.6vw, 21px); font-weight: 400; letter-spacing: 0; line-height: 1.45;\n    }\n    @media (max-width: 820px) { #bespoke-salary-calc .hero-col h1 span.h1-sub { margin-top: 14px; } }\n    \/* fields: white with a clear outline *\/\n    #bespoke-salary-calc .form-col select,\n    #bespoke-salary-calc .form-col input[type=\"text\"],\n    #bespoke-salary-calc .form-col input[type=\"email\"],\n    #bespoke-salary-calc .form-col .email-optin-input,\n    #bespoke-salary-calc .form-col .currency-badge { background-color: #fff; border: 1.5px solid #c9c9c2; }\n    #bespoke-salary-calc .form-col select:hover:not(:disabled),\n    #bespoke-salary-calc .form-col input:hover:not(:disabled) { border-color: #111; }\n    #bespoke-salary-calc .form-col input::placeholder { color: #767670; }\n    #bespoke-salary-calc .form-col select:disabled,\n    #bespoke-salary-calc .form-col input:disabled { background-color: #f5f5f2; border-color: #e2e2dc; color: #8a8a84; }\n    #bespoke-salary-calc .form-col input:disabled::placeholder { color: #9a9a94; }\n    #bespoke-salary-calc .form-col .email-optin-input.input-error { border-color: #e05a5a; background-color: #fff8f8; }\n    #bespoke-salary-calc .mode-toggle { background: #ecece7; }\n    #bespoke-salary-calc .mode-btn { color: #555; }\n    \/* mobile polish *\/\n    #bespoke-salary-calc .email-results-row input.email-results-input,\n    #bespoke-salary-calc .lead-form-wrap .field input { background-color: #fff; border: 1.5px solid #c9c9c2; }\n    #bespoke-salary-calc .search-clear { width: 44px; height: 44px; right: 6px; }\n    #bespoke-salary-calc .try-again-btn { padding: 12px 8px; }\n    @media (max-width: 560px) {\n      #bespoke-salary-calc .email-results-row { flex-direction: column; }\n      #bespoke-salary-calc .email-results-row input.email-results-input { flex: none; width: 100%; }\n      #bespoke-salary-calc .email-results-btn { width: 100%; }\n      #bespoke-salary-calc .email-results-wrap { padding: 20px; }\n    }\n<\/style>\n<\/head>\n<body>\n      <h1>Are you paid what you&rsquo;re worth? Architecture and design salary calculator 2026<\/h1>\n        20global cities\n        100+roles covered\n        1,890survey responses\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&hellip;<\/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)<\/label>\n          <select id=\"categorySelect\" disabled><option value=\"\">Select location first&hellip;<\/option><\/select>\n          <label>Job title<\/label>\n            <input type=\"text\" id=\"jobSearch\" placeholder=\"Search or select a job title&hellip;\" autocomplete=\"off\" disabled \/>\n            <button id=\"searchClear\" title=\"Clear\">&times;<\/button>\n          <label id=\"salaryLabel\">Your annual base salary (excl. bonus)<\/label>\n            &mdash;\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        <label>\n          <input type=\"checkbox\" id=\"emailOptinCheck\" onchange=\"toggleEmailOptin()\" \/>\n          Email me my results\n        <\/label>\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          Sent &#8211; check your inbox.\n      <button id=\"calcBtn\" onclick=\"calculate()\">Calculate My Position &rarr;<\/button>\n              &mdash;\n              &mdash;\n            &mdash;\n            Your salary\n            &mdash;\n            Salary range\n            Market low&mdash;\n            Market avg&mdash;\n            Market high&mdash;\n            Bespoke Careers Insight\n            &mdash;\n                Advice from our team\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&ndash;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 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        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\">Download the Full Salary Guide<\/a>\n        <a href=\"https:\/\/www.bespokecareers.com\/contact\" id=\"ctaSecondary\" target=\"_blank\" rel=\"noopener\">Talk to Our Team<\/a>\n        <a href=\"https:\/\/www.bespokecareers.com\/contractors\/\" id=\"ctaContractors\" target=\"_blank\" rel=\"noopener\">Explore Contract Roles<\/a>\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 &#8211; check your inbox.\n      <button onclick=\"tryAgain()\">&larr; Try another role<\/button>\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><input type=\"text\" id=\"leadName\" placeholder=\"Your name\" autocomplete=\"name\" \/>\n          <label>Company<\/label><input type=\"text\" id=\"leadCompany\" placeholder=\"Company name\" autocomplete=\"organization\" \/>\n          <label>Email<\/label><input type=\"email\" id=\"leadEmail\" placeholder=\"you@company.com\" autocomplete=\"email\" \/>\n          <label>Phone<\/label><input type=\"tel\" id=\"leadPhone\" placeholder=\"+1 555 000 0000\" autocomplete=\"tel\" \/>\n        <button onclick=\"submitLead()\">Get in Touch &rarr;<\/button>\n        Please enter your name and email to continue.\n        Thanks! We&#8217;ll be in touch shortly.\n        One of our consultants will reach out to discuss your hiring needs.\n    Source: Bespoke Careers <strong>Global Salary Guide 2026<\/strong> &middot; 1,890 survey responses, 1,200+ placements, 3,000+ live vacancies &middot; Australian figures updated 1 July 2026\n<\/body>\n<\/html>\n\t<style>\n#jobs-footer-wrap{background:#fff;position:relative}\n\/* The site footer (.af-footer) has a 64px rounded top and every element\n   between it and <html> is transparent, so the page showed through the two\n   corner notches as grey slivers. This carries the white on down behind\n   them; the lime footer paints over the middle and leaves only the notches\n   filled. Height is the footer's radius, so they stay in step. *\/\n#jobs-footer-wrap::after{content:'';position:absolute;left:0;right:0;top:100%;\n  height:64px;background:#fff;pointer-events:none}\n#jobs-footer-wrap .jf-inner{\n  max-width:1216px;margin:0 auto;padding:44px 0 56px;\n  font-family:'F37 Ginger',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;\n  -webkit-font-smoothing:antialiased;\n}\n@media(max-width:1256px){#jobs-footer-wrap .jf-inner{padding-left:20px;padding-right:20px}}\n#jobs-footer-wrap .jf-block + .jf-block{margin-top:30px}\n#jobs-footer-wrap .jf-h{\n  font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.3;\n  color:#0F0F0F;margin:0 0 14px;\n}\n#jobs-footer-wrap .jf-pills{display:flex;flex-wrap:wrap;gap:9px}\n#jobs-footer-wrap .jf-pills a{\n  display:inline-flex;align-items:center;gap:7px;\n  padding:9px 17px;border:1px solid #e4e4df;border-radius:999px;\n  background:#fff;color:#0F0F0F;font-size:14px;line-height:1.2;\n  text-decoration:none !important;\n  transition:background .16s ease,border-color .16s ease,color .16s ease;\n}\n#jobs-footer-wrap .jf-pills a:hover{background:#0F0F0F;border-color:#0F0F0F;color:#fff}\n#jobs-footer-wrap .jf-pills a:focus-visible{outline:3px solid rgba(151,212,34,.6);outline-offset:2px}\n#jobs-footer-wrap .jf-pills svg{width:15px;height:15px;opacity:.45;flex:none}\n#jobs-footer-wrap .jf-pills a:hover svg{opacity:.8}\n@media(max-width:600px){\n  #jobs-footer-wrap .jf-inner{padding-top:32px;padding-bottom:40px}\n  #jobs-footer-wrap .jf-pills a{padding:8px 15px;font-size:13.5px}\n}\n<\/html><\/style>\n    <section data-jf-related hidden>\n      <h2 data-jf-related-h>Related searches<\/h2>\n    <\/section>\n    <section>\n      <h2>Browse by category<\/h2>\n    <\/section>\n\n","protected":false},"excerpt":{"rendered":"<p>Architecture &#038; Design Salary Calculator 2026 Are you paid what you&rsquo;re worth? Architecture and design salary calculator 2026 20global cities 100+roles covered 1,890survey responses Benchmark my salary Explore market rates Location Select a city&hellip;LondonManchester SydneyMelbourneBrisbaneAdelaidePerth New YorkLos AngelesSan FranciscoDallasAustinHoustonSan Antonio AucklandWellingtonChristchurchQueenstown DubaiRiyadh Category (optional) Select location first&hellip; Job title &times; Your annual base salary (excl.&hellip;<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":5508,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_titles_title":"How much do architects earn? | Architecture salary calculator %%currentyear%%","_seopress_titles_desc":"Salary calculator for 100 job roles in architecture and design across 20 global cities. Benchmark your salary today","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"https:\/\/cdn-01.cms-eu-v2i.applyflow.com\/bespoke\/wp-content\/uploads\/2026\/03\/Screenshot-2026-03-12-at-5.40.41\u202fPM.png","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"https:\/\/cdn-01.cms-eu-v2i.applyflow.com\/bespoke\/wp-content\/uploads\/2026\/03\/Screenshot-2026-03-12-at-5.40.41\u202fPM.png","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"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":17882,"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/pages\/9167\/revisions\/17882"}],"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}]}}