/* Chawfine Shipping & Removals demo (2026-11-06), adapted from the Shah Hire removals demo. (c) 2026 Book A Tradesman FZC, trading as Page Tailors. */
/* (original header of the copied file) Silverstone Relocations demo additions (2026-11-05): silver and charcoal palette from the name, text wordmark (no logo of theirs found on a site,
   the web archive or social pages), photo-free hero, "Your photo could go here" drawings, moving quote form. (c) 2026 Book A Tradesman FZC, trading as Page Tailors. */
:root{--navy:#2a3440;--navy-d:#1b232c;--deep:#151b22;--sky:#eef1f4;--silver:#b8c2cc;--accent:#3f7cac}
.header .brand.sr-brand{display:flex;flex-direction:column;line-height:1.05;text-decoration:none}
.sr-brand b{font-family:'Source Serif 4',Georgia,serif;font-size:1.45rem;color:var(--deep);letter-spacing:.01em}
.sr-brand span{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#6b7785}
.sr-hero{background:linear-gradient(135deg,#151b22 0%,#2a3440 60%,#4a5866 130%);color:#fff;padding:56px 0 64px}
.sr-hero-in{display:grid;gap:30px;align-items:center}
.sr-hero h1{font-size:clamp(2rem,1.3rem + 3vw,3.3rem);margin:0 0 .4em;color:#fff}
.sr-hero .eyebrow{color:var(--silver)}
.sr-hero .hero-text{color:#dde3e9;max-width:600px}
.sr-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:22px 24px;max-width:380px}
.sr-card strong{font-family:'Source Serif 4',Georgia,serif;font-size:1.7rem;line-height:1.15;display:block;color:#fff}
.sr-card span{color:#dde3e9;display:block;margin-top:6px}
@media (min-width:900px){.sr-hero-in{grid-template-columns:1.6fr 1fr}.sr-hero{padding:84px 0 92px}}
.sr-svc{border-top:4px solid var(--silver);overflow:hidden}
.sr-ph{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-bottom:1px solid #dde3e9}
.sr-tips{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px}
.sr-tips li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--silver);border-radius:10px;padding:16px 18px}
.sr-tips strong{display:block;color:var(--deep);margin-bottom:4px}.sr-tips p{margin:0;color:#4b5a66;font-size:.95rem}
.sr-q h2{margin-bottom:.35em}.sr-q-lead{font-size:1.08rem;color:#33424f;margin:0 0 18px}
.sr-why{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.sr-why li{padding-left:26px;position:relative;font-weight:600;color:var(--deep);font-size:.95rem}
.sr-why li::before{content:"";position:absolute;left:0;top:.15em;width:18px;height:18px;border-radius:50%;background:var(--navy)}
.sr-why li::after{content:"";position:absolute;left:6px;top:.32em;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.sr-q-cta{display:flex;flex-wrap:wrap;gap:10px}.sr-q-cta .btn{flex:1 1 180px;text-align:center;justify-content:center}
.sr-q-alt{margin:12px 0 0;color:#4b5a66;font-size:.95rem}.sr-q-alt a{font-weight:700;color:var(--navy)}
.sr-foot-name{font-family:'Source Serif 4',Georgia,serif;font-size:1.3rem;color:#fff;font-weight:600}
.topbar a{color:var(--silver)}
@media (max-width:520px){.sr-why{grid-template-columns:1fr}}

:root{--navy:#14532d;--navy-d:#0f3d22;--deep:#0c2416}
.sr-brand span{color:#b7791f}
.sr-hero{background:linear-gradient(135deg,#0f1a5c 0%,#1f2f96 62%,#2d47c4 130%)}
.header .brand.sr-brand span{color:#b7791f}

:root{--navy:#1f2f96;--navy-d:#182577;--deep:#0f1a5c}
.sr-brand span{color:#1f2f96}
.flag{display:inline-block;vertical-align:middle;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.eyebrow .flag{margin:0 .35em;position:relative;top:-1px}
.cf-flags{display:flex;align-items:center;gap:14px;margin-bottom:8px}.cf-flags span{font-size:28px;color:#ffd31a;font-weight:700}
.cf-route{margin:0 0 14px;font-weight:600;color:#ffd31a;letter-spacing:.02em}
.cf-islands{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 6px}.cf-islands .flag{width:34px}
.cf-more{font-weight:500;color:#fff3b0;font-size:.92em}
.sr-brand b{color:#1f2f96}.sr-brand b::first-letter{color:inherit}
.cf-tag{display:inline-block;margin:6px 0 18px;padding:6px 14px;background:#ffd31a;color:#0f1a5c;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.88rem;border-radius:4px}
.stats{border-top:4px solid #ffd31a}
.ph-note{display:block;font-size:.74rem;color:#6b7785;padding:6px 18px 0;font-style:italic}
.sr-ph{object-fit:cover}
.cf-banner{background:#0f1a5c;padding:0 16px 28px}.cf-banner img{display:block;width:100%;max-width:960px;height:auto;margin:0 auto;border-radius:12px;border:4px solid #ffd31a;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.sr-brand b{font-size:1.9rem;line-height:1.05;letter-spacing:.01em}.sr-brand span{font-size:.95rem;letter-spacing:.12em;font-weight:800;color:#1f2f96}@media(max-width:600px){.sr-brand b{font-size:1.5rem}.sr-brand span{font-size:.78rem}}
.cf-brand{display:flex;align-items:center}.header .brand.cf-brand img.cf-logo{display:block;width:270px;max-width:66vw;height:auto}@media(max-width:599px){.header .brand.cf-brand img.cf-logo{width:250px}}
/* 2026-11-07: phones with forced dark mode (Samsung Internet / Chrome auto-dark) were darkening the white header and dimming the logo; the site is light-only.
   The header's white is a background IMAGE (a white SVG tile) because forced dark mode recolours solid backgrounds but leaves background images alone. */
:root{color-scheme:only light}
.header{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23ffffff'/%3E%3C/svg%3E");background-repeat:repeat}
/* top bar on phones: one line, short wording, number white and bold with "Call" in front */
@media(max-width:599px){.topbar .wrap{flex-wrap:nowrap;align-items:center;gap:0 10px}.topbar-area{width:auto;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0;font-size:.8rem}.topbar-links{flex:0 0 auto;white-space:nowrap}.topbar a{color:#fff;font-weight:700;padding:11px 0}.topbar-links a[href^="tel:"]::before{content:"Call ";color:#ffd31a;font-weight:700}.show-sm{display:inline}}
@media(min-width:600px){.show-sm{display:none}}
.cf-dest{background:#f4f6fc}.cf-dest h2{margin:.2em 0 .4em}.cf-dest-list{list-style:none;padding:0;margin:18px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}.cf-dest-list li{background:#fff;border:1px solid #dfe4f3;border-left:5px solid #ffd31a;border-radius:8px;padding:10px 14px}.cf-dest-list strong{display:block;color:#0f1a5c}.cf-dest-list span{font-size:.85rem;color:#4b5a66}

/* 2026-11-08: his own site copy (WhatsApp 8 Nov): about block, six service cards, why-choose list, how-it-works steps */
.cf-about{background:#fff;padding:44px 0;border-bottom:1px solid #e3e7f0}.cf-about-in{display:grid;gap:18px 40px}.cf-about h2{margin:.2em 0 0;font-size:clamp(1.4rem,1rem + 1.4vw,2rem)}.cf-about p{margin:0 0 12px;font-size:1.06rem;color:#33424f}
@media(min-width:900px){.cf-about-in{grid-template-columns:1fr 1.2fr;align-items:start}.cf-cards{grid-template-columns:repeat(3,1fr)}}
.cf-why-sec{background:#f4f6fc}.cf-why{margin:18px 0 0;gap:12px 24px}.cf-why li{font-size:1.02rem}
@media(min-width:900px){.cf-why{grid-template-columns:1fr 1fr 1fr}}
.cf-how{background:linear-gradient(135deg,#0f1a5c 0%,#1f2f96 62%,#2d47c4 130%);color:#fff;padding:56px 0}.cf-how .eyebrow{color:#ffd31a}.cf-how h2{color:#fff;margin:.2em 0 .6em}
.cf-steps{list-style:none;counter-reset:step;margin:0 0 26px;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.cf-steps li{counter-increment:step;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:18px 18px 18px 64px;position:relative}
.cf-steps li::before{content:counter(step);position:absolute;left:16px;top:16px;width:34px;height:34px;border-radius:50%;background:#ffd31a;color:#0f1a5c;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.cf-steps strong{display:block;color:#fff;font-size:1.08rem;margin-bottom:4px}.cf-steps p{margin:0;color:#dde3e9;font-size:.97rem}
.cf-how .btn-light{background:#ffd31a;color:#0f1a5c;border-color:#ffd31a}
