/* ================================================================
   DISCOUNT CARPETS — style.css
   A clean, simple stylesheet written alongside Bootstrap 5.
   Bootstrap handles the grid (container, row, col-*).
   This file handles everything visual: colours, fonts, spacing, etc.
================================================================ */

/* --- Hover magnifier for product gallery images (see magnify.js) --------
   A magnifying-glass lens that follows the cursor over .gallery-main.
   pointer-events:none keeps clicks reaching the image (tap-to-zoom lightbox). */
.gallery-main .zoom-lens {
  position: absolute;
  /* width/height are set by magnify.js (LW/LH) */
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  display: none;
  z-index: 6;
}
.gallery-main .zoom-lens-img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  object-fit: cover;
  display: block;
}
.gallery-main.magnifying .zoom-lens { display: block; }
.gallery-main.magnifying { cursor: crosshair; }


/* ----------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (variables)
   Defined on :root so they're available everywhere in this file.
   To change the brand colour, you only change it once here.
   Usage: color: var(--accent);
---------------------------------------------------------------- */
:root {
  --accent:     #ed1c24;   /* Logo red — brand accent */
  --cta:        #22a861;   /* Green — reserved for primary quote/form CTAs */
  --dark:       #1a2e4a;   /* navy — header, footer, dark text */
  --mid:        #555555;   /* medium grey — secondary text */
  --light-bg:   #f5f0e8;   /* warm off-white — light section backgrounds */
  --cream:      #fdfaf6;   /* very light cream */
  --mint:       #e8eef5;   /* light navy tint — pale background variant */
  --teal:       #1a2e4a;   /* navy — showroom strip, success icon */
  --white:      #ffffff;
  --border:     #dde3ec;   /* navy-tinted border */
  --shadow:     0 2px 12px rgba(0,0,0,0.08);
  --radius:     8px;
}


/* ----------------------------------------------------------------
   2. RESET & BASE STYLES
   Browsers have their own default styles that vary between them.
   This section normalises them so we start from a clean slate.
---------------------------------------------------------------- */

/*
  box-sizing: border-box — changes how width is calculated.
  By default, padding and border ADD to an element's width.
  With border-box, they're INCLUDED in the width.
  e.g. a 300px element with 20px padding stays 300px wide total.
  The * selector applies this to every element on the page.
*/
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*
  html { scroll-behavior: smooth } makes anchor links (#form, #about)
  glide smoothly to their target instead of jumping instantly.
*/
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;  /* our Google Font, with sans-serif as a fallback */
  font-size: 16px;                   /* base font size — rem units below are relative to this */
  color: var(--dark);
  background: var(--white);
  line-height: 1.6;                  /* space between lines of text — 1.6x the font size */
}

/* Remove underlines from all links and inherit the parent colour by default */
a {
  color: inherit;
  text-decoration: none;
}

/* Make images responsive — they'll never overflow their container */
img {
  max-width: 100%;
  height: auto;
  display: block;  /* removes the small gap below inline images */
}

/* Remove default bullet points from all lists */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


/* ----------------------------------------------------------------
   3. USP BAR
   The very first thing on the page — sits above the logo.
   Dark background, small text, key selling points spread across.
   The phone number sits on the right as a quick action link.

   display: flex on .usp-bar-inner puts all spans in one row.
   gap adds space between each item.
   flex-wrap: wrap lets items drop to a second line on small screens
   rather than overflowing off the edge.
---------------------------------------------------------------- */
.usp-bar {
  background: var(--white);
  padding: 6px 0;
}

.usp-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;   /* never wraps — items are hidden instead */
  gap: 0 20px;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Each icon + label inline */
