/*
Theme Name: North West Fitted Furniture
Theme URI: https://northwestfittedfurniture.co.uk
Author: North West Fitted Furniture
Author URI: https://northwestfittedfurniture.co.uk
Description: A fast, hand-coded, no-plugin-required WordPress theme for North West Fitted Furniture - bespoke fitted furniture, wardrobes, media walls and cabinetry across Manchester, Cheshire and the North West. Sticky responsive header with dropdown nav, full-cover homepage hero, data-driven furniture category pages, and a native contact form.
Version: 3.19.5
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: northwest-fitted-furniture
*/

/* -----------------------------------------
   1. Font faces (self-hosted, no external requests)
   v3.15: the fonts now load from the theme itself instead of Google Fonts.
   Both files are variable fonts, so one file covers every weight in use.
   The two upright files are preloaded in the <head> (see nwff_preload_fonts).
   Cinzel and Sacramento were being downloaded on every page but were not
   used anywhere, so they have gone.
----------------------------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-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: 'Mulish';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('assets/fonts/mulish-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: 'Mulish';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/mulish-italic-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;
}
/* Metric-matched fallbacks. While the real fonts download, text is drawn in
   Arial / Times New Roman resized to the same footprint, so nothing jumps when the
   web font swaps in (this is what keeps CLS near zero). */
@font-face { font-family: 'Mulish Fallback'; src: local('Arial'), local('Helvetica'); size-adjust: 104.3%; ascent-override: 96.3%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: 'Cormorant Fallback'; src: local('Times New Roman'), local('Times'); size-adjust: 98.3%; ascent-override: 94%; descent-override: 29.2%; line-gap-override: 0%; }
/* -----------------------------------------
   2. Design tokens
----------------------------------------- */
:root {
  /* Brand palette - taken from the logo: soft sage (#CBDDD1) + charcoal (#272727),
     plus light and dark shades of each for readable section contrast. */
  --char:#282420;        /* charcoal-green: header, footer, dark sections */
  --char-2:#34302A;      /* lifted dark panel */
  --wood:#302C26;        /* deep sage-charcoal: stat band / depth sections */
  --wood-deep:#201D18;   /* deepest shade */
  --sage:#7F926A;        /* mid sage */
  --sage-2:#A6BE8C;      /* light sage - accents on dark backgrounds */
  --sage-deep:#435A39;   /* deep sage - primary buttons, links, strong accents */
  --cream:#EFF4ED;       /* primary light background (soft sage tint) */
  --cream-2:#E1EBDF;     /* secondary light / cards */
  --ink:#23282A;         /* charcoal body text on light */
  --ink-soft:#566059;    /* muted body text */
  --gold:#57713F;        /* REPURPOSED: deep green accent for LIGHT backgrounds (hover, arrows) */
  --gold-soft:#A6BE8C;   /* logo sage - light accent for DARK backgrounds */
  --leaf:#435A39;        /* deep green */
  --white:#FFFFFF;
  --line:rgba(38,48,43,0.14);
  /* Back-compat aliases so existing template CSS maps to the new palette */
  --navy:#282420; --navy-light:#34302A;
  --gold-dark:#55703E;   /* deep green - text accents on light */
  --cyan:#93A97C;
  --ivory:#EFF4ED; --slate:#23282A; --stone:#E1EBDF; --grey:#646D66;
  /* Typography - Cormorant Garamond for display headings, Mulish for everything else */
  --font-heading:'Cormorant Garamond', 'Cormorant Fallback', 'Times New Roman', serif;
  --font-body:'Mulish', 'Mulish Fallback', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 10px 30px rgba(20,17,14,0.18);
  --shadow-sm:0 4px 14px rgba(20,17,14,0.12);
  --content-width:1240px;
}

/* -----------------------------------------
   3. Reset & base
----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--slate);
  background: var(--white);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--slate);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* Type scale. The gap between h1 and h2 is deliberately wide: at the old
   4vw/3vw the two converged on mid-size screens and the page lost its
   hierarchy, especially where a short h2 sat on one wide line under a
   wrapped h1. */
h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
h2 { font-size: clamp(1.55rem, 2.6vw, 2.2rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
p { margin: 0 0 1.1em; }
.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 1000px) {
  .container { padding: 0 64px; }
}
/* Full-width desktop: containers span the viewport with comfortable gutters,
   instead of sitting in a centred 1240px column. */
@media (min-width: 1280px) {
  .container,
  .header-inner {
    max-width: 100%;
    padding-left: clamp(56px, 5vw, 140px);
    padding-right: clamp(56px, 5vw, 140px);
  }
}

/* -----------------------------------------
   4. Buttons
----------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 14px 30px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 0.98rem;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary {
  background: var(--sage-deep);
  color: var(--cream);
}
.btn-primary:hover { background: var(--gold); color:#fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-secondary {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.7);
}
.btn-secondary:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
.btn-outline-navy {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-outline-navy:hover { background: var(--navy); color: var(--white); }
.btn-block { width: 100%; justify-content: center; }

/* -----------------------------------------
   5. Site header / sticky nav
----------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--navy);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.home .site-header.header-transparent {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  box-shadow: none;
}
.home .site-header.header-transparent.is-scrolled {
  background: var(--navy);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
  max-width: var(--content-width);
  margin: 0 auto;
}
@media (min-width: 1000px) { .header-inner { padding: 14px 64px; } }

.site-branding { display: flex; align-items: center; gap: 12px; }
.site-branding img { height: 44px; width: auto; }
.site-branding .site-title {
  font-family: var(--font-heading);
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.primary-nav { display: none; }
@media (min-width: 900px) {
  .primary-nav {
    display: flex;
    align-items: center;
    gap: 30px;
  }
  .primary-nav a {
    color: var(--white);
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 0;
    position: relative;
  }
  .primary-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--cyan);
    transform: scaleX(0);
    transition: transform 0.2s ease;
  }
  .primary-nav a:hover::after,
  .primary-nav .current-menu-item a::after { transform: scaleX(1); }
}

.header-cta { display: flex; align-items: center; gap: 16px; }
.header-phone {
  display: none;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-weight: 600;
}
@media (min-width: 700px) { .header-phone { display: inline-flex; } }
.header-phone svg { width: 18px; height: 18px; fill: var(--gold); }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  width: 40px; height: 40px;
}
@media (min-width: 900px) { .menu-toggle { display: none; } }
.menu-toggle span, .menu-toggle::before, .menu-toggle::after { content: none; }
.menu-toggle .bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle.is-active .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  background: var(--navy-light);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.mobile-nav.is-open { display: block; }
.mobile-nav .container { padding: 12px 24px 20px; }
.mobile-nav a {
  display: block;
  color: var(--white);
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-weight: 500;
}
.mobile-nav .header-phone { display: flex; margin-top: 14px; color: var(--white); }
@media (min-width: 900px) { .mobile-nav { display: none !important; } }

/* -----------------------------------------
   6. Hero / full-cover header
----------------------------------------- */
.hero-cover {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: var(--white);
  background-size: cover;
  background-position: center;
  padding-top: 90px;
}
.hero-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,22,18,0.68) 0%, rgba(16,22,18,0.58) 45%, rgba(12,17,14,0.84) 100%);
}
.hero-cover .container { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; text-align: center; }
.hero-eyebrow {
  display: inline-block;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.82rem;
  margin-bottom: 18px;
}
.hero-cover h1 { color: var(--white); margin-bottom: 22px; font-weight: 300; font-size: clamp(2.3rem, 5vw, 4rem); letter-spacing: 0.01em; }
.hero-cover p.lead {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.94);
  max-width: 720px;
  margin: 0 auto 30px;
}
.hero-buttons { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

.page-hero {
  background: var(--navy);
  color: var(--white);
  padding: 150px 0 70px;
  text-align: center;
}
.page-hero h1 { color: var(--white); margin-bottom: 14px; }
.page-hero p { color: rgba(255,255,255,0.85); max-width: 640px; margin: 0 auto; font-size: 1.1rem; }

/* -----------------------------------------
   7. Sections & rhythm
----------------------------------------- */
.section { padding: 84px 0; }
.section-ivory { background: var(--ivory); }
.section-white { background: var(--white); }
.section-navy { background: var(--navy); color: var(--white); }
.section-navy h2, .section-navy h3 { color: var(--white); }
.section-header { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-header .eyebrow {
  display: inline-block;
  color: var(--gold-dark);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 12px;
}
.section-navy .section-header .eyebrow { color: var(--gold); }

/* -----------------------------------------
   8. Cards / grids
----------------------------------------- */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.card-body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { margin-bottom: 10px; }
.card-body p { color: var(--slate); font-size: 0.96rem; flex: 1; }
.card-link { margin-top: 12px; font-weight: 700; color: var(--gold-dark); font-size: 0.92rem; }

.pillar { text-align: center; padding: 8px; }
.pillar-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
}
.section-navy .pillar-icon { background: rgba(255,255,255,0.12); color: var(--gold); }

/* two column media/text row */
.split-row {
  display: grid;
  gap: 40px;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split-row { grid-template-columns: 1fr 1fr; gap: 60px; }
  .split-row.reverse .split-media { order: 2; }
}
.split-media img { border-radius: var(--radius); box-shadow: var(--shadow); }

/* icon list (used on Design page) */
.icon-list { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .icon-list { grid-template-columns: 1fr 1fr; } }
.icon-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--white);
  padding: 20px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.icon-list .num {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-family: var(--font-heading);
}
.icon-list h4 { margin: 0 0 4px; font-size: 1.05rem; }
.icon-list p { margin: 0; font-size: 0.92rem; color: var(--slate); }

