/*
Theme Name: WD Canvas
Theme URI: https://weightmandigital.co.uk
Author: Weightman Digital
Description: Reusable base theme for fast client site builds. Gutenberg disabled, raw HTML pastes straight into the page content box, per-page JSON-LD schema field, shared premium CSS/JS chassis (fonts, scroll animation, review carousel, bento gallery, contact form styling). Re-skin per client by editing the CSS variables below.
Version: 121.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wd-canvas
*/

/* ============================================================
   SELF-HOSTED FONTS — Montserrat only, latin subset
   (this theme's sites are English/French only, no need for the
   Cyrillic/Greek/Vietnamese subsets Google's own CSS ships by default).
   Downloaded once into /fonts, served from this site instead of pulling
   live from Google's CDN: removes an external request, and sidesteps the
   2022 Munich court ruling on Google Fonts + GDPR (loading fonts live
   sends visitor IPs to Google without consent). If you swap fonts for a
   client with existing branding, self-host that pairing the same way
   rather than reaching for Google's live CDN again. (Inter and Playfair
   Display were this theme's earlier default pairing, before No Sweat
   Builds moved to Montserrat, removed 11 Aug 2026 since nothing on the
   live site referenced them, dead weight in the stylesheet.)
   ============================================================ */
/* Font files are cache-busted via ?v=. BUMP THIS every time montserrat-*.woff2 bytes change on disk, or browsers keep serving stale cached font files forever since these URLs have no other versioning. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/montserrat-400.woff2?v=fix1') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/montserrat-500.woff2?v=fix1') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/montserrat-600.woff2?v=fix1') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/montserrat-700.woff2?v=fix1') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/montserrat-800.woff2?v=fix1') format('woff2'); }

/* ============================================================
   PER-CLIENT SETTINGS — the handful of things to change per site.
   Everything else below is structural and shouldn't need touching.
   ============================================================ */
:root {
  /* New Light Sites palette, taken directly from the real logo (navy + sunrise orange) */
  --brand: #1a2540;        /* primary brand colour */
  --brand-dark: #0d1424;   /* darker shade, hovers */
  --accent: #f5a623;       /* secondary accent colour */
  --accent-light: #f8c374;
  --paper: #f7f8fa;        /* page background */
  --cream: #ffffff;        /* card background */
  --ink: #1a2332;          /* body text */
  --muted: #5b6472;        /* secondary text */
  --shadow: 0 20px 50px rgba(26,37,64,0.14);
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;  /* headings */
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* body */
}