.usp-item {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.usp-item-icon {
  width: 30px;
  height: 30px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

/* Photo icon in usp bar — amber-tinted, matches SVG icons */
.usp-item-photo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 3px;
}

.usp-label {
  font-size: 0.64rem;
  color: var(--dark);
  white-space: nowrap;
  font-weight: 500;
  line-height: 1;
}

.usp-bar-inner span {
  font-size: 0.64rem;
  color: var(--dark);    /* navy text on white background */
  line-height: 1;
  white-space: nowrap;
  font-weight: 500;
}

/*
  .usp-highlight — makes "Big Savings!" stand out from the rest.
  Red background + white text acts like a badge/tag.
  border-radius rounds the corners slightly.
  padding adds a little breathing room inside.
*/
.usp-highlight {
  background: var(--accent);
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* The phone number on the right stands out in white */
.usp-tick {
  color: var(--accent);   /* amber tick mark — pops against white bar */
  font-weight: 700;
}

.usp-bar-phone {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--dark) !important;
  white-space: nowrap;
  margin-left: auto;
}

.usp-bar-phone:hover {
  color: var(--accent) !important;
}

/*
  USP BAR — PROGRESSIVE HIDE
  As screen shrinks, items disappear one by one (lowest priority first).
  The bar never wraps — it always stays a single clean line.
  Priority order: Honest Prices (1) > Free Measuring (2) > Expert Fitters (3) > Premium Quality (4)
*/

/* ≤900px: drop "Premium Quality Flooring" (4th item) */
@media (max-width: 900px) {
  .usp-bar-inner .usp-item:nth-child(4) { display: none; }
}

/* ≤680px: also drop "Our Own Expert Fitters" (3rd item) */
@media (max-width: 680px) {
  .usp-bar-inner .usp-item:nth-child(3) { display: none; }
}

/* ≤420px: also drop "Free Home Measuring" — single item remains */
@media (max-width: 420px) {
  .usp-bar-inner .usp-item:nth-child(2) { display: none; }
  .usp-bar-inner { justify-content: center; }
}

/*
  MOBILE CTA BAR
  Hidden on desktop — only appears below 600px where the nav is hidden.
  Gives mobile users quick access to the quote form and phone number.
*/
.mobile-cta-bar {
  display: none;  /* hidden by default (desktop) */
}

@media (max-width: 768px) {
  .mobile-cta-bar {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: var(--white);
    border-bottom: 2px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 90;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }

  /* Green "Get Your Free Quote" button */
  .mobile-btn-quote {
    flex: 1;
    background: var(--cta);
    color: #ffffff !important;
    text-align: center;
    padding: 11px 8px;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.2;
  }
  .mobile-btn-quote:hover { background: #1a8a4e; }

  /* Phone button — outlined, matches the restrained nav style */
  .mobile-btn-phone {
    flex: 1;
    background: #ffffff;
    border: 1.5px solid var(--border);
    color: var(--dark) !important;
    text-align: center;
    padding: 11px 8px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.82rem;
  }
  .mobile-btn-phone:hover { border-color: var(--dark); }
}




/* ----------------------------------------------------------------
   4. HEADER
   The main header with logo and navigation.
   position: sticky keeps it fixed at the top as users scroll.
---------------------------------------------------------------- */
.site-header {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Row 1 — logo CENTRED at all widths; actions floated to the right.
   .header-actions is absolutely positioned (out of flow) so it never shifts
   the centred logo. */
.header-top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 6px 16px 14px;  /* symmetric L/R padding = truly centred */
}

/* Right-side group: quote button + phone + social icons + hamburger */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

/* Social media icon buttons in header */
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(26, 46, 74, 0.25);
  border-radius: 6px;
  opacity: 0.65;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.social-icon:hover {
  opacity: 1;
}

/* Row 2 — full-width flooring nav bar */
.main-nav {
  background: #ffffff;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 0;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-nav ul li {
  display: flex;
  align-items: center;
}

.main-nav ul li a {
  display: block;
  padding: 3px 7px;
  font-size: 0.7rem;
  font-weight: 500;
  color: #333333;
  border-radius: 12px;
  transition: color 0.15s;
  white-space: nowrap;
}

.main-nav ul li a:hover {
  color: #000000;
  text-decoration: underline;
  text-decoration-color: #000000;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Active page — thick yellow underline from logo palette */
.nav-active {
  text-decoration: underline !important;
  text-decoration-color: #fff200 !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 3px !important;
  font-weight: 700 !important;
}

/* Deals nav item — gold pill with shake on hover */
@keyframes nav-shake {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-6deg); }
  30%  { transform: rotate(6deg); }
  45%  { transform: rotate(-5deg); }
  60%  { transform: rotate(5deg); }
  75%  { transform: rotate(-3deg); }
  90%  { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}
.nav-deals {
  background: #fff200 !important;        /* logo yellow */
  color: #231f20 !important;             /* logo charcoal — readable on yellow */
  padding: 3px 10px !important;
  border-radius: 20px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  display: inline-block;
  transition: background 0.2s;
}
.main-nav ul li a.nav-deals:hover {
  background: #ffd400 !important;        /* a touch deeper yellow on hover */
  color: #231f20 !important;
  text-decoration: none !important;
  animation: nav-shake 0.5s ease;
}

/* Gentle wobble for the big logo (the full nav-shake is too much at logo size) */
/* Subtle logo wobble — mirrors nav-shake's TIMING (same % stops + 0.5s duration)
   so the logo and Deals move in unison, but with a much smaller rotation. */
@keyframes logo-wobble {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-0.2deg); }
  30%  { transform: rotate(0.2deg); }
  45%  { transform: rotate(-0.14deg); }
  60%  { transform: rotate(0.14deg); }
  75%  { transform: rotate(-0.08deg); }
  90%  { transform: rotate(0.08deg); }
  100% { transform: rotate(0deg); }
}

/* Playful wobble: hovering EITHER the logo or the Deals pill wobbles BOTH
   together (:has), in sync — the logo just rotates far less than the Deals pill. */
.site-logo:hover,
.site-header:has(.site-logo:hover, .nav-deals:hover) .site-logo {
  animation: logo-wobble 0.5s ease;
}
.site-header:has(.site-logo:hover, .nav-deals:hover) .nav-deals {
  animation: nav-shake 0.5s ease;
}

/* The logo — flush to left edge at all sizes */
.site-logo {
  height: 118px;  /* a touch bigger (was 104px) */
  width: auto;
  display: block;
  margin-top: 10px;
}

/* Below ~1100px: shrink the logo and drop the wide "Free Quote" button so the
   centred logo + right-hand actions never collide (the logo is already centred
   at every width by the base .header-top-row rule above). */
@media (max-width: 1100px) {
  .site-logo { height: 84px; }
  .header-actions { right: 12px; }
  .header-actions .nav-quote { display: none !important; }   /* higher specificity beats the base .nav-quote rule */
}

/* Smaller phones: step the logo down a little so it clears the menu button */
@media (max-width: 600px) {
  .site-logo { height: 72px; }
}

/* Very small phones: drop the social icons from the header (they remain in the
   footer) so the centred logo never overlaps the menu button */
@media (max-width: 480px) {
  .site-logo { height: 64px; }
  .header-actions .social-icon { display: none; }
}

/* Gentle wobble for the phone number on hover (smaller than the Deals shake) */
@keyframes phone-wobble {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-2.5deg); }
  40% { transform: rotate(2.5deg); }
  60% { transform: rotate(-1.5deg); }
  80% { transform: rotate(1.5deg); }
}