/* FAQ accordion - pure HTML, no JS/plugin needed */
.faq { max-width: 800px; margin: 0 auto; }
.faq details {
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  margin-bottom: 14px;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--gold-dark);
  font-size: 1.4rem;
  font-weight: 400;
  margin-left: 12px;
}
.faq details[open] summary::after { content: "\2212"; }
.faq p { margin: 14px 0 0; color: var(--slate); }

/* gallery grid */
.gallery-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-grid a { display: block; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.gallery-grid img { aspect-ratio: 1/1; object-fit: cover; transition: transform 0.3s ease; }
.gallery-grid a:hover img { transform: scale(1.06); }

/* -----------------------------------------
   9. Contact / forms
----------------------------------------- */
.contact-wrap { display: grid; gap: 48px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-wrap { grid-template-columns: 0.85fr 1.15fr; } }
.contact-details { background: var(--navy); color: var(--white); border-radius: var(--radius); padding: 36px; }
.contact-details h3 { color: var(--white); }
.contact-details a { color: var(--white); font-weight: 600; }
.contact-details .detail-row { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.contact-details .detail-row svg { width: 20px; height: 20px; fill: var(--gold); flex: none; }
.hours-table { margin-top: 24px; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 20px; }
.hours-table div { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.92rem; color: rgba(255,255,255,0.85); }

.form-card { background: var(--ivory); border-radius: var(--radius); padding: 36px; }
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.92rem; color: var(--navy); }
.form-row input, .form-row textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--stone);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.98rem;
  background: var(--white);
}
.form-row input:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176,141,87,0.2);
}
.form-grid-2 { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }
.form-grid-2 .form-row { margin-bottom: 0; }
.form-honeypot { position: absolute; left: -9999px; top: -9999px; }
.form-message {
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  margin-bottom: 22px;
  font-weight: 600;
}
.form-message.success { background: #e4f3e7; color: #285c36; }
.form-message.error { background: #fbe6e4; color: #8a2f27; }

/* -----------------------------------------
   10. Blog (Guides)
----------------------------------------- */
.post-list { display: grid; gap: 32px; grid-template-columns: 1fr; margin-bottom: 40px; }
@media (min-width: 700px) { .post-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .post-list { grid-template-columns: repeat(3, 1fr); } }
.post-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.post-card img { aspect-ratio: 16/10; object-fit: cover; }
.post-card .card-body time { font-size: 0.8rem; color: var(--gold-dark); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.post-card h3 { margin: 8px 0 10px; font-size: 1.15rem; }
.single-post .entry-header { background: var(--navy); color: var(--white); padding: 150px 0 60px; text-align: center; }
.single-post .entry-header h1 { color: var(--white); max-width: 780px; margin: 0 auto 14px; }
.single-post .entry-content { max-width: 760px; margin: 56px auto; padding: 0 24px; }
.single-post .entry-content h2 { margin-top: 1.6em; }
.single-post .entry-content img { border-radius: var(--radius); margin: 24px 0; }
.single-post .entry-content p { font-size: 1.05rem; }

/* -----------------------------------------
   11. Footer
----------------------------------------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.85); padding: 64px 0 28px; }
.footer-grid { display: grid; gap: 40px; grid-template-columns: 1fr; margin-bottom: 40px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.site-footer h4 { color: var(--white); font-size: 1rem; margin-bottom: 16px; }
.site-footer a:hover { color: var(--gold); }
.footer-brand img { height: 40px; margin-bottom: 16px; }
.footer-brand p { font-size: 0.92rem; color: rgba(255,255,255,0.65); max-width: 340px; }
.footer-links li { margin-bottom: 10px; font-size: 0.94rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
}

/* -----------------------------------------
   12. Utilities
----------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.screen-reader-text {
  position: absolute !important;
  clip: rect(1px,1px,1px,1px);
  width: 1px; height: 1px; overflow: hidden;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--navy);
  padding: 12px 20px;
  z-index: 9999;
  font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Gallery item wrapper (figure) */
.gallery-item { margin: 0; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.gallery-item img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; transition: transform 0.3s ease; }
.gallery-item:hover img { transform: scale(1.06); }

/* Compact teal header buttons (Call / Email) - matches live site */
.btn-header {
  background: var(--gold);
  color: var(--white);
  padding: 9px 20px;
  font-size: 0.78rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.btn-header:hover { background: var(--gold-dark); }
.header-cta { display: flex; align-items: center; gap: 10px; }
@media (min-width: 900px) { .header-cta { flex-direction: column; gap: 8px; align-items: stretch; } .header-cta .btn-header { text-align:center; } }

/* Areas We Cover grid */
.areas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; max-width: 900px; margin: 0 auto; }
@media (min-width: 700px) { .areas-grid { grid-template-columns: repeat(3, 1fr); } }
.areas-grid li { border-bottom: 1px solid var(--stone); }
.areas-grid a { display: block; padding: 11px 4px; color: var(--slate); font-weight: 600; font-size: 0.95rem; transition: color 0.15s ease; }
.areas-grid a:hover { color: var(--gold); }

/* Footer areas strip */
.footer-areas { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 26px; padding-top: 22px; }
.footer-areas h4 { color: var(--white); margin-bottom: 8px; }
.footer-areas p { color: rgba(255,255,255,0.6); font-size: 0.9rem; max-width: 900px; }

/* Breadcrumbs */
.breadcrumbs { background: transparent; border-bottom: none; font-size: 0.85rem; }
.breadcrumbs .container { padding-top: 22px; padding-bottom: 0; }
.breadcrumbs a { color: var(--gold-dark); font-weight: 600; }
.breadcrumbs a:hover { color: var(--gold); }
.breadcrumbs .current { color: var(--slate); }
.breadcrumbs span[aria-hidden] { color: var(--grey); margin: 0 4px; }

/* Image stability (reduce layout shift / improve Core Web Vitals) */
.card img { aspect-ratio: 4 / 3; object-fit: cover; }
.split-media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.post-card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

/* Contact form consent */
.form-consent { margin: 4px 0 18px; }
.form-consent label { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--slate); }
.form-consent input { margin-top: 4px; flex: none; width: 18px; height: 18px; accent-color: var(--gold); }
.form-consent a { color: var(--gold-dark); font-weight: 600; text-decoration: underline; }

/* Footer legal links */
.footer-legal a { color: rgba(255,255,255,0.75); }
.footer-legal a:hover { color: var(--white); }

/* Cookie consent banner */
.cookie-banner {
	position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900;
	max-width: 760px; margin: 0 auto;
	background: var(--navy); color: var(--white);
	border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,0.3);
	padding: 20px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between;
}
/* The hidden attribute must win over display:flex, or Accept and Decline
   save the choice but the banner never closes (fixed 3.19.2). */
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; font-size: 0.92rem; color: rgba(255,255,255,0.9); flex: 1 1 320px; }
.cookie-banner a { color: var(--cyan); font-weight: 600; text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; }
.cookie-actions .btn { padding: 10px 22px; font-size: 0.85rem; }
.btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.6); }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); }

