/* ==========================================================================
   DS Electrical Installations (SW) Ltd — Instant Estimate
   Re-skinned to match www.dselectricalsw.co.uk:
   warm near-black + gold/brass + cream text + light bands + big photography.
   Tokens lifted from the live site's shared-inline stylesheet.
   ========================================================================== */

*{margin:0;padding:0;box-sizing:border-box}
:root{
 --dark:#0a0908;--dark2:#131110;--dark3:#1c1915;
 --light:#f8f5f0;--light2:#eee9e0;--light3:#e2dbd0;
 --brass:#b8944f;--gold:#d4a44a;--brass-text:#7a5e28;
 --text-dark:#1a1714;--text-muted:#6b6560;
 --text-light:#f0e8da;--text-light-muted:#8c7d6a;
 --ok:#3e7d52;--err:#b3261e;
 --radius:14px;--radius-sm:8px;
}

html{scroll-behavior:smooth;background:var(--dark)}
body{font-family:'Outfit',sans-serif;background:var(--dark);color:var(--text-dark);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.55}
a{color:inherit;text-decoration:none;transition:.2s}
img{display:block;max-width:100%}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ---------- a11y helpers ---------- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:1rem;top:-3.5rem;z-index:200;background:var(--gold);color:var(--dark);font-weight:700;padding:.6rem 1rem;border-radius:6px;transition:top .15s ease}
.skip-link:focus{top:1rem}

/* ---------- nav (site pattern) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1rem,5vw,4rem);background:rgba(10,9,8,.92);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.04)}
.nav-logo{flex-shrink:0;display:flex;align-items:center}
.nav-logo img{height:70px;width:auto;max-width:none}
.nav-cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--gold);color:var(--dark);padding:.55rem 1.2rem;border-radius:6px;font-weight:700;font-size:.82rem;white-space:nowrap;flex-shrink:0}
.nav-cta:hover{background:var(--brass)}
.nav-cta svg{width:15px;height:15px}

/* ---------- hero — split dark panel + big photo (site pattern) ---------- */
.hero{display:grid;grid-template-columns:1fr 1fr;background:var(--dark);margin-top:72px;min-height:62vh}
.hero-text{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(3rem,6vw,5.5rem) clamp(1.5rem,5vw,5rem)}
.hero-text::after{content:'';position:absolute;top:-20%;right:-30%;width:60%;height:140%;background:radial-gradient(circle,rgba(212,164,74,.08) 0%,transparent 60%);pointer-events:none;z-index:0}
.hero-text>*{position:relative;z-index:1}
.hero-tag{font-size:.65rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:1.6rem}
.hero-tag span{display:inline-flex;align-items:center;gap:.5rem}
.hero-tag span::before{content:'';width:8px;height:8px;background:#5a9e6f;border-radius:50%}
.hero h1{font-size:clamp(2.6rem,5.5vw,4.6rem);font-weight:900;line-height:.92;color:#fff;letter-spacing:-.03em;margin-bottom:1.5rem}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero-desc{font-size:1.05rem;color:rgba(240,232,218,.6);line-height:1.7;max-width:440px}
.hero-phone{font-family:'JetBrains Mono',monospace;font-size:.95rem;color:rgba(240,232,218,.5);margin-top:1.6rem;display:block}
.hero-phone:hover{color:var(--gold)}
.hero-img{position:relative;overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-img::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--dark) 0%,transparent 30%)}
.hero-img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:25%;z-index:1;background:linear-gradient(to top,rgba(10,9,8,.55),transparent)}
.hero-img figcaption{position:absolute;bottom:1rem;right:1.2rem;z-index:2;font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,232,218,.75)}

/* ---------- wizard band — LIGHT (breaks up the dark) ---------- */
.wizard-band{background:var(--light);padding:clamp(3rem,6vw,5rem) clamp(1rem,5vw,4rem) clamp(3.5rem,7vw,5.5rem);border-top:1px solid var(--light3)}
.wizard-shell{max-width:760px;margin:0 auto}
.band-tag{font-size:.65rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-text);margin-bottom:.4rem}
.band-heading{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:900;line-height:1.05;letter-spacing:-.02em;color:var(--text-dark);margin-bottom:1.6rem}