/* ───────────────────────────────────────────────────────────────
   769px AND UP — split the header-actions:
   social icons pinned to the LEFT (with a left margin), phone + the
   "Free Quote" button to the RIGHT (both enlarged). Logo stays centred.
   header-actions is stretched full-width as a transparent overlay; its
   middle is click-through (pointer-events:none) so the centred logo's
   hover/wobble still works, with the buttons themselves re-enabled.
─────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  .header-actions {
    left: 16px;
    right: 16px;
    gap: 10px;
    justify-content: flex-start;
    pointer-events: none;        /* let the centred logo show/hover through the gap */
  }
  .header-actions > * { pointer-events: auto; }

  /* Social icons → far left, with a comfortable left margin */
  .header-actions .social-icon { order: 1; }
  .header-actions .social-icon[aria-label="Facebook"]  { order: 1; margin-left: 60px; }
  .header-actions .social-icon[aria-label="Instagram"] { order: 2; margin-right: auto; } /* pushes the rest right */

  /* Phone → right, bolder + larger, with a hover wobble */
  .header-actions .nav-phone-box {
    order: 3;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
  }
  .header-actions .nav-phone-box:hover { animation: phone-wobble 0.5s ease; }

  /* "Free Quote" button → far right, un-hidden in the 769–1100 band + enlarged */
  .header-actions .nav-quote {
    order: 4;
    display: flex !important;
    padding: 7px 17px !important;
  }
  .header-actions .nav-quote .nav-quote-top    { font-size: 0.66rem; }
  .header-actions .nav-quote .nav-quote-bottom { font-size: 0.9rem; }
}

/* Large screens only: social icons bigger + tucked further left (less margin).
   Placed AFTER the 769px block so it overrides the 60px margin there.
   Tablet (769–1100) keeps the original size/margin. */
@media (min-width: 1101px) {
  .header-actions .social-icon { width: 44px; height: 44px; border-radius: 9px; }
  .header-actions .social-icon svg { width: 25px; height: 25px; }
  .header-actions .social-icon[aria-label="Facebook"] { margin-left: 16px; }
}


/* ----------------------------------------------------------------
   5. NAVIGATION
   Dark full-width bar below the logo row.
   All flooring types spread evenly across the full width.
   Styles for this are set above in section 4 (header).
---------------------------------------------------------------- */

/*
  "Get Your / Free Quote" two-line nav button.
  display:flex + flex-direction:column stacks the two <span>s vertically.
  The top line is smaller/lighter, the bottom line is bold and larger.
*/
.nav-quote {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  line-height: 1.15 !important;
  padding: 5px 12px !important;
  border: 1.5px solid var(--cta) !important;
  border-radius: var(--radius) !important;
  color: #ffffff !important;
  background: var(--cta) !important;
  transition: background 0.15s !important;
}
.nav-quote:hover {
  background: #1a8a4e !important;
  border-color: #1a8a4e !important;
  color: #ffffff !important;
}
.nav-quote-top {
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  opacity: 0.85;
}
.nav-quote-bottom {
  font-size: 0.76rem;
  font-weight: 800;
}


/*
  Phone number box in the header.
  Same dark background as the USP bar (#1a2e4a) so it ties the two together visually.
  The box sits in the nav list like any other item but looks completely different.
*/
.nav-phone-box,
.nav-phone-box:link,
.nav-phone-box:visited {
  display: inline-block;
  background: none !important;
  color: var(--dark) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  padding: 3px 6px !important;
  white-space: nowrap;
  transition: color 0.15s !important;
}
.nav-phone-box:hover {
  color: #000000 !important;
  text-decoration: underline;
}

/* ── CSS-ONLY DROPDOWN ──
   The .nav-dropdown is hidden by default (display:none).
   When the user hovers .has-dropdown, we show it.
   position:absolute takes it out of the document flow so it
   floats over the content below without pushing anything down.
*/
.has-dropdown {
  position: relative;
}

.nav-dropdown {
  /*
    !important forces this rule to win over any Bootstrap CSS that might
    try to override it. Without !important, Bootstrap's higher-specificity
    rules can accidentally make the dropdown visible on page load.
  */
  display: none !important;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  min-width: 190px;
  z-index: 200;
  padding: 6px 0;
  /* flex-direction is set here, display:flex is applied only by .is-open below */
  flex-direction: column;
}

/*
  JavaScript adds "is-open" when the user clicks "Flooring".
  !important here matches the !important on display:none above,
  so this rule wins and the dropdown becomes visible.
*/
.nav-dropdown.is-open {
  display: flex !important;
}

/*
  Reset list styles on dropdown items — Bootstrap's Reboot CSS
  can add unexpected margins/padding to li elements.
  We explicitly override everything here.
*/
.nav-dropdown li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-dropdown li a {
  display: block;
  padding: 9px 18px;
  font-size: 0.85rem;    /* smaller than the main nav links */
  font-weight: 500;      /* slightly lighter than the nav — 500 not 600 */
  color: var(--dark);
  white-space: nowrap;
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
}

.nav-dropdown li a:hover {
  background: var(--light-bg);
  color: var(--accent);
}


/* ----------------------------------------------------------------
   6. HERO SECTION
   The main above-the-fold section.
   Bootstrap handles the two-column layout (col-lg-6 each).
   We just set the background and padding here.
---------------------------------------------------------------- */
.hero {
  background-image: url('images/royal-charter-deluxe.webp');
  background-size: cover;
  background-position: center 65%;
  position: relative;
  margin-top: 16px;
}

.hero-overlay {
  background: rgba(10, 20, 40, 0.54);
  min-height: 540px;
  display: flex;
  align-items: center;
  padding: 90px 0;
}