/* Accessibility: clear keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
	outline: 3px solid var(--gold-dark); outline-offset: 2px;
}
/* Dark sections need a light focus ring so it stays visible (WCAG 1.4.11, 3:1 minimum) */
.site-footer a:focus-visible, .site-footer button:focus-visible,
.cookie-banner a:focus-visible, .cookie-banner button:focus-visible,
.page-hero a:focus-visible, .page-hero button:focus-visible,
.section-navy a:focus-visible, .section-navy button:focus-visible,
.cta-band a:focus-visible, .cta-band button:focus-visible,
.stat-band a:focus-visible, .stat-band button:focus-visible,
.site-header a:focus-visible, .site-header button:focus-visible {
	outline-color: var(--gold-soft);
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* -----------------------------------------
   NWFF v2 - dropdown nav, prose links, extra components
----------------------------------------- */

/* Desktop primary menu layout + Our Furniture dropdown */
@media (min-width: 900px) {
  .primary-nav .primary-menu-list { display: flex; align-items: center; gap: 30px; }
  .primary-nav .primary-menu-list > li { position: relative; }
  .primary-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: -18px;
    min-width: 264px;
    background: var(--char-2);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 10px 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 60;
  }
  .primary-nav .menu-item-has-children:hover > .sub-menu,
  .primary-nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .primary-nav .sub-menu li { display: block; }
  .primary-nav .sub-menu a {
    display: block;
    padding: 9px 20px;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cream);
  }
  .primary-nav .sub-menu a::after { display: none; }
  .primary-nav .sub-menu a:hover { background: rgba(255,255,255,0.06); color: var(--gold-soft); }
  .primary-nav .menu-item-has-children > a::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    margin-left: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.75;
  }
}

/* Mobile nav: show sub-menu indented */
.mobile-nav .sub-menu { padding-left: 16px; margin: 4px 0 8px; }
.mobile-nav .sub-menu a { font-size: 0.95rem; opacity: 0.9; }

/* Prose / internal links: bold, no underline, colour change on hover */
.section p a, .section li a, .section td a,
.split-row p a, .lead a,
.entry-content a, .single-post .entry-content a,
.stat-band p a, .cta-band p a {
  color: var(--sage-deep);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.15s ease;
}
.section p a:hover, .section li a:hover, .section td a:hover,
.split-row p a:hover, .lead a:hover,
.entry-content a:hover, .single-post .entry-content a:hover,
.stat-band p a:hover, .cta-band p a:hover { color: var(--gold); text-decoration: none; }

/* Buttons and card links keep their own styling even inside prose */
.section p a.btn, .entry-content a.btn { color: inherit; font-weight: 600; }

/* Links on dark sections need a lighter accent */
.section-navy p a, .section-navy li a, .cta-band p a {
  color: var(--sage-2);
}
.section-navy p a:hover, .section-navy li a:hover, .cta-band p a:hover { color: var(--gold-soft); }

/* --- Extra layout components used across the rebuilt pages --- */

/* Eyebrow + section header spacing already exist; add stat band */
.stat-band { background: var(--wood); color: var(--cream); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; }
.stat-grid .stat b { display: block; font-family: var(--font-heading); font-size: 2.6rem; line-height: 1; color: var(--gold-soft); margin-bottom: 6px; }
.stat-grid .stat span { font-size: 0.98rem; color: var(--cream-2); }
@media (max-width: 800px) { .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }

/* Checklist with ticks */
.check-list { display: grid; gap: 14px; }
/* Two-column variant, used where a checklist stands alone without a paired image */
.check-list-2 { max-width: 960px; margin-inline: auto; }
@media (min-width: 760px) {
  .check-list-2 { grid-template-columns: 1fr 1fr; gap: 14px 40px; }
}
.check-list li { position: relative; padding-left: 38px; line-height: 1.55; }
.check-list li::before {
  content: "";
  position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sage-deep);
}
.check-list li::after {
  content: "";
  position: absolute; left: 8px; top: 8px;
  width: 6px; height: 11px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(42deg);
}
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; }
@media (max-width: 720px) { .check-grid { grid-template-columns: 1fr; } }

/* Numbered process steps */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.steps .step { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 22px 24px; }
.steps.on-cream .step { background: var(--white); }
.steps .step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-heading); font-size: 1.5rem; color: var(--gold);
  display: block; margin-bottom: 10px; font-weight: 700;
}
.steps .step h3 { font-size: 1.15rem; margin-bottom: 8px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* Feature tiles (gradient) for the furniture hub */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tile { position: relative; overflow: hidden; border-radius: var(--radius); min-height: 260px; display: flex; align-items: flex-end; color: #fff; box-shadow: var(--shadow-sm); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(12,17,14,0.92) 0%, rgba(12,17,14,0.55) 45%, rgba(12,17,14,0.22) 100%); }
.tile .tile-body { position: relative; z-index: 2; padding: 22px; width: 100%; }
.tile h3 { color: #fff; margin-bottom: 4px; font-size: 1.3rem; }
.tile p { color: rgba(255,255,255,0.9); margin-bottom: 10px; font-size: 0.95rem; }
.tile .tile-link { color: var(--gold-soft); font-weight: 700; }
.tile:hover img { transform: scale(1.05); transition: transform 0.5s ease; }
@media (max-width: 860px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } }

/* Testimonial cards */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.review .stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 10px; }
.review p { font-style: italic; color: var(--ink); }
.review .who { font-style: normal; font-weight: 700; color: var(--ink-soft); font-size: 0.95rem; margin-top: 10px; }
@media (max-width: 860px) { .reviews { grid-template-columns: 1fr; } }

/* CTA band */
.cta-band { background: var(--sage-deep); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.92); max-width: 720px; margin: 0 auto 22px; }
.cta-band .btn-primary { background: var(--gold); }
.cta-band .btn-primary:hover { background: var(--gold-soft); color: var(--wood-deep); }

/* Pill list for benefits */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.benefit { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.benefit h3 { font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
.benefit h3::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--sage-deep); display: inline-block; }
@media (max-width: 860px) { .benefit-grid { grid-template-columns: 1fr; } }

