/*
Theme Name: Firm website
Description: The removal firm's own website: homepage, About, Contact and the quote page, in three designs (Classic, Bold, Simple), from the firm's details, colours and logo. Set up from the office's setup wizard.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: remuvl-site
*/

:root {
	--b: #2a2d6e; --bd: #1e2050; --bdd: #151738; --bl: #3b3f80; --a: #5b5bd6; --ad: #4747c2; --abg: #ecebfd; --al: #b5b5ed;
	--h: #fde9b8; --hd: #f8d98a; --hink: #564f3f; --ink: #1e2235; --ink2: #5b6078; --mute: #737890; --line: #e8e9f1; --bg: #f6f7fb;
	--ob: #fff; --oa: #fff; --navink: #d0d1df;
	--fh: Inter, system-ui, sans-serif; --fb: Inter, system-ui, sans-serif; --r: 14px; --w: 1160px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.6 var(--fb); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ad); }
h1, h2, h3 { font-family: var(--fh); line-height: 1.12; margin: 0 0 .5em; color: var(--ink); letter-spacing: -.01em; }
h1 { font-size: clamp(34px, 5.4vw, 60px); }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
p { margin: 0 0 1em; }
.rwt-wrap { max-width: var(--w); margin: 0 auto; padding: 0 24px; }
.rwt-narrow { max-width: 760px; }
.rwt-center { text-align: center; }
.rwt-ic { width: 22px; height: 22px; flex: none; }

/* buttons */
.rwt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--a); color: var(--oa); text-decoration: none; font-weight: 700; font-size: 16px; padding: 12px 22px; border-radius: 999px; border: 2px solid var(--a); transition: background .15s, transform .15s; }
.rwt-btn:hover { background: var(--ad); border-color: var(--ad); transform: translateY(-1px); }
.rwt-btn-lg { font-size: 17px; padding: 15px 28px; }
.rwt-btn-sm { font-size: 14px; padding: 8px 16px; }
.rwt-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.rwt-btn-ghost:hover { background: var(--bg); border-color: var(--ink2); color: var(--ink); }
.rwt-btn-hi { background: var(--h); color: var(--hink); border-color: var(--h); }
.rwt-btn-hi:hover { background: var(--hd); border-color: var(--hd); }

/* top bar */
.rwt-top { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.rwt-top-in { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.rwt-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-width: 0; margin-right: auto; }
.rwt-logo { width: auto; height: 44px; max-width: 160px; object-fit: contain; }
.rwt-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--b); color: var(--ob); font: 800 17px var(--fh); flex: none; }
.rwt-name { font: 700 19px/1.1 var(--fh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rwt-nav { display: flex; align-items: center; gap: 22px; }
.rwt-nav a { text-decoration: none; color: var(--ink2); font-weight: 600; font-size: 15.5px; }
.rwt-nav a:hover { color: var(--ink); }
.rwt-nav .rwt-tel { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.rwt-nav .rwt-tel .rwt-ic { width: 17px; height: 17px; color: var(--a); }
.rwt-nav .rwt-btn { color: var(--oa); padding: 10px 18px; font-size: 15px; }
.rwt-nav-t, .rwt-burger { display: none; }

/* hero */
.rwt-hero { background: var(--bg); padding: 64px 0 72px; overflow: hidden; }
.rwt-hero-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.rwt-kick { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ad); font-size: 15px; background: var(--abg); padding: 6px 14px; border-radius: 999px; }
.rwt-kick .rwt-ic { width: 16px; height: 16px; }
.rwt-lede { font-size: 19px; color: var(--ink2); max-width: 34em; }
.rwt-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 18px; }
.rwt-ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--ink2); font-size: 15px; font-weight: 500; }
.rwt-ticks li::before { content: "\2713"; color: var(--a); font-weight: 800; margin-right: 7px; }
.rwt-hero-pic img { border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(20, 24, 50, .45); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.rwt-van { width: 100%; height: auto; color: var(--ink); }

/* trust strip */
.rwt-trust { border-bottom: 1px solid var(--line); }
.rwt-trust-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; padding: 28px 24px; }
.rwt-trust-in > div { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; }
.rwt-trust-in .rwt-ic { grid-row: span 2; color: var(--a); width: 26px; height: 26px; margin-top: 2px; }
.rwt-trust-in b { font-size: 16px; }
.rwt-trust-in span { color: var(--mute); font-size: 14.5px; line-height: 1.4; }