.hero-content {
  max-width: 620px;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.btn-hero-call {
  display: inline-block;
  background: #ffffff;
  color: var(--dark);
  padding: 14px 28px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.btn-hero-call:hover {
  background: var(--accent);
  color: #ffffff;
}

.btn-hero-quote {
  display: inline-block;
  background: #ed1c24;
  color: #ffffff;
  padding: 14px 28px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}
.btn-hero-quote:hover {
  background: #c0101a;
}

/* Quote form section */
.quote-section {
  background: var(--light-bg);
  padding: 80px 0;
}

/* Location tag above the headline */
.hero-location {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 16px;
  letter-spacing: 0.2px;
}

/*
  The main headline.
  clamp(min, preferred, max) — a responsive font size:
    - Never smaller than 2.2rem
    - Ideally 5vw (5% of viewport width)
    - Never bigger than 3.6rem
  This means it shrinks gracefully on small screens without a media query.
*/
.hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  color: #ffffff;
  margin-bottom: 20px;
}

/* The red "honest prices" span inside the h1 */
.text-accent {
  color: var(--accent);
}

.hero-sub {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.7;
  margin-bottom: 0;
  max-width: 520px;
}

/*
  Trust list — the bullet points under the intro paragraph.
  We replace the default bullet (removed in the reset above)
  with a red checkmark using the ::before pseudo-element.
  ::before inserts content BEFORE each <li>.
*/
.trust-list li {
  position: relative;
  padding-left: 24px;   /* make room for the checkmark */
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: var(--mid);
}

.trust-list li::before {
  content: '✔';
  position: absolute;
  left: 0;
  color: #999999;
  font-size: 0.8rem;
  top: 3px;
}

/* The "prefer to call?" line */
.hero-tel {
  margin-top: 24px;
  font-size: 0.9rem;
  color: var(--mid);
}
.hero-tel a {
  color: var(--accent);
}


/* ----------------------------------------------------------------
   7. QUOTE BOX (the form card)
   A white card with shadow that contains the enquiry form.
   This is the most important element on the page.
---------------------------------------------------------------- */
.quote-box {
  background: var(--white);
  border-radius: 12px;
  padding: 36px 32px;
  scroll-margin-top: 120px;  /* clears the sticky header when anchor-jumping */
  box-shadow: 0 4px 32px rgba(0,0,0,0.08);
  border: 1px solid var(--border);
}

.quote-box h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--dark);
  text-align: center;
}

.quote-box-sub {
  font-size: 0.88rem;
  color: var(--mid);
  margin-bottom: 24px;
}


/* ----------------------------------------------------------------
   8. FORM STYLES
   Styles for all the inputs, selects, textareas inside the form.
   We target them as descendants of .quote-form so these
   styles only affect THIS form, not forms elsewhere on the page.
---------------------------------------------------------------- */

/* The row of each label + input pair */
.quote-form .row {
  margin-top: 14px;
}
.quote-form .row:first-child {
  margin-top: 0;
}

/* Labels above each field */
.quote-form label {
  display: block;          /* puts the label on its own line above the input */
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 5px;
}

/*
  All inputs, selects, and textareas get the same base style.
  We group them with a comma-separated selector to avoid repetition.
*/
.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;             /* fills the available column width */
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;  /* inputs don't inherit font by default — must set it */
  color: var(--dark);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
}

/*
  :focus — styles applied when the user clicks into a field.
  outline: none removes the default browser outline.
  We replace it with a coloured border + subtle glow.
*/
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  outline: none;
  border-color: var(--dark);
  box-shadow: 0 0 0 2px rgba(26,46,74,0.08);
}

.quote-form textarea {
  resize: vertical;   /* users can drag to resize vertically, but not horizontally */
}

/* The submit button */
.btn-submit {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  background: var(--cta);
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  border: none;            /* removes default button border */
  border-radius: var(--radius);
  cursor: pointer;         /* shows the hand cursor on hover */
  transition: background 0.2s, transform 0.15s;
}

.btn-submit:hover {
  background: #1a8a4e;
  transform: translateY(-1px);
}

/* Visit checklist inside quote box */
.visit-checklist {
  list-style: none;
  padding: 8px 0;
  margin: 0 auto 20px;
  display: table;        /* shrinks to widest item width, margin:auto centres it */
}
.visit-checklist li {
  font-size: 0.78rem;
  color: var(--mid);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.45;
}
.visit-checklist li::before {
  content: '✓';
  color: var(--cta);
  font-weight: 700;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.btn-submit:active {
  transform: translateY(0);     /* pushes back down when clicked */
}

/* The reassurance line below the button */
.form-note {
  font-size: 0.75rem;
  color: #888888;
  text-align: center;
  margin-top: 12px;
}

/* Thank-you message shown (by JS) after the form submits successfully */
.quote-success {
  text-align: center;
  padding: 16px 8px;
}

.quote-success-icon {
  width: 56px;
  height: 56px;
  line-height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--teal);
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 700;
}

.quote-success h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
}

.quote-success p {
  font-size: 0.95rem;
  color: var(--mid);
  line-height: 1.65;
}

.quote-success a {
  color: var(--accent);
  font-weight: 700;
}


/* ----------------------------------------------------------------
   9. CATEGORIES GRID
   CSS Grid creates the tile layout automatically.
   repeat(auto-fill, minmax(190px, 1fr)) means:
     - Fill the row with as many columns as fit
     - Each column is at least 190px wide, maximum 1fr (equal share)
   Result: 4 tiles on wide screens → 3 on tablet → 2 on mobile.
   No media queries needed — the grid handles it automatically.
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
   9. OFFERS BANNER
   Full-width orange strip. The inner track scrolls continuously
   using a CSS animation — no JavaScript needed.
   @keyframes defines the motion: starts at 0%, ends at 50%
   (we duplicate the items so it loops seamlessly).
---------------------------------------------------------------- */
.offers-banner {
  background: #1a2e4a;          /* navy — ties in with header */
  border-bottom: 2px solid #0f2038;
  overflow: hidden;
  padding: 14px 0;
  margin-top: 10px;             /* breathing room below the nav */
}

.offers-banner-inner {
  display: flex;
  align-items: center;
  gap: 0;
}

/* "OFFERS" badge pinned to the left */
.offers-label {
  background: #d4860a;   /* amber badge on navy strip */
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 5px 14px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 16px;
  border-radius: 2px;
  letter-spacing: 0.5px;
}

/* The scrolling track — wider than the screen, moves left continuously */
.offers-track {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  animation: ticker 30s linear infinite;
}

.offers-track span {
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}

/* Moves the track from right to left, looping seamlessly */
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ----------------------------------------------------------------
   10. FLOORING CATEGORY GRID
   CSS Grid replaces the old flexbox strip.
   4 equal columns on desktop, 2 columns on mobile.
   Larger images give each flooring type more visual weight.

   display: grid                        = switches to Grid layout
   grid-template-columns: repeat(4,1fr) = 4 equal-width columns
   gap                                  = space between all grid cells
   7 items auto-fill rows: 4 in row 1, 3 in row 2.
   The 8th tile is a CTA card.