.progress{margin-bottom:1rem}
.progress-track{height:6px;background:var(--light3);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;width:25%;background:linear-gradient(90deg,var(--brass),var(--gold));border-radius:999px;transition:width .35s ease}
.progress-label{margin:.5rem 0 0;font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}

.wizard-card{background:#fff;border:1px solid var(--light3);border-radius:var(--radius);box-shadow:0 4px 24px rgba(0,0,0,.06);padding:clamp(1.4rem,3vw,2.2rem)}

.step{animation:step-in .3s ease both}
@keyframes step-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.step h2{margin:.2rem 0 .4rem;font-size:1.45rem;font-weight:800;line-height:1.15;color:var(--text-dark)}
.step h2:focus{outline:none}
.step-hint{margin:0 0 1.1rem;color:var(--text-muted);font-size:.95rem}

/* ---------- buttons (site .btn / .btn-gold pattern) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:'Outfit',sans-serif;font-size:.92rem;font-weight:700;letter-spacing:.02em;border-radius:6px;border:1.5px solid transparent;padding:.78rem 1.6rem;min-height:48px;cursor:pointer;text-decoration:none;text-align:center;transition:.25s}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--gold);color:var(--dark)}
.btn-primary:hover{background:var(--brass);transform:translateY(-2px);box-shadow:0 8px 30px rgba(212,164,74,.3)}
.btn-secondary{background:var(--dark);color:var(--text-light)}
.btn-secondary:hover{background:var(--dark3)}
.btn-ghost{background:transparent;color:var(--text-dark);border-color:var(--light3)}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass-text)}
.btn-sm{padding:.45rem .95rem;min-height:40px;font-size:.85rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.btn-row .btn-primary{flex:1 1 220px}

.link-back{background:none;border:none;color:var(--text-muted);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;padding:.5rem .25rem;display:inline-flex;align-items:center;gap:.35rem}
.link-back:hover{color:var(--brass-text)}

:focus-visible{outline:2px solid rgba(212,164,74,.85);outline-offset:3px;border-radius:4px}

/* ---------- job grid ---------- */
.job-grid{display:grid;grid-template-columns:1fr;gap:.65rem;margin:0;padding:0;list-style:none}
@media (min-width:540px){.job-grid{grid-template-columns:1fr 1fr}}
.job-card{display:flex;align-items:center;gap:.85rem;width:100%;text-align:left;font-family:inherit;color:var(--text-dark);background:var(--light);border:1.5px solid var(--light3);border-radius:10px;padding:.85rem .95rem;min-height:64px;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,transform .12s ease,box-shadow .2s ease}
.job-card:hover{border-color:var(--gold);background:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.job-icon{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:10px;background:rgba(212,164,74,.14);color:var(--brass-text)}
.job-icon svg{width:24px;height:24px}
.job-card-title{font-weight:700;font-size:.98rem;display:block}
.job-card-desc{display:block;font-size:.8rem;color:var(--text-muted);margin-top:.12rem}

/* ---------- option groups (radio cards) ---------- */
fieldset{border:none;margin:0 0 1.25rem;padding:0}
legend{font-weight:700;font-size:1.02rem;padding:0;margin-bottom:.2rem;color:var(--text-dark)}
.legend-hint{font-size:.85rem;color:var(--text-muted);margin:0 0 .6rem}
.option-list{display:grid;gap:.55rem;margin-top:.6rem}
.option{position:relative}
.option input[type="radio"]{position:absolute;opacity:0;width:1px;height:1px}
.option label{display:flex;align-items:center;gap:.7rem;border:1.5px solid var(--light3);border-radius:10px;background:var(--light);padding:.75rem .9rem;min-height:52px;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.option label::before{content:"";width:20px;height:20px;flex:none;border-radius:50%;border:2px solid var(--text-muted);background:#fff;transition:border-color .15s ease,box-shadow .15s ease}
.option input:checked + label{border-color:var(--gold);background:rgba(212,164,74,.08)}
.option input:checked + label::before{border-color:var(--brass);box-shadow:inset 0 0 0 5px var(--gold)}
.option input:focus-visible + label{outline:2px solid rgba(212,164,74,.85);outline-offset:2px}
.option-label-main{font-weight:600}
.option-label-hint{display:block;font-size:.8rem;color:var(--text-muted);font-weight:400}

/* ---------- estimate ---------- */
.estimate-job-name{color:var(--brass-text);font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin:0 0 .2rem}
.estimate-table{width:100%;border-collapse:collapse;margin:1rem 0 .4rem;font-size:.95rem}
.estimate-table th,.estimate-table td{text-align:left;padding:.6rem .2rem;border-bottom:1px solid var(--light3);vertical-align:top}
.estimate-table td:last-child,.estimate-table th:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-family:'JetBrains Mono',monospace;font-size:.88rem}
.estimate-table .line-note{display:block;font-size:.78rem;color:var(--text-muted);font-weight:400;font-family:'Outfit',sans-serif}
.estimate-table .total-row td{border-bottom:none;padding-top:.8rem;font-weight:800;font-size:1.05rem}
.estimate-table .total-row .from-amount{color:var(--brass-text)}
.estimate-from{font-size:.74rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-family:'Outfit',sans-serif}
.included-list{margin:.9rem 0 0;padding:0;list-style:none;display:grid;gap:.35rem;font-size:.9rem;color:var(--text-muted)}
.included-list li{display:flex;gap:.5rem;align-items:baseline}
.included-list li::before{content:"";width:7px;height:7px;flex:none;transform:translateY(-1px) rotate(45deg);background:var(--gold)}
.disclaimer{margin-top:1.2rem;border:1px dashed rgba(184,148,79,.6);border-radius:10px;background:rgba(212,164,74,.07);padding:.85rem 1rem;font-size:.85rem;color:var(--text-dark)}
.disclaimer strong{color:var(--brass-text)}
.note-panel{margin-top:1rem;border-left:3px solid var(--gold);background:var(--light);border-radius:0 10px 10px 0;padding:.75rem .95rem;font-size:.88rem;color:var(--text-muted)}

/* ---------- form ---------- */
.form-grid{display:grid;gap:1.05rem;margin-top:.4rem}
.field label{display:block;font-weight:700;margin-bottom:.35rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-text)}
.field .optional{font-weight:500;color:var(--text-muted);font-size:.72rem;text-transform:none;letter-spacing:0}
.field input[type="text"],.field input[type="tel"],.field input[type="email"],.field textarea{width:100%;font-family:'Outfit',sans-serif;font-size:.95rem;color:var(--text-dark);background:var(--light);border:1.5px solid var(--light3);border-radius:8px;padding:.75rem .9rem;min-height:48px;transition:border-color .15s ease,background .15s ease}
.field textarea{resize:vertical;min-height:96px}
.field input:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--gold);background:#fff}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--err)}
.field-error{display:none;margin-top:.35rem;color:var(--err);font-size:.85rem;font-weight:600}
.field-error.visible{display:block}
.field-note{margin-top:.35rem;font-size:.82rem;color:var(--text-muted)}
.field-note.area-ok{color:var(--ok);font-weight:600}

/* honeypot — hidden from humans, present for bots */
.hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}

