@font-face{font-family:'Audiowide';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/audiowide-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Poppins';src:url('fonts/poppins-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:'Poppins';src:url('fonts/poppins-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:'Inter';src:url('fonts/inter.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}:root{--charcoal:#141414;--charcoal-2:#242424;--grey:#5A554C;--line:#DCD6C9;--red:#B18D34;--red-dark:#8F7029;--paper:#F4F1EB;--white:#fff;--gold:#B18D34;--wrap:1360px;--r:8px;--shadow:0 1px 2px rgba(17,24,39,.06)}*,*::before,*::after{box-sizing:border-box}html{scrollbar-gutter:stable;scroll-behavior:smooth;-webkit-text-size-adjust:100%}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{margin:0;background:var(--paper);color:var(--charcoal);font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-size:17px;line-height:1.65}h1,h2,h3{font-family:'Poppins','Inter',system-ui,sans-serif;font-weight:600;line-height:1.18;letter-spacing:-.015em;margin:0 0 .6em;color:var(--charcoal)}h1{font-size:clamp(2.15rem,4.9vw,3.55rem);font-weight:700;letter-spacing:-.022em;line-height:1.12}h2{font-size:clamp(1.55rem,3vw,2.25rem)}h3{font-size:1.16rem}p{margin:0 0 1.1em}a{color:inherit}img{max-width:100%;height:auto;display:block}.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}.sec{padding:clamp(3.2rem,6vw,5.2rem) 0}.lede{font-size:1.12rem;color:var(--grey);max-width:62ch}.eyebrow{font-size:.88rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#836826;margin:0 0 1rem}.center{text-align:center}.skip{position:absolute;left:-9999px;top:0;background:var(--charcoal);color:#fff;padding:.7rem 1.1rem;z-index:200}.skip:focus{left:.5rem;top:.5rem}:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:4px}.ic{width:22px;height:22px;flex:0 0 auto}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:'Inter',sans-serif;font-weight:600;font-size:.875rem;line-height:1;text-transform:uppercase;letter-spacing:.05em;padding:1.15rem 1.8rem;border-radius:5px;border:1px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .18s ease,background-color .18s ease,color .18s ease}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--red);color:#141414}.btn-primary:hover{background:var(--red-dark)}.btn-ghost{background:var(--white);color:var(--charcoal);border-color:var(--line)}.btn-ghost:hover{border-color:var(--charcoal)}.btn .ic{width:19px;height:19px}.btn-row{display:flex;flex-wrap:wrap;gap:1.1rem}.util{background:#1c1c1c;color:rgba(255,255,255,.82);font-size:12px}.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:34px;padding-block:0}.util a{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:inherit;white-space:nowrap}.util a:hover{color:#fff}.util .ic{width:15px;height:15px;color:inherit}.util-r{display:flex;align-items:center;gap:34px}.util-l{display:flex;align-items:center;gap:38px}header.site{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid #e7e1d5}.bar{display:flex;align-items:center;justify-content:space-between;height:84px}.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}.brand img{width:220px;height:84px;object-fit:contain;object-position:left center}nav.main{margin-left:auto;display:flex;align-items:center;gap:38px}nav.main a{font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;color:#1c1c1c;padding:0;border-radius:0;transition:color .18s ease}nav.main a:hover{color:var(--red)}nav.main a[aria-current]{color:#b18d34}.bar .btn{margin-left:42px;width:154px;height:48px;padding:0;border-radius:7px;background:#b18d34;color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em}.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;padding:.5rem;color:var(--charcoal)}.burger .ic{width:24px;height:24px}.ddc{width:16px;height:16px;flex:0 0 auto}.hero{position:relative;overflow:hidden;background:#fff;height:635px}.hero-photo{position:absolute;top:0;right:0;bottom:0;left:auto;width:61%;height:100%;z-index:0;margin:0;border-radius:0;border:0;box-shadow:none}.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;border-radius:0;border:0;box-shadow:none}.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#FFFFFF 0%,#FFFFFF 29%,rgba(255,255,255,.98) 35%,rgba(255,255,255,.90) 41%,rgba(255,255,255,.60) 48%,rgba(255,255,255,.18) 56%,rgba(255,255,255,0) 64%)}.hero-grid{position:relative;z-index:2;height:100%;display:block;padding:82px 0 0}.hero-copy{width:590px;max-width:100%}.hero .eyebrow{color:#836826;font-size:14px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin:0 0 24px}.hero h1{width:620px;max-width:620px;font-size:64px;line-height:.99;font-weight:700;letter-spacing:-.045em;color:#1c1c1c;margin:0}.hero h1 .accent{color:#b18d34}.hero p.sub{width:522px;max-width:100%;font-size:17px;line-height:1.58;font-weight:400;color:#4e4a42;margin:25px 0 0}.hero .btn-row{margin-top:34px;gap:18px;flex-wrap:nowrap}.hero .btn-row .btn-primary{width:250px;height:60px;padding:0;border-radius:7px;background:#b18d34;color:#141414;font-size:14px;font-weight:700;gap:18px;letter-spacing:.04em}.hero .btn-row .btn-ghost{width:225px;height:60px;padding:0;border-radius:7px;background:#fff;border:1.5px solid #a29a8c;color:#202020;font-size:15px;font-weight:600;gap:14px;text-transform:none;letter-spacing:0}.hero .btn-row .btn-ghost:hover{border-color:#202020}@media (max-width:1199px){.hero{height:auto}.hero-photo{width:58%}.hero-grid{padding:clamp(2.6rem,5vw,4.2rem) 0 clamp(2.2rem,4vw,3rem)}.hero-copy{width:min(50%,560px)}.hero h1{width:auto;max-width:100%;font-size:clamp(2.35rem,4.6vw,3.4rem)}.hero p.sub{width:auto;font-size:1.02rem}.hero .btn-row{flex-wrap:wrap;gap:14px}.hero .btn-row .btn-primary{width:auto;min-width:210px;padding-inline:1.4rem;gap:14px}.hero .btn-row .btn-ghost{width:auto;min-width:195px;padding-inline:1.4rem}}.band{background:#171717;color:#fff}.band .wrap{display:grid;grid-template-columns:repeat(3,1fr);min-height:150px}.band .cell{position:relative;display:flex;align-items:center;gap:1.5rem;padding:1.5rem clamp(1.2rem,2.6vw,2.4rem)}.band .cell:first-child{padding-left:0}.band .cell + .cell::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:56%;width:1px;background:rgba(255,255,255,.17)}.band b{display:block;font-family:'Poppins',sans-serif;font-size:13px;letter-spacing:.11em;font-weight:700;text-transform:uppercase;color:#fff;margin-bottom:.35rem}.band p{margin:0;color:rgba(255,255,255,.82);font-size:15px;line-height:1.45;max-width:23ch}@media (max-width:1199px){.band .cell{gap:1.15rem}}.head-rule{width:52px;height:3px;background:var(--red);border-radius:2px;margin:.1rem 0 1.4rem}.center .head-rule{margin-inline:auto}.grid{display:grid;gap:1.1rem;align-items:stretch;grid-auto-rows:1fr}.g3{grid-template-columns:repeat(3,1fr)}.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.5rem;display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;transition:transform .18s ease,border-color .18s ease}a.card:hover{transform:translateY(-3px);border-color:#cdc6b7}.card .ic{color:var(--charcoal);width:26px;height:26px;margin-bottom:.9rem}.card h3{margin-bottom:.4rem}.card p{color:var(--grey);font-size:.93rem;margin:0}.card .more{margin-top:auto;padding-top:1rem;color:#836826;font-weight:600;font-size:.88rem;display:inline-flex;align-items:center;gap:.4rem}.card .more .ic{width:16px;height:16px;color:var(--red);margin:0}.alt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center;margin-bottom:clamp(2.4rem,5vw,4rem)}.alt:last-child{margin-bottom:0}.alt img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}.alt.rev .alt-text{order:2}.alt h2{margin-bottom:.7rem}ul.ticks{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.65rem}ul.ticks li{display:flex;gap:.65rem;align-items:flex-start;font-size:.98rem}.tiles [hidden]{display:none}.navdd-h{display:block;padding:.65rem 1.05rem .3rem;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);cursor:default}.navdd-m .navdd-h:first-child{padding-top:.4rem}.pill-h{margin:1.2rem 0 .5rem;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grey)}.pill-h:first-of-type{margin-top:0}.ba-panel[hidden]{display:none}@keyframes ba-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.ba-panel:not([hidden]) .ba-wrap{animation:ba-in .15s ease both}@media (prefers-reduced-motion:reduce){.ba-panel:not([hidden]) .ba-wrap{animation:none}}.pills{display:flex;flex-wrap:wrap;gap:.55rem}.pills a{display:inline-flex;align-items:center;gap:.4rem;font-size:.86rem;font-weight:600;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--line);background:#fff;text-decoration:none;color:var(--charcoal)}.pills a:hover{border-color:var(--red);color:var(--red)}.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.6rem,4vw,3.2rem)}.info-list{display:grid;gap:1rem;margin:1.4rem 0 0;padding:0;list-style:none}.info-list li{display:flex;gap:.8rem;align-items:flex-start}.info-list .ic{color:var(--red);margin-top:3px}.info-list b{display:block;font-family:'Poppins',sans-serif;font-size:.92rem}.info-list a{color:var(--charcoal);text-decoration:none}.info-list a:hover{color:var(--red)}.info-list small{color:var(--grey);font-size:.86rem;display:block}form.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.3rem,3vw,2rem)}.field{margin-bottom:1rem}.field label{display:block;font-size:.86rem;font-weight:600;margin-bottom:.35rem}.field input,.field textarea,.field select{width:100%;font:inherit;font-size:.96rem;padding:.8rem .95rem;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--charcoal)}.field textarea{min-height:132px;resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(228,40,43,.14)}.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.form-note{font-size:.82rem;color:var(--grey);margin:.2rem 0 1rem}.cta{background:var(--charcoal);color:#fff}.cta h2{color:#fff}.cta p{color:#c8c0af;max-width:56ch}.cta .wrap{display:grid;grid-template-columns:1.2fr auto;gap:2rem;align-items:center;padding:clamp(2.6rem,5vw,3.8rem) 0}footer.site{background:var(--charcoal);color:#8b8478;font-size:.9rem}footer.site .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:clamp(1.6rem,4vw,3rem);padding:clamp(2.8rem,5vw,4rem) 0 2.4rem}footer.site img.logo{width:210px;height:82px;object-fit:contain;margin-bottom:1rem}footer.site h3{color:#fff;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;margin:0 0 .55rem}footer.site h3::after{content:"";display:block;width:26px;height:2px;background:var(--red);margin-top:.5rem}footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}@media (max-width:900px){footer.site ul a{display:inline-block;padding-block:.28rem}}footer.site a{color:#8b8478;text-decoration:none}footer.site a:hover{color:#fff}footer.site .tag{max-width:34ch;line-height:1.6}.copy{border-top:1px solid rgba(255,255,255,.10);display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;justify-content:center;align-items:center;text-align:center;padding:1.2rem 0;font-size:.82rem}.copy>span{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:.5rem .7rem}@media (min-width:641px){footer.site{padding-bottom:80px}}@media (max-width:640px){footer.site{padding-bottom:120px}}@media (max-width:520px){.copy{flex-direction:column;gap:.5rem;font-size:.74rem}.copy>span{gap:.3rem .42rem}}.js .reveal{opacity:0;transform:translateY(14px)}.js .reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}@media (max-width:1080px){nav.main a{padding:.6rem .5rem;font-size:.74rem}.brand img{width:168px;height:66px}}@media (max-width:900px){body{font-size:16px}.bar{height:72px}.util-r{display:none}.util .wrap{justify-content:flex-start;height:auto;min-height:34px;flex-wrap:wrap;padding-block:.35rem}.util-l{flex-wrap:wrap;gap:.25rem 1.3rem}nav.main,.bar>.btn{display:none}.burger{display:inline-flex}.drawer.open{transform:none}.scrim.open{opacity:1;pointer-events:auto}.brand img{width:196px;height:70px}.band .cell + .cell::before{display:none}.band .cell + .cell{border-top:1px solid rgba(255,255,255,.14)}.band .wrap{grid-template-columns:1fr;min-height:0}.band .cell{padding:1.35rem 0;gap:1.15rem}.band p{max-width:none}.g3{grid-template-columns:1fr 1fr}.alt{grid-template-columns:1fr;gap:1.4rem}.alt.rev .alt-text{order:0}.alt-media{order:-1}.contact-grid{grid-template-columns:1fr}.cta .wrap{grid-template-columns:1fr}footer.site .cols{grid-template-columns:1fr 1fr}body{padding-bottom:74px}}@media (max-width:767px){.hero{height:auto;background:#fff;display:flex;flex-direction:column-reverse}.hero::before{display:none}.hero-grid{padding:1.8rem 0 0}.hero-copy{width:100%}.hero-photo{position:relative;width:auto;height:auto;aspect-ratio:16/10;margin:1.8rem 0 0}.hero-photo img{aspect-ratio:auto;height:100%}.hero h1{font-size:clamp(2.05rem,8.4vw,2.75rem)}.hero p.sub{width:auto;max-width:none}.hero .btn-row{flex-wrap:wrap;gap:12px}.hero .btn-row .btn-primary,.hero .btn-row .btn-ghost{width:100%;min-width:0}}@media (max-width:640px){.g3{grid-template-columns:1fr}.two{grid-template-columns:1fr}footer.site .cols{grid-template-columns:1fr}.brand img{width:150px;height:59px}}@media (max-width:400px){.brand img{width:132px;height:52px}}.navdd{position:relative;display:flex;align-items:center}.navdd>.navdd-t{display:inline-flex;align-items:center;gap:5px}.navdd .ddc{width:14px;height:14px;flex:0 0 auto;transition:transform .18s ease}.navdd.open>.navdd-t .ddc{transform:rotate(180deg)}.navdd-m{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);min-width:248px;background:#fff;border:1px solid var(--line,#dcd6c9);border-radius:10px;box-shadow:0 18px 40px rgba(17,24,39,.14);padding:8px;z-index:120;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease}.navdd:hover>.navdd-m,.navdd.open>.navdd-m,.navdd:focus-within>.navdd-m{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}nav.main .navdd-m a{display:block;padding:9px 12px;border-radius:7px;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:#1a1a1a;white-space:nowrap;border-bottom:0}nav.main .navdd-m a:hover,nav.main .navdd-m a:focus-visible{background:#f3f0e9;color:var(--red,#b18d34)}nav.main .navdd-m a.navdd-all{margin-top:6px;border-top:1px solid var(--line,#dcd6c9);border-radius:0 0 7px 7px;font-weight:600;color:var(--red,#b18d34)}.navdd::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px}@media (prefers-reduced-motion:reduce){.navdd-m,.navdd .ddc{transition:none}}@media (max-width:900px){.navdd-m{display:none}}@keyframes revscroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}.qm-back{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;justify-content:center;background:rgba(12,30,48,.62);backdrop-filter:blur(3px);opacity:0;transition:opacity .22s ease;padding:0}.qm-back.is-open{opacity:1}@media(min-width:641px){.qm-back{align-items:center;padding:1.5rem}}.qm{background:var(--paper);width:100%;max-width:560px;position:relative;border-radius:14px 14px 0 0;box-shadow:0 24px 60px rgba(12,30,48,.28);transform:translateY(18px);transition:transform .24s ease;height:min(86vh,720px);display:flex;flex-direction:column;overflow:hidden}.qm-back.is-open .qm{transform:none}@media(min-width:641px){.qm{border-radius:14px}}.qm-head{flex:0 0 auto;background:var(--paper);z-index:2;position:relative;padding:1rem 1.35rem .7rem;border-bottom:1px solid var(--line)}.qm-head h2{margin:0;font-family:'Poppins',system-ui,sans-serif;font-size:1.1rem;color:var(--charcoal);line-height:1.25;padding-right:2.4rem}.qm-head p{margin:.3rem 0 0;font-size:.87rem;color:var(--grey)}.qm-x{position:absolute;top:.75rem;right:.75rem;width:38px;height:38px;border:0;z-index:4;border-radius:50%;background:#ece7dd;color:var(--charcoal);font-size:1.35rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.qm-x:hover{background:#dcd6c9}.qm-x:focus-visible{outline:2px solid var(--red);outline-offset:2px}.qm-bar{height:4px;background:var(--line);border-radius:99px;margin:.85rem 0 0;overflow:hidden}.qm-bar i{display:block;height:100%;background:var(--red);width:25%;transition:width .28s ease;border-radius:99px}.qm-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1.1rem 1.35rem 1.2rem}.qm-foot{flex:0 0 auto;border-top:1px solid var(--line);background:var(--paper);padding:.8rem 1.35rem calc(.8rem + env(safe-area-inset-bottom))}.qm-foot .qm-nav{margin-top:0}.qm-screen{min-height:100%}.qm-step{display:none}.qm-step.is-on{display:block}.qm-legend{font-weight:600;font-size:.95rem;color:var(--charcoal);margin:0 0 .7rem}.qm-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}@media(max-width:420px){.qm-opt{padding:.62rem .6rem;font-size:.85rem;border-radius:9px}.qm-grid{gap:.45rem}}.qm-opt{display:flex;align-items:center;gap:.6rem;padding:.8rem .85rem;cursor:pointer;border:1.5px solid var(--line);border-radius:10px;background:#fff;font-size:.9rem;font-weight:500;color:var(--charcoal);text-align:left;transition:border-color .14s,background .14s}.qm-opt:hover{border-color:var(--charcoal-2)}.qm-opt.is-sel{border-color:var(--red);background:#f7f1e6}.qm-opt input{position:absolute;opacity:0;pointer-events:none}.qm-f{margin-bottom:.85rem}.qm-f label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.3rem;color:var(--charcoal)}.qm-f .req{color:var(--red)}.qm-f input,.qm-f textarea,.qm-f select{width:100%;font:inherit;font-size:.95rem;padding:.7rem .8rem;border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--charcoal)}.qm-f textarea{min-height:88px;resize:vertical}.qm-f input:focus,.qm-f textarea:focus,.qm-f select:focus{outline:none;border-color:var(--red)}.qm-f input[aria-invalid="true"]{border-color:var(--red);background:#f7f1e6}.qm-err{color:var(--red);font-size:.8rem;margin:.25rem 0 0;min-height:1em}.qm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.qm-nav{display:flex;gap:.6rem;margin-top:1.1rem}.qm-nav .btn{flex:1;justify-content:center}.qm-note{font-size:.78rem;color:var(--grey);margin:.85rem 0 0;text-align:center}.qm-done{text-align:center;padding:1.5rem .5rem}.qm-done .tick{width:56px;height:56px;border-radius:50%;background:#DCFCE7;color:#15803D;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-size:1.8rem}.qm-done h3{margin:0 0 .4rem;font-family:'Poppins',system-ui,sans-serif;color:var(--charcoal)}.qm-done p{margin:0;color:var(--grey);font-size:.92rem}body.qm-lock{overflow:hidden}@media(prefers-reduced-motion:reduce){.qm-back,.qm,.qm-bar i{transition:none}}.qm-q{margin-bottom:1.15rem}.qm-qlabel{font-weight:600;font-size:.9rem;color:var(--charcoal);margin:0 0 .5rem}.qm-q textarea,.qm-q input[type=text]{width:100%;font:inherit;font-size:.95rem;padding:.7rem .8rem;border:1.5px solid var(--line);border-radius:8px;background:#fff}.qm-q textarea{min-height:92px;resize:vertical}.qm-q textarea:focus,.qm-q input[type=text]:focus{outline:none;border-color:var(--red)}.qm-hint{font-size:.78rem;color:var(--grey);margin:.4rem 0 0}.qm-opt-tag{font-weight:400;font-size:.78rem;color:var(--grey)}.qm-drop{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;cursor:pointer;border:1.5px dashed var(--line);border-radius:10px;background:#fff;color:var(--charcoal);transition:border-color .14s,background .14s}.qm-drop:hover{border-color:var(--red);background:#f7f1e6}.qm-drop svg{width:26px;height:26px;flex:0 0 auto;color:var(--red)}.qm-drop b{display:block;font-size:.92rem}.qm-drop small{display:block;font-size:.78rem;color:var(--grey)}.qm-thumbs{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.7rem}.qm-thumb{position:relative;width:74px;height:74px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#ece7dd}.qm-thumb img{width:100%;height:100%;object-fit:cover;display:block}.qm-thumb.is-busy img{opacity:.45}.qm-thumb-x{position:absolute;top:2px;right:2px;width:20px;height:20px;border:0;border-radius:50%;background:rgba(12,30,48,.78);color:#fff;font-size:.95rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.qm-thumb-x:hover{background:var(--red)}.qm-spin{position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;border:2px solid rgba(12,30,48,.2);border-top-color:var(--red);animation:qmspin .7s linear infinite}@keyframes qmspin{to{transform:rotate(360deg)}}.qm-talk{display:flex;gap:.6rem;margin:.5rem 0 .2rem}.qm-talk-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.62rem .7rem;border-radius:8px;border:1.5px solid var(--line);background:#fff;color:var(--charcoal);font-size:.88rem;font-weight:600;text-decoration:none}.qm-talk-btn svg{width:17px;height:17px;flex:0 0 auto}.qm-talk-btn:hover{border-color:var(--charcoal-2)}.qm-wa{background:#25D366;border-color:#25D366;color:#fff}.qm-wa:hover{background:#1DA851;border-color:#1DA851;color:#fff}@media(prefers-reduced-motion:reduce){.qm-spin{animation:none}}.qm-ask{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:1.2rem;background:rgba(12,30,48,.55);opacity:0;transition:opacity .18s ease}.qm-ask.is-on{opacity:1}.qm-ask-in{background:#fff;border-radius:12px;padding:1.4rem 1.3rem;max-width:400px;width:100%;box-shadow:0 18px 44px rgba(12,30,48,.3);text-align:center}.qm-ask-in h3{margin:0 0 .5rem;font-family:'Poppins',system-ui,sans-serif;font-size:1.08rem;color:var(--charcoal)}.qm-ask-in p{margin:0 0 1.1rem;font-size:.88rem;line-height:1.55;color:var(--grey)}.qm-ask-in .btn{width:100%;justify-content:center;margin-bottom:.55rem}.qm-ask-in .btn:last-child{margin-bottom:0}.qm-done-wa{display:inline-flex;margin-top:1.2rem;flex:0 0 auto;padding:.7rem 1.1rem}@media(prefers-reduced-motion:reduce){.qm-ask{transition:none}}.qm-legend{font-size:1.02rem;line-height:1.35;margin:0 0 .85rem}.qm-hint-top{margin:-.55rem 0 .8rem}.qm-x{top:.6rem;right:.6rem}.qm-bar{margin:.7rem 0 0}@media(max-width:640px){.qm-back{align-items:flex-end}.qm{height:min(88vh,760px);border-radius:16px 16px 0 0}.qm-legend{font-size:1rem}.qm-body{padding:1rem 1.05rem 1.1rem}.qm-head,.qm-foot{padding-left:1.05rem;padding-right:1.05rem}.qm-talk{margin-bottom:0}.qm-talk-btn{padding:.5rem .6rem;font-size:.83rem}}.qm-nav .btn[hidden]{display:none}.qm-chosen{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 .7rem;font-size:.82rem;color:var(--grey)}.qm-chosen b{color:var(--charcoal);font-weight:600}.qm-change{background:none;border:0;padding:0;margin-left:auto;cursor:pointer;font:inherit;font-weight:600;color:var(--red);text-decoration:underline}.qm-change:hover{color:var(--red-dark)}.qm-talk-top{align-items:center;flex-wrap:wrap;margin:0 0 .9rem;padding:0 0 .85rem;border-bottom:1px solid var(--line,rgba(0,0,0,.1))}.qm-talk-top .qm-talk-lead{flex:1 1 100%;font-size:.84rem;font-weight:600;color:var(--charcoal);margin:0 0 .5rem}.qm-talk-top .qm-talk-btn{flex:1 1 0;min-width:0}.qm-wa svg{color:#25D366}.qm-wa:hover{border-color:#25D366}.qm-grab{display:none}@media(max-width:640px){.qm-grab{display:block;width:38px;height:4px;border-radius:99px;margin:.55rem auto .1rem;background:rgba(0,0,0,.18);flex:0 0 auto}.qm{touch-action:pan-y}.qm.is-dragging{transition:none}}@media(prefers-reduced-motion:reduce){.qm.is-dragging{transition:none}}.btn-wa svg,.util-wa svg{color:#25D366}.btn-wa:hover{border-color:#25D366}.util-wa{display:inline-flex;align-items:center;gap:.4rem}.util-wa svg{width:15px;height:15px}.band-proof .wrap{grid-template-columns:repeat(4,1fr);min-height:0}.band-proof .cell{gap:.9rem;padding:1.6rem clamp(.9rem,1.6vw,1.5rem);align-items:center}.band-proof b{display:block;margin:0;font-family:'Poppins',sans-serif;font-size:14.5px;line-height:1.35;letter-spacing:.005em;font-weight:600;text-transform:none;color:#fff}@media (max-width:1100px){.band-proof .wrap{grid-template-columns:repeat(2,1fr)}.band-proof .cell + .cell::before{display:none}.band-proof .cell:nth-child(even)::before{content:"";display:block;position:absolute;left:0;top:50%;transform:translateY(-50%);height:56%;width:1px;background:rgba(255,255,255,.17)}.band-proof .cell:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}.band-proof .cell:first-child{padding-left:clamp(.9rem,1.6vw,1.5rem)}}@media (max-width:640px){.band-proof .wrap{grid-template-columns:1fr}.band-proof .cell,.band-proof .cell:first-child{padding:1.1rem 0}.band-proof .cell::before,.band-proof .cell:nth-child(even)::before{display:none}.band-proof .cell + .cell{border-top:1px solid rgba(255,255,255,.14)}.band-proof b{font-size:15px}}body.qm-lock .wa-dock{display:none}.u-slide[hidden]{display:none}.qm-proof{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line)}.qm-proof-h{margin:0 0 .6rem;font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grey)}.qm-proof figure{margin:0 0 .7rem}.qm-proof blockquote{margin:0}.qm-proof blockquote p{margin:0;font-size:.86rem;line-height:1.5;color:var(--charcoal);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.qm-proof figcaption{margin-top:.25rem;font-size:.76rem;color:var(--grey)}.qm-proof figcaption span{color:var(--charcoal);font-weight:600}/* =========================================================================
   THE CUSTOM PROPERTIES THIS SHEET USES,DEFINED.

   --brass,--ink and --on-dark were used by rules in this file and defined
   NOWHERE in the stylesheet that ships. They were declared in lp_style.py's
   :root,and lp_style is imported by nothing: it is a dead file. So every
   var(--brass) resolved to nothing,and the property fell back to its inherited value. That is why the
   proof block's stars rendered as black text: colour:var(--brass) was not a
   gold star,it was no colour at all.

   They are defined here,and check_css_vars in lp_check fails the build if a var is ever
   used without a definition again.
   ========================================================================= */
:root{
  --brass:#B18D34;
  --brass-text:#846927;
  --ink:#262D3E;
  --on-dark:#F7F4EE;
  --dark:#0F172A;
}/* =========================================================================
   SMB design pass. Everything above this line is the inherited stylesheet
   with the colours substituted. Everything below is this build's own.
   ========================================================================= */

/* Font URLs are RELATIVE,like the inherited sheet's own,and deliberately so. The
   stylesheet lives at <root>/assets/style.09c0b416.css,so "fonts/x.woff2" resolves
   correctly whether the site is served from a domain root or from
   /previews/<slug>/. A root-relative "/assets/fonts/..." resolves to the top
   of autoascension.com under the preview path and 404s,which silently drops
   the site back to a fallback serif. That is exactly what happened once. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;
 font-display:swap;src:url(fonts/cormorant-garamond-600-latin.woff2) format('woff2')}@font-face{font-family:'Cinzel';font-style:normal;font-weight:500;
 font-display:swap;src:url(fonts/cinzel-500-latin.woff2) format('woff2')}/* ---- type -------------------------------------------------------------- */
/* Headings in the logo's family. Nothing heavier than 600 anywhere: the 700
   and 800 weights the inherited sheet used are what made the old headings
   shout over a logo that does not. */
h1,h2,h3,.hero h1,.sec h2,footer.site h3{
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;letter-spacing:-.01em}h1,h2{color:#262D3E}.hero h1{font-weight:600;letter-spacing:-.015em;line-height:1.04}h2,h3{font-weight:600}b{font-weight:600}/* Eyebrows and nav: inscriptional capitals,like the logo. */
.eyebrow,.hero .eyebrow,.pill-h,nav.main>a,.navdd-t,.btn,.util,.copy,.credit,footer.site h3{
  font-family:'Cinzel','Cormorant Garamond',Georgia,serif;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500}footer.site h3{letter-spacing:.10em;font-size:.82rem}nav.main>a,.navdd-t{font-size:.80rem;color:#262D3E}nav.main>a:hover,.navdd-t:hover,nav.main>a[aria-current="page"]{color:#846927}.navdd-m a{font-family:inherit;text-transform:none;letter-spacing:0}/* Body stays the inherited sans,and navy at 90 percent not black. */
body,p,li,.lede,.sub{font-weight:400;color:#262D3E}p,li{color:#262D3E}.lede,p.sub{color:#4F5668}/* ---- colour ------------------------------------------------------------ */
/* No pure white and no pure black anywhere. */
body{background:#F7F4EE}.card,.pills a{background:#FDFBF7}/* Buttons: gold fill with a NAVY label (5.72:1),or a gold hairline outline. */
.btn{font-size:.78rem;letter-spacing:.12em}.btn-primary{background:#B18D34;color:#0F172A;border:1px solid #B18D34}.btn-primary:hover{background:#846927;color:#F7F4EE;border-color:#846927}.btn-ghost{background:transparent;border:1px solid #B18D34;color:#846927}.btn-ghost:hover{border-color:#846927;color:#0F172A}/* The inherited sheet scopes the hero buttons with a three class selector,so the hero pair has to be named at the same weight or
   the secondary button stays his white-on-grey. */
.hero .btn-row .btn-primary{background:#B18D34;color:#0F172A;
  border:1px solid #B18D34;font-family:'Cinzel','Cormorant Garamond',Georgia,serif;letter-spacing:.12em}.hero .btn-row .btn-primary:hover{background:#846927;color:#F7F4EE}.hero .btn-row .btn-ghost{background:transparent;border:1px solid #B18D34;
  color:#846927;font-family:'Cinzel','Cormorant Garamond',Georgia,serif;letter-spacing:.10em;
  text-transform:uppercase;font-size:.78rem}.hero .btn-row .btn-ghost:hover{border-color:#846927;color:#0F172A;
  background:transparent}/* Thin gold hairlines,echoing the two rules either side of the lotus. */
.head-rule{background:#B18D34;height:1px;opacity:1}.sec+.sec{border-top:1px solid #E2DCCF}/* Dark sections are HIS navy. */
.band-proof,footer.site{background:#0F172A;color:#F7F4EE}.band-proof b,footer.site,footer.site p,footer.site li{color:#F7F4EE}footer.site a{color:#B18D34}footer.site a:hover{color:#F7F4EE}/* ---- STRUCTURAL FIX 1: the header logo sat under the top contact bar ----
   The utility bar is sticky-adjacent and the header's own height was set for
   the inherited sheet's logo box. His wide logo needs the full 84px box the inherited sheet gives
   it plus real padding,or the top of the lettering is cut off. The bar keeps
   the inherited sheet's height; the header gets the padding. */
/* An email address is not a display string: uppercasing fmb4444@gmail.com
   makes it look like a shout and harder to read back. The bar keeps the
   inscriptional face and drops the transform. */
.util{background:#0F172A;color:#F7F4EE;position:relative;z-index:2;
  text-transform:none;letter-spacing:.04em}.util a{color:#F7F4EE}.util a:hover{color:#B18D34}/* z-index 1 here put the header UNDER .hero-grid,which the inherited sheet
   gives z-index 2. Nothing showed on desktop because nothing overflows the
   header there,so the panel
   painted behind the hero: it opened,and
   every link in it was unclickable because the hero swallowed the taps. The
   header keeps position:relative,which is the design pass's own decision;
   only the layer is corrected,to sit above page content the way the
   inherited z-index 100 did. */
header.site{background:#F7F4EE;border-bottom:1px solid #E2DCCF;position:relative;z-index:100}.bar{height:auto;min-height:92px;padding:26px 0 14px}.brand{align-self:center}.brand img{width:220px;height:84px;object-fit:contain;object-position:left center;
  display:block;max-width:100%}/* ---- STRUCTURAL FIX 2: the hero CTA row was clipped by the trust strip ---
   the inherited sheet's hero is a fixed 635px because his H1 is three short lines. His
   is five. Height auto and a real bottom padding puts the buttons back inside
   the hero,and the trust strip follows in normal flow with no negative
   margin and nothing absolutely positioned. */
.hero{height:auto;background:#0F172A;color:#F7F4EE}.band-proof{margin-top:0;position:relative}/* ---- the proof band -----------------------------------------------------
   Four facts under the hero,and the last of the inherited Poppins on the
   site: 13px 700 uppercase with wide tracking,beside a 42px outline icon.
   Heavy geometric sans is the one voice the gold serif wordmark cannot live
   with,and four of them in a row read as a badge strip rather than as
   something worth reading.

   Rebuilt as type. A gold label in the same inscriptional capitals as the nav
   and the eyebrows,and a short gold hairline over each so the eye gets a rhythm
   across the four without a hard rule boxing them in. The inherited full
   height dividers go: with a label above every cell they were fencing off
   columns that already read as columns. */
.band-proof .wrap{grid-template-columns:repeat(4,1fr);min-height:0;
  padding-top:clamp(2.2rem,3.6vw,3.2rem);padding-bottom:clamp(2.2rem,3.6vw,3.2rem)}.band-proof .cell{display:block;padding:0 clamp(1.1rem,2.4vw,2.2rem)}.band-proof .cell:first-child{padding-left:0}.band-proof .cell:last-child{padding-right:0}.band-proof .cell + .cell::before{display:none}.band-proof .cell-t::before{content:"";display:block;width:26px;height:1px;
  background:#B18D34;opacity:.85;margin-bottom:1rem}.band-proof b{font-family:'Cinzel','Cormorant Garamond',Georgia,serif;font-weight:500;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:#B18D34;
  margin-bottom:.5rem;display:block}/* No ch cap: the column is already the measure,and 24ch inside a 340px
   column broke "after a look at the job" one word early and left "job" alone
   on its own line. balance evens the lines out across all four instead. */
.band-proof p{margin:0;color:rgba(247,244,238,.9);
  font-size:.95rem;line-height:1.55;font-weight:400;
  text-wrap:balance;max-width:26ch}@media(max-width:900px){.band-proof .wrap{grid-template-columns:1fr 1fr;gap:2rem 1.4rem}.band-proof .cell,.band-proof .cell:first-child,.band-proof .cell:last-child{
    padding:0}.band-proof p{max-width:none;font-size:.9rem}}@media(max-width:560px){.band-proof .wrap{grid-template-columns:1fr;gap:1.7rem}.band-proof .cell + .cell{border-top:0}.band-proof .cell-t::before{margin-bottom:.75rem}}/* ---- STRUCTURAL FIX 3: the hero is a blurred full-bleed photograph -------

   WHAT THIS REPLACES. The inherited hero is a 61% photo panel pinned to the
   right with an ivory gradient washing across it,and the copy in the gap on
   the left. The panel edge cut the hero in half: type on one side,and nowhere to put anything else.

   WHAT IT IS NOW. The photograph fills the whole hero,so it is a ground rather than a picture: at
   16px it still reads as plaster and daylight and it never competes with
   a word of copy. scale(1.12) keeps the blur's own feathered edge off the
   sides of the section. Over that ground the hero becomes two columns: the
   headline,which is the thing the old layout had nowhere to
   put.

   The scrim is heaviest on the left,so the photograph still reads as a photograph
   without ever fighting a word of copy. The bottom of it goes to solid navy
   because the proof band underneath is solid navy: the hero flows into it
   instead of stopping at a line. */
/* THE CLIP BELONGS TO THE PHOTOGRAPH,and that is the
   second half of the client's "it will not scroll on my iPhone".

   The blurred hero image is transform:scale(1.12) so its soft edges bleed past
   their box instead of showing a hard line. Something has to clip that,and it
   used to be .hero. Which made .hero a box with 93px of overflowing content
   and overflow:hidden on it: a scroll container that cannot be scrolled.
   Chrome does not chain a wheel or a gesture out of one of those,and on a phone the hero IS the first
   screen. Measured: a compositor gesture at y=300 moved the page 0px,and the
   same gesture below the hero moved it.

   .hero-photo is position:absolute and inset:0,so clipping THERE holds the
   scaled image inside exactly the same rectangle and leaves .hero with no
   overflow and no reason to be a scroll container at all. hidden stays in
   front of clip as the fallback for anything too old to know the keyword.

   So .hero gets no overflow property. If one is ever added back,the scroll
   test fails at 390 and 414 in both engines,which is the point of it. */
/* overflow:visible is EXPLICIT,not omitted: the inherited base sheet sets
   .hero{overflow:hidden}so leaving the
   property out here would inherit the very thing being removed. */
/* =========================================================================
   A3. The three-platform proof block under every quote form.

   Three rows,not a paragraph: the eye reads a stack of three identical
   shapes as a list of independent sources,which is exactly the claim being
   made. One line of running text saying the same thing reads as one claim.

   The whole row is the link,so the tap target is the full width rather than
   the eight characters of a platform name. It sits directly above or below the
   submit button,which is what keeps the brief's "proof within 80px of every
   CTA" true of the button itself and not only of the strip further up.

   The mark is 18px square and the stars are small on purpose. This is
   corroboration under a form,not a review section: if it competes with the
   button for attention it has been made too big.
   ========================================================================= */
/* =========================================================================
   THE PROOF LINE under every quote form.

   It was three stacked rows,which put the word "reviews"
   three times in a column under a submit button and read as a bibliography.
   One line: the stars,and the three marks that back it. The
   figure and the count are computed from the three platform entries in
   lp_reviews,so they cannot drift from the numbers they summarise.

   The marks are greyscale at 70% and come to full colour on hover. They are
   corroboration under a form,not three logos competing with the button.
   ========================================================================= */
.proofline{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;
  margin:16px 0 0;text-decoration:none;color:#262D3E;min-width:0}.proofline:hover{color:#262D3E}.proofline .rv-stars{flex:0 0 auto;color:#B18D34;font-size:14px;
  letter-spacing:.5px;line-height:1}.pf-line{font-size:14px;line-height:1.3;white-space:nowrap}.proofline:hover .pf-line{text-decoration:underline}.pf-marks{display:flex;align-items:center;gap:8px;flex:0 0 auto}.pf-mark{display:block;width:18px;height:18px;
  filter:grayscale(1);opacity:.7;transition:filter .15s ease,opacity .15s ease}.pf-mark svg,.pf-mark img,.pf-mark picture{width:18px;height:18px;display:block}.proofline:hover .pf-mark{filter:none;opacity:1}.hero-conv .proofline{color:rgba(247,244,238,0.84)}/* Below 400 it becomes two lines: stars and figure on the first,both hard left. Forcing the marks onto their own row is what
   stops the figure breaking mid-sentence. */
@media(max-width:399px){
  .proofline{gap:8px 10px}
  .pf-marks{flex-basis:100%}
}/* EVERY INLINE ICON HAS A CEILING,and this is the belt to the width and
   height attributes ic() now writes on each one.

   An <svg> with a viewBox and no intrinsic size is 300x150 by default,or the
   width of whatever contains it. When the quote modal's stylesheet went
   missing,that is how two icons came to be drawn 390px square in the middle
   of a live page. The attributes stop that on their own; this stops it again
   for any svg that arrives from somewhere else,and it costs nothing because
   every icon on this site is deliberately sized by its own rule anyway.

   IT IS A CEILING,NOT A SIZE. Writing svg.ic{width:1.25em}here would carry
   specificity 0,1,1 and beat every existing .ic rule in the sheet,which would
   silently resize every icon on the site. max-width and max-height on .ic
   cannot do that: 4rem is larger than any icon here,so it changes nothing
   that is working and only bites when a rule has gone missing. */
svg{max-width:100%}.ic{max-width:4rem;max-height:4rem}.hero{position:relative;overflow:visible;isolation:isolate}/* pointer-events:none is LOAD-BEARING,not tidiness. .hero-photo is a
   decorative layer behind everything: a blurred photograph and a gradient,and
   nothing in it is interactive. Clipping the scaled image makes it a box that
   clips content it will not let you scroll,and a gesture that starts on one
   of those is swallowed rather than passed up. Taking it out of hit testing
   means no touch ever starts on it,so it cannot swallow anything. Its own
   ::after already does this; the box itself did not. */
.hero-photo{position:absolute;inset:0;left:0;right:0;width:100%;height:100%;
  overflow:hidden;overflow:clip;pointer-events:none;
  max-width:none;z-index:0}.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 52%;
  filter:blur(16px) saturate(1.08);transform:scale(1.12)}.hero-photo::after{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none;
  background:linear-gradient(100deg,rgba(15,23,42,0.82) 0%,rgba(15,23,42,0.66) 44%,rgba(15,23,42,0.42) 100%)}/* the inherited ivory left-to-right wash,replaced by a vertical one that
   lands the hero on the navy band below it. */
.hero::before{background:linear-gradient(180deg,rgba(15,23,42,0.00) 0%,rgba(15,23,42,0.00) 62%,#0F172A 100%)}/* Two columns: copy,then the quote card. Under 1100px the card drops below
   the copy rather than squeezing to a width nobody can type a postcode into. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:clamp(2rem,3.6vw,3.6rem);align-items:center;
  padding:clamp(3rem,5vw,4.6rem) 0 clamp(3rem,5vw,4.6rem)}.hero-copy{width:auto;max-width:44rem}.hero h1{width:auto;max-width:100%;color:#F7F4EE;
  font-size:clamp(2.2rem,3.3vw,3.25rem)}.hero-sub h1{font-size:clamp(2rem,3vw,2.9rem)}.hero h1 .accent{color:#B18D34}.hero .eyebrow{color:#B18D34}.hero p.sub{width:auto;max-width:50ch;color:rgba(247,244,238,0.84)}@media(max-width:1099px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:2rem}.hero-copy{max-width:none}.hero-aside{max-width:34rem}}/* On the photograph the ghost buttons go ivory. A gold hairline with gold
   lettering is the right pair on the ivory page and disappears over a dark
   picture,which is where the two call buttons now live. */
.hero .btn-row .btn-ghost{border-color:#F7F4EE;color:#F7F4EE;background:transparent}.hero .btn-row .btn-ghost:hover{border-color:#B18D34;color:#B18D34;background:transparent}/* The inherited hero buttons are fixed boxes,250px and 225px wide,sized for
   the two labels the inherited hero carries. "Get a price for plastering and
   skimming" does not fit in 250px and was being cut off at both ends on every
   service page. They size to their own label instead,with a floor so the pair
   still look like a pair. */
.hero .btn-row{flex-wrap:wrap;gap:14px}.hero .btn-row .btn-primary,.hero .btn-row .btn-ghost{
  width:auto;min-width:min(100%,13rem);height:auto;min-height:58px;
  padding:.9rem 1.5rem;white-space:normal;text-align:center;line-height:1.25}/* The three proof facts,under the sub. Same strings as the navy band below,not a second set of claims: they are there because the band is a scroll away
   and this is the half second in which somebody decides to ring. */
.hero-points{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;
  flex-wrap:wrap;gap:.5rem 1.5rem}.hero-cover{margin:1.2rem 0 0;font-size:.86rem;letter-spacing:.02em;
  color:rgba(247,244,238,0.84)}.hero-cover b{color:#F7F4EE;font-weight:600}/* The one link in the hero that is not a button. It goes to the areas page,because "do you come to me" is the second question after "what does it
   cost",and a crawler following it lands on the page that lists all
   twenty two towns. */
.hero-cover a{color:#F7F4EE;text-decoration:underline;
  text-decoration-color:#B18D34;text-underline-offset:3px}.hero-cover a:hover{color:#B18D34}/* ---- the hero quote card ------------------------------------------------
   Ivory on the dark photograph,and this is a form somebody fills in standing in a
   hallway. The short version: name,what and where. Five controls,and
   the button is above the fold of a 768px-tall laptop. */
.hero-aside{position:relative;z-index:2}.hero .quote,.quote-hero{background:#FDFBF7;border:1px solid #E2DCCF;
  border-radius:10px;box-shadow:0 26px 60px rgba(15,23,42,.34)}.quote-hero{padding:1.4rem 1.35rem 1.2rem}.quote-h{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;font-size:1.42rem;line-height:1.15;
  color:#262D3E;margin:0 0 .2rem}.quote-h::after{content:"";display:block;width:44px;height:1px;
  background:#B18D34;margin:.6rem 0 0}.quote-hero .field{margin-bottom:.7rem}.quote-hero .field label{font-size:.74rem;font-family:'Cinzel','Cormorant Garamond',Georgia,serif;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:#4F5668;margin-bottom:.25rem}.quote-hero .field input,.quote-hero .field select{padding:.62rem .7rem;font-size:.92rem}.quote-hero .two{gap:.7rem}.quote-hero .btn{width:100%;justify-content:center;margin-top:.3rem}.quote-hero .form-note{margin:.7rem 0 0;font-size:.78rem;line-height:1.45}@media(max-width:479px){.quote-hero .two{grid-template-columns:1fr}}/* Sub pages have the same ground and no card,so the copy runs wider than the
   home hero's column. */
.hero-sub .hero-grid{grid-template-columns:minmax(0,1fr)}.hero-sub .hero-copy{max-width:52rem}/* except .hero-plain,which has no photograph at all: it keeps the navy. */
.hero-plain{background:#0F172A}/* ---- the review badge bar ----------------------------------------------
   FIVE BADGES,ONE SIZE. The five source files were five different shapes
   with five different amounts of baked-in padding,so "height:56px" was
   really sizing the whitespace and the row looked like five accidents. They
   are now normalised in lp_brand.badges() to one 320x120 file each,equal optical area. Which leaves the CSS with one job: an
   even five-track row on a desktop and a snap carousel on a phone,because a second DOM for mobile is a second thing to break.

   MOBILE IS THE BASE CASE. .badgerow is a scroll-snap strip by default and
   becomes a five-column grid at 768px. Tracks are 68% wide so the next badge
   peeks in at the edge,which is what tells a thumb the strip moves; the dots
   under it say the same thing to an eye that never tries. */
.badgebar{background:#F7F4EE;border-top:1px solid #B18D34;
  border-bottom:1px solid #B18D34;padding:2.4rem 0}.badgebar .eyebrow{text-align:center;display:block;margin:0 0 1.6rem;
  color:#846927}.badgerow{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:68%;gap:1rem;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:.2rem}.badgerow::-webkit-scrollbar{display:none}/* Every cell is the same box whether it is a link or not,and the caption row
   is reserved on all five so the cards share a bottom edge.

   THE CARD IS THE THING THAT MAKES THEM MATCH. Five identical white cards on
   the ivory read as one bank of proof; five loose marks of five shapes read as
   five accidents,which is what they were. The tile files are white and the
   card is the same white,so the two are one surface and the radius clips the
   file's square corners. The 5:2 aspect is the file's own,stated here so the
   card holds its shape before the image has loaded. */
.badgecell{scroll-snap-align:center}.badgecell>a,.badgecell{display:flex;flex-direction:column;
  align-items:stretch;gap:.7rem;text-decoration:none;color:#262D3E;min-width:0}.badgecell picture{display:block;width:100%;aspect-ratio:5/2;overflow:hidden;
  background:#fff;border:1px solid #E2DCCF;border-radius:12px}.badgecell img{width:100%;height:100%;display:block;object-fit:contain}.badgecell a picture{transition:border-color .2s ease,box-shadow .2s ease}.badgecell a:hover picture{border-color:#B18D34;
  box-shadow:0 6px 18px rgba(15,23,42,.08)}.badgeline{display:block;min-height:1.4rem;font-size:.92rem;line-height:1.4;
  color:#4F5668;text-align:center}.badgecell a:hover .badgeline{color:#846927}/* The carousel's only chrome,and only on a phone. */
.badgedots{display:flex;justify-content:center;gap:.2rem;margin-top:.8rem}/* Same 24px target as .rv-dot,same trick: the button is padded out and the
   dot is painted on the content box. */
.badgedot{width:24px;height:24px;padding:7.5px;border:0;border-radius:50%;
  box-sizing:border-box;background-clip:content-box;
  background-color:#E2DCCF;cursor:pointer;appearance:none;-webkit-appearance:none;
  transition:background-color .2s ease,transform .2s ease}.badgedot[aria-current="true"]{background-color:#B18D34;transform:scale(1.25)}@media(min-width:768px){/* THREE,not three stretched across the full wrap: 1fr tracks put
     240px of air between cards on a wide screen and the bar stopped reading
     as one group. Capped tracks and justify-content hold the three together
     in the middle of the page at any width. */
  .badgerow{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,224px));
    grid-auto-columns:auto;justify-content:center;gap:1.8rem;overflow:visible;
    scroll-snap-type:none;align-items:start;padding-bottom:0}/* Two lines are reserved,not one: between 768 and about 1100 the
     Checkatrade line wraps,and a caption that wraps in one cell of the row
     would drop that card out of line with the other two. */
  .badgeline{min-height:2.8rem}.badgedots{display:none}}@media(min-width:1024px){.badgerow{gap:2.4rem}}/* ---- the qualifications strip ------------------------------------------
   CHAS and City and Guilds,above the footer on every page. Same card as the
   review bar so the two strips are visibly the same family,two steps
   quieter: smaller,no link. They are credentials,not somewhere to go. */
.qualbar{background:#F7F4EE;border-top:1px solid #E2DCCF;padding:2.2rem 0}.qualbar .eyebrow{display:block;text-align:center;margin:0 0 1.2rem;
  color:#846927}.qualrow{display:flex;justify-content:center;align-items:start;gap:1.2rem;
  flex-wrap:wrap}/* THE STRIP NOW CARRIES WORDS. It used to be two marks and no text at all,which asserted two accreditations and explained neither. Three cells now,and only one of them has a mark
   because only one of them has artwork we actually hold.

   The cells are not a fixed 150px any more: a cell holding "be Accredited
   health and safety training" plus five course names cannot be the same width
   as a logo tile. They share a max width and centre against each other,and
   the marked one keeps its tile above its words. */
.qualcell{flex:0 1 20rem;max-width:min(20rem,100%);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.65rem}.qualcell picture{display:block;width:150px;height:60px;overflow:hidden;
  background:#fff;border:1px solid #E2DCCF;border-radius:12px}.qualcell img{width:100%;height:100%;display:block;object-fit:contain}/* THE THREE CELLS HAVE TO START THEIR WORDING ON THE SAME LINE. Only one of
   them has a mark,which reads as a mistake rather than as a difference.
   The tile's height is reserved on every cell. */
.qualcell:not(.has-mark) .qual-text{margin-top:calc(60px + .65rem)}.qual-text{display:block}.qual-label{display:block;font-weight:600;font-size:.94rem;color:#262D3E;
  line-height:1.35}/* The detail line is the evidence: who,which year. Quieter
   than the label,because the whole reason it is there is
   to be read by somebody checking. */
/* Same rule as .gal-cap: a real colour,not a transparency. */
.qual-sub{display:block;font-size:.84rem;color:#4F5668;
  line-height:1.45;margin-top:.2rem;max-width:34ch;margin-inline:auto}@media(min-width:768px){.qualrow{gap:1.6rem 2.4rem;align-items:flex-start}}/* ---- the coverage map ------------------------------------------------
   A fixed aspect box so the page does not jump when the iframe finally loads,which is the whole cost of lazy-loading something this big. */
.covmap{margin:1.8rem 0 0}.covmap iframe{display:block;width:100%;aspect-ratio:21/9;height:auto;
  border:1px solid #E2DCCF;border-radius:4px;background:#FDFBF7;
  /* The embed is grey, blue and white and sits on a warm ivory page. A touch
     of desaturation settles it into the palette without tinting it, which
     would be recolouring somebody else's map. */
  filter:saturate(.82)}.covmap figcaption{margin-top:.7rem;font-size:.88rem;color:#4F5668;
  max-width:60ch}@media(max-width:700px){.covmap iframe{aspect-ratio:4/3}}.abmap{padding-top:0}/* ---- the team ---------------------------------------------------------
   The inherited card component: a 3/4 frame,a line. The only new thing is
   the empty state,and it is styled to LOOK empty rather than styled to hide
   that it is. */
.tmsec .lede{max-width:56ch}.tm-row{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;
  grid-template-columns:1fr 1fr;gap:1.4rem}.tm-card{text-align:left}.tm-frame{position:relative;display:block;border-radius:4px;overflow:hidden;
  background:#FDFBF7;border:1px solid #E2DCCF}.tm-img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}/* The stand-in is the brand mark on the card ground,so it must NOT be
   object-fit cover: cropping a centred logo to fill a 3/4 box cuts the mark
   in half. It is contained,and the frame says plainly that it is waiting. */
.tm-empty{border-style:dashed}.tm-empty .tm-img{object-fit:contain;background:#FDFBF7}.tm-note{position:absolute;left:0;right:0;bottom:0;text-align:center;
  font-family:'Cinzel','Cormorant Garamond',Georgia,serif;letter-spacing:.10em;text-transform:uppercase;
  font-size:.6rem;color:#846927;padding:.5rem;
  background:linear-gradient(180deg,rgba(253,251,247,0),#FDFBF7 55%)}.tm-name{display:block;margin-top:.85rem;font-weight:600;font-size:1.06rem;
  color:#262D3E}.tm-role{display:block;font-family:'Cinzel','Cormorant Garamond',Georgia,serif;letter-spacing:.10em;
  text-transform:uppercase;font-size:.66rem;color:#846927;
  margin-top:.18rem}.tm-line{margin-top:.5rem;font-size:.9rem;line-height:1.5;color:#4F5668;
  max-width:34ch}@media(min-width:760px){/* --tm-n is written onto the element from TEAM_CREW_COUNT. A hardcoded
     repeat(4,1fr) left a dead fourth column the moment the crew turned out to
     be three. The cap keeps a card readable if the count ever grows: past
     four across they wrap instead of shrinking. */
  /* A CAP,NOT A FRACTION. With 1fr columns the cards divide the wrap between
     them,so dropping from four lads to three made each card 460px wide and
     its 3/4 frame 613px tall: an enormous dashed box with a small lotus lost
     in the middle of it. A person card has a right size and it does not depend
     on how many colleagues they have. Columns are capped and the row is left
     aligned,so three cards and four cards are the same card. */
  .tm-row{grid-template-columns:repeat(min(var(--tm-n,4),4),minmax(0,16.5rem));
    gap:1.6rem;justify-content:start}.tm-row-2{grid-template-columns:repeat(2,minmax(0,22rem));justify-content:start;
    gap:2.4rem}}@media(min-width:760px) and (max-width:1023px){.tm-row{grid-template-columns:repeat(min(var(--tm-n,4),3),minmax(0,1fr))}}@media(min-width:1024px){.tm-row-2{grid-template-columns:repeat(2,minmax(0,20rem))}}/* ---- before and after,both visible. A slider would hide half the evidence
   behind an interaction,and on a phone
   fights the scroll for the same gesture. */
.ba-grid{display:grid;grid-template-columns:1fr;gap:2rem;margin-top:1.8rem}.ba-t{font-weight:600;color:#262D3E;margin-bottom:.6rem;font-size:1.02rem}.ba-two{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.ba-f{position:relative;display:block;border-radius:4px;overflow:hidden;
  background:#FDFBF7}/* The tag sits ON the photograph. Under it,the two labels and the pair's own
   caption stack into three lines of text per pair and the comparison stops
   reading as a comparison. */
.ba-tag{position:absolute;z-index:2;top:.5rem;left:.5rem;
  font-family:'Cinzel','Cormorant Garamond',Georgia,serif;letter-spacing:.10em;text-transform:uppercase;
  font-size:.62rem;font-weight:500;
  background:rgba(15,23,42,.82);color:#F7F4EE;
  padding:.3rem .55rem;border-radius:3px}@media(min-width:700px){.ba-grid{grid-template-columns:1fr 1fr;gap:2.2rem 2rem}}@media(min-width:1100px){.ba-grid{grid-template-columns:repeat(3,1fr)}}.gal-h{margin:2.6rem 0 .2rem;font-size:1.12rem}/* The count is not decoration. With 139 photographs across seven headings it
   is the only way to know whether a group is worth scrolling. */
.gal-n{font-family:'Cinzel','Cormorant Garamond',Georgia,serif;letter-spacing:.08em;font-size:.72rem;
  color:#846927;margin-left:.5rem;vertical-align:.18em}.gal-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1rem}.gal-cell{position:relative;border-radius:4px;overflow:hidden;background:#FDFBF7}/* NO OPACITY. .gal-stage sits inside this caption and is #846927,which is
   4.75:1 on the ivory and passes AA on its own. An opacity of .86 on the
   PARENT multiplies through to the child and took it to roughly 3.8:1,which
   is what Lighthouse was reporting as the work page's only accessibility
   failure. Quietness is a colour choice,not a transparency one. */
.gal-cap{display:block;font-size:.78rem;line-height:1.35;color:#4F5668;
  padding:.5rem .1rem 0}.gal-stage{display:inline-block;font-family:'Cinzel','Cormorant Garamond',Georgia,serif;letter-spacing:.09em;
  text-transform:uppercase;font-size:.6rem;color:#846927;
  margin-right:.45rem;vertical-align:.08em}@media(min-width:600px){.gal-grid{grid-template-columns:repeat(3,1fr);gap:.9rem}}@media(min-width:1000px){.gal-grid{grid-template-columns:repeat(4,1fr)}.gal-lead{grid-template-columns:repeat(3,1fr)}}/* ---- the site credit,so it reads as a signature rather than as a
   second piece of site furniture competing with the client's own name. */
.credit{text-align:center;padding:0 0 1.15rem;font-size:.7rem;
  margin-top:-.35rem}.credit a{color:rgba(247,244,238,.52);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:1px}.credit a:hover{color:#B18D34;
  border-bottom-color:rgba(177,141,52,.55)}@media(prefers-reduced-motion:reduce){.badgedot{transition:none}}/* ---- small screens ------------------------------------------------------ */
@media(max-width:767px){
  .bar{min-height:76px;padding:18px 0 10px}
  .brand img{width:172px;height:66px}
  /* The inherited sheet turns the hero into a column-reverse flexbox below
     768px and puts the photograph back in the flow as a 16/10 block above the
     copy. There is no photograph in the flow any more, so that rule would
     leave an empty 16/10 hole at the top of every page. The hero stays one
     block with the picture behind it, and the quote card follows the
     buttons. */
  .hero{display:block}
  .hero::before{display:block}
  .hero-photo{position:absolute;inset:0;width:100%;height:100%;
    aspect-ratio:auto;margin:0}
  .hero-photo img{height:100%;aspect-ratio:auto;
    filter:blur(12px) saturate(1.08);transform:scale(1.14)}
  .hero-grid{padding:2.2rem 0 2.6rem;gap:1.6rem}
  .hero-aside{max-width:none}
  .hero-points{gap:.45rem 1.1rem;margin-top:1.1rem}
  .hero-points li{font-size:.88rem}
  /* the inherited sheet makes the hero buttons full width on a phone, which is
     right, and the desktop rule above it would otherwise undo it: a media
     query carries no extra specificity, so the later declaration wins. */
  .hero .btn-row .btn-primary,.hero .btn-row .btn-ghost{width:100%;min-width:0}
}/* ---- the floating WhatsApp button ---------------------------------------
   WhatsApp's own green and glyph,because a WhatsApp button in the site's
   brass would not be recognised as one,and recognition is the whole point of
   putting it there. Everything around it is this site's: the ivory label,the brass focus ring.

   It is hidden at the top of the page and revealed after 200px of scroll
   (site.js toggles .is-in),and hidden
   again while the quote modal holds body.qm-lock,so it never sits over that.
   --fabgap is the height of a sticky call bar if the page has one; it is 0
   when there is nothing there,which is the case on every page today. */
#wafab{position:fixed;z-index:120;
  right:calc(24px + env(safe-area-inset-right,0px));
  bottom:calc(24px + env(safe-area-inset-bottom,0px) + var(--fabgap,0px));
  width:56px;height:56px;border-radius:50%;background:#25D366;
  border:1px solid #1da851;box-shadow:0 2px 8px rgba(0,0,0,.2);
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease,
             background .2s ease}#wafab.is-in{opacity:1;visibility:visible;transform:none}#wafab:hover{background:#1eb857}#wafab svg,#wafab .ic{width:30px;height:30px;fill:#fff;color:#fff;display:block}#wafab:focus-visible{outline:3px solid #B18D34;outline-offset:3px}body.qm-lock #wafab{opacity:0;visibility:hidden;pointer-events:none}/* The label is desktop only and hover only: on a phone the tap goes straight
   to WhatsApp and a label would be a second thing to hit by accident. */
.wafab-l{position:absolute;right:calc(100% + 12px);white-space:nowrap;
  background:#F7F4EE;color:#0F172A;border:1px solid #E2DCCF;
  border-radius:8px;padding:.5rem .7rem;font-family:'Cinzel','Cormorant Garamond',Georgia,serif;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  opacity:0;transform:translateX(6px);pointer-events:none;
  transition:opacity .15s ease,transform .15s ease}#wafab:hover .wafab-l,#wafab:focus-visible .wafab-l{opacity:1;transform:none}@media(max-width:767px){.wafab-l{display:none}}@media(prefers-reduced-motion:reduce){#wafab,.wafab-l{transition:none;transform:none}#wafab{transform:none}}/* ---- the header's gold button,AA -------------------------------------
   Inherited as ".bar .btn{background:#b18d34;color:#fff}",which is white on
   brass at 3.12:1. Every other gold button on the site is navy on brass at
   8.77:1,which is what lp_check's "dark label on brass button" pair asserts;
   this one was the exception and it is the most clicked control on the site.
   Found by measuring the computed colour of every text node on the page
   rather than by comparing palette pairs,which is a check the palette always
   passes. */
.bar .btn,.bar .btn:hover{color:#0F172A}/* Sticky mobile call bar: navy and gold,never the old site's blue. */
.callbar{background:#0F172A;color:#B18D34}/* ---- the menu button ----------------------------------------------------
   BUG,and the only way onto a second page from a phone. The inherited burger
   holds an SVG and the inherited sheet styles ".burger .ic"; this build emits
   three <span> bars instead,and no rule there matches a span. The
   bars computed to 0x0 and transparent,so the button rendered as an empty
   outline: nothing to see,and the whole site
   unreachable below 768px.

   lp_style.py does carry a ".burger span" rule,and its colour is var(--on-dark),which
   is the ivory. Ivory bars on the ivory header would have been invisible even
   if it had been wired up. So the rule belongs here,in the ink that the button's own colour property already
   names. */
.burger{align-items:center;justify-content:center;gap:5px;flex-direction:column;
  width:44px;height:44px;padding:0;border-radius:8px}.burger span{display:block;width:22px;height:2px;background:currentColor;
  border-radius:2px;transition:transform .2s ease,opacity .2s ease}.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}.burger[aria-expanded="true"] span:nth-child(2){opacity:0}.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}/* ---- the mobile menu panel ----------------------------------------------
   The other half of the same bug. site.js toggles .open on nav.main,and the
   inherited sheet only ever says "nav.main{display:none}" below 900px with no
   open state anywhere in the file. So the button reported aria-expanded=true
   to a screen reader while the menu stayed shut and no link became reachable.
   Below 900px the nav becomes a panel under the header rather than a row.

   The two dropdowns need saying as well: at desktop .navdd-m is absolutely
   positioned and centred with translateX(-50%),which inside a stacked panel
   would hang off the side of the screen. In the panel they are ordinary
   stacked blocks,indented under their parent. */
@media(max-width:900px){
  .site .bar{position:relative;flex-wrap:wrap}
  nav.main.open{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;z-index:60;
    background:#F7F4EE;border-top:1px solid #E2DCCF;
    box-shadow:0 18px 40px rgba(15,23,42,.14);
    padding:.4rem .9rem 1rem;max-height:calc(100vh - 100%);overflow-y:auto}
  nav.main.open>a,nav.main.open .navdd-t{display:block;width:100%;
    padding:.95rem .25rem;font-size:.95rem;letter-spacing:.06em;
    border-bottom:1px solid #E2DCCF}
  nav.main.open .navdd{display:block;width:100%}
  nav.main.open .navdd-t{display:flex;align-items:center;justify-content:space-between}
  nav.main.open .navdd-m{position:static;transform:none;opacity:1;visibility:visible;
    pointer-events:auto;display:none;width:100%;min-width:0;padding:.2rem 0 .5rem .7rem;
    box-shadow:none;border:0;background:transparent}
  nav.main.open .navdd.open .navdd-m{display:block}
  nav.main.open .navdd-m a{padding:.7rem .4rem;font-size:.9rem}
}/* =========================================================================
   The inline quote forms: photo picker,success in place.

   These forms used to be markup and nothing else: action= plus method=post,no script. Submitting one empty NAVIGATED to the API and left the visitor
   looking at{"detail":"Please check: name, phone, message"}on a white page
   with everything they had typed gone. And the form somebody sees first was
   the only one on the site that could not send a photograph of the wall.
   ========================================================================= */

/* The picker is a LABEL styled as a dropzone,with the real input visually
   hidden but still focusable,so it keeps the keyboard and the file dialog
   for free rather than being rebuilt out of a button and a click handler. */
.q-photos{margin-top:8px}/* The real <input type=file> is visually hidden but still focusable,so the
   label can style the dropzone while the keyboard and the file dialog keep
   working. SPECIFICITY MATTERS HERE: a bare .q-file loses to the inherited
   sheet's `.quote input{width:100%}`,and a 100%-wide absolutely positioned
   input sat 725px past the right edge of the page and made the whole document
   scroll sideways at 1440. It is scoped to .quote and given max-width so it
   cannot be widened by anything. */
.quote .q-file,.q-photos .q-file{position:absolute;width:1px;height:1px;
  max-width:1px;min-width:0;padding:0;margin:0;border:0;opacity:0;
  overflow:hidden;clip-path:inset(50%);pointer-events:none}.q-photo-label{display:flex;align-items:center;gap:12px;cursor:pointer;
  border:1px dashed rgba(15,23,42,.28);border-radius:2px;
  padding:14px 16px;background:#FDFBF7;
  transition:border-color .15s ease,background .15s ease}.q-photo-label:hover{border-color:#B18D34}.q-photo-label:hover{background:#F7F4EE}.q-photo-label .ic{width:22px;height:22px;color:#846927;flex:0 0 auto}/* Sentence case,both lines. The inherited sheet uppercases label text inside
   a form,which turned "Up to 6,tap to use your camera" into a shout. */
.q-photo-label b{display:block;font-size:15px;line-height:1.3;color:#262D3E;
  font-weight:600;text-transform:none;letter-spacing:0}.q-photo-label small{display:block;font-size:13px;line-height:1.35;
  color:#4F5668;margin-top:2px;text-transform:none;letter-spacing:0}.q-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.q-thumbs:empty{margin-top:0}/* A photograph still uploading is dimmed rather than replaced by a spinner:
   the picture is the feedback,and taking it away to show a spinner is a
   worse answer to "did that work". */
.q-thumb.is-busy img{opacity:.45}/* Inline errors. Navy,and they take no
   vertical space at all until they say something. */
.q-err{margin:4px 0 0;font-size:13.5px;line-height:1.35;color:#262D3E;
  font-weight:600}.q-err:empty{display:none}.q-err::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:#B18D34;margin-right:7px;
  vertical-align:middle}.q-err-form{margin-top:10px}/* The success state,where the form was. */
.q-done{background:#FDFBF7;border:1px solid rgba(15,23,42,.12);
  border-radius:2px;padding:28px 26px;text-align:center}/* =========================================================================
   THE HERO CARD. The reference build's hero form,in this skin.

   It was the six-step questionnaire mounted inline for about an hour and that
   was the wrong call: it put a progress bar,a second header and a second
   Call/WhatsApp row inside a card that sits beside a hero already carrying
   both,and asked for six screens before anybody had decided anything. The
   reference has always answered this with ONE screen: five fields,send. The six steps are still there,behind "Get a price",where somebody
   has chosen to start.
   ========================================================================= */
.quotecard{background:#F7F4EE;border:1px solid #B18D34;border-radius:2px;
  padding:32px;max-width:460px}.qc-h{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;font-size:24px;line-height:1.2;
  color:#262D3E;margin:0 0 6px;text-transform:none;letter-spacing:0}.qc-sub{margin:0 0 20px;font-size:15px;line-height:1.5;color:#4F5668}/* The inherited sheet styles .quote as a white card with its own border and
   padding,which put a white panel inside the ivory one and gave the card two
   frames. The card IS the frame; the form is its contents. And this site has
   no pure white surface,so a white panel here would be the only one on it. */
.quotecard .quote{background:transparent;border:0;padding:0;box-shadow:none;
  border-radius:0;max-width:none;margin:0}/* Labels above,always visible. A placeholder is not a label: it goes the
   moment somebody types and takes the question with it. */
.quotecard .field{margin:0 0 14px}.quotecard .field > label{display:block;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;color:#262D3E;margin:0 0 6px}.quotecard .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quotecard input[type=text],.quotecard input[type=tel],.quotecard select{
  width:100%;min-height:48px;padding:0 14px;background:#FDFBF7;
  border:1px solid rgba(15,23,42,.18);border-radius:2px;
  font:400 16px/1.4 Inter,system-ui,sans-serif;color:#262D3E}.quotecard textarea{width:100%;min-height:88px;padding:12px 14px;
  background:#FDFBF7;border:1px solid rgba(15,23,42,.18);border-radius:2px;
  font:400 16px/1.5 Inter,system-ui,sans-serif;color:#262D3E;resize:vertical}.quotecard input:focus,.quotecard select:focus,.quotecard textarea:focus{
  outline:2px solid #B18D34;outline-offset:1px;border-color:#B18D34}.q-photo-h{display:block;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;color:#262D3E;margin:0 0 6px}.q-photo-opt{text-transform:none;letter-spacing:0;font-weight:400;
  color:#4F5668}.quotecard .form-note{margin:14px 0 14px;font-size:13px;line-height:1.5;
  color:#4F5668}.quotecard .form-note a{color:#846927}/* One gold button,56px,and the only one in this card. */
.quotecard .qc-send{display:flex;align-items:center;justify-content:center;
  gap:10px;width:100%;min-height:56px;font-size:15px}/* Desktop: beside the hero copy,top aligned with the eyebrow. Mobile: under
   it,and the max-width comes off so it fills the column. */
@media(max-width:1023px){
  .quotecard{max-width:none;padding:24px}
  .quotecard .two{grid-template-columns:1fr}
}/* =========================================================================
   THE QUOTE POPUP: the reference component,RECOLOURED AND NOTHING ELSE.

   The brief is "match it one for one,only the colours change",so this block
   sets colours and typefaces and does not touch a single measurement. An
   earlier version restyled the padding,and the result measured 539x634 with square corners against the
   reference's 560x720 at 14px: a different component that happened to ask the
   same questions. Structure comes from the inherited sheet.

   IF YOU ARE TEMPTED TO ADD A WIDTH,don't.
   lp_popup_compare.py opens both popups side by side at 1440 and 390 and
   prints the panel box of each; that is the check this block has to pass.
   ========================================================================= */

/* The panel and its bands are ivory,not white. This site has no pure white
   surface and the popup is not going to be the one place it appears. */
.qm,.qm-head,.qm-body,.qm-foot{background:#F7F4EE}.qm-head h2{color:#262D3E;font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif}.qm-legend,.qm-q,.qm-qlabel{color:#262D3E;font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif}.qm-hint,.qm-note,.qm-hint-top{color:#4F5668}.qm-x{color:#262D3E}.qm-x:focus-visible{outline:2px solid #B18D34;outline-offset:2px}/* The progress bar is gold on the navy at 12%. The recolour already turns the
   reference's red into gold; the track was a warm grey from that palette. */
.qm-bar{background:rgba(15,23,42,.12)}.qm-bar i{background:#B18D34}/* "Need to speak now?" in the caps face,like every other eyebrow here. */
.qm-talk-lead{font-family:'Cinzel','Cormorant Garamond',Georgia,serif;letter-spacing:.14em;text-transform:uppercase;
  color:#846927}/* BOTH talk buttons are outlined. The WhatsApp one was a solid green slab,which is the loudest thing in the panel and is WhatsApp's brand rather than
   this one. The GLYPH keeps WhatsApp green so it is still recognisable at a
   glance,which is the whole job that mark has to do. */
.qm-talk-btn{border:1px solid #B18D34;background:#F7F4EE;color:#262D3E}.qm-talk-btn:hover{background:rgba(177,141,52,.08);color:#262D3E}.qm-wa,.qm-wa:hover{background:#F7F4EE;color:#262D3E;border-color:#B18D34}.qm-wa svg{color:#25D366}/* Option rows and the dropzone: the reference's shape,this site's colours. */
.qm-opt{background:#FDFBF7;border-color:rgba(15,23,42,.14);color:#262D3E}.qm-opt:hover{border-color:#B18D34}.qm-opt:has(input:checked){border-color:#B18D34;background:rgba(177,141,52,.06)}.qm-drop{border-color:rgba(15,23,42,.28);background:#FDFBF7;color:#262D3E}.qm-drop:hover{border-color:#B18D34}.qm-err{color:#262D3E}.qm-foot{border-top-color:rgba(15,23,42,.12)}/* =========================================================================
   DESKTOP HORIZONTAL SCROLL: containing the reviews carousel properly.

   At 1440 and above the page scrolled sideways into a wide empty area.
   body{overflow-x:hidden}used to hide it and that declaration had to go: it
   is what stopped the page scrolling AT ALL on iOS. So the overflow is
   contained where it is produced instead.

   WHAT PRODUCES IT. The reviews carousel lays 25 cards in a row inside
   .rv-vp. Measured: the track is 4926px wide in a 966px viewport,and the
   document reports a 4908px scroll width once the script has run - with the
   script blocked it is 2150. No element on the page is wider than 1600,so
   nothing is sticking out; it is the carousel's own scroll port being counted
   against the document.

   .rv-car is the carousel's outer box and it is exactly 966px,the width the
   carousel is supposed to occupy. Clipping THERE bounds the whole component
   without touching the inner scroller,wheel and keyboard exactly as before.

   overflow:clip,not hidden: clip bounds the box without making it a scroll
   container,which is the distinction that caused the iOS bug in the first
   place. contain:paint backs it up on engines that still count a clipped
   descendant's scroll port.
   ========================================================================= */
.rv-car{max-width:100%;overflow-x:clip;contain:paint}/* THE SECOND OFFENDER: the before/after pairs.
   .ba-two is display:grid with two 1fr columns,and a grid item's default
   min-width is AUTO,not zero. So each column refuses to shrink below the
   intrinsic width of the photograph inside it and the grid pushes past its
   container. Measured: the section alone took the document from 1425 to 2150.
   min-width:0 on the items is the whole fix,and it is the same fix a flex
   row needs for the same reason. */
.ba-two{min-width:0}.ba-two > *{min-width:0}.ba-grid{min-width:0}.ba-grid > *{min-width:0}.ba-f{max-width:100%}.ba-f img{max-width:100%;height:auto}.rv-panel{max-width:100%;min-width:0}.rv-row{min-width:0}/* =========================================================================
   #reviews. Rebuilt to a supplied reference: a pinned summary card carrying
   the platform's score,that platform's reviews two at a time beside it,and
   a tab row that swaps the whole block.

   WHAT WAS THERE BEFORE. The section emitted .badges,and the inherited sheet styles NONE of them. Not
   one selector. Twenty five verbatim reviews rendered as unstyled markup: the
   platform names and scores ran together into
   "Checkatrade9.96 out of 10from 112 reviews",the initial-letter avatars
   were bare capitals and the stars were black text at body size.

   THE THREE CARDS ARE NOT EQUAL WIDTHS. Measured off the reference they run
   about 0.78 : 1 : 1,so the summary is the narrow one and the two reviews
   are wider and equal. Heights ARE equal,which is what holds the row
   together. Getting this backwards,is the single change
   that makes the row stop looking like the reference.
   ========================================================================= */

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0}.revsec .rv-eyebrow{display:flex;align-items:center;gap:.85rem;margin:0 0 1.1rem;
  font-family:'Cinzel','Cormorant Garamond',Georgia,serif;font-weight:500;font-size:.81rem;letter-spacing:.19em;
  text-transform:uppercase;color:#846927}.revsec .rv-rule{display:block;width:34px;height:1px;background:#B18D34;
  flex:0 0 34px}.revsec .rv-h2{font-size:clamp(2rem,3.5vw,3rem);margin:0 0 .5rem;
  letter-spacing:-.015em;line-height:1.06}.revsec .rv-h2 .gold{color:#846927}.revsec .rv-sub{font-size:1.06rem;color:#4F5668;margin:0 0 1.6rem;max-width:60ch}/* Tabs. Not in the reference image,so
   they are built in the section's own language: the eyebrow's typeface at
   the eyebrow's size,slid into place rather than snapped. */
.rv-tabs{display:flex;gap:1.9rem;align-items:center;flex-wrap:wrap;
  margin:0 0 2.1rem;border-bottom:1px solid #E2DCCF;padding-bottom:0}.rv-tab{appearance:none;background:none;border:0;border-radius:0;cursor:pointer;
  padding:0 0 .8rem;position:relative;font-family:'Cinzel','Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:.81rem;letter-spacing:.16em;text-transform:uppercase;
  color:#4F5668;transition:color .2s ease}.rv-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:2px;background:#B18D34;transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease}.rv-tab:hover{color:#262D3E}.rv-tab[aria-selected="true"]{color:#846927}.rv-tab[aria-selected="true"]::after{transform:scaleX(1)}/* With no script every panel renders,so no platform is stranded
   behind a control that does not work. Where the script WILL run,the
   inactive ones are folded away in CSS so the page does not paint three
   panels and then collapse them. */
.rv-panel+.rv-panel{margin-top:2.4rem}@media(scripting:enabled){.rv-panel+.rv-panel{margin-top:0}.rv-panel[hidden],.rv-panel:not(:first-of-type):not(.rv-on){display:none}.rv-panel.rv-on{display:block}}.rv-row{display:grid;grid-template-columns:1fr;gap:24px;align-items:stretch}@media(min-width:1024px){.rv-row{grid-template-columns:minmax(0,.383fr) minmax(0,1fr)}}/* ---- the summary card --------------------------------------------------- */
.rv-sum{display:flex;flex-direction:column;background:#0F172A;color:#F7F4EE;
  border:1px solid #0F172A;border-radius:2px;padding:26px 26px 24px}.rv-sum-top{display:flex;align-items:center;gap:14px;margin:0 0 1.15rem}.rv-sum-mark{flex:0 0 56px;width:56px;height:56px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;
  overflow:hidden}.rv-sum-mark .rv-mark-svg{width:34px;height:34px;display:block}.rv-sum-mark .rv-mark-img{width:52px;height:52px;display:block;
  object-fit:contain}.rv-sum-name{font-size:1.32rem;line-height:1.2;color:#F7F4EE;
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600}.rv-score{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1;
  font-size:clamp(3.4rem,6.6vw,6rem);line-height:.94;color:#F7F4EE;
  margin:.3rem 0 0;letter-spacing:-.02em}.rv-suffix{font-size:.34em;letter-spacing:0;margin-left:.08em;
  vertical-align:.55em;color:#F7F4EE;opacity:.72}.rv-word{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;font-size:1.7rem;line-height:1.2;
  color:#F7F4EE;margin:.25rem 0 .55rem}.rv-sum .rv-stars{font-size:2.35rem;letter-spacing:.04em}.rv-count{font-size:.9rem;color:rgba(247,244,238,.86);margin:.5rem 0 0}.rv-cta{margin-top:auto;display:flex;align-items:center;justify-content:center;
  gap:.6rem;text-align:center;padding:14px 16px;border:1px solid #B18D34;
  border-radius:2px;background:transparent;color:#F7F4EE;text-decoration:none;
  font-size:.95rem;transition:background .18s ease,color .18s ease}.rv-cta .rv-ext{color:#B18D34}.rv-cta:hover{background:#B18D34;color:#0F172A}.rv-cta:hover .rv-ext{color:#0F172A}.revsec .rv-sum .rv-cta{margin-top:1.5rem}@media(min-width:1024px){.revsec .rv-sum .rv-cta{margin-top:auto}}/* ---- the review cards --------------------------------------------------- */
.rv-stars{color:#B18D34;line-height:1;display:block;white-space:nowrap}.rv-car{min-width:0}.rv-vp{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;height:100%}.rv-on .rv-vp,.rv-car.rv-ready .rv-vp{scrollbar-width:none;-ms-overflow-style:none}.rv-car.rv-ready .rv-vp::-webkit-scrollbar{width:0;height:0;display:none}.rv-track{display:flex;gap:24px;align-items:stretch;height:100%}.rv-card{flex:0 0 100%;scroll-snap-align:start;display:flex;
  flex-direction:column;background:#FDFBF7;border:1px solid rgba(15,23,42,.12);
  border-radius:2px;padding:26px}@media(min-width:1024px){.rv-card{flex-basis:calc((100% - 24px)/2)}}.rv-head{display:flex;align-items:center;gap:14px;margin:0 0 1.05rem}.rv-av{flex:0 0 56px;width:56px;height:56px;border-radius:50%;
  background:#E9E4DA;color:#0F172A;display:flex;align-items:center;
  justify-content:center;font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;font-size:1.45rem;
  line-height:1}.rv-who{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}.rv-who b{font-size:1.12rem;font-weight:600;color:#262D3E;line-height:1.25}.rv-who>span{font-size:.88rem;color:#4F5668}.rv-mark{flex:0 0 auto;display:block;width:28px;height:28px}.rv-mark .rv-mark-svg,.rv-mark .rv-mark-img{width:28px;height:28px;
  display:block;object-fit:contain}.rv-card .rv-stars{font-size:1.28rem;letter-spacing:.05em;margin:0 0 .75rem}/* Six lines,then an ellipsis and a link to the rest. A review is never
   edited to fit: it is CLIPPED,which is also the only place it can be verified. */
.rv-text{font-size:1.125rem;line-height:1.55;color:#262D3E;margin:0 0 1.3rem;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;
  overflow:hidden}.rv-text b{font-weight:600;color:#0F172A}.rv-full{margin-top:auto;align-self:flex-start;display:inline-flex;
  align-items:center;gap:.55rem;color:#262D3E;text-decoration:underline;
  text-underline-offset:3px;font-size:.98rem}.rv-full:hover{color:#846927}.rv-ext{width:15px;height:15px;flex:0 0 15px}/* ---- dots and arrows ---------------------------------------------------- */
.rv-ui{display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:1.7rem}.rv-ui[hidden]{display:none}@media(min-width:1024px){.rv-ui{justify-content:flex-end}}.rv-dots{display:flex;align-items:center;gap:10px;margin-right:.8rem;
  flex-wrap:wrap;justify-content:center}/* THE DOT IS 10px AND THE TARGET IS 24px. A 10px tap target fails the
   target-size audit and,is genuinely hard to hit on a
   phone. The button is padded out to 24 square with a transparent box and the
   visible dot is drawn by the background,so the control grows without the
   design changing. background-clip keeps the paint on the content box. */
.rv-dot{width:24px;height:24px;padding:7px;border:0;border-radius:50%;
  box-sizing:border-box;background-clip:content-box;
  cursor:pointer;background-color:#CFC9BC;transition:background-color .2s ease}.rv-dot:not([aria-current="true"]):hover{background-color:#4F5668}.rv-dot[aria-current="true"]{background-color:#B18D34}.rv-count-n{font-family:'Cinzel','Cormorant Garamond',Georgia,serif;font-size:.78rem;letter-spacing:.1em;
  color:#4F5668;font-variant-numeric:tabular-nums;min-width:4.5em;
  text-align:center}.rv-nav{flex:0 0 56px;width:56px;height:56px;border-radius:50%;padding:0;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease}.rv-prev{background:transparent;border:1px solid rgba(15,23,42,.28);
  color:#0F172A}.rv-prev:hover{border-color:#0F172A;background:rgba(15,23,42,.05)}.rv-next{background:#0F172A;border:1px solid #0F172A;color:#F7F4EE}.rv-next:hover{background:#B18D34;border-color:#B18D34;color:#0F172A}.rv-nav .ic{width:22px;height:22px}.rv-prev .ic{transform:rotate(90deg)}.rv-next .ic{transform:rotate(-90deg)}@media(prefers-reduced-motion:reduce){.rv-vp{scroll-behavior:auto}.rv-tab::after,.rv-nav,.rv-dot,.rv-cta{transition:none}}@media(max-width:1023px){.rv-track{gap:20px}}@media(max-width:767px){.revsec .rv-h2{font-size:clamp(1.85rem,7.4vw,2.4rem)}.rv-tabs{gap:1.3rem}.rv-sum,.rv-card{padding:22px}.rv-nav{flex-basis:48px;width:48px;height:48px}.rv-track{gap:16px}}/* =========================================================================
   The services overview,built to reference/what-we-do.png.

   Three tiers,because the ten jobs are not ten equal things: three photo
   cards,and one navy band for the renovation
   work. It replaced a grid of ten identical boxes that gave a chimney breast
   removal the same weight as a whole-house refurbishment.

   THE ROWS ARE A GRID WITH DRAWN DIVIDERS,not bordered cells. The reference
   has one continuous vertical hairline between the columns and horizontals
   only BETWEEN rows,which a
   per-cell border cannot do without a run of :nth-child overrides.
   ========================================================================= */

.svcsec .sv-eyebrow,.svcsec .sv-more{display:flex;align-items:center;
  gap:.85rem;font-family:'Cinzel','Cormorant Garamond',Georgia,serif;font-weight:500;font-size:.81rem;
  letter-spacing:.19em;text-transform:uppercase;color:#846927;
  margin:0 0 1.1rem}.svcsec .sv-rule{display:block;width:34px;height:1px;background:#B18D34;
  flex:0 0 34px}.svcsec .sv-rule-long{display:block;height:1px;background:#E2DCCF;flex:1 1 auto}.svcsec .sv-h2{font-size:clamp(2rem,3.5vw,3rem);margin:0 0 .5rem;
  letter-spacing:-.015em;line-height:1.06}.svcsec .sv-h2 .gold{color:#846927}.svcsec .sv-sub{font-size:1.06rem;color:#4F5668;margin:0 0 2rem;max-width:70ch}/* ---- the three photo cards ---------------------------------------------- */
.sv-feat{display:grid;grid-template-columns:1fr;gap:20px;margin:0 0 2.6rem}@media(min-width:768px){.sv-feat{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.sv-feat{grid-template-columns:repeat(3,1fr)}}.sv-card{display:flex;flex-direction:column;background:#FDFBF7;
  border:1px solid #E2DCCF;border-radius:2px;overflow:hidden;
  text-decoration:none;color:#262D3E;
  transition:border-color .2s ease,transform .2s ease}.sv-card:hover{border-color:#B18D34;transform:translateY(-2px)}.sv-shot{display:block;background:#E7E2D8}.sv-shot img{display:block;width:100%}.sv-body{display:flex;flex-direction:column;padding:22px}.sv-h3{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;font-size:1.78rem;line-height:1.15;
  color:#262D3E;margin:0 0 .35rem;letter-spacing:-.01em}.sv-blurb{font-size:.99rem;color:#4F5668;line-height:1.5;margin:0 0 1.15rem}.sv-go{margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;
  font-weight:600;font-size:.95rem;letter-spacing:.005em;color:#846927}.sv-go .ic{width:18px;height:18px;transition:transform .2s ease}.sv-card:hover .sv-go .ic{transform:translateX(4px)}/* ---- the six rows -------------------------------------------------------- */
.sv-rows{display:grid;grid-template-columns:1fr;margin:0 0 2.4rem}@media(min-width:1024px){.sv-rows{grid-template-columns:1fr 1fr;column-gap:0}/* the single vertical hairline between the columns */
  .sv-rows>.sv-row:nth-child(odd){padding-right:34px}.sv-rows>.sv-row:nth-child(even){padding-left:34px;
    border-left:1px solid #E2DCCF}/* horizontals only BETWEEN rows: the first pair carries none */
  .sv-rows>.sv-row:nth-child(-n+2){border-top:0}}.sv-row{display:flex;align-items:center;gap:20px;padding:26px 0;
  text-decoration:none;color:#262D3E;border-top:1px solid #E2DCCF;
  transition:background .18s ease}.sv-row:first-child{border-top:0}.sv-row:hover{background:rgba(177,141,52,.05)}.sv-ico{flex:0 0 56px;width:56px;height:56px;border-radius:50%;
  background:rgba(177,141,52,.10);color:#846927;display:flex;
  align-items:center;justify-content:center}.sv-ico .ic{width:30px;height:30px}.sv-rt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}.sv-rt b{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;font-size:1.36rem;line-height:1.2;
  color:#262D3E;letter-spacing:-.005em}.sv-rt>span{font-size:.93rem;color:#4F5668;line-height:1.45;margin-top:.15rem}.sv-arrow{flex:0 0 auto;color:#0F172A;display:flex;align-items:center}.sv-arrow .ic{width:22px;height:22px;transition:transform .2s ease}.sv-row:hover .sv-arrow .ic{transform:translateX(4px)}/* ---- the renovation band ------------------------------------------------- */
.sv-band{display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  background:#0F172A;color:#F7F4EE;border-radius:2px;padding:26px 30px;
  text-decoration:none}.sv-band-ico{flex:0 0 auto;color:#B18D34;display:flex;align-items:center;
  padding-right:24px;border-right:1px solid rgba(247,244,238,.22)}.sv-band-ico .ic{width:48px;height:48px}.sv-band-txt{display:flex;flex-direction:column;flex:1 1 260px;min-width:0}.sv-band-txt b{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;font-size:1.95rem;
  line-height:1.15;color:#F7F4EE;letter-spacing:-.01em}.sv-band-txt>span{font-size:1rem;color:rgba(247,244,238,.82);margin-top:.2rem}.sv-band-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:.6rem;
  background:#B18D34;color:#0F172A;border-radius:2px;padding:15px 24px;
  font-weight:600;font-size:.98rem;letter-spacing:.005em;
  transition:background .18s ease}.sv-band-btn .ic{width:18px;height:18px;transition:transform .2s ease}.sv-band:hover .sv-band-btn{background:#846927;color:#F7F4EE}.sv-band:hover .sv-band-btn .ic{transform:translateX(4px)}@media(prefers-reduced-motion:reduce){.sv-card,.sv-go .ic,.sv-arrow .ic,.sv-band-btn,.sv-band-btn .ic,.sv-row{
    transition:none}.sv-card:hover{transform:none}}@media(max-width:1023px){.sv-band{padding:22px}.sv-band-ico{padding-right:18px}.sv-band-ico .ic{width:40px;height:40px}}@media(max-width:767px){.svcsec .sv-h2{font-size:clamp(1.85rem,7.4vw,2.4rem)}.sv-band{gap:16px}.sv-band-ico{border-right:0;padding-right:0}.sv-band-btn{width:100%;justify-content:center}.sv-ico{flex-basis:48px;width:48px;height:48px}.sv-ico .ic{width:22px;height:22px}}/* =========================================================================
   Areas we cover,built to reference/areas-we-cover.png. Two columns: the
   claim on the ivory,a navy panel of towns beside it. It replaced a row of
   twelve pills,which read as a tag cloud rather than a place to choose from.

   THE PANEL'S GOLD EDGE IS ON THE TOP ONLY,so it cannot slip out of register with
   the corner radius.
   ========================================================================= */

.arsec .ar-row{display:grid;grid-template-columns:1fr;gap:40px;
  align-items:start}@media(min-width:1024px){/* .70fr,not .62: the middle line of the heading is 'South East London'
     and at the reference's size it does not fit a narrower column. It
     wrapped to a fourth line,which is the one thing the three hard line
     breaks in the markup exist to prevent. */
  .arsec .ar-row{grid-template-columns:minmax(0,.70fr) minmax(0,1fr);gap:48px}}.ar-eyebrow{display:flex;align-items:center;gap:.85rem;margin:0 0 1.3rem;
  font-family:'Cinzel','Cormorant Garamond',Georgia,serif;font-weight:500;font-size:.81rem;letter-spacing:.19em;
  text-transform:uppercase;color:#846927}.ar-pin{display:flex;color:#B18D34}.ar-pin .ic{width:26px;height:26px}.ar-rule{display:block;width:44px;height:1px;background:#B18D34;flex:0 0 44px}.ar-h2{font-size:clamp(2rem,4.3vw,3.8rem);line-height:1.06;margin:0 0 1.1rem;
  letter-spacing:-.02em}.ar-h2 .gold{color:#846927}.ar-blurb{font-size:1.06rem;color:#4F5668;margin:0 0 1.6rem;max-width:46ch}.ar-ask{font-weight:600;color:#262D3E;margin:0 0 .9rem;font-size:1.02rem}.ar-wa{display:inline-flex;align-items:center;gap:.75rem;background:#B18D34;
  color:#0F172A;border-radius:2px;padding:15px 22px;text-decoration:none;
  font-weight:600;font-size:1.02rem;transition:background .18s ease}.ar-wa .ic{width:26px;height:26px;flex:0 0 26px}.ar-wa>span{flex:1 1 auto}.ar-wa>.ic:last-child{width:20px;height:20px;flex-basis:20px;
  transition:transform .2s ease}.ar-wa:hover{background:#846927;color:#F7F4EE}.ar-wa:hover>.ic:last-child{transform:translateX(4px)}.ar-note{font-size:.86rem;color:#4F5668;margin:.8rem 0 0}/* ---- the navy panel ------------------------------------------------------ */
.ar-panel{background:#0F172A;color:#F7F4EE;border-radius:2px;
  border-top:2px solid #B18D34;padding:34px}.ar-ph{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;color:#F7F4EE;
  font-size:clamp(1.9rem,2.8vw,2.5rem);line-height:1.1;margin:0 0 .35rem;
  letter-spacing:-.015em}.ar-psub{color:rgba(247,244,238,.78);margin:0 0 1.3rem;font-size:1rem}.ar-grid{display:grid;grid-template-columns:1fr;
  border-top:1px solid #B18D34}@media(min-width:520px){.ar-grid{grid-template-columns:1fr 1fr}}@media(min-width:900px){.ar-grid{grid-template-columns:repeat(3,1fr)}}.ar-cell{display:flex;align-items:center;gap:.6rem;padding:19px 4px;
  text-decoration:none;color:#F7F4EE;font-size:1.04rem;
  border-bottom:1px solid rgba(247,244,238,.14);
  transition:color .18s ease}@media(min-width:520px){.ar-cell:nth-child(2n){border-left:1px solid rgba(247,244,238,.14);
    padding-left:18px}}@media(min-width:900px){.ar-cell:nth-child(2n){border-left:0;padding-left:4px}.ar-cell:not(:nth-child(3n+1)){border-left:1px solid rgba(247,244,238,.14);
    padding-left:18px}}.ar-town{flex:1 1 auto;min-width:0}.ar-go{flex:0 0 auto;color:#B18D34;display:flex}.ar-go .ic{width:21px;height:21px;transition:transform .2s ease}a.ar-cell:hover{color:#B18D34}a.ar-cell:hover .ar-go .ic{transform:translateX(4px)}.ar-home{flex:0 0 auto;color:#B18D34;display:flex}.ar-home .ic{width:21px;height:21px}.ar-base .ar-town{color:#B18D34;font-weight:600}/* The five whose pages are noindex: present,and deliberately not a
   link. Dimmed rather than hidden,because he does cover them. */
.ar-off{color:rgba(247,244,238,.62);cursor:default}@media(prefers-reduced-motion:reduce){.ar-wa,.ar-go .ic,.ar-cell{transition:none}}@media(max-width:767px){.ar-panel{padding:24px}.ar-wa{width:100%}}/* =========================================================================
   The FAQ,built to reference/faq.png. Heading and a navy "still have a
   question" card on the left,a real accordion on the right.

   THE PANEL ANIMATES ON grid-template-rows,0fr to 1fr,not on max-height.
   max-height means picking a number bigger than the tallest answer,which
   makes every short answer open with a pause on the end of it and clips the
   one answer somebody later writes too long. 0fr to 1fr animates the content's
   OWN height,so every panel takes the same 200ms whatever is in it.
   ========================================================================= */

.fqsec .fq-row{display:grid;grid-template-columns:1fr;gap:40px;
  align-items:start}@media(min-width:1024px){.fqsec .fq-row{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:48px}}.fq-eyebrow{display:flex;align-items:center;gap:.85rem;margin:0 0 1.2rem;
  font-family:'Cinzel','Cormorant Garamond',Georgia,serif;font-weight:500;font-size:.81rem;letter-spacing:.19em;
  text-transform:uppercase;color:#846927}.fq-rule{display:block;width:44px;height:1px;background:#B18D34;flex:0 0 44px}.fq-h2{font-size:clamp(2.1rem,4.3vw,3.9rem);line-height:1.07;margin:0 0 .9rem;
  letter-spacing:-.02em}.fq-h2 .gold{color:#846927}.fq-sub{font-size:1.04rem;color:#4F5668;margin:0 0 1.9rem;max-width:50ch}.fq-aside{background:#0F172A;color:#F7F4EE;border-radius:2px;padding:30px}.fq-bubble{display:block;color:#B18D34;margin:0 0 1.1rem}.fq-bubble .ic{width:38px;height:38px}.fq-ah{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;font-size:2rem;line-height:1.1;
  color:#F7F4EE;margin:0 0 .3rem;letter-spacing:-.015em}.fq-as{color:rgba(247,244,238,.82);margin:0 0 1.3rem;font-size:1.05rem}.fq-wa{display:inline-flex;align-items:center;gap:.7rem;background:#B18D34;
  color:#0F172A;border-radius:2px;padding:15px 26px;text-decoration:none;
  font-weight:600;font-size:1.04rem;transition:background .18s ease}.fq-wa .ic{width:26px;height:26px;flex:0 0 26px}.fq-wa:hover{background:#846927;color:#F7F4EE}.fq-tel{display:flex;align-items:center;gap:.7rem;margin:1.2rem 0 0;
  color:#F7F4EE;font-size:1.04rem}.fq-tel .ic{width:22px;height:22px;color:#B18D34;flex:0 0 22px}.fq-tel a{color:#F7F4EE;text-decoration:none}.fq-tel a:hover{color:#B18D34}/* ---- the accordion -------------------------------------------------------- */
.fq-list{border:1px solid #E2DCCF;border-radius:2px;background:#F7F4EE;
  overflow:hidden}.fq-item+.fq-item{border-top:1px solid #E2DCCF}/* the gold edge on the open one,drawn on the item so it spans question and
   answer together rather than stopping at the button */
.fq-item.is-open{background:#FDFBF7;box-shadow:inset 4px 0 0 0 #B18D34}.fq-h{margin:0;font-family:inherit;font-weight:inherit;font-size:inherit;
  text-transform:none;letter-spacing:normal;line-height:inherit;color:inherit}.fq-btn{display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:100%;text-align:left;background:none;border:0;border-radius:0;
  cursor:pointer;padding:19px 26px;color:#262D3E;font:inherit}.fq-qt{font-weight:600;font-size:1.3rem;line-height:1.32;color:#0F172A}.fq-ico{flex:0 0 44px;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #B18D34;color:#846927;background:transparent;
  transition:background .2s ease,color .2s ease,border-color .2s ease}.fq-ico svg{width:20px;height:20px;display:block}.fq-btn:hover .fq-ico{background:rgba(177,141,52,.12)}.fq-item.is-open .fq-ico{background:#B18D34;border-color:#B18D34;
  color:#0F172A}.fq-item.is-open .fq-v{opacity:0}.fq-v{transition:opacity .2s ease}.fq-p{display:grid;grid-template-rows:1fr;transition:grid-template-rows .2s ease}.fq-pi{overflow:hidden;min-height:0}.fq-pi p{margin:0 26px 0;padding:0 0 4px;color:#4F5668;font-size:1.02rem;
  line-height:1.55;max-width:72ch}.fq-pi p:first-child{margin-top:-6px}.fq-link{display:inline-flex;align-items:center;gap:.5rem;margin:14px 26px 24px;
  color:#846927;text-decoration:underline;text-underline-offset:3px;
  font-size:1rem}.fq-link .ic{width:18px;height:18px;transition:transform .2s ease}.fq-link:hover{color:#262D3E}.fq-link:hover .ic{transform:translateX(4px)}.fq-item.is-open .fq-pi{padding-bottom:22px}.fq-item.is-open .fq-link{margin-bottom:0}/* Collapsed only where a script will run to open them again. With none,every
   answer stays where a reader can get at it. */
@media(scripting:enabled){
  .fq-item:not(.is-open) .fq-p{grid-template-rows:0fr}
}@media(prefers-reduced-motion:reduce){.fq-p,.fq-v,.fq-ico,.fq-wa,.fq-link .ic{transition:none}}@media(max-width:767px){.fq-aside{padding:24px}.fq-btn{padding:20px 18px;gap:14px}.fq-qt{font-size:1.06rem}.fq-pi p,.fq-link{margin-left:18px;margin-right:18px}.fq-wa{width:100%;justify-content:center}}/* =========================================================================
   The estimate band,built to reference/get-a-free-estimate.png. Full bleed
   navy with a gold hairline along the top,the offer on the left and a
   photograph bleeding off the right edge behind a gradient.

   THE GRADIENT IS THE WHOLE TRICK,and it is why the photograph is a
   background layer rather than a second grid column. The copy runs under the
   image's left edge and the navy fades out across it,so there is no seam
   where the two meet at any width. A hard column split puts a vertical edge
   down the middle of the band and it looks like two boxes.
   ========================================================================= */

.cta.esband{position:relative;overflow:hidden;overflow:clip;background:#0F172A;
  border-top:2px solid #B18D34;padding:0}.es-media{position:absolute;inset:0 0 0 auto;width:62%;z-index:0}.es-media img{width:100%;height:100%;object-fit:cover;display:block}/* Navy at full strength over the copy,gone by the time it clears the text.
   The stops are in the same shape as the hero's,so the two read as one
   device rather than two gradients that nearly agree. */
.es-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#0F172A 0%,#0F172A 22%,
    rgba(15,23,42,.97) 34%,rgba(15,23,42,.80) 48%,rgba(15,23,42,.34) 66%,
    rgba(15,23,42,0) 86%)}.es-wrap{position:relative;z-index:1;padding-top:clamp(46px,5.4vw,74px);
  padding-bottom:clamp(46px,5.4vw,74px)}.es-copy{max-width:min(100%,640px)}.es-eyebrow{display:flex;align-items:center;gap:.85rem;margin:0 0 1.15rem;
  font-family:'Cinzel','Cormorant Garamond',Georgia,serif;font-weight:500;font-size:.81rem;letter-spacing:.19em;
  text-transform:uppercase;color:#B18D34}.es-rule{display:block;width:44px;height:1px;background:#B18D34;flex:0 0 44px}.es-h2{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;color:#F7F4EE;
  font-size:clamp(2.2rem,4.6vw,4.2rem);line-height:1.05;margin:0 0 1rem;
  letter-spacing:-.02em}.es-h2 .gold{color:#B18D34}.es-body{color:rgba(247,244,238,.86);font-size:1.1rem;line-height:1.55;
  margin:0 0 1.7rem;max-width:44ch}.es-act{display:flex;align-items:center;gap:26px;flex-wrap:wrap}.es-btn{display:inline-flex;align-items:center;gap:.8rem;background:#B18D34;
  color:#0F172A;border-radius:2px;padding:19px 40px;text-decoration:none;
  font-weight:600;font-size:1.18rem;transition:background .18s ease}.es-btn .ic{width:20px;height:20px;transition:transform .2s ease}.es-btn:hover{background:#846927;color:#F7F4EE}.es-btn:hover .ic{transform:translateX(4px)}.es-sep{display:none;width:1px;align-self:stretch;
  background:rgba(247,244,238,.26)}@media(min-width:600px){.es-sep{display:block}}.es-tel{display:flex;flex-direction:column;gap:.15rem}.es-tel-l{font-size:.94rem;color:rgba(247,244,238,.78)}.es-tel a{display:flex;align-items:center;gap:.6rem;color:#F7F4EE;
  text-decoration:none}.es-tel a:hover{color:#B18D34}.es-tel .ic{width:24px;height:24px;color:#B18D34;flex:0 0 24px}.es-tel b{font-weight:600;font-size:clamp(1.4rem,2.5vw,2.15rem);
  letter-spacing:.01em}.es-ticks{display:flex;align-items:center;gap:34px;flex-wrap:wrap;
  margin:1.6rem 0 0}.es-tick{display:inline-flex;align-items:center;gap:.6rem;
  color:rgba(247,244,238,.9);font-size:1rem}.es-tick .ic{width:20px;height:20px;color:#B18D34;flex:0 0 20px}@media(prefers-reduced-motion:reduce){.es-btn,.es-btn .ic{transition:none}}@media(max-width:1023px){/* Under a certain width there is no room for copy AND a photograph,so the
     photograph becomes a tint behind the whole band rather than a column of
     it: still the right picture,no longer competing for the same 400px. */
  .es-media{width:100%}.es-media::after{background:linear-gradient(90deg,rgba(15,23,42,.96) 0%,
    rgba(15,23,42,.92) 55%,rgba(15,23,42,.86) 100%)}.es-copy{max-width:none}}@media(max-width:599px){.es-act{gap:18px}.es-btn{width:100%;justify-content:center}.es-ticks{gap:20px}}/* =========================================================================
   THE SERVICE PAGE,built to reference/high-converting-page.png
   =========================================================================
   Everything below this line is only on a service page except three things
   that are deliberately site-wide: the star line,the sticky call bar and the
   contact grid's mobile order. Those three are the brief's conversion rules
   one,and a rule that only holds on ten of thirty one pages
   is not a rule.

   NO NEW COLOURS AND NO NEW FACES. Every value here is one of the eight
   tokens the rest of the sheet uses,so the twelve contrast pairs lp_check
   measures did not have to become twenty.
   ---------------------------------------------------------------------- */

/* ---- proof,four grounds. The stars are always gold; only the text
   around them changes side. */
.st-row{display:inline-flex;align-items:center;gap:2px;color:#B18D34;
  flex:0 0 auto}.st-row .st{width:15px;height:15px;display:block}.starline{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin:0;font-size:.9rem;line-height:1.3;color:#4F5668}.starline b{font-weight:700;color:#262D3E;font-size:1rem}.starline-dark{color:rgba(247,244,238,.8)}.starline-dark b{color:#F7F4EE}/* In the hero: between the sub and the call row,which is the button group it
   is the proof for. 1.4rem above it,well inside the brief's 80px. */
.starline-hero{margin:1.4rem 0 0;color:rgba(247,244,238,.86)}.starline-hero b{color:#F7F4EE}/* Inside the form card,directly above the submit. .7rem above it. */
.starline-form{margin:.9rem 0 .7rem;font-size:.84rem;
  padding-top:.9rem;border-top:1px solid #E2DCCF}.starline-form .st-row .st{width:13px;height:13px}/* In the util strip,which is the element directly above the header's gold
   button at every width. .util-r ships display:none in the inherited sheet;
   it has something worth showing now. */
.util-r{display:flex !important;align-items:center;gap:1rem}.starline-util{font-size:11px;color:rgba(255,255,255,.72);gap:.4rem}.starline-util b{color:#B18D34;font-size:12px}.starline-util .st-row .st{width:11px;height:11px}@media(max-width:639px){/* ".starline-util span" also matched .st-row,which IS a span: the strip
     came out as a bare gold "5.0" with no stars and no count,it is a number. Only the trailing count is dropped,and only
     because the strip is already three lines deep on a 390 screen. */
  .util-r > span{display:none}.starline-util > span:not(.st-row){display:none}.starline-util{margin-left:auto}}/* In the estimate band,above its action row. */
.starline-es{margin:1.6rem 0 0}.esband .es-act{margin-top:1rem}/* ---- the Google strip ---------------------------------------------------
   The reference's one line band under the hero: mark,link. Centred,1px rule under it,because a link this close to a
   button anywhere else is a mis-tap. */
.gstrip{background:#F7F4EE;border-bottom:1px solid #E2DCCF}.gstrip .wrap{display:flex;align-items:center;justify-content:center;
  gap:.85rem;flex-wrap:wrap;padding-top:.85rem;padding-bottom:.85rem}.gs-mark{display:flex;flex:0 0 auto}.gs-mark .rv-mark-svg{width:26px;height:26px;display:block}.gs-score{font-weight:700;font-size:1.25rem;color:#262D3E;line-height:1}.gs-stars .st{width:18px;height:18px}.gs-count{font-size:.92rem;color:#4F5668}.gs-sep{width:1px;height:22px;background:#E2DCCF;flex:0 0 auto}.gs-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.92rem;
  font-weight:600;color:#846927;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}.gs-link:hover{color:#262D3E}.gs-link .ic{width:17px;height:17px}@media(max-width:520px){.gstrip .wrap{gap:.5rem}.gs-sep{display:none}.gs-link{flex-basis:100%;justify-content:center}}/* The sub page hero carried the home hero's 16px blur and its full scrim,and
   between the two the photograph read as flat navy: the reference shows the
   work through the ground,which is the only reason to put a photograph
   behind a hero at all. Half the blur,and the scrim eased through the middle
   band only. The LEFT third,keeps the
   original 0.82 so the contrast pairs lp_check measures do not move. */
.hero-conv .hero-photo img{filter:blur(3px) saturate(.98) brightness(1.2)}.hero-conv::after{background:linear-gradient(100deg,
  rgba(15,23,42,0.82) 0%, rgba(15,23,42,0.50) 46%, rgba(15,23,42,0.30) 100%)}/* ---- the hero's call row ------------------------------------------------
   NOT BUTTONS,which is the reference and is also the brief's fourth rule:
   one primary action per screen,and on this screen it is the form's submit.
   Two gold buttons beside a gold submit would be three. */
.hero-conv .hero-calls{display:flex;align-items:center;gap:1.1rem;
  flex-wrap:wrap;margin-top:1.5rem}.hc-tel,.hc-wa{display:inline-flex;align-items:center;gap:.65rem;
  color:#F7F4EE;text-decoration:none;font-weight:700;
  font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.2}.hc-tel:hover,.hc-wa:hover{color:#B18D34}.hc-tel .ic{width:22px;height:22px;color:#B18D34;flex:0 0 22px}.hc-wa svg{width:24px;height:24px;color:#25D366;fill:#25D366;flex:0 0 24px}.hc-sep{width:1px;height:26px;background:rgba(247,244,238,.28);flex:0 0 auto}.hero-ticks{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem 1.9rem;
  margin:1.3rem 0 0;padding:0}.hero-ticks li{display:inline-flex;align-items:center;gap:.55rem;
  color:rgba(247,244,238,.92);font-size:.98rem}.hero-ticks .ic{width:19px;height:19px;color:#B18D34;flex:0 0 19px}@media(max-width:479px){.hc-sep{display:none}.hero-conv .hero-calls{gap:.8rem;flex-direction:column;align-items:flex-start}.hero-ticks{gap:.5rem 1.2rem}}/* The service hero gets its two columns back: the inherited .hero-sub is a
   single column because a sub page had no card in it. This one has. */
.hero-conv .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,420px);
  align-items:center}.hero-conv .hero-copy{max-width:46rem}/* The reference's H1 is two lines: the service in white,the place in gold
   underneath it. Forced rather than left to wrap,because "Rendering in
   Bromley and Kent" fits on one line at 1440 and the two line treatment is
   the thing that makes the place read as the second half of a claim rather
   than as the tail of a sentence. */
.hero-conv h1 .accent{display:block}/* The reference's H1 is the biggest thing on the page by a long way and the
   hero is SHORT: the card and the copy are the same height and neither has
   room to spare. Ours ran 180px taller with a smaller headline,which is the
   wrong trade in both directions. */
.hero-conv h1{font-size:clamp(2.4rem,4.4vw,4rem);margin-bottom:.45em}.hero-conv .hero-grid{padding:clamp(2rem,3.2vw,3rem) 0 clamp(2.2rem,3.4vw,3.2rem)}.hero-conv p.sub{font-size:clamp(1rem,1.35vw,1.12rem);max-width:44ch}/* The gold rule under the eyebrow. The reference has one on every heading and
   on this one; ours had it everywhere except here. */
.hero-conv .eyebrow{display:block;margin-bottom:.9rem}.hero-conv .eyebrow::after{content:"";display:block;width:64px;height:2px;
  background:#B18D34;margin:.75rem 0 0}@media(max-width:1099px){.hero-conv .hero-grid{grid-template-columns:minmax(0,1fr)}}/* ---- the four field form -----------------------------------------------
   The reference's card: heading,one line of note. */
.quote-4{padding:1.5rem 1.4rem 1.3rem}.quote-sub{margin:.55rem 0 1.1rem;font-size:.92rem;line-height:1.45;
  color:#4F5668}.quote-4 .quote-h::after{display:none}.quote-4 .field input::placeholder{color:#4F5668;opacity:1}.quote-4 .btn-primary{min-height:54px;font-size:14px;letter-spacing:.05em}/* The lede under the steps. LEFT ALIGNED on a measure,not centred: the
   reference sets every paragraph on the page ranged left,and two centred
   paragraphs in the middle of a left aligned page read as a pull quote. */
.sw-intro{max-width:72ch;margin:.9rem 0 0}.sw-intro p{font-size:1.04rem;line-height:1.7;color:#262D3E;margin:0 0 1rem}.sw-intro p:last-child{margin-bottom:0}.swsec .sw-grid{margin-top:2rem}/* ---- how it works,four steps ------------------------------------------
   The reference's numbered discs and vertical rules,at four across instead
   of three. Under 900px it is two by two,which keeps all four on one screen
   on a phone: that is the whole point of moving the block up here. */
.hwsec{background:#F7F4EE;border-bottom:1px solid #E2DCCF;
  padding:clamp(2.4rem,4vw,3.4rem) 0}/* THE REFERENCE'S SECTION HEADINGS ARE ALL ONE SIZE and all bigger than
   ours were: measured off the reference at 1440 they land at about 44px,where this page was running 32,36 and 41.6 in three different sections.
   Three sizes for three headings of equal rank is a hierarchy that is not
   saying anything. */
.swsec h2,.nhsec h2,.pc-h2{font-size:clamp(2rem,3.2vw,2.75rem)}.hw-h2,.lf-row h2{font-size:clamp(1.7rem,2.7vw,2.25rem)}.hw-h2{margin-bottom:.35rem}.hwsec .head-rule{margin-bottom:1.6rem}.hw-row{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:0}.hw-step{display:flex;gap:.85rem;align-items:flex-start;
  padding:0 clamp(.9rem,1.8vw,1.6rem)}.hw-step + .hw-step{border-left:1px solid #E2DCCF}.hw-step:first-child{padding-left:0}.hw-step:last-child{padding-right:0}.hw-n{flex:0 0 38px;width:38px;height:38px;border-radius:50%;
  background:#B18D34;color:#0F172A;display:flex;align-items:center;
  justify-content:center;font-family:'Cinzel','Cormorant Garamond',Georgia,serif;font-weight:500;font-size:.85rem;
  letter-spacing:.04em}.hw-t b{display:block;font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;
  font-size:1.18rem;line-height:1.2;color:#262D3E;margin-bottom:.35rem}.hw-t p{margin:0;font-size:.95rem;line-height:1.55;color:#4F5668}.hw-note{margin:1.6rem 0 0;font-size:.9rem;color:#4F5668}@media(max-width:899px){.hw-row{grid-template-columns:repeat(2,1fr);gap:1.4rem 0}.hw-step{padding:0 1rem}.hw-step:nth-child(odd){padding-left:0;border-left:0}.hw-step:nth-child(even){padding-right:0}}@media(max-width:479px){.hw-row{grid-template-columns:1fr;gap:1.2rem}.hw-step{padding:0;border-left:0}.hw-step + .hw-step{border-left:0;border-top:1px solid #E2DCCF;padding-top:1.2rem}.hw-n{flex:0 0 34px;width:34px;height:34px}}/* ---- work on site: photo,so the review never separates from the picture it
   was put beside when the grid collapses. */
.sw-grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.1rem,2.2vw,1.8rem);margin-top:1.6rem}.sw-cell{margin:0;display:flex;flex-direction:column}.sw-cell picture,.sw-cell img{width:100%;display:block}.sw-cell img{aspect-ratio:4/3;object-fit:cover;border-radius:6px}.sw-cap{display:block;margin:.75rem 0 .9rem;font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  font-weight:600;font-size:1.05rem;line-height:1.25;color:#262D3E}.sw-rev{margin-top:auto;border:1px solid #E2DCCF;border-radius:6px;
  background:#FDFBF7;padding:.95rem 1rem;display:grid;
  grid-template-columns:34px 1fr;gap:.3rem .7rem;align-items:center}.sw-av{width:34px;height:34px;border-radius:50%;background:#0F172A;
  color:#F7F4EE;display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel','Cormorant Garamond',Georgia,serif;font-size:.8rem;font-weight:500;grid-row:span 2}.sw-who{display:flex;flex-direction:column;line-height:1.2}.sw-who b{font-weight:600;font-size:.93rem;color:#262D3E}.sw-who span{font-size:.8rem;color:#4F5668}/* The reference sets the stars and the quote on ONE line under the name,not stacked. Stacked,the card was four rows deep and the quote sat far
   enough from the stars to read as a separate thing from them. */
.sw-q{grid-column:1 / -1;display:flex;align-items:baseline;gap:.6rem;
  margin-top:.7rem;flex-wrap:wrap}.sw-stars{align-self:center}.sw-stars .st{width:14px;height:14px}.sw-q q{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-style:italic;font-size:1.02rem;
  line-height:1.45;color:#262D3E;flex:1 1 12rem}.sw-rev{grid-template-columns:38px 1fr}.sw-av{width:38px;height:38px;grid-row:auto}@media(max-width:899px){.sw-grid{grid-template-columns:repeat(2,1fr)}.sw-cell:last-child{grid-column:1 / -1;max-width:calc(50% - .9rem)}}@media(max-width:639px){.sw-grid{grid-template-columns:1fr}.sw-cell:last-child{grid-column:auto;max-width:none}}/* ---- what do you need help with: three bordered cards -------------------- */
.nh-row{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}.nh-card{display:flex;gap:1.15rem;align-items:flex-start;
  border:1px solid #E2DCCF;border-radius:6px;background:#FDFBF7;
  padding:1.7rem 1.6rem}.nh-ic{flex:0 0 42px;display:block}.nh-ic .ic{width:42px;height:42px;color:#B18D34;stroke-width:1.3}.nh-t b{display:block;font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;font-size:1.3rem;
  line-height:1.2;color:#262D3E;margin-bottom:.45rem}.nh-t p{margin:0;font-size:.98rem;line-height:1.55;color:#4F5668}.nh-note{margin:1.5rem 0 0;text-align:center;font-size:.92rem;
  color:#4F5668}@media(max-width:899px){.nh-row{grid-template-columns:1fr}}/* ---- what will it cost: the navy band -----------------------------------
   The heaviest block on the reference and the one that answers the question
   everybody has. No figures in it,by design. */
.pcsec{background:#0F172A;color:#F7F4EE;
  padding:clamp(3rem,5vw,4.4rem) 0}.pc-h2{color:#F7F4EE}.pcsec .head-rule{margin-bottom:1.4rem}.pc-sub{margin:0;max-width:64ch;font-size:1.06rem;line-height:1.65;
  color:rgba(247,244,238,.94)}.pf-row{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:0}.pf-item{display:flex;gap:1rem;align-items:flex-start;
  padding:0 clamp(1rem,2.2vw,2rem)}.pf-item + .pf-item{border-left:1px solid rgba(177,141,52,.4)}.pf-item:first-child{padding-left:0}.pf-item:last-child{padding-right:0}.pf-ic{flex:0 0 42px;display:block}.pf-ic .ic{width:42px;height:42px;color:#B18D34;stroke-width:1.3}.pf-t b{display:block;font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;font-size:1.26rem;
  line-height:1.2;color:#F7F4EE;margin-bottom:.4rem}.pf-t p{margin:0;font-size:.97rem;line-height:1.55;color:rgba(247,244,238,.9)}.pc-act{margin-top:2.4rem;padding-top:2rem;
  border-top:1px solid rgba(177,141,52,.45);
  display:flex;flex-direction:column;align-items:center;gap:.9rem}.pc-act .btn-primary{min-height:58px;padding:.9rem 2.4rem;font-size:15px;
  letter-spacing:.05em}@media(max-width:899px){.pf-row{grid-template-columns:1fr;gap:1.5rem}.pf-item{padding:0;border-left:0}.pf-item + .pf-item{border-left:0}}@media(max-width:599px){.pc-act .btn-primary{width:100%;justify-content:center}}/* ---- local + faq: the reference's last cream section --------------------
   Two unequal columns with a rule between them. The right hand one is the
   accordion that was already built; it keeps its own markup so site.js and
   the a11y gate do not have to know it moved. */
.lf-row{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(1.8rem,4vw,3.4rem);align-items:start}.lf-right{border-left:1px solid #E2DCCF;padding-left:clamp(1.8rem,3.4vw,3rem)}.lf-left p{font-size:1.04rem;line-height:1.7;color:#262D3E}.lf-left a{color:#846927;text-decoration:underline;
  text-underline-offset:3px}.lf-left a:hover{color:#262D3E}.lf-link{display:flex;align-items:center;gap:.6rem;margin:1.4rem 0 0;
  font-weight:600}.lf-link .ic{width:22px;height:22px;color:#B18D34;flex:0 0 22px}.lf-link a{display:inline-flex;align-items:center;gap:.45rem}.lf-link a .ic{width:17px;height:17px}.lfsec .fq-list{margin:0}@media(max-width:899px){.lf-row{grid-template-columns:1fr;gap:2.2rem}.lf-right{border-left:0;padding-left:0;border-top:1px solid #E2DCCF;
    padding-top:2rem}}/* ---- the nearest services and areas ------------------------------------ */
.nr-areas{margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid #E2DCCF}.nr-areas .pill-h{margin:0 0 .8rem;font-family:'Cinzel','Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:#4F5668}/* ---- the service's own long copy,below all of it ---------------------- */
.dtsec{border-top:1px solid #E2DCCF}/* Ranged left on a measure,like every other block on the page. Centring it
   in the 1140 wrap left a 170px gutter down the left of the only section on
   the page that has one,which reads as a layout fault rather than as a
   choice. */
.dt-body{max-width:74ch}.dt-block + .dt-block{margin-top:2rem}.dt-block h3{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;text-transform:none;
  letter-spacing:0;font-size:1.3rem;color:#262D3E;margin-bottom:.6rem}.dt-block p{font-size:1rem;line-height:1.7}/* The cross-sell cards' icons. The shared .card component draws them in ink,which is right on the pages it was designed for and wrong here: every other
   icon on a service page is gold,and three near-black marks in bordered
   cards halfway down a gold page read as a different site's component. Scoped
   to this section so the home page and the services index keep theirs. */
.nrsec .card .ic{color:#B18D34}/* ---- the sticky call bar ------------------------------------------------
   Rule one: the number on screen without scrolling,at every viewport. The
   header covers desktop; this covers everything under 900px.

   It carries its own proof,so rule two's 80px is 0. One gold button,and it
   is "Get a price" rather than the call,because rule four says the gold
   button is always that or a form submit. */
.stickybar{display:none}@media(max-width:899px){.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:130;
    display:flex;align-items:center;gap:.6rem;
    background:#0F172A;border-top:1px solid rgba(177,141,52,.5);
    padding:.55rem 12px calc(.55rem + env(safe-area-inset-bottom,0px));
    box-shadow:0 -6px 20px rgba(15,23,42,.28)}body{padding-bottom:72px}:root{--fabgap:68px}.sb-proof{display:flex;flex-direction:column;align-items:center;
    line-height:1;flex:0 0 auto;gap:.2rem;
    padding-right:.35rem;margin-right:-.2rem}.sb-proof b{color:#F7F4EE;font-size:.78rem;font-weight:700}.sb-stars .st{width:9px;height:9px}.sb-call{display:inline-flex;align-items:center;justify-content:center;
    gap:.45rem;flex:1 1 auto;min-height:46px;padding:.5rem .7rem;
    border:1px solid rgba(247,244,238,.45);border-radius:6px;
    color:#F7F4EE;text-decoration:none;font-weight:700;font-size:.92rem;
    white-space:nowrap}.sb-call .ic{width:18px;height:18px;color:#B18D34;flex:0 0 18px}.sb-call:hover{border-color:#B18D34;color:#B18D34}.sb-cta{display:inline-flex;align-items:center;justify-content:center;
    flex:1 1 auto;min-height:46px;padding:.5rem .8rem;border-radius:6px;
    text-decoration:none;font-weight:700;font-size:.92rem;white-space:nowrap}body.qm-lock .stickybar{display:none}}@media(max-width:379px){.sb-proof{display:none}}/* ---- rule seven: when a two column section stacks,the form is first ----
   The contact section is the one place on the site where a column that
   collapses contains a form and something that is not one. On a phone the
   info list went above it,so the last thing before the footer was a phone
   number rather than a thing to fill in. */
@media(max-width:899px){
  .contact-grid{display:flex;flex-direction:column}
  .contact-grid > :last-child{order:-1}
}/* =========================================================================
   THE ABOUT PAGE,built to reference/about-us.png
   =========================================================================
   The hero here is NOT the service hero. The service hero puts a scrimmed
   photograph behind the copy; this one sets the copy on flat navy and gives
   the photograph its own column,bleeding off the right
   edge. Two different jobs: one is a mood behind a headline,the other is a
   finished room somebody is being asked to look at.
   ---------------------------------------------------------------------- */

.hero-about{background:#0F172A;color:#F7F4EE;overflow:hidden;overflow:clip}.ab-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,48%);
  gap:clamp(2rem,4vw,3.6rem);align-items:center;
  padding:clamp(2.4rem,4vw,3.6rem) 0;position:relative}.ab-hero-copy{position:relative;z-index:2;max-width:34rem}.hero-about .eyebrow{color:#B18D34;display:block;margin-bottom:.9rem}.hero-about h1{color:#F7F4EE;font-size:clamp(2.3rem,4.2vw,3.7rem);
  margin-bottom:.5em}.hero-about h1 .accent{color:#B18D34}.hero-about p.sub{color:rgba(247,244,238,.9);max-width:40ch;
  font-size:clamp(1rem,1.3vw,1.1rem)}/* The photograph runs to the right edge of the viewport rather than stopping
   at the 1140 wrap,which is what the reference does and the only reason the
   band reads as a room rather than as a picture of one. */
/* HEIGHT,NOT MIN-HEIGHT. With only a minimum the column sized itself to the
   photograph's own aspect ratio,and 06 is nearly square: the hero came out
   950px tall against the reference's 340 and pushed the eyebrow to the middle
   of the screen. The band states its height and the photograph is cropped to
   it. */
.ab-hero-media{position:relative;align-self:stretch;
  height:clamp(300px,33vw,460px);border-radius:4px;overflow:hidden}.ab-hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#0F172A 0%,rgba(15,23,42,.35) 22%,
    rgba(15,23,42,0) 55%)}.ab-hero-media picture,.ab-hero-media img{width:100%;height:100%;
  object-fit:cover;display:block}@media(min-width:1024px){.ab-hero-media{margin-right:calc((100% - 100vw) / 2 + 22px);border-radius:0}}/* The white proof pill,twice: in the hero and in the contact band. */
.gpill{display:inline-flex;align-items:center;gap:.7rem;background:#fff;
  border:1px solid #E2DCCF;border-radius:8px;padding:.7rem 1.1rem;
  margin:1.6rem 0 0}.gpill-mark .rv-mark-svg{width:26px;height:26px;display:block}.gpill-score{font-weight:700;font-size:1.25rem;color:#262D3E;line-height:1}.gpill-stars .st{width:18px;height:18px}.gpill-count{font-size:.94rem;font-weight:600;color:#262D3E}@media(max-width:420px){.gpill{gap:.5rem;padding:.6rem .8rem}.gpill-stars .st{width:15px;height:15px}.gpill-count{font-size:.85rem}}/* The hero's two controls. One gold,which is the reference and
   is also the one-primary-action rule: the gold one is the price. */
.ab-hero-act{margin-top:1.3rem;gap:14px;align-items:stretch}.ab-call{display:inline-flex;align-items:center;gap:.7rem;
  border:1px solid rgba(247,244,238,.55);border-radius:7px;
  padding:.7rem 1.2rem;color:#F7F4EE;text-decoration:none;line-height:1.2}.ab-call:hover{border-color:#B18D34;color:#B18D34}.ab-call .ic{width:22px;height:22px;color:#B18D34;flex:0 0 22px}.ab-call span{display:flex;flex-direction:column;gap:.15rem}.ab-call b{font-weight:700;font-size:1rem}.ab-call span{font-size:.9rem;color:rgba(247,244,238,.86)}.ab-hero-act .btn-primary{min-height:auto;padding:.75rem 1.5rem}@media(max-width:1023px){.ab-hero{grid-template-columns:minmax(0,1fr)}.ab-hero-copy{max-width:none}.ab-hero-media{height:clamp(220px,46vw,320px);order:2}}@media(max-width:479px){.ab-hero-act{flex-direction:column;align-items:stretch}.ab-call,.ab-hero-act .btn-primary{justify-content:center}}/* ---- who you'll be dealing with,and the stats strip ------------------- */
.ab-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,4vw,3.6rem);align-items:start}.ab-row h2{font-size:clamp(1.7rem,2.7vw,2.25rem)}.ab-left p{font-size:1.04rem;line-height:1.7;color:#262D3E}.ab-stats{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:0}/* THREE CELLS,ONE TYPE SIZE. There used to be a
   `.ab-stat:first-child b{font-size:clamp(2.6rem,4.4vw,3.4rem)}` here,built
   for a first cell that was the single word "20". With a phrase in that slot
   it rendered a 54px heading next to two 29px ones and the row read as a
   mistake. The big-number treatment belongs to a big number; there is not one
   any more,so it is gone.

   The headline block RESERVES TWO LINES on every cell. Without it,and three detail lines at three different heights is the same raggedness one
   step down. */
.ab-stat{padding:0 clamp(1rem,2vw,1.8rem);border-left:1px solid #E2DCCF}/* goldtext,NOT gold. #B18D34 on the ivory is 2.84:1 and fails AA at any
   size; DECISIONS.md records exactly that and gives #846927 at 4.75:1 as the
   gold for text on this ground. The rule here had been using the raw accent,and Lighthouse was reporting these three <b> elements as the About page's
   colour-contrast failure. */
.ab-stat b{display:block;font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;color:#846927;
  font-size:clamp(1.3rem,1.75vw,1.5rem);line-height:1.22;
  min-height:calc(2 * 1.22em);margin-bottom:.55rem;
  text-wrap:balance;letter-spacing:.005em}.ab-stat span{display:block;font-size:.94rem;line-height:1.5;color:#4F5668;
  text-wrap:pretty}@media(max-width:899px){.ab-row{grid-template-columns:1fr}.ab-stats{gap:1.2rem 0}}@media(max-width:479px){.ab-stats{grid-template-columns:1fr}.ab-stat{border-left:0;border-top:1px solid #E2DCCF;padding:1.1rem 0 0}.ab-stat:first-child{border-top:0;padding-top:0}/* Stacked,so the reserved second line is
     just a gap. */
  .ab-stat b{min-height:0;margin-bottom:.3rem}}/* ---- what you can expect,beside a captioned photograph ---------------- */
.ab-row-ex{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.ab-row-ex .ab-left{border-right:1px solid #E2DCCF;
  padding-right:clamp(1.5rem,3vw,2.6rem)}.ab-exlist{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1.8rem}.ab-ex{display:flex;gap:1.2rem;align-items:flex-start}.ab-ex-ic{flex:0 0 46px}.ab-ex-ic .ic{width:46px;height:46px;color:#B18D34;stroke-width:1.3}.ab-ex-t b{display:block;font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;font-size:1.26rem;
  line-height:1.2;color:#262D3E;margin-bottom:.35rem}.ab-ex-t p{margin:0;font-size:.98rem;line-height:1.55;color:#4F5668}.ab-fig{margin:0}.ab-fig picture,.ab-fig img{width:100%;display:block;border-radius:6px}.ab-fig img{aspect-ratio:4/3;object-fit:cover}.ab-fig figcaption{margin-top:.7rem;font-size:.9rem;color:#4F5668}@media(max-width:899px){.ab-row-ex{grid-template-columns:1fr}.ab-row-ex .ab-left{border-right:0;padding-right:0}}/* ---- the navy band: what we take on,and where -------------------------- */
.abband{background:#0F172A;color:#F7F4EE;padding:clamp(2.8rem,4.6vw,4rem) 0}.ab-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.4rem);align-items:start}.ab-band h2{color:#F7F4EE;font-size:clamp(1.7rem,2.7vw,2.25rem)}.ab-band p{color:rgba(247,244,238,.9);font-size:1.02rem;line-height:1.65;
  max-width:46ch}.ab-br{border-left:1px solid rgba(177,141,52,.45);
  padding-left:clamp(1.6rem,3vw,2.8rem)}.ab-link{display:flex;align-items:center;gap:.55rem;margin:1.2rem 0 0;
  font-weight:600}.ab-link .ic{width:18px;height:18px;color:#B18D34;flex:0 0 18px;order:2}.ab-link a{color:#B18D34;text-decoration:underline;text-underline-offset:3px}.ab-link a:hover{color:#F7F4EE}.ab-svclinks{display:flex;flex-wrap:wrap;gap:.45rem .9rem;margin:1.1rem 0 0}.ab-svclinks a{color:rgba(247,244,238,.86);font-size:.92rem;text-decoration:none;
  border-bottom:1px solid rgba(177,141,52,.5);padding-bottom:1px}.ab-svclinks a:hover{color:#B18D34;border-bottom-color:#B18D34}.ab-note{margin-top:1.2rem;font-size:.95rem !important;
  color:rgba(247,244,238,.74) !important}.ab-pins{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:.8rem 1rem}.ab-pins li{display:flex;align-items:center;gap:.55rem}.ab-pins .ic{width:20px;height:20px;color:#B18D34;flex:0 0 20px}.ab-pins a{color:#F7F4EE;text-decoration:none;font-size:.98rem}.ab-pins a:hover{color:#B18D34}@media(max-width:899px){.ab-band{grid-template-columns:1fr}.ab-br{border-left:0;padding-left:0;border-top:1px solid rgba(177,141,52,.45);
    padding-top:1.8rem}}@media(max-width:479px){.ab-pins{grid-template-columns:1fr}}/* ---- the contact band -------------------------------------------------- */
.ab-cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(2rem,4vw,3.6rem);align-items:center}.abcta .eyebrow{display:block;color:#846927;margin-bottom:.9rem}.ab-cta-copy h2{font-size:clamp(1.9rem,3.2vw,2.75rem);margin-bottom:.3em}.ab-cta-copy .sub{font-size:1.06rem;line-height:1.6;color:#4F5668;
  margin-bottom:1.6rem}/* THE PHONE BLOCK,REORDERED AND BROUGHT DOWN A SIZE.
   It was a 38px number with its label hung underneath,and the pill said the same thing as the star
   line thirty pixels below it inside the form. Three problems in one row: one
   fact stated twice,and a number set larger
   than the heading above it.
   The pill is gone from this band. The label now reads ABOVE the number,and the number is a step smaller
   than the h2 rather than a step larger. */
.ab-bigtel{display:inline-flex;align-items:center;gap:.95rem;
  text-decoration:none}.ab-bigtel .ic{width:38px;height:38px;color:#B18D34;flex:0 0 38px;
  stroke-width:1.3}.ab-bigtel-t{display:flex;flex-direction:column;gap:.15rem}.ab-bigtel-lab{font-family:'Cinzel','Cormorant Garamond',Georgia,serif;letter-spacing:.11em;text-transform:uppercase;
  font-size:.66rem;font-weight:500;color:#846927}.ab-bigtel b{font-weight:700;font-size:clamp(1.5rem,2.4vw,1.95rem);color:#262D3E;
  letter-spacing:.01em;line-height:1.05}.ab-bigtel:hover b{color:#846927}/* A latent bug,fixed while it was in view: .gpill is inline-flex,so
   margin-top could never move it onto its own line. Anywhere it follows an
   inline element it has to be a block to drop below it. */
.abcta .gpill{display:flex;width:fit-content;margin-top:1.5rem}.ab-cta-form .quote-4{background:#FDFBF7;box-shadow:none;
  border:1px solid #E2DCCF;padding:1.8rem 1.7rem 1.6rem}@media(max-width:899px){/* Rule 7 again: when it stacks,the form is first. */
  .ab-cta{grid-template-columns:1fr}.ab-cta-form{order:-1}}