/* Category page hero with background image */
.page-hero-image { background-size: cover; background-position: center; color: #fff; padding: 96px 0 72px; }
/* 15ch squeezed the h1 into a narrow ribbon that wrapped over four or five
   lines, so a single-line h2 further down the page read as the bigger
   heading even though it was 14px smaller. 28ch keeps the measure
   comfortable while letting the h1 hold the top of the page. */
.page-hero-image h1 { color: #fff; max-width: 28ch; }
.page-hero-image .lead { color: rgba(255,255,255,0.92); max-width: 62ch; }
.page-hero-image .hero-eyebrow { color: var(--gold-soft); }

/* Note callout */
.note-callout { background: var(--cream-2); border-left: 5px solid var(--sage-deep); border-radius: var(--radius); padding: 30px 34px; }
.note-callout h2 { margin-bottom: 10px; }
.note-callout p { margin: 0; font-size: 1.08rem; }
.section-ivory .note-callout { background: #fff; }

/* Data / comparison table */
.table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.data-table { width: 100%; border-collapse: collapse; background: #fff; min-width: 560px; }
.data-table th, .data-table td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table thead th { background: var(--char); color: #fff; font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.02em; }
.data-table tbody tr:nth-child(even) { background: var(--cream); }
.data-table td:first-child { font-weight: 700; color: var(--ink); }

/* Related links strip */
.related-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related-link { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; color: var(--ink); transition: border-color 0.15s ease, transform 0.15s ease; }
.related-link:hover { border-color: var(--sage-deep); transform: translateY(-2px); color: var(--sage-deep); }
.related-link span { color: var(--gold); }
.section-ivory .related-link { background: #fff; }
@media (max-width: 760px) { .related-links { grid-template-columns: 1fr; } }

/* Home tile CTA variant */
.tile-cta { min-height: 260px; }
.tile-cta .tile-body { display: flex; flex-direction: column; justify-content: center; height: 100%; }

/* Post table of contents (closed accordion) */
.post-toc { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 22px; margin: 0 0 30px; }
.post-toc summary { cursor: pointer; font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; padding: 14px 0; list-style: none; }
.post-toc summary::-webkit-details-marker { display: none; }
.post-toc summary::after { content: "+"; float: right; color: var(--sage-deep); font-size: 1.3rem; line-height: 1; }
.post-toc[open] summary::after { content: "\2212"; }
.post-toc ol { margin: 0 0 16px 0; padding-left: 20px; }
.post-toc li { margin: 7px 0; }
.post-toc a { color: var(--sage-deep); font-weight: 600; }
.post-toc a:hover { color: var(--gold); }

/* -----------------------------------------
   v3 - sage & charcoal scheme: contrast overrides
   (ensures accents are light on dark sections, dark on light sections)
----------------------------------------- */

/* Accents that sit on DARK backgrounds -> light sage */
.hero-eyebrow { color: var(--gold-soft); }
.header-phone svg { fill: var(--sage-2); }
.section-navy .section-header .eyebrow { color: var(--gold-soft); }
.site-footer a:hover { color: var(--gold-soft); }
.stat-band p a:hover, .cta-band p a:hover { color: var(--gold-soft); }

/* Header Call/Email buttons on the dark header */
.btn-header { background: var(--sage-deep); color: #fff; }
.btn-header:hover { background: var(--sage-2); color: var(--navy); }

/* Primary buttons: deep sage, darken on hover (white text stays readable) */
.btn-primary { background: var(--sage-deep); color: #fff; }
.btn-primary:hover { background: var(--gold-dark); color: #fff; box-shadow: var(--shadow-sm); }

/* Pillar number badges: deep-green circle + white number on light sections;
   translucent light circle + light-sage number on dark sections */
.pillar-icon { background: var(--sage-deep); color: #fff; }
.section-navy .pillar-icon { background: rgba(255,255,255,0.14); color: var(--gold-soft); }

/* CTA band: light-sage button with dark text so it pops on the deep-sage band */
.cta-band .btn-primary { background: var(--gold-soft); color: var(--ink); }
.cta-band .btn-primary:hover { background: #fff; color: var(--navy); }

/* Form focus ring in brand green */
.form-row input:focus, .form-row textarea:focus { border-color: var(--sage-deep); box-shadow: 0 0 0 3px rgba(78,107,87,0.22); }

/* Review stars in brand green (kept readable on white cards) */
.review .stars { color: var(--sage-deep); }

/* -----------------------------------------
   v3.1 - hero legibility, varied layouts, bold links
----------------------------------------- */
/* Lift all hero text off the image */
.hero-cover .hero-eyebrow, .hero-cover h1, .hero-cover .lead,
.page-hero-image .hero-eyebrow, .page-hero-image h1, .page-hero-image .lead {
  text-shadow: 0 1px 14px rgba(0,0,0,0.42);
}
.hero-cover .hero-eyebrow, .page-hero-image .hero-eyebrow { color: var(--sage-2); }

/* Two-column linked list (used for "Which rooms benefit" split) */
.room-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; margin: 4px 0 4px; }
.room-list li { border-bottom: 1px solid var(--line); }
.room-list a { display: block; padding: 12px 4px 12px 22px; position: relative; font-weight: 700; color: var(--sage-deep); }
.room-list a::before { content: ""; position: absolute; left: 2px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--sage-deep); border-bottom: 2px solid var(--sage-deep); transform: translateY(-60%) rotate(-45deg); }
.room-list a:hover { color: var(--gold); }
@media (max-width: 640px) { .room-list { grid-template-columns: 1fr; } }

/* Ensure every inline/content link is bold (Koray internal linking) */
.section a:not(.btn):not(.card-link):not(.tile-link):not(.related-link),
.entry-content a, .lead a { font-weight: 700; }
.related-link { font-weight: 700; }
.check-list strong { color: var(--ink); font-weight: 700; }

/* Contact block: give it its own band so it differs from the FAQ (ivory) above
   and the dark footer below; make the form card white so it stands out. */
#contact.section { background: #ffffff; } /* booking/CTA form band - white */
/* If the contact band directly follows a white section, tint it ivory so two
   white bands never sit side by side. When it follows an ivory/navy/sage
   section (e.g. the homepage FAQ) it stays white. */
.section-white + #contact.section { background: #eff4ed; }
/* FAQ sections follow each template's normal white/ivory alternation so they
   never collide with neighbouring sections. The homepage FAQ carries an
   explicit .section-ivory class where a sage band is wanted. */
#contact .form-card { background: var(--white); box-shadow: var(--shadow-sm); }

/* ==========================================================
   v3.2 - Contact block + footer redesign (matches WOW Wardrobes)
   ========================================================== */

/* Contact block: charcoal card; details column is top-aligned & compact
   so there is no empty space below the opening hours; light form card. */
.contact-wrap {
  position: relative; display: grid; grid-template-columns: 1fr; gap: 28px;
  max-width: 1120px; margin: 0 auto; padding: 28px;
  background: var(--navy); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px; box-shadow: 0 16px 42px rgba(16,22,18,0.20); align-items: start;
}
.contact-details { position: relative; padding: 6px 4px; background: transparent; border-radius: 0; box-shadow: none; align-self: start; }
.contact-details::before { content: ""; display: block; width: 48px; height: 3px; margin: 0 0 22px; background: var(--sage-2); border-radius: 999px; }
.contact-details h3 { margin-bottom: 8px; font-size: 1.45rem; color: var(--white); }
.contact-details > p { max-width: 34ch; margin-bottom: 22px; color: rgba(255,255,255,0.78); line-height: 1.65; }
.contact-details .detail-row { gap: 13px; margin-bottom: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.12); align-items: center; }
.contact-details .detail-row:last-of-type { border-bottom: 0; }
.contact-details .detail-row svg { width: 19px; height: 19px; fill: var(--sage-2); }
.contact-details .detail-row a { color: var(--white); font-weight: 700; }
.contact-details .detail-row a:hover, .contact-details .detail-row a:focus-visible { color: var(--sage-2); }
.contact-details .hours-table { margin-top: 20px; padding-top: 10px; border-top: 0; }
.contact-details .hours-table::before { content: "Opening hours"; display: block; margin-bottom: 10px; color: var(--sage-2); font-family: var(--font-heading); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.contact-details .hours-table div { padding: 7px 0; color: rgba(255,255,255,0.78); }
.contact-details .hours-table div span:last-child { color: var(--white); font-weight: 700; }
.form-card { padding: 34px; background: var(--white); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,0.16); }
@media (min-width: 900px) {
  .contact-wrap { grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr); gap: 34px; padding: 34px; }
  .contact-details { align-self: start; }
}

/* Footer v2: centred intro + three columns (Quick Links / Get In Touch / Opening Hours) */
.site-footer.footer-v2 { background: var(--navy); color: rgba(255,255,255,0.78); padding: 58px 0 28px; }
.footer-v2 .footer-v2-intro { max-width: 760px; margin: 0 auto 46px; text-align: center; }
.footer-v2 .footer-v2-logo { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.footer-v2 .footer-v2-logo img { display: block; width: auto; height: 54px; max-width: 260px; }
.footer-v2 .footer-tagline { margin: 0 0 8px; color: var(--sage-2); font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; line-height: 1.4; }
.footer-v2 .footer-v2-description { max-width: 690px; margin: 0 auto; color: rgba(255,255,255,0.72); font-size: 0.95rem; line-height: 1.75; }
.footer-v2 .footer-v2-grid { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 980px; margin: 0 auto; padding: 34px 0 36px; border-top: 1px solid rgba(255,255,255,0.14); border-bottom: 1px solid rgba(255,255,255,0.14); }
.footer-v2 .footer-v2-column { text-align: center; }
.footer-v2 h4, .footer-v2 .footer-areas h4 { margin: 0 0 16px; color: var(--white); font-family: var(--font-heading); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.11em; line-height: 1.25; text-transform: uppercase; }
.footer-v2 a { text-decoration: none; transition: color 0.18s ease; }
.footer-v2 a:hover, .footer-v2 a:focus-visible { color: var(--sage-2); text-decoration: none; }
.footer-v2 .footer-links { margin: 0; padding: 0; }
.footer-v2 .footer-links li { margin-bottom: 9px; color: rgba(255,255,255,0.72); font-size: 0.94rem; line-height: 1.45; }
.footer-v2 .footer-links a { color: rgba(255,255,255,0.82); font-weight: 600; }
.footer-v2 .footer-contact-links li { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.footer-v2 .footer-contact-links li > span { color: rgba(255,255,255,0.55); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.footer-v2 .footer-contact-links a { color: var(--white); font-weight: 700; }
.footer-v2 .footer-contact-links .footer-whatsapp-link { display: inline-block; margin-top: 5px; color: var(--sage-2); }
.footer-v2 .footer-hours { max-width: 250px; margin: 0 auto; padding: 0; }
.footer-v2 .footer-hours li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.10); color: rgba(255,255,255,0.74); font-size: 0.91rem; line-height: 1.4; }
.footer-v2 .footer-hours li:last-child { border-bottom: 0; }
.footer-v2 .footer-hours li span:last-child { color: var(--white); font-weight: 600; white-space: nowrap; }
.footer-v2 .footer-areas { max-width: 1040px; margin: 0 auto; padding: 34px 0 36px; text-align: center; border-top: 0; }
.footer-v2 .footer-areas h4 { margin-bottom: 12px; }
.footer-v2 .footer-areas p { max-width: 920px; margin: 0 auto; color: rgba(255,255,255,0.68); font-size: 0.91rem; line-height: 1.75; }
/* Town links carry the local SEO weight in the footer, so they are set bold and
   in the light sage rather than the muted body colour they inherited. */
.footer-areas-links a { color: var(--gold-soft); font-weight: 700; text-decoration: none; }
.location-crosslinks { margin-top: 14px; font-size: 0.95rem; }
.location-crosslinks a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.footer-areas-links a:hover,
.footer-areas-links a:focus-visible { color: var(--white); text-decoration: underline; }
.footer-v2 .footer-bottom { display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; padding-top: 24px; color: rgba(255,255,255,0.55); font-size: 0.82rem; text-align: center; border-top: 1px solid rgba(255,255,255,0.14); margin-top: 0; }
.footer-v2 .footer-copyright { margin: 0; }
.footer-v2 .footer-legal { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.footer-v2 .footer-legal a { color: rgba(255,255,255,0.72); font-weight: 600; }
@media (min-width: 700px) {
  .footer-v2 .footer-v2-grid { grid-template-columns: repeat(3, 1fr); gap: 48px; }
  .footer-v2 .footer-v2-column { text-align: left; }
  .footer-v2 .footer-contact-links li { align-items: flex-start; }
  .footer-v2 .footer-hours { max-width: none; margin: 0; }
  .footer-v2 .footer-bottom { flex-direction: row; justify-content: space-between; }
}


/* ==========================================================
   v3.3 - centred stacked header, smaller nav & buttons,
   dropdown-arrow spacing, and a compact contact form (desktop)
   ========================================================== */
@media (min-width: 900px) {
  .header-inner { flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding-top: 16px; padding-bottom: 16px; }
  .site-branding { justify-content: center; }
  .site-branding img { height: 54px; }
  .primary-nav { justify-content: center; gap: 26px; }
  .primary-nav a { font-size: 0.78rem; }
  .header-cta { flex-direction: row !important; align-items: center !important; gap: 10px !important; }
  .btn-header { padding: 7px 16px; font-size: 0.7rem; }
}
/* little space between the dropdown arrow and its label */
.primary-nav .menu-item-has-children > a::before { margin-right: 9px; }
/* Compact the booking form on desktop so it aligns with the opening hours;
   full-size and untouched on mobile (below 900px) */
@media (min-width: 900px) {
  #contact .form-card { align-self: start; padding: 26px 28px; }
  #contact .form-card .form-grid-2 { margin-top: 12px; }
  #contact .form-card .form-row { margin-bottom: 12px; }
  #contact .form-card .form-row input { padding: 11px 13px; }
  #contact .form-card .form-row textarea { height: 104px; min-height: 0; padding: 11px 13px; }
  #contact .form-card .form-consent { margin: 12px 0 16px; }
}

/* Our-process step cards: very light sage tint */
.steps .step { background: #EAF1E8; border-color: rgba(78,107,87,0.16); }

/* Centred inner-page heroes (all page-hero-image headers) */
.page-hero-image .container { text-align: center; }
.page-hero-image h1, .page-hero-image .lead { margin-left: auto; margin-right: auto; }
.page-hero-image .hero-buttons { justify-content: center; }

/* Hero buttons across ALL covers (homepage + inner page heroes):
   clear separation from the text above and a smaller button size. */
.hero-cover .hero-buttons,
.page-hero-image .hero-buttons { margin-top: 38px !important; gap: 14px; }
.hero-cover .lead,
.page-hero-image .lead { margin-bottom: 0; }
.hero-cover .hero-buttons .btn,
.hero-cover .hero-buttons .btn-primary,
.hero-cover .hero-buttons .btn-secondary,
.page-hero-image .hero-buttons .btn,
.page-hero-image .hero-buttons .btn-primary,
.page-hero-image .hero-buttons .btn-secondary {
	padding: 10px 22px !important;
	font-size: 0.78rem !important;
}

/* Design page: "See the Finishes" as a full-width sage feature band
   (replaces the small floating callout that sat on the same white as the
   contact section below it). */
.section-sample { background: var(--sage); color: var(--char); }
.section-sample h2 { color: var(--char); margin-bottom: 12px; }
.section-sample .eyebrow { color: var(--char); opacity: 0.72; }
.sample-band { max-width: 780px; margin: 0 auto; text-align: center; }
.sample-band p { margin: 0; font-size: 1.08rem; }
.section-sample p a { color: var(--char); font-weight: 700; text-decoration: none; }
.section-sample p a:hover { color: #ffffff; }

/* ============================================================
   v3.2 - Rich guide/article components (varied, defined sections)
   ============================================================ */
.single-post .entry-content { max-width: 900px; }

/* Opening answer reads larger */
.single-post .entry-content > p:first-of-type,
.single-post .entry-content .article-lead {
  font-size: 1.22rem;
  line-height: 1.6;
  color: var(--ink);
}

/* Clear separator + accent on every article H2 */
.single-post .entry-content h2 {
  margin-top: 2.4em;
  padding-top: 1.1em;
  border-top: 2px solid var(--gold-soft);
  position: relative;
}
.single-post .entry-content h2::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 64px; height: 2px;
  background: var(--sage-deep);
}

/* Key takeaways box (dark, near the top) */
.key-takeaways {
  background: var(--char);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 26px 32px;
  margin: 32px 0;
}
.key-takeaways h3 { color: #fff; margin: 0 0 12px; }
.key-takeaways ul { margin: 0; }
.key-takeaways li { position: relative; padding-left: 28px; margin: 10px 0; }
.key-takeaways li::before { content: "\2713"; position: absolute; left: 0; color: var(--sage-2); font-weight: 700; }
.key-takeaways a { color: var(--sage-2); }
.key-takeaways a:hover { color: #fff; }

/* Info card grid inside an article */
.info-cards { display: grid; gap: 16px; margin: 26px 0; }
@media (min-width: 640px) {
  .info-cards.cols-2 { grid-template-columns: 1fr 1fr; }
  .info-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
}
.info-cards .info-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.info-cards .info-card h3 { margin: 0 0 8px; font-size: 1.15rem; }
.info-cards .info-card p { margin: 0; font-size: 1rem; }

/* Pros / cons two-column comparison */
.pros-cons { display: grid; gap: 16px; margin: 26px 0; }
@media (min-width: 640px) { .pros-cons { grid-template-columns: 1fr 1fr; } }
.pros-cons .pc { border-radius: var(--radius); padding: 24px 26px; }
.pros-cons .pc h3 { margin: 0 0 12px; font-size: 1.2rem; }
.pros-cons .pc ul { margin: 0; }
.pros-cons .pc li { padding-left: 22px; position: relative; margin: 8px 0; }
.pros-cons .pc-pro { background: #EAF1E8; border: 1px solid rgba(78,107,87,0.20); }
.pros-cons .pc-con { background: var(--cream-2); border: 1px solid var(--line); }
.pros-cons .pc-pro li::before { content: "+"; position: absolute; left: 0; color: var(--sage-deep); font-weight: 700; }
.pros-cons .pc-con li::before { content: "\2013"; position: absolute; left: 0; color: var(--grey); font-weight: 700; }

/* Figure + caption */
.single-post .entry-content figure.article-figure { margin: 32px 0; }
.single-post .entry-content figure.article-figure img { margin: 0; width: 100%; }
.single-post .entry-content figcaption { font-size: 0.9rem; color: var(--ink-soft); margin-top: 10px; text-align: center; }

/* Numbered steps as cards */
.step-list { counter-reset: step; list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 14px; }
.step-list li { position: relative; padding: 18px 22px 18px 66px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); }
.step-list li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; background: var(--sage-deep); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--font-body);
}

/* FAQ accordion inside an article */
.article-faq details { border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 22px; margin: 12px 0; background: var(--white); }
.article-faq summary { cursor: pointer; font-weight: 700; font-family: var(--font-heading); font-size: 1.18rem; padding: 16px 0; list-style: none; }
.article-faq summary::-webkit-details-marker { display: none; }
.article-faq summary::after { content: "+"; float: right; color: var(--sage-deep); font-size: 1.3rem; line-height: 1; }
.article-faq details[open] summary::after { content: "\2212"; }
.article-faq details p { margin: 0 0 16px; }

/* ============================================================
   v3.3 - full-width guide posts, tighter buttons, bolder form
   ============================================================ */

/* Guide posts: use the full desktop width (pages are already full width) */
@media (min-width: 1100px) {
  .single-post .entry-content {
    max-width: none;
    padding-left: clamp(48px, 5vw, 140px);
    padding-right: clamp(48px, 5vw, 140px);
  }
}

/* Buttons: a touch smaller globally, with proper spacing from content above */
.btn { padding: 12px 26px; font-size: 0.9rem; }
.btn-block { padding: 14px 26px; }
.check-list + .btn,
.check-grid + .btn,
.split-row .btn,
.section-header + .btn,
.entry-content .btn { margin-top: 30px; }

/* Contact form: thicker, clearer field borders so the form stands out */
.form-row input,
.form-row textarea { border: 2px solid rgba(38,48,43,0.28); }
.form-row input:focus,
.form-row textarea:focus { border-color: var(--sage-deep); box-shadow: 0 0 0 3px rgba(78,107,87,0.25); }
#contact .form-card { border: 2px solid rgba(255,255,255,0.55); }

/* Keep the header Call/Email buttons compact (override the smaller global .btn) */
.header-cta .btn-header { padding: 8px 18px; font-size: 0.74rem; }
@media (min-width: 900px) { .header-cta .btn-header { padding: 7px 16px; font-size: 0.7rem; } }

/* Homepage hero: the transparent header is a tall stacked layout on desktop,
   so give the hero enough top clearance that the nav never covers the text. */
@media (min-width: 900px) {
  .hero-cover { padding-top: 210px; padding-bottom: 64px; }
}

/* Article images: cap the display width so they are not upscaled beyond their
   native resolution on wide desktops (keeps them sharp and comfortably sized). */
.single-post .entry-content > figure.article-figure,
.single-post .entry-content > p > img,
.single-post .entry-content > img,
.single-post .entry-content .wp-post-image {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.single-post .entry-content figure.article-figure img { width: 100%; height: auto; }

/* Guide/post content: keep it in a centred, readable column on wide desktops
   (overrides the earlier full-bleed so text does not stretch edge to edge). */
@media (min-width: 1100px) {
  .single-post .entry-content {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ---- Consistent eyebrow subtitles sitewide ----
   Some eyebrows sit outside .section-header (e.g. in split rows), so they
   missed the uppercase olive styling. Apply it to every .eyebrow. */
.eyebrow {
  display: inline-block;
  color: var(--gold-dark);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 12px;
}
.section-navy .eyebrow { color: var(--gold-soft); }

/* ---- Nav balance: larger menu text, more compact Call/Email buttons ---- */
@media (min-width: 900px) {
  .primary-nav a { font-size: 0.92rem; }
  .header-cta .btn-header { padding: 6px 14px; font-size: 0.72rem; }
}

/* Visible NAP address, matching the LocalBusiness schema */
.footer-address { color: rgba(255,255,255,0.86); }
.nap-address { font-weight: 600; }
.footer-registered { display: block; width: 100%; font-size: 0.78rem; color: rgba(255,255,255,0.62); margin-bottom: 10px; line-height: 1.5; }

/* Gallery: flex rather than a rigid 3-column grid, so a row that is not full
   centres instead of leaving a stranded image hanging on the left. */
.gallery-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
.gallery-grid .gallery-item {
	flex: 1 1 300px;
	max-width: 380px;
	margin: 0;
}
.gallery-grid .gallery-item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
	display: block;
}
@media (max-width: 640px) {
	.gallery-grid .gallery-item { flex: 1 1 100%; max-width: 100%; }
}

/* -----------------------------------------
   Section rhythm, process steps, WCAG 2.1 AA fixes
   Audited and measured 22 September 2026.
----------------------------------------- */

/* A third background tone. The page previously alternated white and
   #EFF4ED only, and those two are close enough that long pages read as
   one flat surface. */
.section-sage { background: var(--cream-2); }

/* "What We Build" was a grid of bordered cards sitting immediately above
   the steps block, which is also a grid of bordered cards. Same shape
   twice running. This is the same content as a ruled editorial list with
   no box chrome at all, so the two sections no longer rhyme. */
.feature-list { display: grid; gap: 0 56px; margin-top: 6px; }
@media (min-width: 820px) {
  .feature-list { grid-template-columns: 1fr 1fr; }
}
.feature-item {
  padding: 26px 0 24px;
  border-top: 1px solid rgba(67,90,57,0.18);
}
.feature-item h3 {
  margin: 0 0 8px;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--ink);
}
/* Small accent bar, deliberately different from the numbered circles
   used by the steps block below. */
.feature-item h3::before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-bottom: 14px;
  background: var(--sage-deep);
}
.feature-item p { margin: 0; color: var(--ink-soft); }

/* -----------------------------------------
   Heading scale normalisation + feature list refinement
----------------------------------------- */

/* h3 was rendering at 1.15, 1.2, 1.3, 1.35 and 1.45rem depending on
   which component it sat in: nine different values for one heading
   level, which is why the hierarchy read as inconsistent. One size. */
h3,
.post-card h3,
.steps .step h3,
.tile h3,
.tile .tile-body h3,
.benefit h3,
.contact-details h3,
.info-cards .info-card h3,
.pros-cons .pc h3,
.feature-item h3 {
  font-size: clamp(1.2rem, 1.5vw, 1.375rem);
  line-height: 1.3;
}

/* The feature-list divider was rgba(67,90,57,0.18): too faint to read
   as structure. The small dash above each heading had no clear meaning
   either, so it goes and the rule does the work instead. */
.feature-item {
  border-top: 2px solid rgba(67,90,57,0.32);
  padding: 28px 0 26px;
}
.feature-item h3::before { content: none; }
.feature-item h3 { margin-bottom: 10px; }

/* -----------------------------------------
   Hero text over photography
   Measured against the actual photo pixels, not assumed.
----------------------------------------- */

/* The category and location heroes carried a flat rgba(20,17,14,0.55)
   overlay, while the homepage hero uses a 0.68 to 0.84 gradient. On the
   weaker overlay the 13px sage eyebrow measured 2.38:1 against the
   brightest part of the photo, well under the 4.5:1 small-text minimum.
   White body text was fine at 4.81:1, so this only needed the overlay
   deepening and the sage lightening, not a redesign. */
.page-hero-image { position: relative; }
.page-hero-image::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(16,22,18,0.34) 0%, rgba(12,17,14,0.42) 100%);
}
.page-hero-image > .container { position: relative; z-index: 1; }

/* #a6be8c lightened about 20%. Keeps the sage identity and clears 4.5:1
   once the overlay above is applied. */
.hero-eyebrow { color: #c3d6ab; }

/* -----------------------------------------
   Optical type scale
   Measured x-heights: Mulish 0.49em, Cormorant Garamond 0.38em.
   Cormorant is 22% smaller at the same nominal size, so the nominal
   numbers were misleading. At desktop the old h3 rendered a 8.36px
   x-height against body text at 8.3px, meaning headings were optically
   the SAME SIZE as the paragraphs beneath them. Sizes below are set so
   the perceived steps are roughly 1 : 1.28 : 1.79 : 2.78.
----------------------------------------- */
h1 { font-size: clamp(2.4rem, 4.6vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 2.9vw, 2.45rem); }
h3,
.post-card h3,
.steps .step h3,
.tile h3,
.tile .tile-body h3,
.benefit h3,
.contact-details h3,
.info-cards .info-card h3,
.pros-cons .pc h3,
.feature-item h3 {
  font-size: clamp(1.5rem, 1.95vw, 1.75rem);
  line-height: 1.28;
}

/* Footer tagline optical size.
   Cormorant at 18.4px gives a 6.99px x-height; the Mulish description
   below it at 15.2px gives 7.45px. The tagline was therefore 0.94x the
   size of the body text it introduces, despite being 3px larger on
   paper. 1.5rem brings it to about 1.22x, which reads as a heading
   without shouting in a footer. */
.footer-v2 .footer-tagline {
  font-size: 1.5rem;
  line-height: 1.3;
  margin-bottom: 14px;
}

/* The step cards were rgb(234,241,232) sitting on a rgb(239,244,237)
   section: a 2% difference, so they read as flat blocks rather than
   cards. White gives them a real edge against the cream. */
.steps .step,
.steps.on-cream .step {
  background: var(--white);
  border-color: rgba(67,90,57,0.22);
  padding: 26px 24px 24px;
}

/* The number was a 24px serif numeral in olive, which read as decorative
   text rather than a step marker. A filled circle matches .step-list,
   which already uses one, so the two numbered components now agree. */
.steps .step::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--sage-deep);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* h3 was 18.4px serif against 17px sans body text: 1.4px of hierarchy,
   which is why the titles did not read as titles. */
.steps .step h3 { font-size: 1.35rem; line-height: 1.25; margin-bottom: 10px; }
.steps .step p { color: var(--ink-soft); margin-bottom: 0; }

/* Skip link was #282420 on #57713f = 2.82:1. */
.skip-link, .skip-link:focus { background: var(--sage-deep); color: #ffffff; }

/* Tile captions sit over the photograph with no scrim. Sampling the
   bottom third of each image gave average contrast against white of
   3.48 to 3.94, and as low as 1.05 on the brightest patches, which is
   white text on near-white pixels. */
.tile .tile-body {
  background: linear-gradient(to top, rgba(20,17,14,0.90) 0%, rgba(20,17,14,0.78) 55%, rgba(20,17,14,0.15) 100%);
}
.tile .tile-body h3,
.tile .tile-body p { color: #ffffff; }
.tile .tile-body .tile-link { color: var(--sage-2); }

/* -----------------------------------------
   Typeface pairing: Cormorant for display only
   -----------------------------------------
   Cormorant Garamond is a display face. High stroke contrast, fine
   hairlines and a 0.38em x-height against Mulish's 0.49em. At 40px and
   above that delicacy is the point. At 15 to 22px, which is where every
   h3, h4, summary and footer label on this site actually sits, the
   hairlines thin out and the small x-height means the heading reads as
   quieter than the paragraph under it. Every sizing problem chased in
   this stylesheet traces back to that one mismatch.

   So Cormorant keeps h1, h2, the .site-title wordmark and the large
   stat numerals, where it earns its place, and everything below that
   moves to Mulish at 700. Sizes come DOWN when they switch, because
   Mulish is 29% larger on the x-height at the same nominal size. The
   perceived size is unchanged or slightly up; only the nominal number
   drops.
----------------------------------------- */

/* h3 was clamp(1.5rem, 1.95vw, 1.75rem) in Cormorant, giving a 10.64px
   x-height at desktop. 1.32rem of Mulish gives 10.99px, so this reads a
   shade larger than before, not smaller, despite losing 6px on paper.
   The .steps .step h3 rule further down the old file was overriding the
   group at equal specificity, so step headings were still 1.35rem; they
   are folded into the group here and now match every other h3. */
h3,
.post-card h3,
.steps .step h3,
.tile h3,
.tile .tile-body h3,
.benefit h3,
.contact-details h3,
.info-cards .info-card h3,
.pros-cons .pc h3,
.feature-item h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.18rem, 1.45vw, 1.32rem);
  line-height: 1.32;
  letter-spacing: -0.005em;
}

/* h4 had no size of its own, so it fell back to the browser default of
   1em. In Cormorant that produced a 6.46px x-height against body text
   at 8.33px: a heading optically SMALLER than its own paragraph. */
h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.35;
}

/* Small UI headings and labels. All were Cormorant between 15 and 19px. */
.faq summary { font-family: var(--font-body); font-weight: 700; font-size: 0.98rem; }
.article-faq summary,
.post-toc summary { font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; }
.related-link { font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; }
.data-table thead th { font-family: var(--font-body); font-weight: 700; }

/* Circular number badges. A serif numeral inside a 34px circle reads as
   decoration; the sans numeral reads as a step marker. */
.icon-list .num,
.pillar-icon { font-family: var(--font-body); }

/* Tracked uppercase labels. Caps are governed by cap height, not
   x-height, and Mulish sits at about 0.715em against Cormorant's 0.66em,
   so these gain a little weight at the same nominal size. Dropping 800
   to 700 keeps them from turning blocky. */
.footer-v2 h4,
.footer-v2 .footer-areas h4,
.contact-details .hours-table::before {
  font-family: var(--font-body);
  font-weight: 700;
}

/* The tagline was raised to 1.5rem to compensate for Cormorant's small
   x-height. In Mulish it needs 1.15rem to hit the same 9px x-height,
   which is where it started, one typeface ago. */
.footer-v2 .footer-tagline {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.35;
  letter-spacing: 0;
}

/* -----------------------------------------
   Readable measure for long-form sections
   -----------------------------------------
   Body copy sitting directly in a .container runs to about 120 characters a
   line at desktop, where the eye loses its place on the return sweep. The
   usual comfortable range is 65 to 75. This caps the measure without
   narrowing the section itself, so the background still spans the page.
----------------------------------------- */
.prose-narrow { max-width: 68ch; }
.prose-narrow > p:last-child { margin-bottom: 0; }

/* ============================================================
   v3.15 - speed and layout fixes (27 September 2026)
   ============================================================ */

/* Homepage hero is now a real <img> (so it can be preloaded, served at
   phone size and never lazy-loaded) instead of a CSS background. The
   old background was a 1600x367 four-photo strip stretched to fill a
   full-height hero, which is why it looked soft on desktop. */
.hero-cover { overflow: hidden; background-color: var(--char); }
.hero-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 40%;
  z-index: 0;
}
.hero-cover::before { z-index: 1; }
/* Cormorant is now self-hosted as a variable font, so weight 300 would
   genuinely render as 300 (hairline-thin over a photo). Until now the
   browser had silently been drawing it at 500, which is the look the
   site has had all along, so 500 is set explicitly to keep it. */
.hero-cover h1 { font-weight: 500; }

/* Phones: the hero intro ran to ten lines, pushing both buttons below
   the fold on a typical 390x844 screen. Slightly smaller type and
   tighter spacing bring "Get a Quote" into view without cutting a word. */
@media (max-width: 640px) {
  .hero-cover { min-height: 0; padding-top: 104px; padding-bottom: 48px; }
  .hero-cover .hero-eyebrow { font-size: 0.72rem; letter-spacing: 0.1em; margin-bottom: 12px; }
  .hero-cover h1 { font-size: 2.1rem; line-height: 1.12; margin-bottom: 14px; }
  .hero-cover p.lead { font-size: 1rem; line-height: 1.55; }
  .hero-cover .hero-buttons { margin-top: 24px !important; }
}

/* Guide lead images were capped at a fixed 820px, which overrode the
   global max-width:100%. On a phone that made the image 820px wide and
   the whole page scroll sideways (seen on the media wall and definitive
   wardrobe guides). min() keeps the desktop cap and the phone fit. */
.single-post .entry-content > figure.article-figure,
.single-post .entry-content > p > img,
.single-post .entry-content > img,
.single-post .entry-content .wp-post-image {
  max-width: min(820px, 100%);
  width: 100%;
  height: auto;
}

/* Comparison tables on phones. The tables had a 560px minimum width
   inside a scroll box, so on a 390px screen the third column (usually
   the one making the point) sat off-screen with no hint it was there.
   Below 640px each row now becomes its own card, with the column name
   shown beside each value (labels are added by main.js from the table
   header, so this works for every table on the site, including those
   inside guide posts). */
@media (max-width: 640px) {
  .table-wrap { overflow: visible; box-shadow: none; border-radius: 0; }
  .data-table.is-stacked { min-width: 0; background: transparent; }
  .data-table.is-stacked thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .data-table.is-stacked,
  .data-table.is-stacked tbody,
  .data-table.is-stacked tr,
  .data-table.is-stacked td { display: block; width: 100%; }
  .data-table.is-stacked tr {
    background: var(--white) !important;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 14px;
    overflow: hidden;
  }
  .data-table.is-stacked td { border-bottom: 1px solid var(--line); padding: 12px 16px; }
  .data-table.is-stacked td:last-child { border-bottom: 0; }
  .data-table.is-stacked td:first-child {
    background: var(--char);
    color: var(--white);
    font-weight: 700;
    font-size: 1rem;
  }
  .data-table.is-stacked td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--sage-deep);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

/* ============================================================
   v3.16 - guide engagement blocks (30 September 2026)
   ============================================================ */

/* End-of-guide bridge to the matching furniture page. */
.single-post .entry-content .guide-bridge {
  margin: 48px 0 28px;
  padding: 30px 32px;
  background: var(--cream);
  border-left: 4px solid var(--sage-deep);
  border-radius: var(--radius);
}
.guide-bridge .guide-bridge-eyebrow {
  margin: 0 0 6px;
  color: var(--sage-deep);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.single-post .entry-content .guide-bridge .guide-bridge-title {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--slate);
}
.single-post .entry-content .guide-bridge p { font-size: 1rem; }
.guide-bridge-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.single-post .entry-content .guide-bridge-actions .btn { margin-top: 0; }
.single-post .entry-content .guide-bridge-actions .btn-primary { color: var(--cream); }

/* Author box: who wrote the guide and why they know. */
.author-box {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 0 0 12px;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
}
.single-post .entry-content .author-box img { width: 64px; height: 64px; margin: 0; border-radius: 50%; flex: 0 0 64px; }
.single-post .entry-content .author-box p { font-size: 0.95rem; margin: 0 0 6px; }
.single-post .entry-content .author-box .author-box-name { font-weight: 800; color: var(--slate); }

@media (max-width: 640px) {
  .single-post .entry-content .guide-bridge { padding: 24px 20px; }
  .guide-bridge-actions .btn { width: 100%; justify-content: center; }
}

/* The byline link sits on the dark guide header. */
.single-post .entry-header a { color: var(--sage-2); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   v3.17 - guide readability (1 October 2026)
   ============================================================ */

/* The global reset removes list bullets, which is right for menus but
   meant lists inside guides read as loose lines of text. Bullets and
   numbers are restored for article content only. */
.single-post .entry-content ul:not(.check-list):not(.room-list),
.single-post .entry-content ol {
  margin: 0 0 1.4em;
  padding-left: 1.4em;
}
.single-post .entry-content ul:not(.check-list):not(.room-list) { list-style: disc; }
.single-post .entry-content ol { list-style: decimal; }
.single-post .entry-content ul:not(.check-list):not(.room-list) li,
.single-post .entry-content ol li { margin: 0 0 0.5em; padding-left: 0.2em; }
.single-post .entry-content li::marker { color: var(--sage-deep); font-weight: 700; }
.single-post .entry-content .post-toc ol { list-style: decimal; }

/* Numbered idea headings inside guides */
.single-post .entry-content h3 { margin-top: 1.6em; }
.single-post .entry-content figure.article-figure figcaption { font-style: normal; }

/* Town pages (v3.17): enquiry band, town-specific rooms, visit steps */
.town-cta { padding: 44px 0; }
.town-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; }
.town-cta-title { margin: 0 0 6px; font-family: var(--font-heading); font-size: 1.7rem; font-weight: 600; color: var(--slate); line-height: 1.2; }
.town-cta-text { margin: 0; max-width: 640px; }
.town-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.town-rooms { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .town-rooms { grid-template-columns: 1fr; } .town-cta-actions .btn { width: 100%; justify-content: center; } }
.town-room { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.town-room h3 { margin: 0 0 10px; }
.town-room p { flex: 1; margin: 0 0 14px; }
.town-room .tile-link { color: var(--sage-deep); font-weight: 700; }
.town-steps { max-width: 900px; margin: 0; padding-left: 1.4em; list-style: decimal; }
.town-steps li { margin: 0 0 10px; padding-left: 0.3em; }
.town-steps li::marker { color: var(--sage-deep); font-weight: 800; }
.town-steps a { color: var(--sage-deep); font-weight: 700; }

/* v3.18.6 - links in hero intro text stay readable on the photo */
.hero-cover .lead a, .page-hero-image .lead a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--sage-2);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.hero-cover .lead a:hover, .page-hero-image .lead a:hover { color: var(--sage-2); }

/* v3.18.8 - gallery: one card per MyAlbum album */
.album-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .album-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .album-grid { grid-template-columns: repeat(4, 1fr); } }
.album-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.album-card:hover, .album-card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--sage-2); }
.album-card-link { display: flex; flex-direction: column; flex: 1; color: var(--ink); text-decoration: none; }
.album-card-link:hover, .album-card-link:focus-visible { color: var(--ink); }
.album-card-media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--cream); }
.album-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.album-card:hover .album-card-media img { transform: scale(1.05); }
.album-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,17,14,0.45), rgba(20,17,14,0) 45%); pointer-events: none; }
.album-card-badge { position: absolute; left: 14px; bottom: 12px; z-index: 1; background: rgba(255,255,255,0.94); color: var(--ink); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.album-card-body { display: block; padding: 18px 20px 6px; }
.album-card-body h3 { margin: 0 0 6px; font-size: 1.35rem; }
.album-card-text { display: block; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }
.album-card-service { display: block; margin-top: auto; padding: 12px 20px 18px; font-weight: 700; color: var(--sage-deep); text-decoration: none; font-size: 0.95rem; }
.album-card-service:hover { color: var(--gold); }
.album-card-link:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

/* v3.18.9 - centred short-copy sections and clearer section separation */
.prose-narrow { margin-left: auto; margin-right: auto; text-align: center; }
.prose-narrow ul, .prose-narrow ol { text-align: left; display: inline-block; }

/* A short accent rule under every section heading, so each new section starts visibly */
.section-header h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 2px;
  background: var(--sage-2);
}
.section-navy .section-header h2::after { background: var(--gold-soft); }

/* Hairline between neighbouring light sections (white and pale green are close in tone) */
.section-white + .section-ivory,
.section-ivory + .section-white,
.section-white + .section-white,
.section-ivory + .section-ivory,
.section-white + .section-sage,
.section-sage + .section-white,
.section-ivory + .section-sage,
.section-sage + .section-ivory {
  border-top: 1px solid rgba(38, 48, 43, 0.12);
}