:root { --ink:#10253d; --muted:#657085; --line:#dfe3e8; --paper:#f8f9fb; --white:#fff; --teal:#f76b17; --teal-dark:#d95006; --navy:#071a30; --danger:#c74444; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:minmax(320px,38%) 1fr; }
.sidebar { color:#fff; background:var(--navy); position:relative; overflow:hidden; }
.sidebar::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,26,48,.78) 0%,rgba(7,26,48,.42) 45%,rgba(7,26,48,.96) 100%); pointer-events:none; }
.brand { z-index:1; position:relative; display:flex; justify-content:center; align-items:center; height:146px; padding:18px 38px 8px; }
.brand img { display:block; width:210px; height:120px; object-fit:cover; object-position:50% 49%; }
.sidebar-content { z-index:1; position:relative; min-height:calc(100vh - 91px); display:flex; flex-direction:column; padding:70px 12% 33px; }
.eyebrow { margin:0 0 16px; color:var(--teal); font:500 11px/1.3 "DM Mono",monospace; text-transform:uppercase; letter-spacing:1.1px; }
.sidebar .eyebrow { color:#ffaf7c; }
.sidebar h1 { max-width:420px; margin:0; font-size:clamp(32px,3vw,52px); line-height:1.12; letter-spacing:0; }
.sidebar-copy { max-width:400px; margin:22px 0 0; color:#cbd4df; font-size:15px; line-height:1.75; }.sidebar-promise { display:flex; align-items:center; gap:8px; margin-top:22px; color:#ffc29d; font-size:12px; font-weight:700; }.sidebar-promise svg { width:16px; }
.side-image { flex:1; min-height:135px; margin:38px -12% 28px; background:url("assets/commercial-premises.png") center/cover; mix-blend-mode:screen; opacity:.84; }
.side-footer { font-size:12px; color:#cbd4df; display:flex; gap:9px; align-items:center; }
.honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.status-dot { width:7px; height:7px; background:#ff8d49; border-radius:50%; }
.main-panel { min-width:0; display:flex; min-height:100vh; flex-direction:column; background:#fbfcfd; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:28px 7.2%; border-bottom:1px solid #edf0f2; }
.progress-wrap { display:grid; grid-template-columns:auto minmax(100px,172px) auto; align-items:center; gap:12px; width:min(100%,440px); color:var(--muted); font:500 11px/1 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.5px; }
.progress-track { height:3px; background:#e3e8eb; overflow:hidden; }
#progress-bar { height:100%; width:0; background:var(--teal); transition:width .25s ease; }
.icon-button { display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid var(--line); color:#4f5b6c; background:#fff; border-radius:4px; }
.icon-button:hover { border-color:var(--teal); color:var(--teal); }.icon-button svg { width:17px; }
.form-area { display:flex; flex:1; width:min(100%,850px); margin:0 auto; padding:72px 7.2% 48px; }
form { width:100%; }.step { display:none; max-width:630px; animation:slide-in .28s ease; }.step.active { display:block; }
@keyframes slide-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
h2 { max-width:600px; margin:0; font-size:clamp(29px,3vw,42px); line-height:1.16; letter-spacing:0; }.intro { max-width:585px; margin:16px 0 34px; color:var(--muted); font-size:15px; line-height:1.7; }
.notice { display:flex; gap:12px; max-width:560px; padding:16px 17px; border-left:3px solid var(--teal); background:#fff2e9; color:#6a4839; font-size:13px; line-height:1.6; }.notice svg { flex:0 0 auto; width:18px; color:var(--teal-dark); }.journey-preview { display:grid; grid-template-columns:repeat(3,1fr); gap:0; max-width:610px; margin-top:31px; border:1px solid var(--line); background:#fff; }.journey-preview > div { min-height:105px; display:grid; align-content:center; gap:4px; padding:17px; border-right:1px solid var(--line); }.journey-preview > div:last-child { border-right:0; }.journey-number { color:var(--teal-dark); font:500 10px/1 "DM Mono",monospace; letter-spacing:.6px; }.journey-preview b { font-size:12px; }.journey-preview small { color:var(--muted); font-size:10px; line-height:1.45; }.welcome-actions { display:flex; align-items:center; gap:16px; margin-top:28px; }.welcome-note { max-width:190px; color:var(--muted); font-size:11px; line-height:1.5; }
.contextual-notice { margin:-12px 0 26px; }
.question-group { margin:26px 0 0; }.question-group + .question-group { padding-top:25px; border-top:1px solid var(--line); }.question-group h3 { margin:0 0 8px; color:#26344a; font-size:15px; line-height:1.4; }.question-group p { margin:0 0 17px; color:var(--muted); font-size:12px; line-height:1.55; }
.follow-up-panel { margin-top:25px; padding:21px; border-left:3px solid var(--teal); background:#fff5ef; }.follow-up-panel h3 { margin:0 0 7px; color:#26344a; font-size:16px; }.follow-up-panel > p { margin:0 0 17px; color:#695448; font-size:12px; line-height:1.55; }
.facility-panel { margin-top:6px; padding:22px; border:1px solid var(--line); background:#fff; }.panel-heading h3 { margin:0 0 5px; color:#26344a; font-size:16px; }.panel-heading p { margin:0 0 20px; color:var(--muted); font-size:12px; line-height:1.55; }.facility-panel .field { max-width:100%; }.detail-prompt { margin:21px 0 11px; color:#4b576b; font-size:12px; font-weight:700; }.facility-options { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.facility-options.invalid-options { outline:2px solid var(--danger); outline-offset:5px; border-radius:4px; }.facility-choice { display:flex; align-items:center; gap:9px; min-height:40px; padding:9px 11px; border:1px solid #d9e0e6; border-radius:4px; color:#445066; font-size:12px; font-weight:600; cursor:pointer; }.facility-choice:has(input:checked) { border-color:var(--teal); background:#fff5ef; color:#9c3e05; }.facility-choice input { flex:0 0 auto; width:15px; height:15px; margin:0; accent-color:var(--teal); }.change-question { margin-top:21px; }.change-details { margin-top:18px; padding:18px; border-left:3px solid var(--teal); background:#fff8f3; }.change-details[hidden] { display:none !important; }
.operator-licence-panel[hidden],.operator-licence-timing[hidden] { display:none !important; }.operator-licence-panel { border-left:3px solid var(--teal); }.operator-licence-timing { margin-top:18px; }.operator-licence-panel .why-we-ask { margin-top:13px; }.operator-licence-panel .why-we-ask a { color:#7e3308; font-weight:800; }
.statement-panel { margin-top:6px; padding:22px; border:1px solid var(--line); border-left:3px solid var(--teal); background:#fff; }.statement-options { display:grid; gap:9px; margin:0; padding:0; border:0; }.statement-options legend { margin-bottom:10px; color:#273349; font-size:13px; font-weight:800; }.statement-options legend em { color:var(--teal-dark); font-style:normal; }.statement-choice { display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; align-items:start; min-height:55px; padding:11px 12px; border:1px solid #d9e0e6; border-radius:4px; color:#354157; cursor:pointer; }.statement-choice:has(input:checked) { border-color:var(--teal); background:#fff5ef; }.statement-choice input { width:16px; height:16px; margin:2px 0 0; accent-color:var(--teal); }.statement-choice span { display:grid; gap:2px; }.statement-choice b { font-size:12px; }.statement-choice small { color:var(--muted); font-size:10px; line-height:1.4; }.statement-upload { margin-top:17px; padding:15px; background:#f7f9fb; border:1px solid #e0e6eb; }.statement-upload[hidden] { display:none !important; }.statement-upload > input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }.file-picker { display:flex; align-items:center; gap:11px; min-height:54px; padding:11px 13px; color:#25364c; background:#fff; border:1px dashed #98a5b4; border-radius:4px; cursor:pointer; }.file-picker:hover { border-color:var(--teal); }.file-picker svg { flex:0 0 auto; width:22px; color:var(--teal-dark); }.file-picker span { display:grid; gap:2px; }.file-picker b { font-size:12px; }.file-picker small { color:var(--muted); font-size:10px; }.file-selection { margin:9px 0 0; color:#5d697b; font-size:10px; line-height:1.5; overflow-wrap:anywhere; }.statement-upload:has(input.invalid) .file-picker { border-color:var(--danger); outline:2px solid rgba(180,35,24,.12); }.statement-security { display:flex; align-items:flex-start; gap:8px; margin:13px 0 0; padding-top:12px; border-top:1px solid #e0e6eb; color:#5a6678; font-size:10px; line-height:1.55; }.statement-security svg { flex:0 0 auto; width:15px; color:#325c4a; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px 18px; }.field { display:grid; align-content:start; gap:8px; color:#273349; font-size:13px; font-weight:700; }.field-wide { grid-column:1/-1; }.field em,.consent em { color:var(--teal-dark); font-style:normal; }
.homeowner-field > label { display:grid; gap:8px; }.why-we-ask { margin-top:2px; color:#586579; font-size:11px; font-weight:500; line-height:1.55; }.why-we-ask summary { display:flex; align-items:center; gap:6px; width:max-content; color:#b84404; font-size:11px; font-weight:800; cursor:pointer; list-style:none; }.why-we-ask summary::-webkit-details-marker { display:none; }.why-we-ask summary svg { width:14px; height:14px; }.why-we-ask p { margin:9px 0 0; padding:11px 12px; border-left:2px solid var(--teal); background:#fff5ef; color:#65564e; font-weight:500; overflow-wrap:anywhere; }
.field-help { display:block; margin-top:6px; color:#68768a; font-size:10px; font-weight:500; line-height:1.45; }.welcome-note button { padding:0; color:#d96017; background:none; border:0; font:inherit; font-weight:800; text-decoration:underline; text-underline-offset:2px; }
input,select,textarea { width:100%; outline:none; border:1px solid #cfd6de; border-radius:4px; background:#fff; color:var(--ink); padding:12px 13px; font-size:14px; font-weight:500; transition:border-color .15s,box-shadow .15s; } input::placeholder,textarea::placeholder { color:#9aa4b2; font-weight:400; } select { appearance:auto; } textarea { resize:vertical; line-height:1.45; }.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(247,107,23,.14); }.field input.invalid,.field select.invalid,.field textarea.invalid { border-color:var(--danger); }
.input-prefix { position:relative; }.input-prefix span { position:absolute; top:50%; left:13px; color:#758094; transform:translateY(-50%); font-weight:600; }.input-prefix input { padding-left:29px; }
.funding-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.choice-card { position:relative; min-height:120px; display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto auto; column-gap:12px; padding:17px; border:1px solid #d6dce3; border-radius:5px; background:#fff; cursor:pointer; transition:border-color .15s,transform .15s,box-shadow .15s; }.choice-card:last-child { grid-column:1/-1; min-height:81px; }.choice-card input { position:absolute; opacity:0; }.choice-card:hover { transform:translateY(-1px); border-color:#f2a270; }.choice-card:has(input:checked) { border-color:var(--teal); box-shadow:0 0 0 2px rgba(247,107,23,.14); }.choice-icon { grid-row:1/3; display:grid; place-items:center; width:42px; height:42px; color:var(--teal-dark); background:#fff1e7; border-radius:4px; }.choice-icon svg { width:20px; }.choice-card b { align-self:end; font-size:14px; }.choice-card small { align-self:start; margin-top:4px; color:var(--muted); font-size:11px; line-height:1.4; }
.funding-finder { margin-top:19px; border-top:1px solid var(--line); }.finder-toggle { display:inline-flex; align-items:center; gap:8px; margin-top:15px; padding:0; border:0; color:#b84404; background:transparent; font-size:12px; font-weight:800; }.finder-toggle svg { width:16px; }.finder-panel { display:grid; gap:17px; margin-top:15px; padding:20px; border-left:3px solid var(--teal); background:#fff5ef; }.finder-panel[hidden] { display:none !important; }.finder-eyebrow { margin:0 0 5px; color:var(--teal-dark); font:500 10px/1 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.7px; }.finder-panel h3 { margin:0; color:#26344a; font-size:16px; }.finder-options { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.finder-options button { display:flex; align-items:center; gap:9px; min-height:44px; padding:10px; border:1px solid #f0d5c4; border-radius:4px; color:#483d38; background:#fff; text-align:left; font-size:11px; font-weight:700; }.finder-options button:hover { border-color:var(--teal); color:#b84404; }.finder-options svg { width:17px; color:var(--teal-dark); }.finder-answer { margin:0; color:#745846; font-size:12px; line-height:1.55; }
.form-actions { display:flex; justify-content:space-between; align-items:center; margin-top:38px; }.primary-button,.secondary-button,.text-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:4px; font-size:13px; font-weight:800; }.primary-button { min-height:45px; padding:0 18px; border:1px solid var(--teal); color:#fff; background:var(--teal); }.primary-button:hover { background:var(--teal-dark); border-color:var(--teal-dark); }.primary-button svg,.secondary-button svg,.text-button svg { width:17px; }.text-button { min-height:40px; padding:0; border:0; color:#59657a; background:transparent; }.text-button:hover { color:var(--teal-dark); }.secondary-button { min-height:45px; padding:0 16px; border:1px solid var(--line); color:#344057; background:#fff; }.secondary-button:hover { border-color:#92a1b2; }
.summary { border:1px solid var(--line); background:#fff; }.summary-section { padding:17px 19px; border-bottom:1px solid var(--line); }.summary-section:last-child { border-bottom:0; }.summary-heading { margin-bottom:11px; color:#6f7989; font:500 10px/1 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.7px; }.summary-row { display:grid; grid-template-columns:160px 1fr; gap:16px; margin-top:7px; font-size:13px; line-height:1.5; }.summary-row span { color:var(--muted); }.summary-row b { font-weight:600; }.consent { display:flex; gap:10px; margin:22px 0 0; color:#516075; font-size:12px; line-height:1.6; }.consent input { flex:0 0 auto; width:16px; height:16px; margin:2px 0 0; accent-color:var(--teal); }
.success-step { max-width:560px; padding-top:35px; }.success-icon { display:grid; place-items:center; width:54px; height:54px; margin-bottom:26px; color:#fff; background:var(--teal); border-radius:50%; }.success-icon svg { width:26px; }.success-step h2 { font-size:38px; }.submitted-details { display:grid; grid-template-columns:1fr 1fr; gap:7px 20px; margin:32px 0; padding:18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.submitted-details span { color:var(--muted); font:500 10px/1.2 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.7px; }.submitted-details b { font-size:14px; }.success-actions { display:flex; gap:12px; flex-wrap:wrap; }
.document-result { display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; margin:-14px 0 28px; padding:14px; color:#315742; background:#f1f8f4; border-left:3px solid #39775a; font-size:12px; }.document-result[hidden] { display:none !important; }.document-result > svg { width:19px; }.document-result b { display:block; }.document-result p { margin:4px 0 0; color:#51675b; line-height:1.5; }.document-result .text-button { min-height:30px; margin-top:5px; color:#8e3c0c; }.document-result.has-error { color:#7e3308; background:#fff5ef; border-color:var(--teal); }.document-result.has-error p { color:#684c3e; }
footer { display:flex; justify-content:space-between; gap:20px; padding:22px 7.2%; color:#7d8795; font-size:11px; border-top:1px solid #edf0f2; }.footer-contact,.footer-legal { display:flex; flex-wrap:wrap; gap:5px 13px; align-items:center; }.footer-legal { justify-content:flex-end; text-align:right; }.footer-contact a,.footer-legal a,.consent a { color:#445f78; font-weight:700; text-decoration:underline; text-underline-offset:2px; }.footer-contact a:hover,.footer-legal a:hover,.consent a:hover { color:var(--teal-dark); }#toast { position:fixed; right:22px; bottom:22px; z-index:5; max-width:350px; padding:12px 15px; color:#fff; background:#26354b; border-radius:4px; font-size:13px; opacity:0; pointer-events:none; transform:translateY(8px); transition:.18s; }#toast.show { opacity:1; transform:none; }
@media (max-width:800px) { .app-shell{grid-template-columns:1fr}.sidebar{min-height:224px}.sidebar-content{min-height:0;padding:27px 8% 30px}.brand{height:132px;padding:14px 8% 4px}.brand img{width:185px;height:106px}.sidebar h1{max-width:460px;font-size:31px}.sidebar-copy{margin-top:10px;line-height:1.55}.side-image,.side-footer{display:none}.form-area{padding-top:50px}.topbar{padding:20px 8%}footer{padding:18px 8%}.progress-wrap{grid-template-columns:auto minmax(80px,1fr) auto;gap:8px} }
@media (max-width:520px) { .field-grid,.funding-grid,.finder-options{grid-template-columns:1fr}.choice-card:last-child{grid-column:auto}.form-area{padding:38px 6%}.topbar{padding:18px 6%}.progress-wrap{font-size:9px}.progress-wrap #progress-name{display:none}.journey-preview{grid-template-columns:1fr}.journey-preview > div{min-height:67px;grid-template-columns:29px 1fr;grid-template-rows:auto auto;column-gap:7px;padding:12px;border-right:0;border-bottom:1px solid var(--line)}.journey-preview > div:last-child{border-bottom:0}.journey-number{grid-row:1/3}.welcome-actions{align-items:flex-start;flex-direction:column}.form-actions{margin-top:30px}.summary-row{grid-template-columns:1fr;gap:3px}.submitted-details{grid-template-columns:1fr}.success-actions{display:grid}.success-actions button{width:100%}.statement-panel{padding:17px 14px}.statement-choice{min-height:0}.file-picker{align-items:flex-start}footer{font-size:10px;flex-direction:column;gap:5px;padding:17px 6%}.footer-legal{justify-content:flex-start;text-align:left} }
@media print { .sidebar,.topbar,footer,.form-actions,.success-actions{display:none!important}.app-shell{display:block}.main-panel{min-height:0}.form-area{padding:0;display:block}.step{display:none!important}.success-step{display:block!important;max-width:none}.success-step .intro{max-width:none}body{background:#fff} }