@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;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 /assets/style.80fe340d.css,so "fonts/x.woff2" resolves correctly whether the site is served from a domain root or from /previews//. 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%}/* ---- THE NAV GREW BY ONE ITEM AND STOPPED FITTING AT 1024 -------------- Adding Gallery took the main nav to seven links. The header bar is a flex row of brand + nav + button with nothing allowed to wrap,so at 1024 it needed 1079px inside a 969px wrap and pushed the "Get a price" button 110px past the right edge of the viewport. On every page,not just the new one: a nav item is site furniture. Measured,not guessed: brand 220 + nav 769 + button 90 at a 38px nav gap. Six gaps between seven links,so taking the gap to 14px gives back 144px,which clears it with room rather than exactly. The band is 901 to 1150 only. Below 901 the nav is already a burger and above 1150 the original spacing fits,so the header on a phone and on a laptop is untouched; the only widths that change are the ones that would otherwise be broken. */ @media(min-width:901px) and (max-width:1150px){ nav.main{gap:14px} nav.main>a,.navdd-t{font-size:.74rem} }/* ---- 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 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. */ /* 400px was a column. The quote card is the widest thing this grid carries and the tallest,and at 400 every line of its copy wrapped three times: the client's reply promise alone ran to four lines. 470 lets the card hold two controls side by side (see .qc-wide) and takes about 60px off the height of the text blocks,which is the difference between a card and a ribbon. The copy column gives up 70px for it and the H1 still sets on three lines. */ .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px); gap:clamp(2rem,3.6vw,3.2rem);align-items:center; padding:clamp(3rem,5vw,4.6rem) 0 clamp(3rem,5vw,4.6rem)}/* The copy column pays for the card's extra width: 44rem -> 37rem,and the H1 sets on four lines instead of three. That is the trade and it is the right way round - the headline is read once and the card is the thing somebody has to fill in. */ .hero-copy{width:auto;max-width:37rem}.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:35rem}}/* 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. */ /* FOUR TILES NOW,NOT THREE (2026-10-17). This was repeat(3,...) with the column count written into it,so adding the TopRatedPlasterers tile put the fourth card on a second row of its own at every width above 768. Two by two between 768 and 1100,where four 224px tracks will not fit,and all four on one line above that. */ .badgerow{grid-auto-flow:row;grid-template-columns:repeat(2,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:1100px){/* All four on one line. 4x200 plus three 2.4rem gaps is 915px,which fits inside the 1140 wrap with room to spare. */ .badgerow{grid-template-columns:repeat(4,minmax(0,200px));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}/* A THREE STAGE SET TAKES THE WHOLE ROW. Three frames inside one cell of a three-column grid is 120px a frame on a laptop,render or plaster: the one thing the row exists to show. Spanning the row gives each frame about 360px instead. On a phone they stack. Three across 360px of screen is 115px a frame and has the same problem; stacked,each one is full width and the stage tag on it carries the order. */ .ba-set{grid-column:1/-1}.ba-three{grid-template-columns:1fr;gap:.6rem}@media(min-width:700px){.ba-grid{grid-template-columns:1fr 1fr;gap:2.2rem 2rem}.ba-three{grid-template-columns:repeat(3,1fr);gap:.5rem}}@media(min-width:1100px){.ba-grid{grid-template-columns:repeat(3,1fr)}}.gal-h{margin:2.6rem 0 .2rem;font-size:1.12rem}.gal-h:first-child{margin-top:1.4rem}/* 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}/* A NUDGE,THEN IT STOPS ON ITS OWN. The button already waits for 200px of scroll before it appears,so the thing it has to survive is being ignored once it is there. Three slow pulses spaced four seconds apart is enough to be noticed in peripheral vision and few enough that it is not still moving while somebody reads. It also stops the moment it is hovered,focused or tapped (site.js adds .is-touched),because an element that keeps animating after you have engaged with it is just noise. */ @keyframes wafab-pulse{ 0%,100%{transform:none;box-shadow:0 2px 8px rgba(0,0,0,.2)} 8%{transform:translateY(-5px) scale(1.04); box-shadow:0 10px 22px rgba(37,211,102,.42)} 16%{transform:none;box-shadow:0 2px 8px rgba(0,0,0,.2)} 24%{transform:translateY(-3px) scale(1.02)} 32%{transform:none} }#wafab.is-in{animation:wafab-pulse 4.2s ease-in-out 1.4s 3}#wafab.is-touched{animation: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}/* No pulse at all,not a slower one: somebody who has asked for reduced motion has asked for this exact thing not to happen. */ #wafab,#wafab.is-in{transform:none;animation: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 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 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,.q-file:focus-visible + .q-thumbs{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}.q-thumb{position:relative;width:64px;height:64px;border-radius:2px; overflow:hidden;border:1px solid rgba(15,23,42,.14);display:block}.q-thumb img{width:100%;height:100%;object-fit:cover;display:block}/* 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}.q-thumb-x{position:absolute;top:2px;right:2px;width:22px;height:22px; border:0;border-radius:50%;background:rgba(15,23,42,.72);color:#F7F4EE; font-size:15px;line-height:1;cursor:pointer;padding:0}.q-thumb-x:hover{background:#0F172A}/* A VIDEO TILE. Same 64px square as a photo,but the frame comes from a