Ash Cardy \u2013 Colour Booking Request<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\">\n\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --bg: #0D0D0D;\n --surface: #141414;\n --input-bg: #1C1C1C;\n --border: #2A2A2A;\n --accent: #FFFFFF;\n --accent-dim:#2A2A2A;\n --text: #F0EDE8;\n --muted: #666260;\n --error: #AAAAAA;\n --radius: 4px;\n --transition: 0.2s ease;\n }\n\n \/* \u2500\u2500 WordPress theme override \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Force our background across common theme wrapper elements.\n Covers Breakdance, Astra, GeneratePress, Twenty* etc. *\/\n html,\n body {\n background: var(--bg) !important;\n background-color: var(--bg) !important;\n color: var(--text) !important;\n }\n\n \/* Catch-all for theme page wrappers *\/\n #page, #wrapper, #content, #main, #primary,\n .site, .site-content, .site-inner,\n .content-area, .entry-content,\n main, article,\n [class*=\"bde-\"], [class*=\"breakdance\"],\n [class*=\"elementor-section\"], [class*=\"elementor-container\"],\n .page-content, .hentry {\n background: var(--bg) !important;\n background-color: var(--bg) !important;\n }\n\n \/* Remove theme padding\/margin around our content *\/\n .entry-content { padding: 0 !important; max-width: 100% !important; margin: 0 !important; }\n .entry-content > *:first-child { margin-top: 0 !important; }\n\n body {\n font-family: 'DM Sans', sans-serif;\n font-weight: 300;\n background: var(--bg) !important;\n color: var(--text);\n min-height: 100vh;\n padding: 0;\n margin: 0;\n -webkit-font-smoothing: antialiased;\n }\n\n\n \/* \u2500\u2500 Logo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .site-logo {\n margin-bottom: 40px;\n }\n\n .logo-img {\n height: 48px;\n width: auto;\n display: block;\n \/* The logo has a grey box bg baked in \u2014 mix-blend-mode lightens it on dark bg *\/\n mix-blend-mode: screen;\n opacity: 0.92;\n }\n\n \/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .form-hero {\n padding: 72px 24px 48px;\n max-width: 680px;\n margin: 0 auto;\n border-bottom: 1px solid var(--border);\n }\n\n .form-eyebrow {\n font-family: 'DM Sans', sans-serif;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.22em;\n text-transform: uppercase;\n color: var(--muted);\n margin-bottom: 20px;\n }\n\n \/* Grunge title block *\/\n .form-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(72px, 18vw, 148px);\n font-weight: 400;\n line-height: 0.88;\n letter-spacing: 0.02em;\n text-transform: uppercase;\n color: #FFFFFF !important;\n -webkit-text-fill-color: #FFFFFF !important;\n margin-bottom: 24px;\n \/* Subtle texture via text-shadow stack *\/\n text-shadow:\n 2px 2px 0px #000,\n -1px -1px 0px #1a1a1a,\n 3px 0px 8px rgba(0,0,0,0.8);\n }\n\n\n\n .form-subtitle {\n font-size: 13px;\n color: var(--muted);\n line-height: 1.7;\n max-width: 440px;\n border-left: 1px solid var(--border);\n padding-left: 16px;\n }\n\n \/* \u2500\u2500 Form wrapper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .form-wrap {\n max-width: 680px;\n margin: 0 auto;\n padding: 0 24px 80px;\n }\n\n \/* \u2500\u2500 Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .form-section {\n margin-top: 56px;\n }\n\n .section-label {\n font-family: 'DM Sans', sans-serif;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: var(--muted);\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 28px;\n }\n\n .section-label::after {\n content: '';\n flex: 1;\n height: 1px;\n background: var(--border);\n }\n\n .section-label span.accent-dot {\n color: var(--muted);\n margin-right: 6px;\n }\n\n \/* \u2500\u2500 Field \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .field {\n margin-bottom: 24px;\n position: relative;\n }\n\n .field-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n }\n\n @media (max-width: 520px) {\n .field-row { grid-template-columns: 1fr; }\n }\n\n label {\n display: block;\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--muted);\n margin-bottom: 8px;\n transition: color var(--transition);\n }\n\n .field:focus-within > label,\n .field:focus-within .field-inner > label {\n color: var(--text);\n }\n\n .req {\n color: var(--muted);\n margin-left: 2px;\n }\n\n input[type=\"text\"],\n input[type=\"email\"],\n input[type=\"tel\"],\n textarea,\n select {\n width: 100%;\n background: var(--input-bg);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n color: var(--text);\n font-family: 'DM Sans', sans-serif;\n font-size: 15px;\n font-weight: 300;\n padding: 14px 16px;\n outline: none;\n transition: border-color var(--transition), background var(--transition);\n appearance: none;\n -webkit-appearance: none;\n }\n\n input::placeholder,\n textarea::placeholder { color: #383533; }\n\n input:focus,\n textarea:focus,\n select:focus {\n border-color: #555;\n background: #191919;\n }\n\n input.error,\n textarea.error,\n select.error {\n border-color: #555;\n }\n\n .error-msg {\n font-size: 11px;\n color: var(--muted);\n margin-top: 6px;\n display: none;\n letter-spacing: 0.05em;\n }\n\n .error-msg.show { display: block; }\n\n textarea {\n resize: vertical;\n min-height: 96px;\n line-height: 1.6;\n }\n\n select {\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666260' stroke-width='1.5' stroke-linecap='round'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 14px center;\n padding-right: 40px;\n cursor: pointer;\n }\n\n select option {\n background: #1C1C1C;\n color: var(--text);\n }\n\n \/* \u2500\u2500 Radio \/ Checkbox Pills \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .pill-group {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 2px;\n }\n\n .pill-group.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }\n .pill-group.cols-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }\n\n @media (max-width: 480px) {\n .pill-group.cols-3 { grid-template-columns: 1fr 1fr; }\n }\n\n .pill-option {\n position: relative;\n }\n\n .pill-option input[type=\"radio\"],\n .pill-option input[type=\"checkbox\"] {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .pill-option label {\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 12px 16px;\n background: var(--input-bg);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n cursor: pointer;\n font-size: 13px;\n font-weight: 400;\n letter-spacing: 0.04em;\n text-transform: none;\n color: var(--muted);\n transition: all var(--transition);\n line-height: 1.3;\n min-height: 48px;\n margin: 0;\n }\n\n .pill-option input:checked + label {\n background: var(--text);\n border-color: var(--text);\n color: #0D0D0D;\n font-weight: 500;\n }\n\n .pill-option label:hover {\n border-color: #444;\n color: var(--text);\n }\n\n \/* \u2500\u2500 File upload \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .upload-zone {\n position: relative;\n border: 1px dashed var(--border);\n border-radius: var(--radius);\n padding: 32px 20px;\n text-align: center;\n cursor: pointer;\n transition: border-color var(--transition), background var(--transition);\n background: var(--input-bg);\n }\n\n .upload-zone:hover,\n .upload-zone.dragover {\n border-color: #555;\n background: #191919;\n }\n\n .upload-zone input[type=\"file\"] {\n position: absolute;\n inset: 0;\n opacity: 0;\n cursor: pointer;\n width: 100%;\n height: 100%;\n padding: 0;\n border: none;\n background: none;\n }\n\n .upload-icon {\n width: 28px;\n height: 28px;\n margin: 0 auto 10px;\n opacity: 0.3;\n }\n\n .upload-text {\n font-size: 13px;\n color: var(--muted);\n line-height: 1.6;\n }\n\n .upload-text strong {\n color: var(--text);\n font-weight: 400;\n }\n\n .upload-hint {\n font-size: 11px;\n color: #444;\n margin-top: 6px;\n }\n\n .file-list {\n margin-top: 10px;\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .file-tag {\n display: flex;\n align-items: center;\n gap: 8px;\n background: #1A1A1A;\n border: 1px solid var(--border);\n border-radius: 3px;\n padding: 6px 10px;\n font-size: 12px;\n color: var(--muted);\n }\n\n .file-tag span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n .file-remove {\n background: none;\n border: none;\n color: var(--muted);\n cursor: pointer;\n font-size: 16px;\n line-height: 1;\n padding: 0 2px;\n transition: color var(--transition);\n }\n .file-remove:hover { color: var(--text); }\n\n \/* \u2500\u2500 Conditional reveal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .conditional {\n overflow: hidden;\n max-height: 0;\n opacity: 0;\n transition: max-height 0.35s ease, opacity 0.25s ease;\n pointer-events: none;\n }\n\n .conditional.open {\n max-height: 300px;\n opacity: 1;\n pointer-events: auto;\n }\n\n \/* \u2500\u2500 Terms \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .terms-list {\n display: flex;\n flex-direction: column;\n gap: 14px;\n }\n\n .term-item {\n display: flex;\n align-items: flex-start;\n gap: 14px;\n cursor: pointer;\n }\n\n .term-item input[type=\"checkbox\"] {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .term-check {\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n border: 1px solid var(--border);\n border-radius: 2px;\n background: var(--input-bg);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 1px;\n transition: all var(--transition);\n }\n\n .term-item input:checked ~ .term-check {\n background: var(--text);\n border-color: var(--text);\n }\n\n .term-check svg { display: none; }\n .term-item input:checked ~ .term-check svg { display: block; }\n\n .term-text {\n font-size: 13px;\n color: var(--muted);\n line-height: 1.6;\n }\n\n \/* \u2500\u2500 Submit \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .submit-wrap {\n margin-top: 48px;\n padding-top: 40px;\n border-top: 1px solid var(--border);\n }\n\n .submit-note {\n font-size: 12px;\n color: var(--muted);\n margin-bottom: 20px;\n line-height: 1.6;\n }\n\n .btn-submit {\n display: flex;\n align-items: center;\n gap: 12px;\n background: var(--text);\n color: #0D0D0D;\n border: none;\n border-radius: var(--radius);\n font-family: 'DM Sans', sans-serif;\n font-size: 13px;\n font-weight: 500;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n padding: 18px 36px;\n cursor: pointer;\n transition: background var(--transition), color var(--transition), transform var(--transition);\n width: 100%;\n justify-content: center;\n }\n\n .btn-submit:hover {\n background: #CCCCCC;\n }\n\n .btn-submit:active { transform: scale(0.98); }\n .btn-submit:disabled {\n background: #2A2A2A;\n color: #555;\n cursor: not-allowed;\n }\n\n .btn-arrow {\n transition: transform var(--transition);\n }\n .btn-submit:not(:disabled):hover .btn-arrow { transform: translateX(4px); }\n\n \/* \u2500\u2500 Success state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .form-success {\n display: none;\n text-align: center;\n padding: 80px 24px;\n }\n\n .form-success.show { display: block; }\n\n .success-icon {\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background: #1C1C1C;\n border: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 24px;\n }\n\n .success-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(56px, 12vw, 100px);\n font-weight: 400;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n line-height: 0.9;\n margin-bottom: 20px;\n text-shadow: 2px 2px 0px #000;\n }\n\n .success-body {\n font-size: 14px;\n color: var(--muted);\n line-height: 1.7;\n }\n\n \/* \u2500\u2500 Spinner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .spinner {\n width: 16px;\n height: 16px;\n border: 2px solid rgba(0,0,0,0.3);\n border-top-color: #0D0D0D;\n border-radius: 50%;\n animation: spin 0.7s linear infinite;\n display: none;\n }\n\n .btn-submit.loading .spinner { display: block; }\n .btn-submit.loading .btn-label,\n .btn-submit.loading .btn-arrow { display: none; }\n\n @keyframes spin { to { transform: rotate(360deg); } }\n\n ::-webkit-scrollbar { width: 6px; }\n ::-webkit-scrollbar-track { background: var(--bg); }\n ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }\n\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after { transition: none !important; animation: none !important; }\n }\n<\/style>\n<\/head>\n<body>\n\n\n\n<div style=\"background:#0D0D0D;width:100%;position:relative;z-index:0;\">\n\n<header class=\"form-hero\">\n \n <div class=\"site-logo\">\n <img decoding=\"async\" src=\"https:\/\/ashcardy.com\/wp-content\/uploads\/2026\/06\/Logo-File.png\" alt=\"Ash Cardy\" class=\"logo-img\">\n <\/div>\n <p class=\"form-eyebrow\">\u25cf Colour Booking Request<\/p>\n <h1 class=\"form-title\">\n BOOKING<br>\n FORM.\n <\/h1>\n <p class=\"form-subtitle\">Fill in the details below and I’ll be in touch to confirm availability and discuss your vision. This is a request, not a confirmed appointment.<\/p>\n<\/header>\n\n\n<div class=\"form-success\" id=\"formSuccess\">\n <div class=\"success-icon\">\n <svg width=\"22\" height=\"22\" fill=\"none\" viewBox=\"0 0 24 24\"><path d=\"M5 13l4 4L19 7\" stroke=\"#F0EDE8\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/div>\n <p class=\"success-title\">Request<br>Sent.<\/p>\n <p class=\"success-body\">Thanks \u2014 I’ll review your details and be in touch soon to confirm everything and arrange your skin test if needed.<\/p>\n<\/div>\n\n\n<div class=\"form-wrap\">\n<form id=\"bookingForm\" novalidate>\n\n \n <div class=\"form-section\">\n <div class=\"section-label\"><span class=\"accent-dot\">\u2014<\/span> About you<\/div>\n\n <div class=\"field\">\n <label>Pronouns<\/label>\n <div class=\"pill-group\">\n <div class=\"pill-option\"><input type=\"radio\" name=\"pronouns\" id=\"p_she\" value=\"she\/her\"><label for=\"p_she\">she\/her<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"pronouns\" id=\"p_he\" value=\"he\/him\"><label for=\"p_he\">he\/him<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"pronouns\" id=\"p_they\" value=\"they\/them\"><label for=\"p_they\">they\/them<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"pronouns\" id=\"p_other\" value=\"other\"><label for=\"p_other\">other<\/label><\/div>\n <\/div>\n <\/div>\n\n <div class=\"field-row\">\n <div class=\"field\">\n <label for=\"fullName\">Full name <span class=\"req\">*<\/span><\/label>\n <input type=\"text\" id=\"fullName\" name=\"fullName\" placeholder=\"Your name\" required>\n <p class=\"error-msg\" id=\"fullName-err\">Please enter your name.<\/p>\n <\/div>\n <div class=\"field\">\n <label for=\"phone\">Phone number <span class=\"req\">*<\/span><\/label>\n <input type=\"tel\" id=\"phone\" name=\"phone\" placeholder=\"+44\" required>\n <p class=\"error-msg\" id=\"phone-err\">Please enter your phone number.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"field\">\n <label for=\"email\">Email address <span class=\"req\">*<\/span><\/label>\n <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"you@email.com\" required>\n <p class=\"error-msg\" id=\"email-err\">Please enter a valid email address.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-label\"><span class=\"accent-dot\">\u2014<\/span> Your hair<\/div>\n\n <div class=\"field\">\n <label>What service are you looking for? <span class=\"req\">*<\/span><\/label>\n <div class=\"pill-group cols-2\" id=\"serviceGroup\">\n <div class=\"pill-option\"><input type=\"radio\" name=\"service\" id=\"s_allover\" value=\"All over colour\"><label for=\"s_allover\">All over colour<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"service\" id=\"s_highlights\" value=\"Highlights\"><label for=\"s_highlights\">Highlights<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"service\" id=\"s_balayage\" value=\"Balayage\"><label for=\"s_balayage\">Balayage<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"service\" id=\"s_root\" value=\"Root touch-up\"><label for=\"s_root\">Root touch-up<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"service\" id=\"s_toner\" value=\"Toner only\"><label for=\"s_toner\">Toner only<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"service\" id=\"s_transform\" value=\"Colour transformation\"><label for=\"s_transform\">Colour transformation<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"service\" id=\"s_unsure\" value=\"Not sure \u2013 need advice\"><label for=\"s_unsure\">Not sure \u2013 need advice<\/label><\/div>\n <\/div>\n <p class=\"error-msg\" id=\"service-err\">Please select a service.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label>Current hair colour <span class=\"req\">*<\/span><\/label>\n <div class=\"upload-zone\" id=\"currentHairZone\">\n <input type=\"file\" id=\"currentHair\" name=\"currentHair\" accept=\".jpg,.jpeg,.jpe,.heif,.heic,.png\" multiple>\n <svg class=\"upload-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 16M14 8h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" stroke=\"#F0EDE8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <p class=\"upload-text\"><strong>Upload photos<\/strong> or drag and drop<\/p>\n <p class=\"upload-hint\">jpg, jpeg, heif, heic, png \u2014 up to 10MB<\/p>\n <\/div>\n <div class=\"file-list\" id=\"currentHairList\"><\/div>\n <p class=\"error-msg\" id=\"currentHair-err\">Please upload at least one photo.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label>Have you coloured your hair before? <span class=\"req\">*<\/span><\/label>\n <div class=\"pill-group\">\n <div class=\"pill-option\"><input type=\"radio\" name=\"colouredBefore\" id=\"cb_yes\" value=\"Yes\"><label for=\"cb_yes\">Yes<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"colouredBefore\" id=\"cb_no\" value=\"No\"><label for=\"cb_no\">No<\/label><\/div>\n <\/div>\n <p class=\"error-msg\" id=\"colouredBefore-err\">Please select one.<\/p>\n <\/div>\n\n <div class=\"conditional\" id=\"whenDoneWrap\">\n <div class=\"field\" style=\"margin-top: 0; padding-top: 20px;\">\n <label for=\"whenDone\">When was this done? <span class=\"req\">*<\/span><\/label>\n <input type=\"text\" id=\"whenDone\" name=\"whenDone\" placeholder=\"e.g. 3 months ago, last year\u2026\">\n <p class=\"error-msg\" id=\"whenDone-err\">Please fill this in.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"field\">\n <label>Condition of your hair <span class=\"req\">*<\/span><\/label>\n <div class=\"pill-group cols-2\">\n <div class=\"pill-option\"><input type=\"radio\" name=\"hairCondition\" id=\"hc_healthy\" value=\"Healthy\"><label for=\"hc_healthy\">Healthy<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"hairCondition\" id=\"hc_dry\" value=\"Dry\"><label for=\"hc_dry\">Dry<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"hairCondition\" id=\"hc_damaged\" value=\"Damaged\"><label for=\"hc_damaged\">Damaged<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"hairCondition\" id=\"hc_unsure\" value=\"Unsure\"><label for=\"hc_unsure\">Unsure<\/label><\/div>\n <\/div>\n <p class=\"error-msg\" id=\"hairCondition-err\">Please select one.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label for=\"desiredResult\">What results are you looking for? <span class=\"req\">*<\/span><\/label>\n <textarea id=\"desiredResult\" name=\"desiredResult\" placeholder=\"Describe your dream colour \u2014 as vague or specific as you like\u2026\" required><\/textarea>\n <p class=\"error-msg\" id=\"desiredResult-err\">Please describe what you’re after.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label>Hair inspiration photos <span class=\"req\">*<\/span><\/label>\n <div class=\"upload-zone\" id=\"inspirationZone\">\n <input type=\"file\" id=\"inspiration\" name=\"inspiration\" accept=\".jpg,.jpeg,.png,.heic,.heif\" multiple>\n <svg class=\"upload-icon\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 16M14 8h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" stroke=\"#F0EDE8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <p class=\"upload-text\"><strong>Upload inspiration<\/strong> or drag and drop<\/p>\n <p class=\"upload-hint\">jpg, jpeg, png, heic, heif \u2014 up to 10MB<\/p>\n <\/div>\n <div class=\"file-list\" id=\"inspirationList\"><\/div>\n <p class=\"error-msg\" id=\"inspiration-err\">Please upload at least one inspiration photo.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-label\"><span class=\"accent-dot\">\u2014<\/span> Your appointment<\/div>\n\n <div class=\"field\">\n <label for=\"preferredTime\">Preferred days \/ time <span class=\"req\">*<\/span><\/label>\n <input type=\"text\" id=\"preferredTime\" name=\"preferredTime\" placeholder=\"e.g. Weekday mornings, Saturday afternoon\u2026\" required>\n <p class=\"error-msg\" id=\"preferredTime-err\">Please let me know your availability.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label>Would you like a cut and blowdry too? <span class=\"req\">*<\/span><\/label>\n <div class=\"pill-group\">\n <div class=\"pill-option\"><input type=\"radio\" name=\"cutBlowdry\" id=\"cut_yes\" value=\"Yes\"><label for=\"cut_yes\">Yes please<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"cutBlowdry\" id=\"cut_no\" value=\"No\"><label for=\"cut_no\">Colour only<\/label><\/div>\n <\/div>\n <p class=\"error-msg\" id=\"cutBlowdry-err\">Please select one.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label>Do you have any allergies or sensitivities? <span class=\"req\">*<\/span><\/label>\n <div class=\"pill-group\">\n <div class=\"pill-option\"><input type=\"radio\" name=\"allergies\" id=\"al_no\" value=\"No\"><label for=\"al_no\">None<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"allergies\" id=\"al_yes\" value=\"Yes\"><label for=\"al_yes\">Yes<\/label><\/div>\n <\/div>\n <p class=\"error-msg\" id=\"allergies-err\">Please select one.<\/p>\n <\/div>\n\n <div class=\"conditional\" id=\"allergyDetailWrap\">\n <div class=\"field\" style=\"margin-top: 0; padding-top: 20px;\">\n <label for=\"allergyDetail\">Please specify your allergies or sensitivities <span class=\"req\">*<\/span><\/label>\n <textarea id=\"allergyDetail\" name=\"allergyDetail\" placeholder=\"Describe any known allergies or sensitivities\u2026\" style=\"min-height: 72px;\"><\/textarea>\n <p class=\"error-msg\" id=\"allergyDetail-err\">Please fill this in.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"field\">\n <label>Have you had a skin test with me before? <span class=\"req\">*<\/span><\/label>\n <div class=\"pill-group\">\n <div class=\"pill-option\"><input type=\"radio\" name=\"skinTestBefore\" id=\"st_yes\" value=\"Yes\"><label for=\"st_yes\">Yes<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"skinTestBefore\" id=\"st_no\" value=\"No\"><label for=\"st_no\">No<\/label><\/div>\n <\/div>\n <p class=\"error-msg\" id=\"skinTestBefore-err\">Please select one.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label>Have you ever had an allergic reaction to colour products? <span class=\"req\">*<\/span><\/label>\n <div class=\"pill-group\">\n <div class=\"pill-option\"><input type=\"radio\" name=\"colourReaction\" id=\"cr_yes\" value=\"Yes\"><label for=\"cr_yes\">Yes<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"colourReaction\" id=\"cr_no\" value=\"No\"><label for=\"cr_no\">No<\/label><\/div>\n <\/div>\n <p class=\"error-msg\" id=\"colourReaction-err\">Please select one.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label for=\"additionalInfo\">Anything else you’d like me to know?<\/label>\n <textarea id=\"additionalInfo\" name=\"additionalInfo\" placeholder=\"Any extra context, questions, or notes\u2026\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-label\"><span class=\"accent-dot\">\u2014<\/span> Before you send<\/div>\n\n <div class=\"terms-list\">\n\n <label class=\"term-item\">\n <input type=\"checkbox\" id=\"term1\" name=\"term1\" required>\n <span class=\"term-check\">\n <svg width=\"11\" height=\"9\" fill=\"none\" viewBox=\"0 0 12 10\"><path d=\"M1 5l3.5 3.5L11 1\" stroke=\"#0D0D0D\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/span>\n <span class=\"term-text\">I understand this is a booking <em>request<\/em>, not a confirmed appointment.<\/span>\n <\/label>\n\n <label class=\"term-item\">\n <input type=\"checkbox\" id=\"term2\" name=\"term2\" required>\n <span class=\"term-check\">\n <svg width=\"11\" height=\"9\" fill=\"none\" viewBox=\"0 0 12 10\"><path d=\"M1 5l3.5 3.5L11 1\" stroke=\"#0D0D0D\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/span>\n <span class=\"term-text\">I understand a skin test will be required at least <strong>48 hours<\/strong> before my appointment.<\/span>\n <\/label>\n\n <label class=\"term-item\">\n <input type=\"checkbox\" id=\"term3\" name=\"term3\" required>\n <span class=\"term-check\">\n <svg width=\"11\" height=\"9\" fill=\"none\" viewBox=\"0 0 12 10\"><path d=\"M1 5l3.5 3.5L11 1\" stroke=\"#0D0D0D\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/span>\n <span class=\"term-text\">I understand that a deposit may be taken on booking.<\/span>\n <\/label>\n\n <\/div>\n <p class=\"error-msg\" id=\"terms-err\" style=\"margin-top: 12px;\">Please agree to all three to continue.<\/p>\n <\/div>\n\n \n <div class=\"submit-wrap\">\n <p class=\"submit-note\">Your details will be sent directly to Ash. Expect a reply within 48 hours.<\/p>\n <button type=\"submit\" class=\"btn-submit\" id=\"submitBtn\">\n <span class=\"btn-label\">Send my request<\/span>\n <svg class=\"btn-arrow\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <div class=\"spinner\"><\/div>\n <\/button>\n <\/div>\n\n<\/form>\n<\/div>\n\n<script>\ndocument.querySelectorAll('input[name=\"colouredBefore\"]').forEach(el => {\n el.addEventListener('change', () => {\n const wrap = document.getElementById('whenDoneWrap');\n const open = el.value === 'Yes';\n wrap.classList.toggle('open', open);\n document.getElementById('whenDone').required = open;\n });\n});\n\ndocument.querySelectorAll('input[name=\"allergies\"]').forEach(el => {\n el.addEventListener('change', () => {\n const wrap = document.getElementById('allergyDetailWrap');\n const open = el.value === 'Yes';\n wrap.classList.toggle('open', open);\n document.getElementById('allergyDetail').required = open;\n });\n});\n\nfunction setupUpload(inputId, listId, zoneId) {\n const input = document.getElementById(inputId);\n const list = document.getElementById(listId);\n const zone = document.getElementById(zoneId);\n let files = [];\n\n zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('dragover'); });\n zone.addEventListener('dragleave', () => zone.classList.remove('dragover'));\n zone.addEventListener('drop', e => {\n e.preventDefault();\n zone.classList.remove('dragover');\n addFiles(Array.from(e.dataTransfer.files));\n });\n\n input.addEventListener('change', () => addFiles(Array.from(input.files)));\n\n function addFiles(newFiles) {\n newFiles.forEach(f => {\n if (!files.find(x => x.name === f.name && x.size === f.size)) files.push(f);\n });\n render();\n }\n\n function render() {\n list.innerHTML = '';\n files.forEach((f, i) => {\n const tag = document.createElement('div');\n tag.className = 'file-tag';\n tag.innerHTML = `<span>${f.name}<\/span><button class=\"file-remove\" type=\"button\" aria-label=\"Remove\">\u00d7<\/button>`;\n tag.querySelector('.file-remove').addEventListener('click', () => { files.splice(i, 1); render(); });\n list.appendChild(tag);\n });\n }\n\n return () => files;\n}\n\nconst getCurrentFiles = setupUpload('currentHair', 'currentHairList', 'currentHairZone');\nconst getInspirationFiles = setupUpload('inspiration', 'inspirationList', 'inspirationZone');\n\nfunction showError(id, show) {\n const el = document.getElementById(id + '-err');\n if (el) el.classList.toggle('show', show);\n const field = document.getElementById(id);\n if (field) field.classList.toggle('error', show);\n}\n\nfunction validateForm() {\n let valid = true;\n\n const textFields = [\n { id: 'fullName', check: v => v.trim().length > 1 },\n { id: 'phone', check: v => v.trim().length > 6 },\n { id: 'email', check: v => \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(v) },\n { id: 'desiredResult', check: v => v.trim().length > 3 },\n { id: 'preferredTime', check: v => v.trim().length > 3 },\n ];\n\n textFields.forEach(({ id, check }) => {\n const el = document.getElementById(id);\n const bad = !check(el.value);\n showError(id, bad);\n if (bad) valid = false;\n });\n\n const radioGroups = ['service', 'colouredBefore', 'hairCondition', 'cutBlowdry', 'allergies', 'skinTestBefore', 'colourReaction'];\n radioGroups.forEach(name => {\n const checked = document.querySelector(`input[name=\"${name}\"]:checked`);\n showError(name, !checked);\n if (!checked) valid = false;\n });\n\n const cbChecked = document.querySelector('input[name=\"colouredBefore\"]:checked');\n if (cbChecked?.value === 'Yes') {\n const whenDone = document.getElementById('whenDone');\n const bad = !whenDone.value.trim();\n showError('whenDone', bad);\n if (bad) valid = false;\n }\n\n const alChecked = document.querySelector('input[name=\"allergies\"]:checked');\n if (alChecked?.value === 'Yes') {\n const detail = document.getElementById('allergyDetail');\n const bad = !detail.value.trim();\n showError('allergyDetail', bad);\n if (bad) valid = false;\n }\n\n const noCurrentHair = getCurrentFiles().length === 0;\n const noInspiration = getInspirationFiles().length === 0;\n showError('currentHair', noCurrentHair);\n showError('inspiration', noInspiration);\n if (noCurrentHair || noInspiration) valid = false;\n\n const allTerms = ['term1','term2','term3'].every(id => document.getElementById(id).checked);\n document.getElementById('terms-err').classList.toggle('show', !allTerms);\n if (!allTerms) valid = false;\n\n return valid;\n}\n\ndocument.getElementById('bookingForm').addEventListener('submit', async function(e) {\n e.preventDefault();\n if (!validateForm()) {\n const firstErr = document.querySelector('.error-msg.show, .error');\n if (firstErr) firstErr.scrollIntoView({ behavior: 'smooth', block: 'center' });\n return;\n }\n\n const btn = document.getElementById('submitBtn');\n btn.classList.add('loading');\n btn.disabled = true;\n\n const formData = new FormData(this);\n getCurrentFiles().forEach(f => formData.append('currentHair[]', f));\n getInspirationFiles().forEach(f => formData.append('inspiration[]', f));\n\n try {\n await fetch(this.action || window.location.href, {\n method: 'POST',\n body: formData,\n headers: { 'Accept': 'application\/json' }\n });\n\n document.querySelector('.form-wrap').style.display = 'none';\n document.querySelector('.form-hero').style.display = 'none';\n document.getElementById('formSuccess').classList.add('show');\n window.scrollTo({ top: 0, behavior: 'smooth' });\n } catch (err) {\n btn.classList.remove('loading');\n btn.disabled = false;\n alert('Something went wrong \u2014 please try again or email directly.');\n }\n});\n\ndocument.querySelectorAll('input, textarea, select').forEach(el => {\n el.addEventListener('input', () => showError(el.id || el.name, false));\n el.addEventListener('change', () => showError(el.id || el.name, false));\n});\n<\/script>\n<\/div>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Ash Cardy \u2013 Colour Booking Request \u25cf Colour Booking Request BOOKING FORM. Fill in the details below and I’ll be in touch to confirm availability and discuss your vision. This is a request, not a confirmed appointment. RequestSent. Thanks \u2014 I’ll review your details and be in touch soon to confirm everything and arrange your […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_breakdance_hide_in_design_set":false,"_breakdance_tags":"","footnotes":""},"class_list":["post-93","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ashcardy.com\/index.php?rest_route=\/wp\/v2\/pages\/93","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ashcardy.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ashcardy.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ashcardy.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ashcardy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=93"}],"version-history":[{"count":4,"href":"https:\/\/ashcardy.com\/index.php?rest_route=\/wp\/v2\/pages\/93\/revisions"}],"predecessor-version":[{"id":97,"href":"https:\/\/ashcardy.com\/index.php?rest_route=\/wp\/v2\/pages\/93\/revisions\/97"}],"wp:attachment":[{"href":"https:\/\/ashcardy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":93,"date":"2026-06-29T18:55:07","date_gmt":"2026-06-29T18:55:07","guid":{"rendered":"https:\/\/ashcardy.com\/?page_id=93"},"modified":"2026-06-29T19:01:21","modified_gmt":"2026-06-29T19:01:21","slug":"booking","status":"publish","type":"page","link":"https:\/\/ashcardy.com\/","title":{"rendered":"Booking"},"content":{"rendered":"\n\n\n\n\n\nAsh Cardy \u2013 Colour Booking Request<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\">\n\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --bg: #0D0D0D;\n --surface: #141414;\n --input-bg: #1C1C1C;\n --border: #2A2A2A;\n --accent: #FFFFFF;\n --accent-dim:#2A2A2A;\n --text: #F0EDE8;\n --muted: #666260;\n --error: #AAAAAA;\n --radius: 4px;\n --transition: 0.2s ease;\n }\n\n \/* \u2500\u2500 WordPress theme override \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Force our background across common theme wrapper elements.\n Covers Breakdance, Astra, GeneratePress, Twenty* etc. *\/\n html,\n body {\n background: var(--bg) !important;\n background-color: var(--bg) !important;\n color: var(--text) !important;\n }\n\n \/* Catch-all for theme page wrappers *\/\n #page, #wrapper, #content, #main, #primary,\n .site, .site-content, .site-inner,\n .content-area, .entry-content,\n main, article,\n [class*=\"bde-\"], [class*=\"breakdance\"],\n [class*=\"elementor-section\"], [class*=\"elementor-container\"],\n .page-content, .hentry {\n background: var(--bg) !important;\n background-color: var(--bg) !important;\n }\n\n \/* Remove theme padding\/margin around our content *\/\n .entry-content { padding: 0 !important; max-width: 100% !important; margin: 0 !important; }\n .entry-content > *:first-child { margin-top: 0 !important; }\n\n body {\n font-family: 'DM Sans', sans-serif;\n font-weight: 300;\n background: var(--bg) !important;\n color: var(--text);\n min-height: 100vh;\n padding: 0;\n margin: 0;\n -webkit-font-smoothing: antialiased;\n }\n\n\n \/* \u2500\u2500 Logo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .site-logo {\n margin-bottom: 40px;\n }\n\n .logo-img {\n height: 48px;\n width: auto;\n display: block;\n \/* The logo has a grey box bg baked in \u2014 mix-blend-mode lightens it on dark bg *\/\n mix-blend-mode: screen;\n opacity: 0.92;\n }\n\n \/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .form-hero {\n padding: 72px 24px 48px;\n max-width: 680px;\n margin: 0 auto;\n border-bottom: 1px solid var(--border);\n }\n\n .form-eyebrow {\n font-family: 'DM Sans', sans-serif;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.22em;\n text-transform: uppercase;\n color: var(--muted);\n margin-bottom: 20px;\n }\n\n \/* Grunge title block *\/\n .form-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(72px, 18vw, 148px);\n font-weight: 400;\n line-height: 0.88;\n letter-spacing: 0.02em;\n text-transform: uppercase;\n color: #FFFFFF !important;\n -webkit-text-fill-color: #FFFFFF !important;\n margin-bottom: 24px;\n \/* Subtle texture via text-shadow stack *\/\n text-shadow:\n 2px 2px 0px #000,\n -1px -1px 0px #1a1a1a,\n 3px 0px 8px rgba(0,0,0,0.8);\n }\n\n\n\n .form-subtitle {\n font-size: 13px;\n color: var(--muted);\n line-height: 1.7;\n max-width: 440px;\n border-left: 1px solid var(--border);\n padding-left: 16px;\n }\n\n \/* \u2500\u2500 Form wrapper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .form-wrap {\n max-width: 680px;\n margin: 0 auto;\n padding: 0 24px 80px;\n }\n\n \/* \u2500\u2500 Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .form-section {\n margin-top: 56px;\n }\n\n .section-label {\n font-family: 'DM Sans', sans-serif;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: var(--muted);\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 28px;\n }\n\n .section-label::after {\n content: '';\n flex: 1;\n height: 1px;\n background: var(--border);\n }\n\n .section-label span.accent-dot {\n color: var(--muted);\n margin-right: 6px;\n }\n\n \/* \u2500\u2500 Field \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .field {\n margin-bottom: 24px;\n position: relative;\n }\n\n .field-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n }\n\n @media (max-width: 520px) {\n .field-row { grid-template-columns: 1fr; }\n }\n\n label {\n display: block;\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--muted);\n margin-bottom: 8px;\n transition: color var(--transition);\n }\n\n .field:focus-within > label,\n .field:focus-within .field-inner > label {\n color: var(--text);\n }\n\n .req {\n color: var(--muted);\n margin-left: 2px;\n }\n\n input[type=\"text\"],\n input[type=\"email\"],\n input[type=\"tel\"],\n textarea,\n select {\n width: 100%;\n background: var(--input-bg);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n color: var(--text);\n font-family: 'DM Sans', sans-serif;\n font-size: 15px;\n font-weight: 300;\n padding: 14px 16px;\n outline: none;\n transition: border-color var(--transition), background var(--transition);\n appearance: none;\n -webkit-appearance: none;\n }\n\n input::placeholder,\n textarea::placeholder { color: #383533; }\n\n input:focus,\n textarea:focus,\n select:focus {\n border-color: #555;\n background: #191919;\n }\n\n input.error,\n textarea.error,\n select.error {\n border-color: #555;\n }\n\n .error-msg {\n font-size: 11px;\n color: var(--muted);\n margin-top: 6px;\n display: none;\n letter-spacing: 0.05em;\n }\n\n .error-msg.show { display: block; }\n\n textarea {\n resize: vertical;\n min-height: 96px;\n line-height: 1.6;\n }\n\n select {\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666260' stroke-width='1.5' stroke-linecap='round'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 14px center;\n padding-right: 40px;\n cursor: pointer;\n }\n\n select option {\n background: #1C1C1C;\n color: var(--text);\n }\n\n \/* \u2500\u2500 Radio \/ Checkbox Pills \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .pill-group {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 2px;\n }\n\n .pill-group.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }\n .pill-group.cols-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }\n\n @media (max-width: 480px) {\n .pill-group.cols-3 { grid-template-columns: 1fr 1fr; }\n }\n\n .pill-option {\n position: relative;\n }\n\n .pill-option input[type=\"radio\"],\n .pill-option input[type=\"checkbox\"] {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .pill-option label {\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 12px 16px;\n background: var(--input-bg);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n cursor: pointer;\n font-size: 13px;\n font-weight: 400;\n letter-spacing: 0.04em;\n text-transform: none;\n color: var(--muted);\n transition: all var(--transition);\n line-height: 1.3;\n min-height: 48px;\n margin: 0;\n }\n\n .pill-option input:checked + label {\n background: var(--text);\n border-color: var(--text);\n color: #0D0D0D;\n font-weight: 500;\n }\n\n .pill-option label:hover {\n border-color: #444;\n color: var(--text);\n }\n\n \/* \u2500\u2500 File upload \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .upload-zone {\n position: relative;\n border: 1px dashed var(--border);\n border-radius: var(--radius);\n padding: 32px 20px;\n text-align: center;\n cursor: pointer;\n transition: border-color var(--transition), background var(--transition);\n background: var(--input-bg);\n }\n\n .upload-zone:hover,\n .upload-zone.dragover {\n border-color: #555;\n background: #191919;\n }\n\n .upload-zone input[type=\"file\"] {\n position: absolute;\n inset: 0;\n opacity: 0;\n cursor: pointer;\n width: 100%;\n height: 100%;\n padding: 0;\n border: none;\n background: none;\n }\n\n .upload-icon {\n width: 28px;\n height: 28px;\n margin: 0 auto 10px;\n opacity: 0.3;\n }\n\n .upload-text {\n font-size: 13px;\n color: var(--muted);\n line-height: 1.6;\n }\n\n .upload-text strong {\n color: var(--text);\n font-weight: 400;\n }\n\n .upload-hint {\n font-size: 11px;\n color: #444;\n margin-top: 6px;\n }\n\n .file-list {\n margin-top: 10px;\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .file-tag {\n display: flex;\n align-items: center;\n gap: 8px;\n background: #1A1A1A;\n border: 1px solid var(--border);\n border-radius: 3px;\n padding: 6px 10px;\n font-size: 12px;\n color: var(--muted);\n }\n\n .file-tag span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n .file-remove {\n background: none;\n border: none;\n color: var(--muted);\n cursor: pointer;\n font-size: 16px;\n line-height: 1;\n padding: 0 2px;\n transition: color var(--transition);\n }\n .file-remove:hover { color: var(--text); }\n\n \/* \u2500\u2500 Conditional reveal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .conditional {\n overflow: hidden;\n max-height: 0;\n opacity: 0;\n transition: max-height 0.35s ease, opacity 0.25s ease;\n pointer-events: none;\n }\n\n .conditional.open {\n max-height: 300px;\n opacity: 1;\n pointer-events: auto;\n }\n\n \/* \u2500\u2500 Terms \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .terms-list {\n display: flex;\n flex-direction: column;\n gap: 14px;\n }\n\n .term-item {\n display: flex;\n align-items: flex-start;\n gap: 14px;\n cursor: pointer;\n }\n\n .term-item input[type=\"checkbox\"] {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .term-check {\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n border: 1px solid var(--border);\n border-radius: 2px;\n background: var(--input-bg);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 1px;\n transition: all var(--transition);\n }\n\n .term-item input:checked ~ .term-check {\n background: var(--text);\n border-color: var(--text);\n }\n\n .term-check svg { display: none; }\n .term-item input:checked ~ .term-check svg { display: block; }\n\n .term-text {\n font-size: 13px;\n color: var(--muted);\n line-height: 1.6;\n }\n\n \/* \u2500\u2500 Submit \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .submit-wrap {\n margin-top: 48px;\n padding-top: 40px;\n border-top: 1px solid var(--border);\n }\n\n .submit-note {\n font-size: 12px;\n color: var(--muted);\n margin-bottom: 20px;\n line-height: 1.6;\n }\n\n .btn-submit {\n display: flex;\n align-items: center;\n gap: 12px;\n background: var(--text);\n color: #0D0D0D;\n border: none;\n border-radius: var(--radius);\n font-family: 'DM Sans', sans-serif;\n font-size: 13px;\n font-weight: 500;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n padding: 18px 36px;\n cursor: pointer;\n transition: background var(--transition), color var(--transition), transform var(--transition);\n width: 100%;\n justify-content: center;\n }\n\n .btn-submit:hover {\n background: #CCCCCC;\n }\n\n .btn-submit:active { transform: scale(0.98); }\n .btn-submit:disabled {\n background: #2A2A2A;\n color: #555;\n cursor: not-allowed;\n }\n\n .btn-arrow {\n transition: transform var(--transition);\n }\n .btn-submit:not(:disabled):hover .btn-arrow { transform: translateX(4px); }\n\n \/* \u2500\u2500 Success state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .form-success {\n display: none;\n text-align: center;\n padding: 80px 24px;\n }\n\n .form-success.show { display: block; }\n\n .success-icon {\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background: #1C1C1C;\n border: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 24px;\n }\n\n .success-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(56px, 12vw, 100px);\n font-weight: 400;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n line-height: 0.9;\n margin-bottom: 20px;\n text-shadow: 2px 2px 0px #000;\n }\n\n .success-body {\n font-size: 14px;\n color: var(--muted);\n line-height: 1.7;\n }\n\n \/* \u2500\u2500 Spinner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .spinner {\n width: 16px;\n height: 16px;\n border: 2px solid rgba(0,0,0,0.3);\n border-top-color: #0D0D0D;\n border-radius: 50%;\n animation: spin 0.7s linear infinite;\n display: none;\n }\n\n .btn-submit.loading .spinner { display: block; }\n .btn-submit.loading .btn-label,\n .btn-submit.loading .btn-arrow { display: none; }\n\n @keyframes spin { to { transform: rotate(360deg); } }\n\n ::-webkit-scrollbar { width: 6px; }\n ::-webkit-scrollbar-track { background: var(--bg); }\n ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }\n\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after { transition: none !important; animation: none !important; }\n }\n<\/style>\n<\/head>\n<body>\n\n\n\n<div style=\"background:#0D0D0D;width:100%;position:relative;z-index:0;\">\n\n<header class=\"form-hero\">\n \n <div class=\"site-logo\">\n <img decoding=\"async\" src=\"https:\/\/ashcardy.com\/wp-content\/uploads\/2026\/06\/Logo-File.png\" alt=\"Ash Cardy\" class=\"logo-img\">\n <\/div>\n <p class=\"form-eyebrow\">\u25cf Colour Booking Request<\/p>\n <h1 class=\"form-title\">\n BOOKING<br>\n FORM.\n <\/h1>\n <p class=\"form-subtitle\">Fill in the details below and I’ll be in touch to confirm availability and discuss your vision. This is a request, not a confirmed appointment.<\/p>\n<\/header>\n\n\n<div class=\"form-success\" id=\"formSuccess\">\n <div class=\"success-icon\">\n <svg width=\"22\" height=\"22\" fill=\"none\" viewBox=\"0 0 24 24\"><path d=\"M5 13l4 4L19 7\" stroke=\"#F0EDE8\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/div>\n <p class=\"success-title\">Request<br>Sent.<\/p>\n <p class=\"success-body\">Thanks \u2014 I’ll review your details and be in touch soon to confirm everything and arrange your skin test if needed.<\/p>\n<\/div>\n\n\n<div class=\"form-wrap\">\n<form id=\"bookingForm\" novalidate>\n\n \n <div class=\"form-section\">\n <div class=\"section-label\"><span class=\"accent-dot\">\u2014<\/span> About you<\/div>\n\n <div class=\"field\">\n <label>Pronouns<\/label>\n <div class=\"pill-group\">\n <div class=\"pill-option\"><input type=\"radio\" name=\"pronouns\" id=\"p_she\" value=\"she\/her\"><label for=\"p_she\">she\/her<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"pronouns\" id=\"p_he\" value=\"he\/him\"><label for=\"p_he\">he\/him<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"pronouns\" id=\"p_they\" value=\"they\/them\"><label for=\"p_they\">they\/them<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"pronouns\" id=\"p_other\" value=\"other\"><label for=\"p_other\">other<\/label><\/div>\n <\/div>\n <\/div>\n\n <div class=\"field-row\">\n <div class=\"field\">\n <label for=\"fullName\">Full name <span class=\"req\">*<\/span><\/label>\n <input type=\"text\" id=\"fullName\" name=\"fullName\" placeholder=\"Your name\" required>\n <p class=\"error-msg\" id=\"fullName-err\">Please enter your name.<\/p>\n <\/div>\n <div class=\"field\">\n <label for=\"phone\">Phone number <span class=\"req\">*<\/span><\/label>\n <input type=\"tel\" id=\"phone\" name=\"phone\" placeholder=\"+44\" required>\n <p class=\"error-msg\" id=\"phone-err\">Please enter your phone number.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"field\">\n <label for=\"email\">Email address <span class=\"req\">*<\/span><\/label>\n <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"you@email.com\" required>\n <p class=\"error-msg\" id=\"email-err\">Please enter a valid email address.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-label\"><span class=\"accent-dot\">\u2014<\/span> Your hair<\/div>\n\n <div class=\"field\">\n <label>What service are you looking for? <span class=\"req\">*<\/span><\/label>\n <div class=\"pill-group cols-2\" id=\"serviceGroup\">\n <div class=\"pill-option\"><input type=\"radio\" name=\"service\" id=\"s_allover\" value=\"All over colour\"><label for=\"s_allover\">All over colour<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"service\" id=\"s_highlights\" value=\"Highlights\"><label for=\"s_highlights\">Highlights<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"service\" id=\"s_balayage\" value=\"Balayage\"><label for=\"s_balayage\">Balayage<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"service\" id=\"s_root\" value=\"Root touch-up\"><label for=\"s_root\">Root touch-up<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"service\" id=\"s_toner\" value=\"Toner only\"><label for=\"s_toner\">Toner only<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"service\" id=\"s_transform\" value=\"Colour transformation\"><label for=\"s_transform\">Colour transformation<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"service\" id=\"s_unsure\" value=\"Not sure \u2013 need advice\"><label for=\"s_unsure\">Not sure \u2013 need advice<\/label><\/div>\n <\/div>\n <p class=\"error-msg\" id=\"service-err\">Please select a service.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label>Current hair colour <span class=\"req\">*<\/span><\/label>\n <div class=\"upload-zone\" id=\"currentHairZone\">\n <input type=\"file\" id=\"currentHair\" name=\"currentHair\" accept=\".jpg,.jpeg,.jpe,.heif,.heic,.png\" multiple>\n <svg class=\"upload-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 16M14 8h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" stroke=\"#F0EDE8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <p class=\"upload-text\"><strong>Upload photos<\/strong> or drag and drop<\/p>\n <p class=\"upload-hint\">jpg, jpeg, heif, heic, png \u2014 up to 10MB<\/p>\n <\/div>\n <div class=\"file-list\" id=\"currentHairList\"><\/div>\n <p class=\"error-msg\" id=\"currentHair-err\">Please upload at least one photo.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label>Have you coloured your hair before? <span class=\"req\">*<\/span><\/label>\n <div class=\"pill-group\">\n <div class=\"pill-option\"><input type=\"radio\" name=\"colouredBefore\" id=\"cb_yes\" value=\"Yes\"><label for=\"cb_yes\">Yes<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"colouredBefore\" id=\"cb_no\" value=\"No\"><label for=\"cb_no\">No<\/label><\/div>\n <\/div>\n <p class=\"error-msg\" id=\"colouredBefore-err\">Please select one.<\/p>\n <\/div>\n\n <div class=\"conditional\" id=\"whenDoneWrap\">\n <div class=\"field\" style=\"margin-top: 0; padding-top: 20px;\">\n <label for=\"whenDone\">When was this done? <span class=\"req\">*<\/span><\/label>\n <input type=\"text\" id=\"whenDone\" name=\"whenDone\" placeholder=\"e.g. 3 months ago, last year\u2026\">\n <p class=\"error-msg\" id=\"whenDone-err\">Please fill this in.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"field\">\n <label>Condition of your hair <span class=\"req\">*<\/span><\/label>\n <div class=\"pill-group cols-2\">\n <div class=\"pill-option\"><input type=\"radio\" name=\"hairCondition\" id=\"hc_healthy\" value=\"Healthy\"><label for=\"hc_healthy\">Healthy<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"hairCondition\" id=\"hc_dry\" value=\"Dry\"><label for=\"hc_dry\">Dry<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"hairCondition\" id=\"hc_damaged\" value=\"Damaged\"><label for=\"hc_damaged\">Damaged<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"hairCondition\" id=\"hc_unsure\" value=\"Unsure\"><label for=\"hc_unsure\">Unsure<\/label><\/div>\n <\/div>\n <p class=\"error-msg\" id=\"hairCondition-err\">Please select one.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label for=\"desiredResult\">What results are you looking for? <span class=\"req\">*<\/span><\/label>\n <textarea id=\"desiredResult\" name=\"desiredResult\" placeholder=\"Describe your dream colour \u2014 as vague or specific as you like\u2026\" required><\/textarea>\n <p class=\"error-msg\" id=\"desiredResult-err\">Please describe what you’re after.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label>Hair inspiration photos <span class=\"req\">*<\/span><\/label>\n <div class=\"upload-zone\" id=\"inspirationZone\">\n <input type=\"file\" id=\"inspiration\" name=\"inspiration\" accept=\".jpg,.jpeg,.png,.heic,.heif\" multiple>\n <svg class=\"upload-icon\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 16M14 8h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" stroke=\"#F0EDE8\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <p class=\"upload-text\"><strong>Upload inspiration<\/strong> or drag and drop<\/p>\n <p class=\"upload-hint\">jpg, jpeg, png, heic, heif \u2014 up to 10MB<\/p>\n <\/div>\n <div class=\"file-list\" id=\"inspirationList\"><\/div>\n <p class=\"error-msg\" id=\"inspiration-err\">Please upload at least one inspiration photo.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-label\"><span class=\"accent-dot\">\u2014<\/span> Your appointment<\/div>\n\n <div class=\"field\">\n <label for=\"preferredTime\">Preferred days \/ time <span class=\"req\">*<\/span><\/label>\n <input type=\"text\" id=\"preferredTime\" name=\"preferredTime\" placeholder=\"e.g. Weekday mornings, Saturday afternoon\u2026\" required>\n <p class=\"error-msg\" id=\"preferredTime-err\">Please let me know your availability.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label>Would you like a cut and blowdry too? <span class=\"req\">*<\/span><\/label>\n <div class=\"pill-group\">\n <div class=\"pill-option\"><input type=\"radio\" name=\"cutBlowdry\" id=\"cut_yes\" value=\"Yes\"><label for=\"cut_yes\">Yes please<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"cutBlowdry\" id=\"cut_no\" value=\"No\"><label for=\"cut_no\">Colour only<\/label><\/div>\n <\/div>\n <p class=\"error-msg\" id=\"cutBlowdry-err\">Please select one.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label>Do you have any allergies or sensitivities? <span class=\"req\">*<\/span><\/label>\n <div class=\"pill-group\">\n <div class=\"pill-option\"><input type=\"radio\" name=\"allergies\" id=\"al_no\" value=\"No\"><label for=\"al_no\">None<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"allergies\" id=\"al_yes\" value=\"Yes\"><label for=\"al_yes\">Yes<\/label><\/div>\n <\/div>\n <p class=\"error-msg\" id=\"allergies-err\">Please select one.<\/p>\n <\/div>\n\n <div class=\"conditional\" id=\"allergyDetailWrap\">\n <div class=\"field\" style=\"margin-top: 0; padding-top: 20px;\">\n <label for=\"allergyDetail\">Please specify your allergies or sensitivities <span class=\"req\">*<\/span><\/label>\n <textarea id=\"allergyDetail\" name=\"allergyDetail\" placeholder=\"Describe any known allergies or sensitivities\u2026\" style=\"min-height: 72px;\"><\/textarea>\n <p class=\"error-msg\" id=\"allergyDetail-err\">Please fill this in.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"field\">\n <label>Have you had a skin test with me before? <span class=\"req\">*<\/span><\/label>\n <div class=\"pill-group\">\n <div class=\"pill-option\"><input type=\"radio\" name=\"skinTestBefore\" id=\"st_yes\" value=\"Yes\"><label for=\"st_yes\">Yes<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"skinTestBefore\" id=\"st_no\" value=\"No\"><label for=\"st_no\">No<\/label><\/div>\n <\/div>\n <p class=\"error-msg\" id=\"skinTestBefore-err\">Please select one.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label>Have you ever had an allergic reaction to colour products? <span class=\"req\">*<\/span><\/label>\n <div class=\"pill-group\">\n <div class=\"pill-option\"><input type=\"radio\" name=\"colourReaction\" id=\"cr_yes\" value=\"Yes\"><label for=\"cr_yes\">Yes<\/label><\/div>\n <div class=\"pill-option\"><input type=\"radio\" name=\"colourReaction\" id=\"cr_no\" value=\"No\"><label for=\"cr_no\">No<\/label><\/div>\n <\/div>\n <p class=\"error-msg\" id=\"colourReaction-err\">Please select one.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label for=\"additionalInfo\">Anything else you’d like me to know?<\/label>\n <textarea id=\"additionalInfo\" name=\"additionalInfo\" placeholder=\"Any extra context, questions, or notes\u2026\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <div class=\"section-label\"><span class=\"accent-dot\">\u2014<\/span> Before you send<\/div>\n\n <div class=\"terms-list\">\n\n <label class=\"term-item\">\n <input type=\"checkbox\" id=\"term1\" name=\"term1\" required>\n <span class=\"term-check\">\n <svg width=\"11\" height=\"9\" fill=\"none\" viewBox=\"0 0 12 10\"><path d=\"M1 5l3.5 3.5L11 1\" stroke=\"#0D0D0D\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/span>\n <span class=\"term-text\">I understand this is a booking <em>request<\/em>, not a confirmed appointment.<\/span>\n <\/label>\n\n <label class=\"term-item\">\n <input type=\"checkbox\" id=\"term2\" name=\"term2\" required>\n <span class=\"term-check\">\n <svg width=\"11\" height=\"9\" fill=\"none\" viewBox=\"0 0 12 10\"><path d=\"M1 5l3.5 3.5L11 1\" stroke=\"#0D0D0D\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/span>\n <span class=\"term-text\">I understand a skin test will be required at least <strong>48 hours<\/strong> before my appointment.<\/span>\n <\/label>\n\n <label class=\"term-item\">\n <input type=\"checkbox\" id=\"term3\" name=\"term3\" required>\n <span class=\"term-check\">\n <svg width=\"11\" height=\"9\" fill=\"none\" viewBox=\"0 0 12 10\"><path d=\"M1 5l3.5 3.5L11 1\" stroke=\"#0D0D0D\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/span>\n <span class=\"term-text\">I understand that a deposit may be taken on booking.<\/span>\n <\/label>\n\n <\/div>\n <p class=\"error-msg\" id=\"terms-err\" style=\"margin-top: 12px;\">Please agree to all three to continue.<\/p>\n <\/div>\n\n \n <div class=\"submit-wrap\">\n <p class=\"submit-note\">Your details will be sent directly to Ash. Expect a reply within 48 hours.<\/p>\n <button type=\"submit\" class=\"btn-submit\" id=\"submitBtn\">\n <span class=\"btn-label\">Send my request<\/span>\n <svg class=\"btn-arrow\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 24 24\"><path d=\"M5 12h14M13 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <div class=\"spinner\"><\/div>\n <\/button>\n <\/div>\n\n<\/form>\n<\/div>\n\n<script>\ndocument.querySelectorAll('input[name=\"colouredBefore\"]').forEach(el => {\n el.addEventListener('change', () => {\n const wrap = document.getElementById('whenDoneWrap');\n const open = el.value === 'Yes';\n wrap.classList.toggle('open', open);\n document.getElementById('whenDone').required = open;\n });\n});\n\ndocument.querySelectorAll('input[name=\"allergies\"]').forEach(el => {\n el.addEventListener('change', () => {\n const wrap = document.getElementById('allergyDetailWrap');\n const open = el.value === 'Yes';\n wrap.classList.toggle('open', open);\n document.getElementById('allergyDetail').required = open;\n });\n});\n\nfunction setupUpload(inputId, listId, zoneId) {\n const input = document.getElementById(inputId);\n const list = document.getElementById(listId);\n const zone = document.getElementById(zoneId);\n let files = [];\n\n zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('dragover'); });\n zone.addEventListener('dragleave', () => zone.classList.remove('dragover'));\n zone.addEventListener('drop', e => {\n e.preventDefault();\n zone.classList.remove('dragover');\n addFiles(Array.from(e.dataTransfer.files));\n });\n\n input.addEventListener('change', () => addFiles(Array.from(input.files)));\n\n function addFiles(newFiles) {\n newFiles.forEach(f => {\n if (!files.find(x => x.name === f.name && x.size === f.size)) files.push(f);\n });\n render();\n }\n\n function render() {\n list.innerHTML = '';\n files.forEach((f, i) => {\n const tag = document.createElement('div');\n tag.className = 'file-tag';\n tag.innerHTML = `<span>${f.name}<\/span><button class=\"file-remove\" type=\"button\" aria-label=\"Remove\">\u00d7<\/button>`;\n tag.querySelector('.file-remove').addEventListener('click', () => { files.splice(i, 1); render(); });\n list.appendChild(tag);\n });\n }\n\n return () => files;\n}\n\nconst getCurrentFiles = setupUpload('currentHair', 'currentHairList', 'currentHairZone');\nconst getInspirationFiles = setupUpload('inspiration', 'inspirationList', 'inspirationZone');\n\nfunction showError(id, show) {\n const el = document.getElementById(id + '-err');\n if (el) el.classList.toggle('show', show);\n const field = document.getElementById(id);\n if (field) field.classList.toggle('error', show);\n}\n\nfunction validateForm() {\n let valid = true;\n\n const textFields = [\n { id: 'fullName', check: v => v.trim().length > 1 },\n { id: 'phone', check: v => v.trim().length > 6 },\n { id: 'email', check: v => \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(v) },\n { id: 'desiredResult', check: v => v.trim().length > 3 },\n { id: 'preferredTime', check: v => v.trim().length > 3 },\n ];\n\n textFields.forEach(({ id, check }) => {\n const el = document.getElementById(id);\n const bad = !check(el.value);\n showError(id, bad);\n if (bad) valid = false;\n });\n\n const radioGroups = ['service', 'colouredBefore', 'hairCondition', 'cutBlowdry', 'allergies', 'skinTestBefore', 'colourReaction'];\n radioGroups.forEach(name => {\n const checked = document.querySelector(`input[name=\"${name}\"]:checked`);\n showError(name, !checked);\n if (!checked) valid = false;\n });\n\n const cbChecked = document.querySelector('input[name=\"colouredBefore\"]:checked');\n if (cbChecked?.value === 'Yes') {\n const whenDone = document.getElementById('whenDone');\n const bad = !whenDone.value.trim();\n showError('whenDone', bad);\n if (bad) valid = false;\n }\n\n const alChecked = document.querySelector('input[name=\"allergies\"]:checked');\n if (alChecked?.value === 'Yes') {\n const detail = document.getElementById('allergyDetail');\n const bad = !detail.value.trim();\n showError('allergyDetail', bad);\n if (bad) valid = false;\n }\n\n const noCurrentHair = getCurrentFiles().length === 0;\n const noInspiration = getInspirationFiles().length === 0;\n showError('currentHair', noCurrentHair);\n showError('inspiration', noInspiration);\n if (noCurrentHair || noInspiration) valid = false;\n\n const allTerms = ['term1','term2','term3'].every(id => document.getElementById(id).checked);\n document.getElementById('terms-err').classList.toggle('show', !allTerms);\n if (!allTerms) valid = false;\n\n return valid;\n}\n\ndocument.getElementById('bookingForm').addEventListener('submit', async function(e) {\n e.preventDefault();\n if (!validateForm()) {\n const firstErr = document.querySelector('.error-msg.show, .error');\n if (firstErr) firstErr.scrollIntoView({ behavior: 'smooth', block: 'center' });\n return;\n }\n\n const btn = document.getElementById('submitBtn');\n btn.classList.add('loading');\n btn.disabled = true;\n\n const formData = new FormData(this);\n getCurrentFiles().forEach(f => formData.append('currentHair[]', f));\n getInspirationFiles().forEach(f => formData.append('inspiration[]', f));\n\n try {\n await fetch(this.action || window.location.href, {\n method: 'POST',\n body: formData,\n headers: { 'Accept': 'application\/json' }\n });\n\n document.querySelector('.form-wrap').style.display = 'none';\n document.querySelector('.form-hero').style.display = 'none';\n document.getElementById('formSuccess').classList.add('show');\n window.scrollTo({ top: 0, behavior: 'smooth' });\n } catch (err) {\n btn.classList.remove('loading');\n btn.disabled = false;\n alert('Something went wrong \u2014 please try again or email directly.');\n }\n});\n\ndocument.querySelectorAll('input, textarea, select').forEach(el => {\n el.addEventListener('input', () => showError(el.id || el.name, false));\n el.addEventListener('change', () => showError(el.id || el.name, false));\n});\n<\/script>\n<\/div>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Ash Cardy \u2013 Colour Booking Request \u25cf Colour Booking Request BOOKING FORM. Fill in the details below and I’ll be in touch to confirm availability and discuss your vision. This is a request, not a confirmed appointment. RequestSent. Thanks \u2014 I’ll review your details and be in touch soon to confirm everything and arrange your […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_breakdance_hide_in_design_set":false,"_breakdance_tags":"","footnotes":""},"class_list":["post-93","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ashcardy.com\/index.php?rest_route=\/wp\/v2\/pages\/93","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ashcardy.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ashcardy.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ashcardy.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ashcardy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=93"}],"version-history":[{"count":4,"href":"https:\/\/ashcardy.com\/index.php?rest_route=\/wp\/v2\/pages\/93\/revisions"}],"predecessor-version":[{"id":97,"href":"https:\/\/ashcardy.com\/index.php?rest_route=\/wp\/v2\/pages\/93\/revisions\/97"}],"wp:attachment":[{"href":"https:\/\/ashcardy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}