/* sections */
.rwt-sec { padding: 76px 0; }
.rwt-sec h2 { text-align: center; margin-bottom: 36px; }
.rwt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.rwt-cards.n-4, .rwt-cards.n-7, .rwt-cards.n-8 { grid-template-columns: repeat(4, 1fr); }
.rwt-cards.n-6, .rwt-cards.n-9, .rwt-cards.n-3 { grid-template-columns: repeat(3, 1fr); }
.rwt-cards.n-5 { grid-template-columns: repeat(5, 1fr); }
.rwt-cards.n-1, .rwt-cards.n-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 340px)); justify-content: center; }
@media (max-width: 900px) { .rwt-cards[class*="n-"] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rwt-cards[class*="n-"] { grid-template-columns: 1fr; } }
.rwt-card { display: grid; align-content: start; gap: 6px; padding: 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .15s, box-shadow .15s, border-color .15s; }
.rwt-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(20, 24, 50, .5); border-color: var(--al); }
.rwt-card-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--abg); color: var(--ad); margin-bottom: 6px; }
.rwt-card b { font-size: 18px; }
.rwt-card span { color: var(--ink2); font-size: 15.5px; line-height: 1.5; }
.rwt-how { background: var(--bg); }
.rwt-steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rwt-steps li { counter-increment: s; background: #fff; border-radius: var(--r); padding: 26px; border: 1px solid var(--line); display: grid; gap: 6px; }
.rwt-steps li::before { content: counter(s); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--b); color: var(--ob); font: 800 17px var(--fh); margin-bottom: 6px; }
.rwt-steps b { font-size: 18px; }
.rwt-steps span { color: var(--ink2); font-size: 15.5px; }
.rwt-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.rwt-quote { margin: 0; padding: 26px; border-radius: var(--r); border: 1px solid var(--line); background: #fff; }
.rwt-stars { display: flex; gap: 2px; color: #f5b301; margin-bottom: 10px; }
.rwt-stars .rwt-ic { width: 18px; height: 18px; fill: currentColor; }
.rwt-quote blockquote { margin: 0 0 12px; font-size: 16.5px; }
.rwt-quote figcaption { color: var(--mute); font-weight: 600; font-size: 14.5px; }
.rwt-about p { font-size: 18px; color: var(--ink2); }
.rwt-about h2 { text-align: left; margin-bottom: 18px; }
.rwt-band { background: var(--b); color: var(--ob); padding: 56px 0; }
.rwt-band-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.rwt-band h2 { color: var(--ob); margin: 0 0 6px; text-align: left; }
.rwt-band p { margin: 0; opacity: .9; }

/* inner pages */
.rwt-pagehead { background: var(--bg); padding: 56px 0 40px; border-bottom: 1px solid var(--line); }
.rwt-pagehead h1 { font-size: clamp(30px, 4.4vw, 46px); margin: 0; }
.rwt-prose { font-size: 17.5px; }
.rwt-prose p { color: var(--ink2); }
.rwt-contact { display: grid; gap: 18px; margin-bottom: 28px; }
.rwt-contact small { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; font-weight: 700; color: var(--mute); }
.rwt-contact a, .rwt-contact span { font-size: 20px; font-weight: 600; color: var(--ink); text-decoration: none; }

/* footer */
.rwt-foot { background: var(--bdd); color: var(--navink); padding: 48px 0 40px; font-size: 15.5px; }
.rwt-foot-in { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 28px; }
.rwt-foot a { color: #fff; text-decoration: none; }
.rwt-foot a:hover { text-decoration: underline; }
.rwt-foot .rwt-btn { color: var(--oa); }
.rwt-foot .rwt-btn:hover { text-decoration: none; }
.rwt-foot-name { color: #fff; font: 700 19px var(--fh); display: block; margin-bottom: 8px; }
.rwt-foot-sm { font-size: 13.5px; opacity: .8; }

/* ---- design: Classic (warm, rounded, a serif heading) ---- */
.d-classic { --fh: Fraunces, Georgia, serif; --r: 18px; }
.d-classic h1 { font-weight: 700; }
.d-classic .rwt-hero { background: linear-gradient(180deg, var(--abg) 0%, var(--bg) 100%); }
.d-classic .rwt-card-ic { border-radius: 50%; }

/* ---- design: Bold (a full-colour band, big type) ---- */
.d-bold { --fh: Inter, system-ui, sans-serif; --r: 6px; }
.d-bold h1, .d-bold h2 { font-weight: 900; letter-spacing: -.025em; }
.d-bold .rwt-top { background: var(--b); border-bottom: 0; backdrop-filter: none; }
.d-bold .rwt-brand, .d-bold .rwt-nav a, .d-bold .rwt-nav .rwt-tel { color: var(--ob); }
.d-bold .rwt-nav a { opacity: .9; }
.d-bold .rwt-nav .rwt-btn { background: var(--h); border-color: var(--h); color: var(--hink); opacity: 1; }
.d-bold .rwt-mark { background: var(--h); color: var(--hink); }
.d-bold .rwt-burger span { background: var(--ob); }
.d-bold .rwt-hero { background: var(--b); color: var(--ob); padding: 72px 0 96px; }
.d-bold .rwt-hero h1 { color: var(--ob); font-size: clamp(38px, 6.2vw, 72px); }
.d-bold .rwt-lede, .d-bold .rwt-ticks { color: var(--navink); }
.d-bold .rwt-kick { background: rgba(255, 255, 255, .12); color: var(--h); }
.d-bold .rwt-ticks li::before { color: var(--h); }
.d-bold .rwt-hero .rwt-btn { background: var(--h); border-color: var(--h); color: var(--hink); border-radius: var(--r); }
.d-bold .rwt-hero .rwt-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .35); color: var(--ob); }
.d-bold .rwt-btn { border-radius: var(--r); }
.d-bold .rwt-trust { background: var(--bd); color: var(--ob); border: 0; }
.d-bold .rwt-trust-in .rwt-ic { color: var(--h); }
.d-bold .rwt-trust-in span { color: var(--navink); }
.d-bold .rwt-card { border-width: 0 0 0 4px; border-color: var(--a); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.d-bold .rwt-sec h2 { text-align: left; }
.d-bold .rwt-band { background: var(--a); }
.d-bold .rwt-van .vb { fill: var(--a); }

/* ---- design: Simple (white, thin lines, calm) ---- */
.d-simple { --fh: "DM Sans", Inter, system-ui, sans-serif; --fb: "DM Sans", Inter, system-ui, sans-serif; --r: 4px; }
.d-simple h1, .d-simple h2 { font-weight: 500; letter-spacing: -.02em; }
.d-simple .rwt-hero { background: #fff; text-align: center; padding: 88px 0 72px; }
.d-simple .rwt-hero-in { grid-template-columns: 1fr; justify-items: center; }
.d-simple .rwt-lede { margin-left: auto; margin-right: auto; }
.d-simple .rwt-cta, .d-simple .rwt-ticks { justify-content: center; }
.d-simple .rwt-hero-pic { max-width: 560px; width: 100%; }
.d-simple .rwt-kick { background: transparent; border: 1px solid var(--line); color: var(--ink2); }
.d-simple .rwt-btn { border-radius: var(--r); }
.d-simple .rwt-card, .d-simple .rwt-steps li, .d-simple .rwt-quote { border-radius: var(--r); box-shadow: none; }
.d-simple .rwt-card-ic { background: transparent; color: var(--a); width: auto; height: auto; justify-content: start; }
.d-simple .rwt-how, .d-simple .rwt-pagehead { background: #fff; }
.d-simple .rwt-how { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.d-simple .rwt-steps li::before { background: transparent; color: var(--a); border: 1px solid var(--a); }
.d-simple .rwt-band { background: var(--bg); color: var(--ink); }
.d-simple .rwt-band h2 { color: var(--ink); }
.d-simple .rwt-band .rwt-btn-hi { background: var(--a); border-color: var(--a); color: var(--oa); }

/* phones */
@media (max-width: 900px) {
	.rwt-hero-in { grid-template-columns: 1fr; gap: 32px; }
	.rwt-steps { grid-template-columns: 1fr; }
	.rwt-foot-in { grid-template-columns: 1fr; }
	.rwt-burger { display: grid; gap: 5px; padding: 10px; cursor: pointer; }
	.rwt-burger span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; }
	.rwt-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 8px 16px 16px; box-shadow: 0 20px 30px -20px rgba(0, 0, 0, .3); }
	.rwt-nav a { padding: 12px 4px; border-bottom: 1px solid var(--line); color: var(--ink) !important; }
	.rwt-nav .rwt-btn { margin-top: 12px; border-bottom: 0; }
	.rwt-nav-t:checked ~ .rwt-nav { display: flex; }
	.d-bold .rwt-nav .rwt-tel .rwt-ic { color: var(--a); }
}
@media (max-width: 560px) {
	body { font-size: 16px; }
	.rwt-wrap { padding: 0 16px; }
	.rwt-hero { padding: 40px 0 48px; }
	.rwt-sec { padding: 52px 0; }
	.rwt-cta .rwt-btn { width: 100%; }
	.rwt-name { font-size: 16px; }
	.rwt-logo { height: 36px; }
	.rwt-mark { width: 38px; height: 38px; }
}