/* Additions on top of upscale.css for the shared footer and generated templates */
.ft .top.ft5{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr}
@media(max-width:1100px){.ft .top.ft5{grid-template-columns:repeat(3,minmax(0,1fr))}.ft .top.ft5>div:first-child{grid-column:1/-1}}
@media(max-width:620px){.ft .top.ft5{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ft .bot .legal{display:flex;flex-wrap:wrap;gap:10px 22px}
.ft .bot .legal a:hover{color:var(--char)}

/* short dark banner for text pages (blog, legal, FAQ) so the white menu stays readable */
.hero.short{height:auto;min-height:0;padding-top:clamp(150px,20vh,210px)}
.hero.short .in{position:relative;padding-top:0}
.hero.short::after{background:none}
.hero.short .box{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding-left:0;max-width:900px}
.hero.short h1{font-size:clamp(32px,4.4vw,60px)}

/* empty photo placeholder (until a real photo is added) */
.slot-empty{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--stone) 0%,var(--stone-2) 100%)}

/* long-form text: blog posts, legal pages, guides */
.prose{max-width:760px;margin:0 auto;color:var(--body);font-size:17px;line-height:1.85}
.prose>*+*{margin-top:1.15em}
.prose h2{font-size:clamp(26px,2.6vw,36px);font-weight:200;letter-spacing:-.022em;color:var(--char);line-height:1.2;margin-top:2.1em}
.prose h3{font-size:clamp(20px,1.8vw,24px);font-weight:300;letter-spacing:-.015em;color:var(--char);line-height:1.3;margin-top:1.8em}
.prose h4{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;color:var(--char);margin-top:1.8em}
.prose a{color:var(--char);border-bottom:1px solid var(--line);transition:none}
.prose a:hover{border-color:var(--char)}
.prose strong,.prose b{font-weight:400;color:var(--char)}
.prose ul,.prose ol{padding-left:1.25em}
.prose li+li{margin-top:.45em}
.prose img{display:block;max-width:100%;height:auto;margin:2em auto}
.prose figure{margin:2em 0}
.prose figcaption{font-size:13px;color:var(--faint);margin-top:8px;text-align:center}
.prose blockquote{border-left:2px solid var(--char);padding-left:1.2em;color:var(--char);font-weight:300}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose th,.prose td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;color:var(--char)}
.prose .tblw{overflow-x:auto}
.meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:18px}
.meta a{color:rgba(255,255,255,.85)}

/* blog list */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,64px) clamp(22px,2.6vw,40px)}
@media(max-width:980px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.posts{grid-template-columns:minmax(0,1fr)}}
.post a{display:block}
.post .im{aspect-ratio:4/3;overflow:hidden;background:var(--stone)}
.post .im img{width:100%;height:100%;object-fit:cover;display:block}
.post .k{display:block;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;margin-top:18px}
.post h3{font-size:clamp(18px,1.6vw,22px);font-weight:300;letter-spacing:-.012em;color:var(--char);line-height:1.35;margin-top:10px}
.post p{font-size:14.5px;margin-top:10px;line-height:1.7}
.cats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(36px,4vw,56px)}
.chip-l{display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:10px 16px;border:1px solid var(--line);color:var(--char)}
.chip-l:hover,.chip-l.on{background:var(--char);color:#fff;border-color:var(--char)}

/* city + area lists */
.areas{display:flex;flex-wrap:wrap;gap:10px}
.cols2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,90px);align-items:start}
@media(max-width:860px){.cols2{grid-template-columns:minmax(0,1fr)}}

/* fabric swatch */
.swatch-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
@media(max-width:860px){.swatch-hero{grid-template-columns:minmax(0,1fr)}}
.swatch-hero .im{aspect-ratio:1;background:var(--stone);overflow:hidden}
.swatch-hero .im img{width:100%;height:100%;object-fit:cover}
.swgrid-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:22px}
.swgrid-l a{display:block}
.swgrid-l .im{aspect-ratio:1;background:var(--stone);overflow:hidden}
.swgrid-l .im img{width:100%;height:100%;object-fit:cover}
.swgrid-l b{display:block;font-weight:300;color:var(--char);font-size:15px;margin-top:10px}
.swgrid-l span{font-size:11px;letter-spacing:.18em;text-transform:uppercase}