---------------------------------------------------------------- */
.cat-grid-section {
  background: var(--white);
  padding: 20px 0 0;
  border-bottom: 1px solid var(--border);
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 4 equal columns */
  gap: 16px;
  padding-bottom: 20px;
}

/* Each card: image on top, label below */
.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--dark);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.cat-card:hover {
  border-color: #aaaaaa;
  color: var(--dark);
  box-shadow: var(--shadow);
}

/* The image container — tall enough to show the product properly */
.cat-card-img {
  width: 100%;
  height: 200px;    /* larger, more inviting tiles (was 160px) */
  overflow: hidden;
  background: var(--light-bg);
}

.cat-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

/* Carpet tile: the roomset's floor sits low in the frame, so we
   shift the crop downward (80% = nearer the bottom) to keep the
   carpet clearly in view rather than centring on the sofa/wall. */
.cat-img-focus-floor {
  object-position: center 80%;
}

.cat-card:hover .cat-card-img img {
  transform: scale(1.04);   /* subtle zoom on hover */
}

/* Text label below the image */
.cat-card span {
  font-size: 0.9rem;
  font-weight: 700;
  padding: 12px 8px;
  display: block;
  line-height: 1.2;
}

/* ── 8th tile: CTA card (Free Measuring) ── */
.cat-card--cta {
  border-color: #aaaaaa;
  background: #ffffff;
}

.cat-card-img--cta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark);
}

.cat-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  padding: 12px;
}

.cat-cta-icon { font-size: 1.8rem; }

.cat-cta-inner strong {
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.3;
}

.cat-cta-sub {
  font-size: 0.75rem;
  opacity: 0.85;
}

.cat-card--cta span { color: var(--dark); }

/* ── DEALS tile ── */
.cat-card--deals {
  border: 1px solid var(--border);
}
.cat-card--deals:hover {
  border-color: #aaaaaa;
  box-shadow: var(--shadow);
}
.cat-card--deals .cat-card-img {
  position: relative;
}
.deals-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--dark);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  z-index: 2;
  pointer-events: none;
}
.cat-card--deals > span {
  color: var(--dark);
  font-weight: 700;
}

/* ── CARPET JOURNEY CHOOSER ───────────────────────────────── */
.journey-chooser {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 26px;
}
@media (max-width: 640px) {
  .journey-chooser { grid-template-columns: 1fr; gap: 8px; }
}
.journey-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px 12px;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  border: 2px solid var(--border);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.journey-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  color: inherit;
}
.journey-icon { font-size: 1.4rem; margin-bottom: 2px; }
.journey-btn strong {
  font-size: 0.88rem;
  font-weight: 800;
  display: block;
  color: var(--dark);
}
.journey-btn span:last-child {
  font-size: 0.72rem;
  color: var(--mid);
  line-height: 1.4;
}
.journey-btn--budget {
  border-color: var(--accent);
  background: #fff8ed;
}
.journey-btn--budget strong { color: var(--accent); }
.journey-btn--budget:hover { border-color: #c0101a; box-shadow: 0 4px 14px rgba(212,134,10,0.18); }
.journey-btn--renter { border-color: #3a8a5a; background: #f0faf4; }
.journey-btn--renter strong { color: #2a6a42; }
.journey-btn--renter:hover { border-color: #2a6a42; }
.journey-btn--premium { border-color: var(--dark); background: var(--mint); }
.journey-btn--premium strong { color: var(--dark); }
.journey-btn--premium:hover { border-color: var(--accent); }

/* On mobile: switch to 2 columns so images stay a decent size */
@media (max-width: 600px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .cat-card-img { height: 140px; }
}


/* ----------------------------------------------------------------
   BRANDS WE STOCK STRIP
   Light grey background, logos scroll continuously left.
   overflow:hidden clips the track at both edges.
   Logos are fixed height so all display the same size regardless
   of their original dimensions.
---------------------------------------------------------------- */
.brands-strip {
  background: #ffffff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
  overflow: hidden;
}

.brands-heading {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #999999;
  margin-bottom: 16px;
}

.brands-track-wrapper {
  overflow: hidden;
}

.brands-track {
  display: flex;
  align-items: center;
  gap: 60px;
  width: max-content;
  animation: brands-scroll 22s linear infinite;
}

.brands-track img {
  height: 50px;
  width: auto;
  max-width: 170px;             /* cap the width too — very wide wordmark logos (e.g.
                                   Crucial Trading is 200:18) would otherwise blow up
                                   to 550px+ when scaled to 50px tall. object-fit:
                                   contain shrinks them to fit inside 170×50 instead. */
  object-fit: contain;
  filter: grayscale(100%);      /* greyscale by default — looks clean and uniform */
  opacity: 0.65;
  transition: filter 0.3s, opacity 0.3s;
}

.brands-track img:hover {
  filter: grayscale(0%);        /* full colour on hover */
  opacity: 1;
}

@keyframes brands-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ----------------------------------------------------------------
   10. OFFER BAR
   Bold strip below the category grid. Flex row on desktop,
   stacks vertically on mobile.
---------------------------------------------------------------- */
.offer-bar {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  padding: 24px 0;
}

.offer-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.offer-bar-text {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.offer-tag {
  background: var(--accent);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 3px;
  white-space: nowrap;
}

.offer-message {
  color: var(--dark);
  font-size: 0.88rem;
  font-weight: 500;
}

.offer-bar-btn {
  background: var(--accent);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 9px 20px;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background 0.2s;
}

.offer-bar-btn:hover { background: #c0101a; }

@media (max-width: 600px) {
  .offer-bar-inner { flex-direction: column; align-items: flex-start; }
  .offer-bar-btn { width: 100%; text-align: center; }
}


/* ----------------------------------------------------------------
   11. HAMBURGER BUTTON
   Three lines drawn with CSS — visible on mobile only.
   Each <span> inside is one horizontal bar.
   Clicking toggles the mobile nav open/closed via JS.
---------------------------------------------------------------- */
.hamburger {
  display: none;          /* hidden on desktop */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius);
  transition: background 0.2s;
}

.hamburger:hover { background: var(--light-bg); }

/* Each bar of the hamburger icon */
.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: 0.3s;
}

/* ── MOBILE: hamburger visible, nav bar hidden until opened ── */
@media (max-width: 768px) {
  .hamburger { display: flex; }

  /* Hide the nav bar — hamburger reveals it */
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--dark);
    border-top: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    z-index: 200;
  }

  .main-nav.nav-open { display: block; }

  /* Stack links vertically */
  .main-nav ul {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    align-items: stretch;
  }

  .main-nav ul li a {
    padding: 13px 20px;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #cccccc;
  }

  .main-nav ul li a:hover {
    background: var(--accent);
    color: #ffffff;
  }

  /* Hide quote + phone from header-actions on mobile — CTA bar handles them */
  .nav-quote, .nav-phone-box { display: none !important; }
}


/* ----------------------------------------------------------------
   10. SECTION TITLES (shared style for all section headings)
---------------------------------------------------------------- */
.section-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 8px;
}

.section-sub {
  color: var(--mid);
  font-size: 0.95rem;
  margin-bottom: 0;
}


/* ----------------------------------------------------------------
   10b. ABOUT / OUR VAN
   Intro band pairing the real van photo with the trust message.
   Bootstrap handles the two columns (col-lg-6); they stack on mobile.
   The van is a cut-out PNG/WebP, so a soft drop-shadow grounds it.
---------------------------------------------------------------- */
.about-van {
  padding: 72px 0;
  background: var(--white);
}

.about-van-img {
  width: 100%;
  height: auto;
  display: block;
  /* drop-shadow follows the van's shape (not a box) since it's a cut-out */
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.12));
}