/* photo upload */
.photo-drop{border:1.5px dashed var(--light3);border-radius:10px;background:var(--light);padding:1rem;text-align:center}
.photo-drop p{margin:.4rem 0 0;font-size:.82rem;color:var(--text-muted)}
.photo-thumbs{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.8rem;justify-content:center}
.photo-thumb{position:relative;width:76px;height:76px;border-radius:8px;overflow:hidden;border:1px solid var(--light3)}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-thumb button{position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;border:none;background:rgba(10,9,8,.85);color:#fff;font-weight:800;font-size:.85rem;line-height:1;cursor:pointer}
.photo-thumb button:hover{color:var(--gold)}

/* submission states */
.submit-status{margin-top:.9rem;font-size:.9rem}
.fallback-panel{margin-top:1.1rem;border:1px solid rgba(179,38,30,.4);border-radius:10px;background:rgba(179,38,30,.05);padding:1rem 1.1rem}
.fallback-panel h3{margin:0 0 .4rem;font-size:1.05rem}
.fallback-panel p{margin:0 0 .8rem;font-size:.9rem;color:var(--text-muted)}

/* ---------- confirmation ---------- */
.confirm-badge{width:64px;height:64px;border-radius:50%;background:rgba(62,125,82,.1);border:2px solid var(--ok);display:grid;place-items:center;margin-bottom:.9rem}
.confirm-badge svg{width:30px;height:30px;color:var(--ok)}
.next-steps{margin:1.1rem 0 0;padding:0;list-style:none;counter-reset:step;display:grid;gap:.85rem}
.next-steps li{counter-increment:step;display:flex;gap:.85rem;align-items:baseline}
.next-steps li::before{content:counter(step);flex:none;width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--dark);font-weight:800;display:grid;place-items:center;transform:translateY(4px);font-family:'JetBrains Mono',monospace;font-size:.85rem}
.summary-box{margin-top:1.2rem;background:var(--light);border:1px solid var(--light3);border-radius:10px;padding:.9rem 1rem;font-size:.9rem}
.summary-box dt{color:var(--brass-text);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin-top:.6rem}
.summary-box dt:first-child{margin-top:0}
.summary-box dd{margin:.1rem 0 0;font-weight:600}