/* ============================================================
   RESET / BASE
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.65; overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, .wordmark { font-family: var(--font-display); }
h1, h2, h3, .pull-quote { text-wrap: balance; }
.wrap { max-width: 1360px; margin: 0 auto; padding: 0 32px; }
section { padding: 90px 0; }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 700; margin-bottom: 10px; color: var(--ink); }
.eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; font-weight: 700; color: var(--accent); margin-bottom: 12px; display: block; }
.section-head { max-width: 760px; margin-bottom: 44px; }
.section-head p { color: var(--muted); font-size: 1.05rem; margin-top: 14px; }

/* scroll-reveal, add class="reveal" (optionally reveal-delay-1/2/3) to any element */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(.2,.7,.3,1), transform 0.8s cubic-bezier(.2,.7,.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1.is-visible { transition-delay: 0.1s; }
.reveal-delay-2.is-visible { transition-delay: 0.2s; }
.reveal-delay-3.is-visible { transition-delay: 0.3s; }

/* ============================================================
   ANNOUNCEMENT BAR (optional, above the header)
   ============================================================ */
.announce-bar { background: var(--accent); }
.announce-bar a { display: block; color: var(--ink); font-weight: 700; font-size: 0.9rem; padding: 11px 32px; text-decoration: none; letter-spacing: 0.01em; }
.announce-bar:hover a { background: var(--accent-light); }

/* ============================================================
   MARQUEE BAR (scrolling ticker, alternative to the static
   announcement bar, above the header)
   ============================================================ */
.marquee-bar { background: var(--accent); overflow: hidden; }
.marquee-track { display: flex; width: max-content; text-decoration: none; animation: wdc-marquee 104s linear infinite; }
.marquee-bar:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.marquee-group span { display: inline-block; padding: 12px 36px; color: var(--ink); font-weight: 700; font-size: 0.88rem; white-space: nowrap; border-right: 1px solid rgba(26,35,50,0.18); }
/* 5 real copies, not just one duplicate. Same scroll speed as a simple
   2-copy loop (26s per copy-width travelled), but it scrolls through 4 of
   the 5 copies before it has to snap back to the start, so that one reset
   moment happens a quarter as often, not on every single pass. */
@keyframes wdc-marquee { from { transform: translateX(0); } to { transform: translateX(-80%); } }

/* ============================================================
   HEADER
   ============================================================ */
.site-header { background: rgba(247,248,250,0.92); backdrop-filter: blur(8px); padding: 16px 0; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(26,37,64,0.12); }
.site-header .wrap { display: flex; justify-content: space-between; align-items: center; }
.wordmark { font-size: 1.35rem; font-weight: 700; color: var(--brand); line-height: 1.1; text-decoration: none; display: flex; flex-direction: column; align-items: flex-start; }
.wordmark span { display: block; font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-top: 4px; }
/* 52px, not 44px: this theme's lockups carry a small strapline under the
   wordmark, and at 44px that line drops below the point where it reads as
   text at all. Sized against the nav's cap height so the two still balance. */
.wordmark-logo { max-height: 52px; width: auto; display: block; }
@media (max-width: 640px) { .wordmark-logo { max-height: 40px; } }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a.nav-link { font-size: 0.92rem; font-weight: 500; text-decoration: none; }
.main-nav a.nav-link:hover { color: var(--brand); }
.call-btn { background: var(--brand); color: #fff; font-weight: 600; padding: 11px 22px; border-radius: 30px; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 20px rgba(26,37,64,0.25); transition: background 0.2s ease, transform 0.2s ease; }
.call-btn:hover { background: var(--brand-dark); transform: translateY(-1px); }
.lang-toggle { background: transparent; border: 1.5px solid rgba(26,35,50,0.25); color: var(--ink); font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; padding: 9px 16px; border-radius: 30px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; white-space: nowrap; }
.lang-toggle:hover { border-color: var(--brand); background: rgba(26,37,64,0.06); }

/* ============================================================
   HERO SPLIT (full-width, two purposeful halves, replaces the old
   full-bleed-photo-with-gradient-fade hero: that left text floating
   over a fading background instead of properly composed against it)
   ============================================================ */
.hero-split { display: flex; height: 600px; padding: 0; background: var(--brand); }
.hero-split-text { flex: 0.94 1 0; height: 600px; box-sizing: border-box; min-width: 320px; display: flex; flex-direction: column; justify-content: center; padding: 0 24px 0 6vw; }
.hero-split-text .hero-eyebrow { color: var(--accent-light); }
.hero-split-text h1 { font-size: clamp(2.2rem, 3.6vw, 3.3rem); font-weight: 800; line-height: 1.12; color: #fff; margin-bottom: 20px; }
.hero-split-text h1 em { font-style: normal; color: var(--accent-light); }
.hero-split-text p.tag { color: rgba(255,255,255,0.85); font-size: 1.1rem; max-width: 100%; margin-bottom: 32px; }
.hero-split-text .cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-split-text .btn-ghost { border-color: rgba(255,255,255,0.4); color: #fff; }
.hero-split-text .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
.hero-split-image { flex: 1.06 1 0; height: 600px; overflow: hidden; }
.hero-split-image img { width: 100%; height: 600px; margin: 0; display: block; object-fit: cover; }
@media (max-width: 900px) {
  .hero-split { flex-direction: column; height: auto; }
  .hero-split-text { flex: none; height: auto; padding: 50px 24px; }
  .hero-split-image { order: -1; flex: none; height: 260px; }
  .hero-split-image img { height: 260px; }
}

/* ============================================================
   HERO (asymmetric, two-column) — still available for subpages
   that want the boxed style rather than a full-bleed banner.
   ============================================================ */
.hero { padding: 64px 0 100px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8rem; font-weight: 700; color: var(--accent); margin-bottom: 18px; }
.hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.8rem); font-weight: 800; line-height: 1.08; color: var(--ink); margin-bottom: 22px; }
.hero h1 em { font-style: italic; color: var(--brand); }
.hero p.tag { font-size: 1.15rem; color: var(--muted); max-width: 480px; margin-bottom: 34px; }
.hero .cta { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-primary { background: var(--brand); color: #fff; font-weight: 600; padding: 16px 32px; border-radius: 30px; text-decoration: none; font-family: var(--font-body); transition: background 0.2s ease, transform 0.2s ease; box-shadow: 0 10px 24px rgba(26,37,64,0.3); display: inline-block; }
.btn-primary:hover { background: var(--brand-dark); transform: translateY(-2px); }
.btn-ghost { border: 1.5px solid rgba(26,35,50,0.25); color: var(--ink); padding: 16px 32px; border-radius: 30px; text-decoration: none; font-family: var(--font-body); font-weight: 600; transition: border-color 0.2s ease, background 0.2s ease; display: inline-block; }
.btn-ghost:hover { border-color: var(--brand); background: rgba(26,37,64,0.05); }
.hero-visual { position: relative; }
.hero-visual .blob { position: absolute; top: -28px; right: -28px; width: 92%; height: 92%; background: linear-gradient(135deg, var(--accent-light), var(--accent)); border-radius: 24px; z-index: 0; }
.hero-visual img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow); }
.rating-float { position: absolute; z-index: 2; left: -24px; bottom: 32px; background: var(--cream); border-radius: 16px; padding: 16px 22px; box-shadow: 0 16px 34px rgba(26,35,50,0.22); display: flex; align-items: center; gap: 12px; }
.rating-float .num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--brand); line-height: 1; }
.rating-float .stars { color: var(--accent); font-size: 0.9rem; letter-spacing: 1px; }
.rating-float .label { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

/* ============================================================
   PAGE HEAD (solid brand colour banner for non-homepage pages, text
   anchored left against a real page-width measure, not centred over
   a fading photo, matches the hero-split treatment)
   ============================================================ */
.page-head { background: var(--brand); padding: 70px 0; }
.page-head .hero-eyebrow { color: var(--accent-light); }
.page-head h1 { font-size: clamp(2.1rem, 3.4vw, 2.9rem); font-weight: 800; line-height: 1.15; color: #fff; margin-bottom: 14px; max-width: 700px; }
.page-head p.tag { max-width: 620px; font-size: 1.1rem; color: rgba(255,255,255,0.85); }

/* ============================================================
   FAQ (plain, no JS accordion, always crawlable/visible)
   ============================================================ */
.faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; }
.faq-item { border-bottom: 1px solid rgba(26,37,64,0.12); padding: 26px 0; }
.faq-item h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--brand); margin-bottom: 10px; }
.faq-item p { color: var(--muted); font-size: 0.98rem; }
@media (max-width: 800px) { .faq-list { grid-template-columns: 1fr; } }