.about-van h2 {
  margin-bottom: 16px;
}

.about-van p {
  color: var(--mid);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 16px;
}

.about-van .btn-call {
  margin-top: 6px;
}


/* ----------------------------------------------------------------
   11. WHY CHOOSE US
   Three reason cards in a Bootstrap row.
---------------------------------------------------------------- */
.why-us {
  padding: 80px 0;
  background: #ffffff;
}

/*
  Each reason card.
  height: 100% makes all cards in a row the same height,
  so they align neatly even if the text length differs.
*/
.reason-card {
  background: #ffffff;
  border-radius: var(--radius);
  padding: 28px 24px;
  height: 100%;
  border: 1px solid var(--border);
}

.reason-icon {
  font-size: 2rem;
  margin-bottom: 14px;
}

.reason-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--dark);
}

.reason-card p {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.65;
}


/* ----------------------------------------------------------------
   11a. ABOUT-SECTION TESTIMONIAL TICKER
   Vertical auto-scrolling strip of review cards that sits in the
   right column of the "Straightforward advice" section.
   Uses the same duplicate-for-seamless-loop technique as the
   brands strip and offers bar.
   Hovering pauses the animation so visitors can read comfortably.
---------------------------------------------------------------- */
.about-testimonial-ticker {
  position: relative;
  height: 320px;           /* visible window height */
  overflow: hidden;
}

/* Fade edges so cards glide in/out smoothly */
.about-testimonial-ticker::before,
.about-testimonial-ticker::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 48px;
  z-index: 2;
  pointer-events: none;
}