/* ---------- talk bar ---------- */
.talk-bar{margin-top:1rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;border:1px solid var(--light3);border-radius:10px;padding:.6rem .9rem;background:var(--light2)}
.talk-bar-label{font-size:.88rem;font-weight:700;color:var(--text-dark)}
.talk-bar-actions{display:flex;gap:.5rem;flex-wrap:wrap}

/* ---------- recent work — photo cards with overlay (site .svc pattern) ---------- */
.work-strip{background:var(--light2);padding:clamp(3.5rem,7vw,5.5rem) clamp(1rem,5vw,4rem);border-top:1px solid var(--light3)}
.work-inner{max-width:1100px;margin:0 auto}
.work-strip .band-tag{margin-bottom:.4rem}
.work-strip h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:900;letter-spacing:-.02em;color:var(--text-dark);margin:0 0 1.8rem;line-height:1.05}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.work-item{margin:0;border-radius:14px;overflow:hidden;position:relative;aspect-ratio:4/3;transition:.4s}
.work-item:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.15)}
.work-item img{width:100%;height:100%;object-fit:cover;transition:.5s}
.work-item:hover img{transform:scale(1.05)}
.work-item figcaption{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,9,8,.85) 0%,rgba(10,9,8,.15) 45%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem 1.3rem;font-size:.88rem;font-weight:700;color:#fff}

/* ---------- trust ---------- */
.trust{background:var(--light2);padding:0 clamp(1rem,5vw,4rem) clamp(3rem,6vw,4.5rem);text-align:center}
.trust-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:0;padding:1.6rem 0 0;list-style:none;border-top:1px solid var(--light3);max-width:1100px;margin:0 auto}
.trust-strip li{border:1px solid var(--light3);border-radius:999px;padding:.4rem 1.1rem;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);background:var(--light)}
.trust-line{margin:1rem auto 0;font-size:.82rem;color:var(--text-muted);max-width:60ch}

/* ---------- footer (site pattern) ---------- */
.site-footer{background:var(--dark);border-top:1px solid rgba(255,255,255,.04);padding:3rem clamp(1rem,5vw,4rem) 2rem;text-align:center;font-size:.82rem;color:rgba(240,232,218,.4)}
.footer-logo{display:block;height:64px;width:auto;margin:0 auto 1.2rem}
.site-footer a{color:rgba(240,232,218,.6)}
.site-footer a:hover{color:var(--gold)}
.footer-coverage{max-width:56ch;margin:0 auto .6rem;line-height:1.8}
.footer-contact{margin:0 0 .8rem}
.footer-legal{margin:0;font-size:.72rem;color:rgba(255,255,255,.25)}

.noscript-panel h2{margin-top:0}
.noscript-panel .btn{margin:.3rem .3rem .3rem 0}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-text{padding:2.6rem 1.4rem 2.4rem;order:2}
  .hero-img{height:38vh;min-height:250px;max-height:380px;order:1}
  .hero-img::before{background:linear-gradient(180deg,var(--dark) 0%,transparent 25%)}
  .work-grid{grid-template-columns:1fr}
  .work-item{aspect-ratio:16/10}
}
@media (max-width:480px){
  .nav{padding:0 1rem}
  .nav-logo img{height:58px}
  .hero h1{font-size:2.3rem;line-height:.98}
  .hero-img{height:32vh;min-height:220px}
  .wizard-band{padding-left:1rem;padding-right:1rem}
  .wizard-card{padding:1.2rem 1rem 1.4rem}
}