/* ============================================================
   COMPARE (simple side-by-side comparison cards, pricing page)
   ============================================================ */
.compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; }
.compare-card { background: var(--cream); border-radius: 16px; padding: 30px 26px; box-shadow: var(--shadow); }
.compare-card.highlight { background: var(--brand); color: #fff; transform: scale(1.03); }
.compare-card h3 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 8px; }
.compare-card.highlight h3 { color: var(--accent-light); }
.compare-card .price { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; margin-bottom: 14px; }
.compare-card ul { list-style: none; padding: 0; }
.compare-card li { padding: 7px 0; font-size: 0.95rem; }
.compare-card:not(.highlight) p, .compare-card:not(.highlight) li { color: var(--muted); }
.compare-card.highlight p, .compare-card.highlight li { color: rgba(255,255,255,0.9); }
@media (max-width: 900px) {
  .compare-grid { grid-template-columns: 1fr; }
  .compare-card.highlight { transform: none; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about { background: var(--cream); }
.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.about p { color: var(--muted); font-size: 1.05rem; margin-top: 16px; }
.about-photo-wrap { position: relative; }
.about-photo-wrap::before { content: ""; position: absolute; top: 20px; left: -20px; width: 100%; height: 100%; border: 3px solid var(--accent); border-radius: 16px; z-index: 0; }
.about-photo { position: relative; z-index: 1; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 16px; box-shadow: var(--shadow); }
.stat-row { display: flex; gap: 40px; margin-top: 30px; flex-wrap: wrap; }
.stat b { font-family: var(--font-display); font-size: 1.9rem; color: var(--brand); display: block; }
.stat span { font-size: 0.85rem; color: var(--muted); }

/* ============================================================
   STEPS ("how it works" numbered process)
   ============================================================ */
.steps { background: var(--paper); }

/* Connected timeline row (numbered badges + a line running through them),
   sits above the card grid on desktop. Replaces four identical, disconnected
   boxes with a real sense of sequence. Falls back to a plain in-card number
   on mobile, where a horizontal line across stacked cards makes no sense. */
.steps-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 50px; }
.steps-track::before { content: ""; position: absolute; top: 50%; left: 12.5%; right: 12.5%; height: 2px; background: rgba(26,37,64,0.15); transform: translateY(-50%); }
.step-node { display: flex; justify-content: center; }
.step-badge { width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: var(--accent-light); font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px rgba(26,37,64,0.3); border: 4px solid var(--paper); }

.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 18px; }
.step-card { background: var(--cream); border-radius: 16px; padding: 30px 26px; box-shadow: var(--shadow); position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.step-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px rgba(26,37,64,0.2); }
.step-card .step-num { display: none; }
.step-card h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.step-card p { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 900px) {
  .steps-track { display: none; }
  .steps-grid { grid-template-columns: 1fr; margin-top: 24px; }
  .step-card .step-num { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--accent); line-height: 1; margin-bottom: 12px; }
}