/* forms */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fnote.ok{color:#2f6b3a}
.fnote.err{color:#9a2f2a}
.paybox{margin:2em 0}
.post-cta{margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px solid var(--line)}
/* FAQ blocks inside articles */
.prose details{border-bottom:1px solid var(--line);padding:18px 0}
.prose details summary{cursor:pointer;color:var(--char);font-weight:300;font-size:18px;list-style:none}
.prose details summary::-webkit-details-marker{display:none}
.prose details summary::after{content:"+";float:right;color:var(--body)}
.prose details[open] summary::after{content:"\2212"}
.prose details>*:not(summary){margin-top:12px}

/* Google reviews */
.revs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(18px,2vw,28px);margin-top:clamp(30px,4vw,48px)}
.rv1{background:#fff;border:1px solid var(--line-2);padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:14px;margin:0}
.rv1 .stars{color:var(--char);letter-spacing:.2em;font-size:13px}
.rv1 blockquote{margin:0;color:var(--body);font-size:15px;line-height:1.75}
.rv1 figcaption{margin-top:auto;color:var(--char);font-size:13px;letter-spacing:.06em}
.rv1 figcaption span{color:var(--faint)}

/* ---------- Header: separate white bar with the logo (Rollease Acmeda-style) ---------- */
:root{--cu:#b0673e;--cu-d:#8f4f2c;--hdr-h:84px}
.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);transition:transform .35s var(--e,ease)}
.hdr::before{content:"";display:block;height:3px;background:linear-gradient(90deg,#7d4126 0%,#c98458 35%,#f0c4a2 55%,#b0673e 75%,#7d4126 100%)}
.hdr.hide{transform:translateY(-100%)}
.hdr-in{max-width:1640px;margin:0 auto;height:var(--hdr-h);padding-inline:clamp(18px,3vw,44px);display:flex;align-items:center;gap:clamp(22px,2.6vw,44px)}
.hdr .logo{flex:none;display:block;line-height:0}
.hdr .logo img{height:40px;width:auto;display:block}
.hdr .nl{display:flex;align-items:center;gap:clamp(16px,1.8vw,30px);font-size:15px;letter-spacing:.01em;text-transform:none;color:#4a4540;text-shadow:none;white-space:nowrap}
.hdr .nt{color:#4a4540;font-size:15px;font-weight:400;letter-spacing:.01em;text-transform:none;text-shadow:none;padding:30px 0}
.hdr .nt:hover,.hdr .ni.open .nt,.hdr .ni:hover .nt{color:var(--char)}
.hdr .nt .cv{border-color:currentColor}
.hdr .dd{padding-top:0}
.hdr .ddin{box-shadow:0 24px 50px -20px rgba(18,16,14,.28);border:1px solid var(--line-2);border-top:2px solid var(--cu)}
.hdr-r{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,1.6vw,24px)}
.hdr-ph{font-size:14.5px;color:#4a4540;white-space:nowrap;letter-spacing:.02em}
.hdr-ph:hover{color:var(--char)}
.hdr-btn{display:inline-block;white-space:nowrap;font-size:14px;letter-spacing:.02em;color:#fff;background:var(--char);border:1px solid var(--char);border-radius:999px;padding:11px 22px}
.hdr-btn:hover{background:var(--cu-d);border-color:var(--cu-d);color:#fff}
.hdr .burger{display:none;color:var(--char);text-shadow:none;font-size:22px}
@media(max-width:1180px){.hdr-ph{display:none}}
@media(max-width:1020px){
  .hdr .nl{display:none}
  .hdr .burger{display:block}
  :root{--hdr-h:70px}
  .hdr .logo img{height:32px}
}
@media(max-width:520px){.hdr-btn{display:none}.hdr .logo img{height:28px}}
.drawer .dh .dlogo{height:32px;width:auto}

/* page banners no longer sit under the header, so remove the space that was reserved for it */
.hero .in{padding-top:40px}
.hero.short{padding-top:clamp(64px,9vh,104px)}
.sx .hero .wrap{padding-top:clamp(40px,6vh,70px)}
.sx .hero{min-height:min(78vh,760px)}
/* Rollease-style soft corner on the main banner */
.hero:not(.short),.sx .hero{border-bottom-left-radius:clamp(22px,3vw,44px)}

/* ---------- "Shop by need" cards: compact, whole card clickable ---------- */
.sx.sx.sx .needs{gap:14px;border:none}
.sx.sx.sx .needs a{display:grid;grid-template-columns:46px minmax(0,1fr) 22px;grid-template-rows:min-content 1fr;column-gap:18px;align-items:center;padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:#fff;transform:none;box-shadow:none;transition:border-color .2s,box-shadow .2s}
.sx.sx.sx .needs a:hover,.sx.sx.sx .needs a:focus-visible{border-color:var(--cu);box-shadow:0 10px 26px -18px rgba(35,33,30,.4);transform:none}
.sx.sx.sx .needs .ico{grid-row:1/span 2;width:46px;height:46px;margin:0;background:#f4ece4;color:var(--cu-d)}
.sx.sx.sx .needs a:hover .ico{background:var(--cu);color:#fff}
.sx.sx.sx .needs .ico svg{width:21px;height:21px}
.sx.sx.sx .needs i{display:none}
.sx.sx.sx .needs h3{grid-column:2;font-size:18.5px;line-height:1.3;margin:0}
.sx.sx.sx .needs p{grid-column:2;font-size:14.5px;line-height:1.5;margin:3px 0 0;color:var(--body)}
.sx.sx.sx .needs .go{grid-column:3;grid-row:1/span 2;margin:0;font-size:0;letter-spacing:0;justify-self:end;color:var(--faint)}
.sx.sx.sx .needs .go:after{content:"\2192";font-size:18px;margin:0;transition:transform .2s;display:inline-block}
.sx.sx.sx .needs a:hover .go{color:var(--cu)}
.sx.sx.sx .needs a:hover .go:after{transform:translateX(3px);margin:0}
@media(max-width:980px){.sx.sx.sx .needs{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.sx.sx.sx .needs{grid-template-columns:1fr;gap:10px}.sx.sx.sx .needs a{padding:16px 18px;grid-template-columns:40px minmax(0,1fr) 18px;column-gap:14px}.sx.sx.sx .needs .ico{width:40px;height:40px}}

/* footer logo */
.ft .flogo{display:inline-block;line-height:0}
.ft .flogo img{height:35px;width:auto}

/* ---------- Compact stats band (dark strip under the banner) ---------- */
.sx.sx.sx .trust.pro .wrap{padding-top:22px;padding-bottom:22px}
.sx.sx.sx .trust.pro .wrap>div,.sx.sx.sx .trust.pro .wrap>a{padding:2px 0 2px clamp(16px,2vw,28px)}
.sx.sx.sx .trust.pro .wrap>div:first-child,.sx.sx.sx .trust.pro .wrap>a:first-child{padding-left:0}
.sx.sx.sx .trust.pro b{font-size:clamp(20px,1.8vw,26px);margin-bottom:5px;line-height:1.1}
.sx.sx.sx .trust.pro b.st5{font-size:16px;line-height:29px;height:29px;letter-spacing:.1em}
.sx.sx.sx .trust.pro span{font-size:10.5px;letter-spacing:.12em;line-height:1.45}
.sx.sx.sx .trust.pro .rm{margin-top:5px;font-size:10.5px;letter-spacing:.14em}
@media(max-width:900px){.sx.sx.sx .trust.pro .wrap{row-gap:16px}}

/* ---------- Headings: smaller, no italics ---------- */
h1 em,h2 em,h3 em,.sx h1 em,.sx h2 em,.sx h3 em{font-style:normal !important}
.sx.sx.sx h2,.sx.sx.sx .head h2,.sx.sx.sx .split h2,.sx.sx.sx .cta h2{font-size:clamp(24px,2.2vw,32px);line-height:1.22;letter-spacing:-.015em}
.sx.sx.sx .hero h1{font-size:clamp(28px,2.8vw,40px);line-height:1.15}
.sh h2,.ch h2{font-size:clamp(24px,2.2vw,32px);line-height:1.22;letter-spacing:-.015em;font-weight:300}
.close h2{font-size:clamp(26px,2.6vw,36px);font-weight:300}
.hero h1{font-size:clamp(28px,3vw,44px);font-weight:300;line-height:1.12}
.hero.short h1{font-size:clamp(28px,3vw,42px)}

/* ---------- "Options" cards on the dark band: compact, icon beside title ---------- */
.sx.sx.sx #options{padding-top:clamp(44px,6vh,64px);padding-bottom:clamp(44px,6vh,64px)}
.sx.sx.sx #options .opts{gap:14px}
.sx.sx.sx #options .opts>div{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;grid-template-rows:min-content 1fr;align-items:start;padding:18px 20px;border-radius:12px;transform:none}
.sx.sx.sx #options .opts>div:hover{transform:none}
.sx.sx.sx #options .opts .ico{grid-row:1/span 2;width:40px;height:40px;margin:0;align-self:start}
.sx.sx.sx #options .opts .ico svg{width:19px;height:19px}
.sx.sx.sx #options .opts h3{font-size:17px;line-height:1.3;margin:0}
.sx.sx.sx #options .opts p{grid-column:2;font-size:14px;line-height:1.5;margin:3px 0 0}

/* ---------- Enquiry section: lighter than the section above it ---------- */
.sx.sx.sx .cta.enq{background:#fbfaf8 !important;border-top:1px solid var(--line-2)}
.close.stone{background:#fbfaf8;border-top:1px solid var(--line-2);padding-block:clamp(48px,7vh,80px)}