.about-testimonial-ticker::before {
  top: 0;
  background: linear-gradient(to bottom, #ffffff 0%, transparent 100%);
}

.about-testimonial-ticker::after {
  bottom: 0;
  background: linear-gradient(to top, #ffffff 0%, transparent 100%);
}

/* The scrolling column of cards */
.about-testimonial-track {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* 28s = comfortable reading pace; adjust if needed */
  animation: scroll-testimonials 28s linear infinite;
}

/* Pause on hover so visitors can read */
.about-testimonial-ticker:hover .about-testimonial-track {
  animation-play-state: paused;
}

/* Scroll from bottom to top; -50% works because we've doubled the cards */
@keyframes scroll-testimonials {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* ----------------------------------------------------------------
   11b. CUSTOMER REVIEWS
   Social-proof cards. Same height:100% trick as .reason-card so
   all three cards stay level even if the quotes differ in length.
   Warm beige background separates it from the mint section above
   and the grey brands strip below.
---------------------------------------------------------------- */
.reviews {
  padding: 80px 0;
  background: #ffffff;
}

/* Each review card — white, soft border, subtle shadow */
.review-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  height: 100%;                  /* keeps all cards in the row equal height */
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;        /* lets us push the author to the bottom */
}

/* The gold star rating */
.review-stars {
  color: #f5a623;                /* warm gold */
  font-size: 1.05rem;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

/* The quote itself */
.review-text {
  font-size: 0.95rem;
  color: var(--dark);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 18px;
  flex-grow: 1;                  /* grows to fill space so authors line up across cards */
}

/* Author block, separated by a thin top border */
.review-author {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.review-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--dark);
}

.review-meta {
  font-size: 0.78rem;
  color: var(--mid);
}

/* Centred "Read more on Google" button below the cards */
.reviews-cta {
  text-align: center;
  margin-top: 36px;
}

.reviews-link {
  display: inline-block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--dark);
  text-decoration: underline;
  transition: color 0.15s;
}

.reviews-link:hover {
  color: #000000;
}

/* ── COMPACT REVIEW STRIP (product page sidebar) ───────────────────────── */
.compact-reviews {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px 12px;
  margin-bottom: 14px;
}

.compact-reviews-rating {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
}

.compact-stars {
  color: #f5a623;
  font-size: 0.88rem;
  letter-spacing: 1px;
}

.compact-reviews-rating strong {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
}

.compact-google {
  font-size: 0.75rem;
  color: var(--mid);
}

/* Horizontal auto-scrolling marquee of review quotes.
   The quotes are duplicated in the HTML so the loop is seamless:
   the track translates by exactly half its width, landing the 2nd
   copy exactly where the 1st started. */
.compact-review-quotes {
  overflow: hidden;
  position: relative;
  /* soft fade in/out at the left & right edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}

.compact-review-quotes-track {
  display: flex;
  width: max-content;
  animation: compactReviewsScroll 30s linear infinite;
}

/* pause when the visitor hovers the box so they can read */
.compact-reviews:hover .compact-review-quotes-track {
  animation-play-state: paused;
}

.compact-review-quotes-track p {
  flex: 0 0 auto;
  margin: 0 40px 0 0;          /* uniform trailing gap keeps the loop seamless */
  font-size: 0.81rem;
  font-style: italic;
  color: var(--dark);
  line-height: 1.45;
  white-space: nowrap;
}

@keyframes compactReviewsScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* respect users who prefer no motion — show quotes stacked & still */
@media (prefers-reduced-motion: reduce) {
  .compact-review-quotes { -webkit-mask-image: none; mask-image: none; }
  .compact-review-quotes-track {
    animation: none;
    flex-wrap: wrap;
  }
  .compact-review-quotes-track p {
    white-space: normal;
    margin: 0 0 5px 0;
    flex-basis: 100%;
  }
  /* hide the duplicated second set when stacked */
  .compact-review-quotes-track p:nth-child(n+4) { display: none; }
}

.compact-reviews-link {
  display: inline-block;
  margin-top: 9px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--dark);
  text-decoration: underline;
}

.compact-reviews-link:hover {
  color: #000000;
}

/* ── BUDGET CALLOUT BANNER ─────────────────────────────────────────────── */
.budget-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.budget-callout-text {
  flex: 1 1 260px;
}

.budget-callout-text strong {
  display: block;
  font-size: 1.05rem;
  color: var(--dark);
  font-weight: 800;
  margin-bottom: 3px;
}

.budget-callout-text p {
  font-size: 0.88rem;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

.budget-callout-btn {
  display: inline-block;
  background: var(--accent);
  color: #ffffff !important;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 11px 22px;
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.18s;
}

.budget-callout-btn:hover {
  background: #c0101a;
  color: #ffffff !important;
}

@media (max-width: 480px) {
  .budget-callout { flex-direction: column; align-items: flex-start; }
  .budget-callout-btn { width: 100%; text-align: center; }
}

/* ── PATH CHOOSER — left/right split signpost ───────────────────────────── */
.path-chooser {
  display: flex;
  align-items: stretch;
  margin-bottom: 26px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(0,0,0,0.12);
}

.path-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  text-decoration: none;
  transition: filter 0.18s ease;
  cursor: pointer;
}

.path-card:hover { filter: brightness(0.93); text-decoration: none; }

.path-card-icon {
  font-size: 1.75rem;
  margin-bottom: 10px;
  line-height: 1;
}

.path-card strong {
  display: block;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 10px;
}

.path-card p {
  font-size: 0.86rem;
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 18px;
}

.path-card-btn {
  display: block;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.86rem;
  text-align: center;
}

/* LEFT — Premium / dark navy */
.path-card--premium { background: var(--dark); }
.path-card--premium strong { color: #f4edd8; }
.path-card--premium p { color: #b0aaa0; }
.path-card--premium .path-card-btn {
  background: var(--accent);
  color: #ffffff;
}

/* RIGHT — Budget / warm cream */
.path-card--budget { background: #fff8ed; }
.path-card--budget strong { color: var(--accent); }
.path-card--budget p { color: #555555; }
.path-card--budget .path-card-btn {
  background: var(--accent);
  color: #ffffff;
}

/* OR divider between the two panels */
.path-or {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0e1d30;
  color: #7a8a99;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  padding: 0 9px;
  user-select: none;
  flex-shrink: 0;
}

/* Renters link beneath the split */
.path-renter-link {
  text-align: center;
  margin-top: -10px;
  margin-bottom: 22px;
  font-size: 0.82rem;
  color: var(--mid);
}

.path-renter-link a {
  color: var(--mid);
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .path-chooser { flex-direction: column; }
  .path-or {
    writing-mode: horizontal-tb;
    padding: 7px 16px;
    letter-spacing: 4px;
  }
}


/* ----------------------------------------------------------------
   12. SHOWROOM STRIP
   Dark band with address and a call button.
---------------------------------------------------------------- */
.showroom-strip {
  background: #ffffff;
  color: var(--dark);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 48px 0;
}

.showroom-strip h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.showroom-strip p {
  color: var(--mid);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* The "Call Us Now" button */
.btn-call {
  display: inline-block;
  padding: 12px 26px;
  background: transparent;
  color: var(--dark) !important;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--dark);
  transition: background 0.15s, color 0.15s;
}

.btn-call:hover {
  background: var(--dark);
  color: #ffffff !important;
}


/* ----------------------------------------------------------------
   13. FOOTER
---------------------------------------------------------------- */
.site-footer {
  background: #f5f5f7;     /* Apple light grey */
  color: #555555;
  padding: 56px 0 32px;
  font-size: 0.88rem;
  border-top: 1px solid #d2d2d7;
}

/* Logo in the footer — no filter needed, the yellow background in the SVG
   makes it legible on the dark footer without any colour adjustment */
.footer-logo {
  height: 80px;
  width: auto;
  margin-bottom: 16px;
  opacity: 1;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.footer-address {
  line-height: 1.8;
  color: #555555;
  margin-bottom: 10px;
  text-align: center;
}

.footer-phone {
  display: block;
  text-align: center;
}

.footer-phone {
  color: var(--dark);
  font-weight: 600;
}
.footer-phone:hover {
  color: var(--accent);
}
.footer-social {
  text-align: center;
  margin-top: 0.4rem;
}
.footer-social a {
  color: var(--dark);
  font-weight: 600;
  text-decoration: none;
}
.footer-social a:hover {
  color: var(--accent);
}

/* Footer three-column flex layout */
.footer-cols {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-col-brand {
  flex: 0 0 200px;         /* fixed width, doesn't stretch */
  text-align: center;
}

.footer-col {
  flex: 0 0 auto;          /* shrinks to content width, doesn't stretch */
  min-width: 150px;
}

/* Footer navigation columns */
.footer-col h4 {
  color: var(--dark);
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}

.footer-col ul li {
  margin-bottom: 9px;
}

.footer-col ul li a {
  color: #555555;
  font-size: 0.85rem;
  transition: color 0.2s;
}

.footer-col ul li a:hover {
  color: var(--dark);
  text-decoration: underline;
}

/* The copyright bar at the very bottom */
.footer-bottom {
  border-color: #d2d2d7 !important;
  color: #888888;
  font-size: 0.78rem;
}

.footer-bottom p {
  margin-bottom: 4px;
}

.footer-credit {
  color: #444444;
}


/* ----------------------------------------------------------------
   14. RESPONSIVE — MOBILE ADJUSTMENTS
   A media query runs its rules ONLY when the condition is true.
   max-width: 768px = "only when the screen is 768px or narrower"
   This is where we fix anything that doesn't look right on phones.
---------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Tighten vertical padding on sections for smaller screens */
  .hero              { padding: 48px 0 56px; }
  .why-us            { padding: 56px 0; }
  .showroom-strip    { padding: 40px 0; text-align: center; }

  /* Centre the "call us" button on mobile */
  .showroom-strip .text-md-end { text-align: center !important; }

  /* The quote box padding shrinks on small screens */
  .quote-box { padding: 28px 20px; }

  /* Reduce font size of h1 slightly on small phones */
  .hero h1 { letter-spacing: -0.5px; }

  /* Nav handled by hamburger section above */
}

@media (max-width: 480px) {
  .hero h1 { letter-spacing: -0.5px; }
}


/* ═══════════════════════════════════════════════════════════════
   USP BAND — "What makes us different" — 4 tiles below the hero
═══════════════════════════════════════════════════════════════ */
.usp-band {
  background: #ffffff;
  padding: 52px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.usp-band-heading {
  color: var(--dark);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-align: center;
  margin-bottom: 32px;
  opacity: 1;
}
.usp-band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.usp-tile {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 22px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: background 0.2s, transform 0.2s;
  border-bottom: 3px solid transparent;
}
.usp-tile:hover {
  background: #f8f4ee;
  transform: translateY(-3px);
  border-bottom-color: var(--accent, #d4860a);
  color: inherit;
}
.usp-tile-icon {
  font-size: 2rem;
  margin-bottom: 12px;
  line-height: 1;
}
.usp-tile h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
}
.usp-tile p {
  font-size: 0.84rem;
  color: var(--mid);
  line-height: 1.6;
  flex: 1;
  margin: 0 0 14px;
}
.usp-tile-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: #d4860a;
}

@media (max-width: 768px) {
  .usp-band-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .usp-band-grid {
    grid-template-columns: 1fr;
  }
}


/* ----------------------------------------------------------------
   PRODUCT PAGE HERO — global override
   Each product page defines its own .product-hero background
   colour in a page-level <style> block. We control the size and
   spacing here so it's consistent and easy to change site-wide.
   !important on padding overrides the per-page inline block.
---------------------------------------------------------------- */
.product-hero {
  padding: 20px 0 16px !important;   /* was 48px / 40px — much slimmer */
  margin-top: 16px;                  /* gap between nav and hero */
  margin-bottom: 12px;               /* breathing room before page content */
}
.product-hero h1 {
  font-size: clamp(1.4rem, 3.5vw, 2.2rem) !important;   /* less dominant */
  margin-bottom: 6px !important;
}
.product-hero p {
  font-size: 0.92rem !important;
  opacity: 0.85;
}


/* ----------------------------------------------------------------
   PRODUCT PAGE — colour picker (global rules)
   Some older product pages (e.g. Primo Ultra) were built without
   .colour-tile and .colour-header CSS, causing tiles to render at
   full natural image size. Adding globally here fixes them all.
   Newer pages define identical rules in their own <style> blocks —
   no conflict.
---------------------------------------------------------------- */
.colour-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.colour-label-text {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--dark);
}
.colour-selected-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dark);
  background: #f0ece8;
  padding: 3px 10px;
  border-radius: 20px;
}
.colour-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}
.colour-tile {
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.1s;
}
.colour-tile:hover  { border-color: #999; transform: scale(1.05); }
.colour-tile.active { border-color: var(--dark); }
.colour-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ----------------------------------------------------------------
   PRODUCT PAGE GALLERY — room view image fix
   All product pages define .gallery-main-img.img-room in their own
   <style> block using object-fit: contain, which leaves black bars
   around landscape/banner images. This global override switches to
   cover so images always fill the square gallery frame, centred.
   !important is needed to beat the per-page inline <style> blocks.
---------------------------------------------------------------- */
.gallery-main-img.img-room {
  object-fit: cover !important;
  object-position: center center !important;
  background: #f0ece8 !important;
}


/* ----------------------------------------------------------------
   FREE SAMPLE BUTTON — global override
   Product pages define .btn-sample in their own inline <style>
   blocks. These rules use !important to beat the per-page styles
   and make the sample button more visually prominent across the
   whole site. The amber/gold colour is distinct from the green
   primary CTA and the red brand accent.
---------------------------------------------------------------- */
.btn-sample {
  background: #fff3cd !important;
  color: #7a5000 !important;
  border: 2px solid #e8a500 !important;
}
.btn-sample:hover {
  background: #f5c518 !important;
  color: #1a1a1a !important;
  border-color: #f5c518 !important;
}

/* Small "Not sure? Request a free sample →" link near colour picker */
.colour-sample-link {
  background: #fff8e8 !important;
  border: 1px solid #ffe0a0 !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 0.82rem !important;
  margin-top: 12px !important;
  display: block !important;
}
.colour-sample-link a {
  color: #b87000 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.colour-sample-link a:hover {
  text-decoration: underline !important;
}