/* Photo-led Lxkey PCs design. Original photography is framed with CSS,
   keeping the source images intact and the actual hardware unaltered. */
:root{--bg:#f1f4f8;--ink:#142132;--muted:#516174;--line:#cdd6e2;color-scheme:light}
body{background:var(--bg);color:var(--ink)}
.header{color:#f3f7ff;background:#070c15}.header nav{color:#edf3fa}.header .nav-contact{background:#123351;border-color:#337cab}.header .menu-toggle span{background:#edf3fa}
.hero{max-width:1440px;grid-template-columns:1fr 1.13fr;gap:5%;min-height:640px;padding-top:45px;padding-bottom:45px}
.hero h1{color:#142132;font-size:clamp(42px,5.05vw,72px);letter-spacing:-2.8px;line-height:1.13}.hero h1 .accent{color:#086bdd;text-shadow:none}.hero .eyebrow{color:#245b82}.hero .tiny-cross{color:#027dbd}.hero-description{color:#46566a;max-width:380px;font-size:18px;line-height:1.75}.hero-footnote{color:#516174}.hero .mini-icon{color:#0879a4;border-color:#8facbe}.hero .text-link{color:#183654}.hero .text-link span{color:#076cbb}
.hero-visual{margin:0;height:560px;aspect-ratio:auto;border-radius:8px;box-shadow:0 15px 40px #122d4b1f;background:#052557}.hero-image{object-fit:cover;object-position:50% 29%;height:100%;width:100%}.hero-visual figcaption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#031022e8);padding:65px 26px 24px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:15px}.hero-visual figcaption span{font-size:11px;letter-spacing:1.5px}.hero-visual figcaption a{font-size:13px;font-weight:600;color:#a5eaff}
.primary,.dark-button{background:#086be0;color:#fff;border:1px solid #086be0}.primary:hover,.dark-button:hover{background:#0058bd}.service-strip{background:#086be0;border:0;color:#fff}.service-strip b{color:#b1edff}.services{padding-top:68px;padding-bottom:70px}.services .eyebrow{color:#37658b}.services h2{font-size:40px}.service-grid{gap:16px}.service-card{background:#fff;color:#142132;border:1px solid #d0dbe8;border-radius:7px;box-shadow:0 5px 18px #2b476a06}.service-card:hover{background:#e6f2ff;border-color:#63a5df;box-shadow:0 12px 28px #193b6012}.card-top{margin-bottom:22px}.card-top svg{stroke:#057bd1}.card-top>span{color:#5e7892}.service-card p{font-size:16px;line-height:1.65;color:#526276;margin-bottom:24px}.service-card h3{font-size:20px}.card-bottom{border-color:#d6e0eb}.circle-arrow{background:#e3effc;color:#086bdd}.card-bottom>span:first-child{font-size:11px;letter-spacing:.3px}
.build-gallery{max-width:none;background:#07101b;color:#edf3fa;padding-top:65px;padding-bottom:65px}.gallery-heading,.photo-grid{max-width:1268px;margin-left:auto;margin-right:auto}.gallery-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:35px}.gallery-heading .eyebrow{color:#7fc9ef;margin-bottom:15px}.gallery-heading h2{font-size:48px}.gallery-heading p:not(.eyebrow){color:#b0c2d7;margin:0 0 22px;font-size:16px}.gallery-heading .accent{color:#22befe}.photo-grid{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:620px;gap:20px}.photo-card{margin:0;overflow:hidden;border-radius:7px;position:relative;background:#152a42;border:1px solid #354a61}.photo-feature{grid-row:auto}.photo-card img{height:100%;width:100%;object-fit:cover;display:block}.photo-feature img{object-position:50% 30%}.photo-white img{object-position:50% 49%}.photo-card figcaption{position:absolute;bottom:0;left:0;right:0;padding:55px 23px 20px;background:linear-gradient(transparent,#040d1eed);color:#fff;pointer-events:none}.photo-card figcaption span{font-size:11px;color:#b0d8f3;letter-spacing:1.7px}.photo-card h3{font-size:23px;font-weight:600;letter-spacing:-.6px;line-height:1.25;margin:5px 0 0}
.process{padding-top:48px;padding-bottom:50px}.process>.eyebrow{color:#37658b;margin-bottom:24px}.steps{margin-top:0;gap:35px}.step-number{padding-top:14px;margin-bottom:12px;font-size:26px;color:#086bdd}.steps h3{font-size:20px;margin-bottom:7px}.steps p{font-size:16px;color:#526276}.reviews-section{margin-bottom:45px;padding:28px 0}.reviews-section .eyebrow{color:#37658b}.reviews-section h2{font-size:29px}.reviews-section p:not(.eyebrow){color:#526276;max-width:470px}.review-actions .text-link{color:#175789}.review-actions .text-link span{color:#087cc0}
.contact{background:#e1edfa;border-color:#a4c6e8;color:#142132;box-shadow:none;padding-top:42px;padding-bottom:42px;margin-bottom:40px}.contact h2{font-size:45px}.contact h2>span{color:#086be0}.contact .eyebrow{color:#30648c}.contact p:not(.eyebrow){color:#476079}.contact .email-link{border-color:#82afd1}.contact .email-link span{color:#087bbd}.enquiry{border-color:#b3cce4}.service-options button{background:#f4f8ff;border-color:#a7bfd7;color:#294764}.service-options button:hover{background:#d0e7ff}.service-options .selected{background:#075bbd;color:white;border-color:#075bbd}.enquiry .email-note{color:#52697d}.footer-top .brand{background:#070c15;border-radius:5px;padding:0 13px 0 3px}.footer-top p,.footer-bottom{color:#536579}
@media(min-width:1600px){.build-gallery{padding-left:calc((100% - 1268px)/2);padding-right:calc((100% - 1268px)/2)}}
@media(max-width:1050px){.hero{min-height:550px}.hero h1{font-size:49px}.hero-visual{height:480px}.hero-visual figcaption{align-items:flex-start;flex-direction:column;gap:7px}.photo-grid{grid-template-rows:500px}.services h2{font-size:36px}}
@media(max-width:760px){.header nav{color:#fff}.hero{grid-template-columns:1fr;min-height:0;gap:28px;padding-top:35px;padding-bottom:32px}.hero h1{font-size:clamp(39px,9vw,62px);letter-spacing:-1.8px;margin-bottom:18px}.hero-description{font-size:17px;max-width:480px}.hero .eyebrow{margin-bottom:20px}.hero-actions{margin-top:23px}.hero-footnote{margin-top:20px}.hero-visual{max-width:none;width:100%;height:420px;aspect-ratio:auto}.hero-image{object-position:50% 25%}.hero-visual figcaption{flex-direction:row;align-items:center;padding:50px 18px 18px}.hero-visual figcaption span{max-width:120px;font-size:10px}.services{padding-top:44px;padding-bottom:44px}.services h2{font-size:33px}.section-heading{margin-bottom:24px}.service-card{padding:20px}.card-top{margin-bottom:18px}.build-gallery{padding-top:43px;padding-bottom:43px}.gallery-heading{display:block;margin-bottom:25px}.gallery-heading h2{font-size:39px}.gallery-heading p:not(.eyebrow){margin:20px 0}.photo-grid{grid-template-columns:1fr;grid-template-rows:auto;gap:16px}.photo-feature{height:490px}.photo-white{height:350px}.photo-card h3{font-size:22px}.process{padding-top:35px;padding-bottom:35px}.process .steps{gap:20px}.process .steps article{padding-top:18px}.process .step-number{padding-top:0;font-size:24px}.contact h2{font-size:36px}.contact{padding:30px 7%}.contact .enquiry{border-color:#b3cce4}.reviews-section h2{font-size:27px}.review-actions{gap:10px}.footer-top{gap:16px}}
@media(max-width:450px){.hero-actions{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}.hero .button{font-size:13px;padding:14px 17px}.hero .text-link{font-size:13px}.hero-visual{height:365px}.service-grid{grid-template-columns:1fr}.photo-feature{height:440px}.hero h1{font-size:clamp(34px,9.3vw,43px)}}

/* Hidden entry points (the WhatsApp button before a number is set) must actually
   stay hidden - .button sets display:inline-flex, which beats the [hidden] default. */
[hidden]{display:none!important}
.whatsapp-button{--wa-bg:#12823d;background:var(--wa-bg);color:#fff;border:1px solid var(--wa-bg);width:100%;margin-top:10px;justify-content:center;gap:12px}
.whatsapp-button:hover{--wa-bg:#0e6a31;background:var(--wa-bg);box-shadow:0 8px 30px #12823d25}
.wa-icon{width:22px;height:22px;flex:none;fill:currentColor}
.wa-icon .wa-handset{fill:var(--wa-bg)}
#whatsapp-footer{color:#12823d;font-weight:600}
/* "Free quotes" leads the service band; on mobile the band is a two-column grid,
   so the odd item out spans the full width instead of stranding a gap beside it. */
.strip-offer{font-weight:800}
@media(max-width:760px){.service-strip>span:first-child{grid-column:1/-1}}

/* Website enquiry form, inside the light contact panel. */
.enquiry-form{margin-top:22px;padding-top:20px;border-top:1px solid #b3cce4}
.form-lead{margin:0 0 14px;font-size:14px!important;font-weight:700;color:#294764!important}
.enquiry-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.enquiry-fields label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:#294764}
.enquiry-fields .label-text{display:block}
.enquiry-fields .label-text span{font-weight:400;color:#5c738c}
.enquiry-fields .full{grid-column:1/-1}
.enquiry-fields input,.enquiry-fields textarea,.enquiry-fields select{padding:11px 12px;font-size:15px;color:#142132;background:#fff;border:1px solid #a7bfd7;border-radius:6px;font-family:inherit}
.enquiry-fields input:focus,.enquiry-fields textarea:focus,.enquiry-fields select:focus{border-color:#086be0;outline:2px solid #86c2ff;outline-offset:1px}
.enquiry-fields textarea{resize:vertical;min-height:96px}
.trap-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.enquiry-submit{width:100%;margin-top:14px;justify-content:center;gap:12px}
.form-status{margin:10px 0 0;font-size:13px!important;color:#31567a!important;min-height:1.2em}
.form-status.error{color:#b3261e!important;font-weight:600}
.form-sent{margin:0;font-size:15px!important;color:#1c3d5c!important}
.form-sent strong{display:block;margin-bottom:4px;font-size:17px}
.form-privacy{margin:12px 0 0;font-size:12px!important;line-height:1.6;color:#5c738c!important}
.form-privacy a{text-decoration:underline}
@media(max-width:760px){.enquiry-fields{grid-template-columns:1fr}}

/* Privacy page */
.legal{max-width:760px;margin:0 auto;padding:60px 6% 80px}
.legal h1{font-family:Manrope,sans-serif;font-size:clamp(34px,5vw,48px);letter-spacing:-1.5px;margin:0 0 10px}
.legal .updated{color:#5c738c;font-size:14px;margin:0 0 36px}
.legal h2{font-size:20px;margin:34px 0 10px}
.legal p,.legal li{font-size:16px;line-height:1.75;color:#33475c}
.legal ul{padding-left:20px}
.legal a{color:#086be0;text-decoration:underline}
.legal .back{display:inline-block;margin-top:40px;font-weight:700}

/* <picture> puts an element between the figure and the image, so the wrapper
   has to carry the sizing the image used to get directly. */
.hero-visual picture,.photo-card picture{display:block;width:100%;height:100%}

/* ---- Service pages ---- */
.service-page{max-width:1000px;margin:0 auto;padding:0 6% 70px}
.breadcrumb{padding:26px 0 0;font-size:13px;color:#5c738c}
.breadcrumb a{color:#086be0;text-decoration:underline}
.breadcrumb span[aria-hidden]{margin:0 6px;color:#a7bacd}
.page-hero{padding:34px 0 40px;border-bottom:1px solid #d8e4f0}
.page-hero .eyebrow{color:#30648c;margin-bottom:18px}
.page-hero h1{font-family:Manrope,sans-serif;font-size:clamp(32px,5vw,52px);line-height:1.1;letter-spacing:-1.6px;margin:0 0 20px;color:#101d2e}
.page-lead{font-size:19px;line-height:1.7;color:#33475c;max-width:700px;margin:0 0 28px}
.page-hero .hero-actions{margin-top:0;flex-wrap:wrap}
.page-note{margin:16px 0 0;font-size:13px;color:#5c738c}
.prose{padding:36px 0 4px;max-width:760px}
.prose h2,.fault-section h2,.faq h2,.page-cta h2{font-family:Manrope,sans-serif;font-size:clamp(24px,3vw,32px);letter-spacing:-.8px;margin:0 0 18px;color:#101d2e}
.prose p{font-size:17px;line-height:1.8;color:#3d5268;margin:0 0 18px}
.fault-section{padding:40px 0 10px}
.fault-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fault{background:#fff;border:1px solid #d0dbe8;border-radius:8px;padding:22px 22px 20px;box-shadow:0 5px 18px #2b476a06}
.fault h3{font-size:17px;margin:0 0 8px;color:#101d2e;letter-spacing:-.3px}
.fault p{font-size:15px;line-height:1.7;color:#526276;margin:0}
.service-page .process{padding:44px 0 10px;width:auto;max-width:none}
.faq{padding:44px 0 10px;max-width:800px}
.faq-item{border:1px solid #d0dbe8;border-radius:8px;background:#fff;margin-bottom:10px;overflow:hidden}
.faq-item summary{padding:16px 20px;font-weight:700;font-size:16px;color:#16283d;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:22px;font-weight:400;color:#086be0;flex:none}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{margin:0;padding:0 20px 18px;font-size:16px;line-height:1.75;color:#43596f}
.page-cta{margin-top:48px;padding:38px 7%;background:#e1edfa;border:1px solid #a4c6e8;border-radius:10px}
.page-cta p{font-size:16px;line-height:1.7;color:#476079;max-width:620px;margin:0 0 24px}
.page-cta .hero-actions{flex-wrap:wrap;gap:14px;align-items:center}
.related{margin-top:34px;padding-top:22px;border-top:1px solid #d8e4f0;font-size:14px;color:#5c738c;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.related a{color:#086be0;font-weight:600;text-decoration:underline}
@media(max-width:760px){
  .fault-grid{grid-template-columns:1fr}
  .page-hero{padding:24px 0 32px}
  .page-lead{font-size:17px}
  .page-cta{padding:28px 7%}
  .service-page .steps{grid-template-columns:1fr}
}
.home-intro{padding:26px 6% 0;max-width:1440px}
.home-intro p{max-width:900px;margin:0;font-size:16px;line-height:1.8;color:#43596f}
.home-intro a{color:#086be0;text-decoration:underline}
.service-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1050px){.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:450px){.service-grid{grid-template-columns:1fr}}
.hours-line{display:flex;align-items:center;gap:8px;margin-top:14px!important;font-size:14px!important;color:#31567a!important}

/* Call and text. The number was already in the structured data on every page
   and inside every wa.me link, so putting it on screen costs no privacy and
   saves a visitor with a dead laptop from having to type it out. */
.call-row{margin-top:16px}
.phone-link{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:700;
  color:#0d3b66;border-bottom:1px solid #82afd1;padding-bottom:7px}
.phone-link .tag{font-size:13px;font-weight:600;color:#476079;letter-spacing:.02em}
.call-button{background:#0d3b66;color:#fff;border:1px solid #0d3b66;width:100%;
  margin-top:10px;justify-content:center;gap:12px}
.call-button:hover{background:#11497f}
.call-cta{background:#0d3b66;color:#fff;border:1px solid #0d3b66}
.call-cta:hover{background:#11497f}
@media (max-width:700px){.phone-link{font-size:18px}}

/* 404. The old shop URLs are still in Google's index and every one of those
   clicks used to hit a bare "NOT_FOUND". This turns them into a route back. */
.notfound{max-width:940px;margin:0 auto;padding:56px 7% 72px}
.notfound .eyebrow{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#5b7896;margin:0 0 14px}
.notfound h1{font-family:Manrope,sans-serif;font-size:clamp(30px,5vw,46px);letter-spacing:-1.2px;
  line-height:1.05;margin:0 0 20px;color:#101d2e}
.notfound .lead{font-size:17px;line-height:1.7;color:#476079;max-width:62ch;margin:0 0 14px}
.notfound-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;margin:32px 0 8px}
.notfound-grid a{display:flex;flex-direction:column;gap:5px;padding:16px 18px;
  background:#f3f7fc;border:1px solid #cddcec;border-radius:9px;transition:border-color .2s,background .2s}
.notfound-grid a:hover{background:#e8f1fb;border-color:#7fa9d4}
.notfound-grid strong{font-family:Manrope,sans-serif;font-size:16px;color:#0d3b66}
.notfound-grid span{font-size:14px;line-height:1.5;color:#5b7896}
@media (max-width:560px){.notfound{padding:40px 6% 56px}}

/* Closing CTA. The enquiry form now sits high on the page, so anyone who reads
   all the way to the bottom would otherwise have nothing to act on. */
.closing-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin:0 auto 56px;padding:26px 32px;background:#f3f7fc;
  border:1px solid #cddcec;border-radius:10px}
.closing-cta p{margin:0;font-size:17px;font-weight:600;color:#142132}
.closing-cta .button{background:#086be0;color:#fff;border:1px solid #086be0}
.closing-cta .button:hover{background:#0058bd}
@media (max-width:640px){
  .closing-cta{padding:22px;gap:16px}
  .closing-cta .button{width:100%;justify-content:center}
}

/* ---------------------------------------------------------------------------
   Symptom checker (/whats-wrong-with-my-computer).
   Static cards, no filtering JS — a jump nav is more robust than a filter and
   works with the page unstyled or unscripted.
--------------------------------------------------------------------------- */
.sym-head{max-width:820px;margin:0 auto 10px;padding:0 0 6px}
.sym-head h1{font-family:Manrope,sans-serif;font-size:clamp(28px,4.6vw,44px);letter-spacing:-1.2px;
  line-height:1.06;margin:14px 0 18px;color:#101d2e}
.sym-head .lead{font-size:17px;line-height:1.7;color:#476079;margin:0 0 18px}
.sym-caveat{font-size:15px;line-height:1.65;color:#4a5f78;background:#f3f7fc;
  border:1px solid #cddcec;border-left:4px solid #0d3b66;border-radius:8px;padding:14px 16px;margin:0}
.sym-caveat strong{color:#101d2e}
.sym-jump{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.sym-jump a{font-size:14px;font-weight:700;padding:9px 16px;border-radius:999px;
  background:#e1edfa;border:1px solid #a4c6e8;color:#0d3b66}
.sym-jump a:hover{background:#d2e4f7;border-color:#7fa9d4}

.sym-group{margin-top:44px;scroll-margin-top:90px}
.sym-group h2{font-family:Manrope,sans-serif;font-size:clamp(22px,3vw,30px);letter-spacing:-.7px;
  margin:0 0 6px;color:#101d2e}
.sym-intro{margin:0 0 20px;color:#5b7896;font-size:15px}
.sym-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}

.sym-card{display:flex;flex-direction:column;gap:12px;padding:20px 22px;background:#fff;
  border:1px solid #cddcec;border-radius:11px}
.sym-card h3{font-family:Manrope,sans-serif;font-size:17px;line-height:1.35;margin:0;color:#0d3b66;
  text-wrap:balance}
.sym-row,.sym-try{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:start}
.sym-row p,.sym-try p{margin:0;font-size:15px;line-height:1.62;color:#476079}
.sym-tag{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#8496ab;padding-top:4px}
.sym-try{background:#f3f7fc;border:1px solid #dce6f2;border-radius:8px;padding:12px 14px;
  grid-template-columns:104px minmax(0,1fr)}
.sym-try .sym-tag{color:#12704b}
.sym-ask{margin-top:auto;align-self:flex-start;font-size:14px;font-weight:700;color:#086be0;
  border-bottom:1px solid #a4c6e8;padding-bottom:3px}
.sym-ask:hover{color:#0058bd;border-color:#086be0}

.sym-warnings{margin-top:52px}
.sym-warnings h2{font-family:Manrope,sans-serif;font-size:clamp(22px,3vw,30px);letter-spacing:-.7px;
  margin:0 0 20px;color:#101d2e}
.sym-card.sym-warn{background:#fff7ed;border-color:#e8cfa8}
.sym-card.sym-warn h3{color:#8a5a06}
.sym-card.sym-warn p{margin:0;font-size:15px;line-height:1.65;color:#5c4a2e}

@media (max-width:560px){
  .sym-grid{grid-template-columns:1fr}
  .sym-row,.sym-try{grid-template-columns:1fr;gap:4px}
  .sym-card{padding:18px}
}

.services-help{margin:22px 0 0;font-size:16px;color:#476079;text-align:center}
.services-help a{font-weight:700;color:#086be0;border-bottom:1px solid #a4c6e8;padding-bottom:2px}
.services-help a:hover{color:#0058bd;border-color:#086be0}

/* ---------------------------------------------------------------------------
   Recent work. The first real job on the site. Three shots and the story in
   plain English — the point is proof, so the photos lead and the text explains
   what is happening in them.
--------------------------------------------------------------------------- */
.recent-work{padding-top:8px;padding-bottom:8px}
.work-item{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start;margin-top:22px}
.work-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.work-shots picture{display:block}
.work-shots img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:9px;
  border:1px solid #cddcec;background:#eef3f9;display:block}
.work-words h3{font-family:Manrope,sans-serif;font-size:19px;line-height:1.3;margin:0 0 14px;color:#0d3b66}
.work-words p{font-size:15.5px;line-height:1.7;color:#476079;margin:0 0 12px}
.work-note{padding:13px 15px;background:#f3f7fc;border:1px solid #cddcec;border-left:3px solid #086be0;
  border-radius:8px;margin-top:16px!important}
.work-note a{font-weight:700;color:#086be0;border-bottom:1px solid #a4c6e8;padding-bottom:1px}
.work-note a:hover{color:#0058bd;border-color:#086be0}
@media (max-width:900px){
  .work-item{grid-template-columns:1fr;gap:22px}
}
@media (max-width:560px){
  .work-shots{grid-template-columns:1fr 1fr;gap:8px}
  .work-shots picture:last-child{grid-column:span 2}
  .work-shots picture:last-child img{height:auto;aspect-ratio:16/10}
}

/* Proof on the service page that actually ranks for the search. Two shots and
   two sentences — the homepage carries the longer version. */
.job-proof{margin-top:44px}
.job-proof h2{font-family:Manrope,sans-serif;font-size:clamp(22px,3vw,30px);letter-spacing:-.7px;
  margin:0 0 18px;color:#101d2e}
.proof-row{display:grid;grid-template-columns:260px 1fr;gap:26px;align-items:start}
.proof-shots{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.proof-shots img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:9px;
  border:1px solid #cddcec;background:#eef3f9;display:block}
.proof-words h3{font-family:Manrope,sans-serif;font-size:17px;margin:0 0 12px;color:#0d3b66}
.proof-words p{font-size:15.5px;line-height:1.7;color:#476079;margin:0 0 11px}
@media (max-width:760px){
  .proof-row{grid-template-columns:1fr;gap:18px}
  .proof-shots{max-width:330px}
}

/* The "how did you find us" select, matched to the inputs it sits with. */
.enquiry-fields select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23294764' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;line-height:1.3}

/* Sticky tap-to-contact bar, phones only.
   Measured on a 375px viewport: the first phone number sits 5,181px down the
   home page and the enquiry form 5,929px — more than seven screens. Someone
   whose laptop died an hour ago is not going to scroll that far, so on phones
   the two ways Luke actually wants to be contacted stay pinned to the bottom of
   the screen. Email is the static one on purpose: the WhatsApp button stays
   hidden until app.js has built its link, so with JavaScript off there is still
   a working way through. Desktop keeps the existing layout, where the contact panel is
   already well above the fold. */
.quick-contact{display:none}
@media (max-width:760px){
  .quick-contact{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px));
    background:#06090eee;border-top:1px solid #1d2a3a}
  .quick-contact a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:48px;padding:0 10px;border-radius:10px;text-decoration:none;
    font-size:15px;font-weight:700;letter-spacing:.2px;line-height:1.1;text-align:center}
  .quick-contact a:focus-visible{outline:3px solid #fff;outline-offset:2px}
  .qc-mail{background:var(--blue);color:#04070c}
  .qc-wa{background:#25d366;color:#04231a}
  /* Clear the footer so the bar never sits on top of it. */
  body{padding-bottom:76px}
}

/* Reviews.
   Built to hold real Google reviews as cards; until there are some, the section
   leads with the three promises instead of an apology for an empty shelf. A
   review card is a <figure class="review-card"> in .review-rail — see the
   comment in index.html for the rule about which reviews may go there. */
.proof{padding-top:52px;padding-bottom:60px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:54px}
.proof-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.proof-head .eyebrow{color:#37658b;margin-bottom:10px}
.proof-head h2{font-size:clamp(30px,3vw,40px);letter-spacing:-1.4px}
.proof-rating{display:inline-flex;align-items:center;gap:12px;padding:12px 18px;border:1px solid var(--line);
  border-radius:8px;background:#fff;box-shadow:0 2px 10px #0a2a4a0d;transition:border-color .2s,transform .2s}
.proof-rating:hover{border-color:#1688bb;transform:translateY(-2px)}
.proof-stars{color:#f5a524;font-size:17px;letter-spacing:2px;line-height:1}
.proof-score{font-size:15px;color:var(--muted)}
.proof-score strong{color:var(--ink);font-size:19px;font-family:Manrope,sans-serif;margin-right:4px}
.proof-go{color:#087cc0;font-size:16px}
.review-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:28px}
.review-card{margin:0;padding:24px;background:#fff;border:1px solid var(--line);border-radius:10px;
  display:flex;flex-direction:column;gap:14px}
.review-card p{margin:0;font-size:17px;line-height:1.7;color:var(--ink)}
.review-card figcaption{font-size:13px;color:var(--muted);letter-spacing:.3px}
.review-empty{background:#eaf2fb;border-style:dashed}
.review-empty p{color:#2b4763}
.proof-points{list-style:none;margin:0 0 28px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.proof-points li{font-size:15px;color:var(--muted);line-height:1.6;padding-left:16px;border-left:3px solid var(--blue)}
.proof-points strong{display:block;font-family:Manrope,sans-serif;font-size:17px;color:var(--ink);
  font-weight:700;letter-spacing:-.3px;margin-bottom:4px}
.proof .review-actions{flex-direction:row;align-items:center;gap:22px;flex-wrap:wrap}
@media (max-width:760px){
  .proof{padding-top:36px;padding-bottom:42px;margin-bottom:38px}
  .proof-head{display:block}
  .proof-head h2{font-size:28px;margin-bottom:18px}
  .proof-rating{width:100%;justify-content:flex-start}
  .proof .review-actions{flex-direction:column;align-items:stretch;gap:14px}
  .proof .review-actions .button{justify-content:space-between}
}
.proof-gmark{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:#1a73e8;color:#fff;font:800 15px/1 Manrope,sans-serif}
.proof-score{font-size:15px;color:var(--ink);font-weight:600}

/* A published review card: the quote carries the weight, the attribution stays
   quiet, and the stars are the only warm colour on the page so they read as a
   rating rather than decoration. */
.review-card blockquote{margin:0}
.review-card blockquote p{font-family:Manrope,sans-serif;font-size:19px;line-height:1.55;letter-spacing:-.3px}
.review-card .review-stars{margin:0;color:#f5a524;font-size:16px;letter-spacing:3px;line-height:1}
.review-card figcaption span{color:#8395a8}
.proof-stars{color:#f5a524;font-size:15px;letter-spacing:2px;line-height:1}