/* ============================================================
   SERVICES GRID (what's included, broken into real components)
   ============================================================ */
.services { background: var(--cream); }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; }
.service-card { background: var(--paper); border-radius: 16px; padding: 32px 28px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.service-card .ico { width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: var(--accent-light); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 20px; box-shadow: 0 10px 22px rgba(26,37,64,0.28); }
.service-card .ico svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.service-card p { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 900px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .services-grid { grid-template-columns: 1fr; } }

/* ============================================================
   TAG CLOUD ("loved for" / feature chips)
   ============================================================ */
/**
 * Deliberately no blanket text-align here any more. This class got reused as a
 * generic section wrapper for a lot more than tag clouds (FAQ lists, service
 * descriptions), and a blanket center-align was silently centering body text
 * and FAQ answers sitewide, which reads badly for anything longer than a
 * short chip or headline. Centre only the specific things that should be
 * centred (section-head intros, the tag cloud itself), explicitly, below.
 */
.loved-for { background: var(--paper); }
.loved-for .section-head { margin-left: auto; margin-right: auto; text-align: center; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; text-align: center; }
.tag-chip { background: var(--cream); border: 1px solid rgba(26,37,64,0.18); color: var(--brand); font-weight: 600; font-size: 0.95rem; padding: 11px 22px; border-radius: 30px; transition: transform 0.2s ease, background 0.2s ease; }
.tag-chip:hover { transform: translateY(-3px); background: var(--brand); color: #fff; }
.tag-note { margin-top: 24px; font-size: 0.85rem; color: var(--muted); font-style: italic; text-align: center; }
.faq-list { text-align: left; }

/* ============================================================
   BENTO GALLERY
   ============================================================ */
.gallery { background: var(--cream); }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 260px 260px; gap: 18px; margin-top: 20px; }
.bento a { grid-column: span 2; position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 30px rgba(26,35,50,0.14); }
.bento a:first-child { grid-row: span 2; grid-column: span 2; }
.bento img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.bento a:hover img { transform: scale(1.06); }
.bento .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 18px 16px; background: linear-gradient(0deg, rgba(20,15,10,0.78) 0%, rgba(20,15,10,0) 100%); color: #fff; }
.bento .cap b { font-family: var(--font-display); font-size: 1.15rem; display: block; }
.bento .cap span { font-size: 0.85rem; opacity: 0.85; }

/* ============================================================
   REVIEWS (pull-quote + carousel)
   ============================================================ */
.reviews { background: var(--brand); color: #fff; overflow: hidden; }
.reviews h2, .reviews .eyebrow { color: #fff; }
.reviews .eyebrow { color: var(--accent-light); }
.reviews .section-head p { color: rgba(255,255,255,0.75); }
.pull-quote { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; line-height: 1.4; max-width: 780px; margin-bottom: 50px; }
.pull-quote span { color: var(--accent-light); }
.pull-quote .who { display: block; font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: rgba(255,255,255,0.7); margin-top: 16px; }
.carousel-wrap { position: relative; }
.carousel { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.review-card { scroll-snap-align: start; flex: 0 0 320px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 26px 24px; backdrop-filter: blur(4px); }
.review-card .stars { color: var(--accent-light); font-size: 0.95rem; margin-bottom: 12px; letter-spacing: 2px; }
.review-card p.quote { font-size: 1rem; margin-bottom: 16px; color: #fff; }
.review-card .who { font-size: 0.85rem; color: rgba(255,255,255,0.65); font-weight: 500; }
.carousel-controls { display: flex; gap: 12px; margin-top: 28px; }
.carousel-btn { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 1.1rem; cursor: pointer; transition: background 0.2s ease; }
.carousel-btn:hover { background: rgba(255,255,255,0.22); }

/* ============================================================
   BLOG CAROUSEL (reuses the .carousel scroll-snap mechanics from
   the reviews carousel, different card design for blog previews)
   ============================================================ */
.blog-section { background: var(--cream); }
.blog-carousel { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none; }
.blog-carousel::-webkit-scrollbar { display: none; }
.blog-card { scroll-snap-align: start; flex: 0 0 340px; background: var(--paper); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit; display: block; transition: transform 0.25s ease; }
.blog-card:hover { transform: translateY(-5px); }
/* WordPress core injects "html :where(img[class*=wp-image-]) { height: auto; }"
   on every page automatically, that class gets added to every image inserted
   via the media library. It never conflicted with this rule by specificity,
   it just quietly applied alongside it, because this rule never explicitly
   set height itself, only implied one via aspect-ratio. Explicit height in
   pixels, with !important, removes any ambiguity about which wins. */
.blog-card .blog-card-img { width: 100% !important; height: 230px !important; object-fit: cover; display: block; }
.blog-card .blog-card-body { padding: 22px 22px 26px; }
.blog-card .blog-card-cat { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 8px; display: block; }
.blog-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; line-height: 1.3; }
.blog-card p { color: var(--muted); font-size: 0.92rem; }
.blog-section .carousel-controls { margin-top: 24px; }
.blog-section .carousel-btn { background: var(--brand); color: #fff; border: none; }
.blog-section .carousel-btn:hover { background: var(--brand-dark); }

/* Static grid version for the full blog index (as opposed to the
   scrolling carousel used as a homepage teaser), same card design. */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-grid .blog-card { flex: none; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
.pagination { display: flex; gap: 10px; justify-content: center; }
.pagination a, .pagination span { padding: 10px 16px; border-radius: 8px; background: var(--cream); color: var(--brand); text-decoration: none; font-weight: 600; }
.pagination .current { background: var(--brand); color: #fff; }

/* ============================================================
   CTA BANNER
   ============================================================ */
/* Blog post banner image: capped at roughly two-thirds of the viewport height,
   not tied purely to page width via aspect-ratio, that let it grow taller than
   the screen itself on wide monitors since a 21:9 ratio at full page width can
   exceed most viewport heights outright. min() caps it at whichever constraint
   is smaller, viewport height or the 21:9 ratio, so narrow screens still get a
   sensible strip instead of a needlessly tall one. */
.post-hero { width: 100%; height: min(66vh, calc(100vw * 9 / 21)); overflow: hidden; background: var(--brand); }
@media (max-width: 640px) {
  .post-hero { height: 42vh; }
}
.cta-banner { background: var(--accent); text-align: center; padding: 64px 0; }
.cta-banner h2 { color: var(--ink); margin-bottom: 12px; }
.cta-banner p { color: rgba(26,35,50,0.75); margin-bottom: 28px; font-size: 1.05rem; }
.cta-banner .btn-primary { background: var(--ink); box-shadow: 0 10px 24px rgba(0,0,0,0.2); }
.cta-banner .btn-primary:hover { background: #000; }

/* ============================================================
   CONTACT (info card + form card)
   ============================================================ */
.contact-main { padding: 20px 0 90px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; align-items: start; }
.info-card { background: var(--cream); border-radius: 18px; padding: 34px 30px; box-shadow: var(--shadow); }
.info-card h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 18px; color: var(--brand); }
.info-row { display: flex; gap: 14px; margin-bottom: 18px; align-items: flex-start; }
.info-row .ico { width: 38px; height: 38px; border-radius: 50%; background: var(--paper); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; }
.info-row a.phone { color: var(--brand); font-weight: 700; text-decoration: none; }
.info-row .muted-note { font-size: 0.85rem; color: var(--muted); }

/* Icon-led feature list: used on Pricing's "What's Included" instead of pill/tag-chip
   buttons, each item is a small gradient icon box (matches .service-card's icon treatment
   at a smaller scale) plus a label, so each line "tells its own story" rather than reading
   as a clickable button that goes nowhere. */
.feature-list { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }
.feature-item { display: flex; align-items: center; gap: 16px; }
.feature-item .ico { width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: var(--accent-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 8px 18px rgba(26,37,64,0.24); }
.feature-item .ico svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.feature-item span { font-weight: 600; color: var(--ink); font-size: 1.02rem; }
.feature-list.grid-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px 40px; max-width: 920px; margin-left: auto; margin-right: auto; }
/* Map: a static image (or plain fallback card if no screenshot supplied yet) linking out to
   Google Maps for directions, instead of a live embedded iframe. Almost nobody actually pans/zooms
   an embedded map on a small business contact page, they want directions, a link does that better
   anyway (opens their own maps app on mobile) at zero iframe weight and no API key. */
.map-card { display: block; margin-top: 22px; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); text-decoration: none; position: relative; }
.map-card img { width: 100%; height: 220px; object-fit: cover; display: block; }
.map-card.no-image { height: 220px; background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.map-card .map-pin { font-size: 2rem; }
.map-card .map-label { font-family: var(--font-body); font-weight: 600; color: var(--brand); }
.map-card .map-cta { position: absolute; right: 14px; bottom: 14px; background: var(--brand); color: #fff; font-size: 0.85rem; font-weight: 600; padding: 8px 16px; border-radius: 30px; }
.map-card.no-image .map-cta { position: static; margin-top: 4px; }

/* Social: a plain "Follow us" link/button, not a live embedded feed. A live Facebook feed pulls in
   Facebook's own SDK regardless of who embeds it, real weight for something almost nobody scrolls
   through on a contact page. If a client genuinely wants live posts shown, that's a deliberate
   upgrade decision (a proper cached server-side pull), not the default. */
.social-link { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; background: var(--cream); border: 1px solid rgba(26,37,64,0.18); border-radius: 30px; padding: 12px 22px; text-decoration: none; color: var(--brand); font-weight: 600; box-shadow: var(--shadow); }
.social-link:hover { background: var(--brand); color: #fff; }
.form-card { background: var(--brand); color: #fff; border-radius: 18px; padding: 44px 38px; box-shadow: var(--shadow); }
.form-card h3 { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 8px; }
.form-card > p { color: rgba(255,255,255,0.75); margin-bottom: 30px; }

/* Plain HTML form fields (if not using Contact Form 7) */
.form-row { margin-bottom: 20px; }
.form-row label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; color: rgba(255,255,255,0.9); }
.form-row input, .form-row select, .form-row textarea { width: 100%; padding: 13px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; font-family: var(--font-body); font-size: 0.98rem; }
.form-row input::placeholder, .form-row textarea::placeholder { color: rgba(255,255,255,0.45); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--accent-light); background: rgba(255,255,255,0.14); }
.form-row select option { color: #000; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.submit-btn { background: var(--accent); color: #2b1c00; font-weight: 700; padding: 15px 34px; border-radius: 30px; border: none; font-size: 1rem; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; font-family: var(--font-body); }
.submit-btn:hover { background: var(--accent-light); transform: translateY(-2px); }
.form-note { margin-top: 16px; font-size: 0.82rem; color: rgba(255,255,255,0.6); }

/* Contact Form 7 restyle, so CF7's default markup matches the theme instead of looking bare */
.form-card .wpcf7-form p { margin-bottom: 20px; }
.form-card .wpcf7-form label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; color: rgba(255,255,255,0.9); }
.form-card .wpcf7-form-control { width: 100%; padding: 13px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; font-family: var(--font-body); font-size: 0.98rem; }
.form-card .wpcf7-form-control:focus { outline: none; border-color: var(--accent-light); background: rgba(255,255,255,0.14); }
.form-card select.wpcf7-form-control option { color: #000; }
.form-card .wpcf7-submit { background: var(--accent); color: #2b1c00; font-weight: 700; padding: 15px 34px; border-radius: 30px; border: none; font-size: 1rem; cursor: pointer; font-family: var(--font-body); }
.form-card .wpcf7-submit:hover { background: var(--accent-light); }
.form-card .wpcf7-not-valid-tip { color: var(--accent-light); font-size: 0.8rem; margin-top: 4px; }
.form-card .wpcf7-response-output { border-radius: 10px; margin-top: 20px; font-size: 0.9rem; }

/* ============================================================
   BLOG POST BODY (prose styling for single.php)
   ============================================================ */
.blog-post-body h2 { font-size: 1.6rem; font-weight: 700; margin: 40px 0 16px; color: var(--ink); }
.blog-post-body h3 { font-size: 1.25rem; font-weight: 700; margin: 30px 0 12px; color: var(--brand); }
.blog-post-body p { color: var(--muted); font-size: 1.05rem; line-height: 1.75; margin-bottom: 18px; }
.blog-post-body ul, .blog-post-body ol { color: var(--muted); font-size: 1.05rem; line-height: 1.75; margin: 0 0 18px 22px; }
.blog-post-body li { margin-bottom: 8px; }
.blog-post-body a { color: var(--brand); font-weight: 600; }
.blog-post-body strong { color: var(--ink); }

/* ============================================================
   FOOTER + STICKY CTA
   ============================================================ */
.site-footer { padding: 70px 0 0; font-size: 0.9rem; color: rgba(255,255,255,0.65); background: var(--brand); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,0.12); text-align: left; }
.footer-col h4 { font-family: var(--font-display); color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 18px; }
.footer-col p { line-height: 1.6; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer-col a:hover { color: var(--accent-light); }
/* The whitening filter is the fallback for sites that only supply one logo.
   A real dark-background variant (Customizer > Business Info) keeps its own
   colours, so `.is-dark-variant` opts out of the filter entirely. */
.footer-brand .wordmark-logo { max-height: 42px; margin-bottom: 14px; filter: brightness(0) invert(1); }
.footer-brand .wordmark-logo.is-dark-variant { filter: none; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 22px 0; font-size: 0.82rem; }
.footer-bottom .foot-links a { color: rgba(255,255,255,0.6); text-decoration: none; margin-right: 16px; }
.footer-bottom .foot-links a:hover { color: var(--accent-light); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } }
.sticky-enquire { position: fixed; right: 22px; bottom: 22px; z-index: 60; background: var(--brand); color: #fff; padding: 14px 22px; border-radius: 30px; text-decoration: none; font-weight: 600; font-size: 0.92rem; box-shadow: 0 14px 30px rgba(26,37,64,0.4); transition: transform 0.2s ease; }
.sticky-enquire:hover { transform: translateY(-3px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 420px; margin: 0 auto; }
  .about-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: 200px 200px 200px; }
  .bento a:first-child { grid-column: span 2; grid-row: span 1; }
  .main-nav a.nav-link { display: none; }
}
@media (max-width: 640px) {
  .hero h1 { font-size: 2rem; }
}