/*
Theme Name:  Demeque Limited
Theme URI:   https://demeque.co.uk
Author:      Demeque Limited
Description: Custom WordPress theme for Demeque Limited – Demolition Equipment Manufacturers.
Version:     2.0.0
License:     Private
Text Domain: demeque
Tags:        custom-theme, industrial, manufacturing, b2b
*/

/* ─────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES
───────────────────────────────────────────────── */
:root {
  --navy:       #0d2250;
  --blue:       #1a3a8f;
  --blue-mid:   #033A79;
  --blue-light: #e8eef8;
  --black:      #0a0a0a;
  --charcoal:   #1c1c1c;
  --white:      #ffffff;
  --off-white:  #f5f6f8;
  --light-grey: #e8eaee;
  --mid-grey:   #5f6676;
  --dark-text:  #111827;
  --accent:     #D4820A;
  --nav-height: 120px;
}

/* ─────────────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Barlow', sans-serif;
  background: var(--white);
  color: var(--dark-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { text-decoration: none; color: inherit; }

/* WP default image alignment */
.alignleft  { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 1rem auto; }

/* ─────────────────────────────────────────────────
   SITE HEADER / NAV
───────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 120px 0 120px;
  background: #ffffff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.3s, box-shadow 0.3s;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 2px 24px rgba(0,0,0,0.35);
}

/* ─────────────────────────────────────────────────────────────
   LOGO — left-aligned, fits inside 72px bar
   Uses high specificity + !important to defeat WP global styles
   which inject text-align:center and display:block on these elems
──────────────────────────────────────────────────────────────── */

/* Wrapper is a flex child that stays on the LEFT */
header.site-header .site-logo-wrap {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  margin-right: auto !important;   /* pushes nav to the right */
  text-align: left !important;
  max-height: var(--nav-height);
  overflow: hidden;
}

/* ── Text logo (no custom logo image uploaded) ── */
header.site-header .site-logo-wrap .site-logo {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  text-decoration: none !important;
  line-height: 1 !important;
  text-align: left !important;
}
header.site-header .site-logo-wrap .site-logo:hover { opacity: 0.88; }

.logo-icon {
  width: 44px;
  height: 38px;
  background: var(--blue-mid);
  clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 900;
  font-size: 14px;
  color: white;
  letter-spacing: -0.5px;
  padding-right: 6px;
  flex-shrink: 0;
}

.logo-wordmark {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.logo-wordmark .logo-highlight { color: #6b9ef0; }
.logo-wordmark .logo-sub       { color: rgba(255,255,255,0.55); }

/* ── WP custom-logo image ────────────────────────────────────
   the_custom_logo() outputs:
     <a class="custom-logo-link" href="…">
       <img class="custom-logo" …>
     </a>
   WP global styles add text-align:center and display:block.
   We defeat all of it here.
──────────────────────────────────────────────────────────────*/
header.site-header .site-logo-wrap .custom-logo-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-decoration: none !important;
  line-height: 0 !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}
header.site-header .site-logo-wrap .custom-logo-link:hover { opacity: 0.85; }

header.site-header .site-logo-wrap .custom-logo {
  display: block !important;
  height: 100px !important;          /* fits in 120px bar */
  width: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Kill any figure wrapper WP might inject */
header.site-header .site-logo-wrap figure,
header.site-header .site-logo-wrap .wp-block-site-logo {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* ── Footer logo ── */
.footer-logo-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.footer-logo-wrap .custom-logo-link {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  line-height: 0 !important;
}
.footer-logo-wrap .custom-logo {
  display: block !important;
  height: 34px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
  margin: 0 !important;
}
.footer-logo-wrap .site-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  text-decoration: none;
}

/* ── Primary Navigation ── */
.primary-nav-wrap {
  display: flex;
  align-items: center;
}

/* wp_nav_menu outputs: nav.primary-nav > ul.primary-menu */
.primary-menu {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Top-level items */
.primary-menu > li {
  position: relative;
}

.primary-menu > li > a {
  display: block;
  color: rgba(0, 0, 0, 0.55);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.5rem 1.2rem;
  transition: color 0.2s;
  white-space: nowrap;
}
.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-ancestor > a { color: #000000; }

/* Dropdown arrow indicator */
.primary-menu > li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(255,255,255,0.4);
  margin-left: 6px;
  vertical-align: middle;
  transition: border-top-color 0.2s, transform 0.2s;
}
.primary-menu > li.menu-item-has-children:hover > a::after {
  border-top-color: rgba(255,255,255,0.8);
  transform: rotate(180deg);
}

/* CTA button item — add class "menu-cta" to the menu item in WP admin */
.primary-menu > li.menu-cta > a {
  background: var(--blue-mid);
  color: white !important;
  padding: 0.5rem 1.8rem 0.5rem 1.2rem;
  clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%);
  margin-left: 0.8rem;
  letter-spacing: 0.1em;
}
.primary-menu > li.menu-cta > a:hover {
  background: #2c5fda;
}

/* ── Dropdown sub-menu ── */
.primary-menu .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: #0f0f0f;
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 2px solid var(--blue-mid);
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 200;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

/* Show on hover */
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.primary-menu .sub-menu li a {
  display: block;
  padding: 0.65rem 1.4rem;
  color: rgba(255,255,255,0.55);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  transition: color 0.15s, background 0.15s, padding-left 0.15s;
  white-space: nowrap;
}
.primary-menu .sub-menu li a:hover {
  color: #fff;
  background: rgba(30,77,183,0.15);
  padding-left: 1.8rem;
}
.primary-menu .sub-menu li.current-menu-item > a { color: #fff; }

/* Nested sub-menus (3rd level) */
.primary-menu .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  margin-top: -0.5rem;
}

/* ── Mobile hamburger ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.2s;
}
.nav-toggle:hover { background: rgba(255,255,255,0.07); }

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: rgba(255,255,255,0.8);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s, width 0.3s;
  transform-origin: center;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile nav panel ── */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0; right: 0;
  background: #0a0a0a;
  border-bottom: 2px solid var(--blue-mid);
  z-index: 999;
  overflow-y: auto;
  max-height: calc(100vh - var(--nav-height));
  padding: 1rem 0 2rem;
}
.mobile-nav.is-open { display: block; }

.mobile-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu li a {
  display: block;
  padding: 0.9rem 1.5rem;
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color 0.15s, padding-left 0.15s;
}
.mobile-menu li a:hover { color: #fff; padding-left: 2rem; }
.mobile-menu li.current-menu-item > a { color: #fff; }

.mobile-menu .sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: rgba(255,255,255,0.03);
  display: none;
}
.mobile-menu .sub-menu.is-open { display: block; }

.mobile-menu .sub-menu li a {
  padding-left: 2.5rem;
  font-size: 0.88rem;
  text-transform: none;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.5);
}

.mobile-dropdown-toggle {
  background: none;
  border: none;
  color: var(--blue-mid);
  cursor: pointer;
  float: right;
  padding: 0.9rem 1.5rem;
  font-size: 0.7rem;
  line-height: 1;
}

.mobile-menu li.menu-cta > a {
  margin: 1rem 1.5rem 0;
  background: var(--blue-mid);
  color: white;
  text-align: center;
  border: none;
  padding: 0.9rem 1.5rem;
}

/* ─────────────────────────────────────────────────
   SECTION TAG
   Section category label with decorative accent bar
───────────────────────────────────────────────── */
.section-tag {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.section-tag::before {
  content: '';
  width: 28px;
  height: 2.5px;
  background: var(--accent);
  flex-shrink: 0;
}
.section-tag.on-dark {
  color: var(--accent);
}

/* ─────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--blue-mid);
  color: white;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.9rem 2.4rem 0.9rem 1.8rem;
  clip-path: polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%);
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  text-decoration: none;
}
.btn-primary:hover { background: #2c5fda; transform: translateX(3px); color: white; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  color: rgba(255,255,255,0.8);
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.85rem 2rem;
  border: 1.5px solid rgba(255,255,255,0.22);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  text-decoration: none;
}
.btn-ghost:hover { border-color: var(--blue-mid); color: white; }

.btn-navy {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--navy);
  color: white;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.9rem 2.4rem 0.9rem 1.8rem;
  clip-path: polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
}
.btn-navy:hover { background: var(--blue); color: white; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--dark-text);
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.7rem 1.6rem;
  border: 1.5px solid var(--dark-text);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}
.btn-outline:hover { background: var(--dark-text); color: white; }

.btn-accent {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--accent);
  color: #fff;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 1rem 2.6rem 1rem 2rem;
  clip-path: polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  white-space: nowrap;
}
.btn-accent:hover { background: #fab412; color: #fff; }

/* ─────────────────────────────────────────────────
   HOME HERO
───────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 1000px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #033A79;
  margin-top: -120px;
  padding: 220px 0 0 0;
}

/* ── Hero Marquee (Ken Burns loop) ── */
.hero-marquee {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-marquee-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 1;
  transition: opacity 1.5s ease;
  will-change: transform, opacity;
}

.hero-marquee-slide.is-active {
  opacity: 1;
  z-index: 2;
}

/* Slow Ken Burns zoom-in — runs for the full duration the image is visible */
.hero-marquee-slide.is-zooming {
  animation: dq-ken-burns 8s ease-out forwards;
}

@keyframes dq-ken-burns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(30,77,183,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,77,183,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: linear-gradient(to right, transparent, black 25%, black 72%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 25%, black 72%, transparent);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
      110deg,
      rgba(11,20,34,0.96) 0%,
      rgba(11,20,34,0.78) 45%,
      rgba(11,20,34,0.55) 100%
    );
}

.hero-shape {
    position: absolute;
    right: -5%;
    top: 50%;
    transform: translateY(-50%);
    width: 52%;
    height: 130%;
    z-index: 3;

    background: linear-gradient(
      140deg,
      rgba(13,34,80,0.92),
      rgba(26,58,143,0.82)
    );

    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1; /* key change */

    border-left: 1px solid rgba(255,255,255,0.08);
}
.hero-shape::after {
  content: "";
  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;

  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255,255,255,0.25),
    transparent
  );
}


.hero-bolts {
  position: absolute;
  right: 7%; top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  opacity: 0.1;
}
.hero-bolt { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-mid); }

.hero-custom-image {
  position: absolute;
  right: 2%; top: 60%;
  transform: translateY(-50%);
  width: 50%;
  max-width: 760px;
  opacity: 0.32;
  filter: contrast(1.15) brightness(0.95)
  
}

.hero-custom-image::after {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at 70% 50%,
    rgba(255,255,255,0.08),
    transparent 40%
  );

  pointer-events: none;
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.hero-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(to bottom, transparent, var(--blue-mid) 30%, var(--accent) 70%, transparent);
}

/* Featured image as hero background */
.hero-bg-image {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.2;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 60px 120px 180px 120px;;
  max-width: 760px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  margin-top: 64px;
}
.eyebrow-rule {
  width: 32px;
  height: 3px;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: -5px;
}
.eyebrow-text {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}


.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 1.8rem;
}
.hero-tag::before {
  content: '';
  width: 30px; height: 2px;
  background: var(--accent);
  display: block;
}

.hero h1 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 900;
  font-size: clamp(4rem, 7.5vw, 7.5rem);
  line-height: 0.92;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.8rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  letter-spacing: -1.5px;
}
.hero h1 em {
  font-style: normal;
  color: var(--blue-mid);
  /* -webkit-text-stroke: 2px var(--blue-mid); */
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.hero-sub {
  font-size: 1.15rem;
  font-weight: 400;
  color: rgba(255,255,255,0.78);
  line-height: 1.78;
  max-width: 500px;
  margin-bottom: 2.8rem;
}

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-stats {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.035);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  padding: 1.8rem 4rem;
  z-index: 2;
}

.stat-item {
  flex: 1;
  border-right: 1px solid rgba(255,255,255,0.07);
  padding-right: 2rem;
  margin-right: 2rem;
}
.stat-item:last-child { border-right: none; margin-right: 0; padding-right: 0; }

.stat-num {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 800;
  font-size: 2.2rem;
  color: #fff;
  line-height: 1;
}
.stat-num span { color: var(--blue-mid); }
.stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.4);
  margin-top: 0.35rem;
}


/* ─────────────────────────────────────────────────
   PAGE HERO (inner pages)
───────────────────────────────────────────────── */
.page-hero {
  background: #0b1422;
  padding: 120px;
  position: relative;
  overflow: hidden;
  min-height: 400px;
}
.page-hero::after {
  content: attr(data-title);
  position: absolute;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 900;
  font-size: 14rem;
  color: rgba(255,255,255,0.025);
  top: 50%; right: -2rem;
  transform: translateY(-50%);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
}
.page-hero h1 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 900;
  font-size: clamp(3.2rem, 6vw, 5.5rem);
  text-transform: uppercase;
  line-height: 0.95;
  color: #fff;
  position: relative;
  z-index: 1;
}
.page-hero p {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.58);
  margin-top: 1.5rem;
  max-width: 520px;
  position: relative;
  z-index: 1;
  line-height: 1.78;
}

/* ─────────────────────────────────────────────────
   ABOUT INTRO (homepage)
───────────────────────────────────────────────── */
.about-intro {
  background: #fff;
  padding: 8rem 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7rem;
  align-items: center;
  border-bottom: 1px solid var(--light-grey);
}

.about-intro-left h2 {
  font-size: clamp(2.4rem, 3.5vw, 3.4rem);
  margin-bottom: 1.5rem;
}
.about-intro-left p {
  font-size: 1.1rem;
  color: var(--mid-grey);
  line-height: 1.88;
  margin-bottom: 2.5rem;
}

.value-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.value-card {
  background: var(--off-white);
  border: 1px solid var(--light-grey);
  border-top: 3px solid var(--blue-mid);
  padding: 1.8rem;
  transition: box-shadow 0.25s, transform 0.25s;
}
.value-card:hover { box-shadow: 0 6px 30px rgba(30,77,183,0.1); transform: translateY(-2px); }

.value-card-icon { margin-bottom: 1rem; }
.value-card-icon svg {
	width: 48px;
	height: 48px;
	color: var(--primary-color);
}

.value-card h4 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  color: var(--dark-text);
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}
.value-card p { font-size: 0.9rem; color: var(--mid-grey); line-height: 1.68; }

/* ─────────────────────────────────────────────────
   PRODUCTS GRID (homepage)
───────────────────────────────────────────────── */
.products-section {
  background: var(--off-white);
  padding: 8rem 4rem;
  border-bottom: 1px solid var(--light-grey);
}

.products-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 4rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.products-header h2 { font-size: clamp(2.4rem, 3.5vw, 3.4rem); }

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.product-card {
  background: #fff;
  border: 1px solid var(--light-grey);
  padding: 1.0rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.25s, transform 0.25s;
  text-decoration: none;
  display: block;
  color: inherit;
}
.product-card:hover {
  box-shadow: 0 10px 50px rgba(30,77,183,0.1);
  transform: translateY(-4px);
}
.product-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--blue-mid), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.product-card:hover::after { transform: scaleX(1); }

.product-num {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 900;
  font-size: 5rem;
  color: rgba(0,0,0,0.04);
  line-height: 1;
  position: absolute;
  top: 0; right: 1.5rem;
}

.product-icon {
  width: 52px;
  height: 46px;
  background: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
  padding: 0 10px 0 8px;
}
.product-icon svg {
  width: 28px;
  height: 28px;
  color: var(--blue-mid);
}

.product-card h3 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  text-transform: uppercase;
  color: var(--dark-text);
  letter-spacing: 0.03em;
  margin-bottom: 0.9rem;
}
.product-card p { font-size: 0.95rem; color: var(--mid-grey); line-height: 1.78; }

.product-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue-mid);
  transition: gap 0.2s;
}
.product-card:hover .product-link { gap: 0.7rem; }

/* ─────────────────────────────────────────────────
   CAPABILITIES BAND
───────────────────────────────────────────────── */
.capabilities-band {
  background: var(--navy);
  padding: 6rem 4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  overflow: hidden;
}
.capabilities-band::before {
  content: 'BUILT IN BRITAIN';
  position: absolute;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 900;
  font-size: 10rem;
  color: rgba(255,255,255,0.025);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  white-space: nowrap;
  text-transform: uppercase;
  pointer-events: none;
}

.cap-item {
  padding: 0 2.5rem;
  border-right: 1px solid rgba(255,255,255,0.07);
  position: relative;
  z-index: 1;
}
.cap-item:first-child { padding-left: 0; }
.cap-item:last-child { border-right: none; }

.cap-icon { font-size: 2.2rem; margin-bottom: 1.2rem; display: block; }

.cap-item h4 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.04em;
  margin-bottom: 0.7rem;
}
.cap-item p { font-size: 0.92rem; color: rgba(255,255,255,0.48); line-height: 1.7; }

/* ─────────────────────────────────────────────────
   PROCESS
───────────────────────────────────────────────── */
.process-section {
  background: #fff;
  padding: 8rem 4rem;
  border-top: 1px solid var(--light-grey);
  border-bottom: 1px solid var(--light-grey);
}

.process-intro { max-width: 580px; margin-bottom: 5rem; }
.process-intro h2 { font-size: clamp(2.4rem, 3.5vw, 3.2rem); margin-bottom: 1.2rem; }
.process-intro p { font-size: 1.05rem; color: var(--mid-grey); line-height: 1.85; }

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  position: relative;
}
.process-connector {
  position: absolute;
  top: 22px;
  left: calc(12.5% + 10px);
  right: calc(12.5% + 10px);
  height: 1px;
  background: linear-gradient(to right, var(--blue-mid), #b8d0f8);
  z-index: 0;
}
.process-step { position: relative; z-index: 1; }

.step-badge {
  width: 46px; height: 46px;
  background: var(--blue-mid);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 1.8rem;
  clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
  padding-right: 5px;
}

.process-step h4 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--dark-text);
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}
.process-step p { font-size: 0.95rem; color: var(--mid-grey); line-height: 1.78; }

/* ─────────────────────────────────────────────────
   WHY US
───────────────────────────────────────────────── */
.whyus-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--white);
}

.whyus-visual {
  background: var(--navy);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.whyus-visual::before {
  content: '';
  position: absolute;
  inset: 0;
}

.whyus-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.big-quote { position: relative; z-index: 1; }
.big-quote-mark {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 11rem;
  color: rgba(255,255,255,0.06);
  line-height: 0.7;
  margin-bottom: -3rem;
  display: block;
}
.big-quote blockquote {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
  letter-spacing: 0.02em;
  border: none;
  padding: 0;
  margin: 0;
  background: none;
}
.big-quote cite {
  display: block;
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.4);
  font-style: normal;
  margin-top: 1.5rem;
  line-height: 1.65;
}

.whyus-list {
  padding: 7rem 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.whyus-list h2 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 3vw, 2.8rem);
  text-transform: uppercase;
  color: var(--dark-text);
  margin-bottom: 2.5rem;
}

.why-item {
  display: flex;
  gap: 1.5rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--light-grey);
}
.why-item:first-of-type { border-top: 1px solid var(--light-grey); }

.why-num {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: rgba(30,77,183,0.18);
  line-height: 1;
  flex-shrink: 0;
  width: 2.5rem;
}
.why-content h4 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--dark-text);
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.why-content p { font-size: 0.95rem; color: var(--mid-grey); line-height: 1.78; }

/* ─────────────────────────────────────────────────
   CTA BAND
───────────────────────────────────────────────── */
.cta-band {
  background: var(--blue-mid);
  padding: 5.5rem 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.cta-band h2 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 3.5vw, 3rem);
  text-transform: uppercase;
  line-height: 1.05;
  color: white;
  position: relative;
}
.cta-band h2 em { font-style: normal; color: var(--accent); }

/* ─────────────────────────────────────────────────
   ABOUT PAGE
───────────────────────────────────────────────── */
.about-content {
  background: #fff;
  padding: 7rem 4rem;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 6rem;
  align-items: start;
}

.about-body h2 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 3vw, 2.8rem);
  text-transform: uppercase;
  color: var(--dark-text);
  margin-bottom: 1.5rem;
  margin-top: 3.5rem;
}
.about-body h2:first-child { margin-top: 0; }

.about-body p {
  color: var(--mid-grey);
  font-size: 1.05rem;
  line-height: 1.9;
  margin-bottom: 1.4rem;
}

.about-body a {
  color: var(--blue-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.about-body a:hover {
  color: var(--accent);
}

.about-sidebar { position: sticky; top: calc(var(--nav-height) + 2rem); }

.sidebar-card {
  background: var(--off-white);
  border: 1px solid var(--light-grey);
  border-left: 4px solid var(--blue-mid);
  padding: 2rem;
  margin-bottom: 1.5rem;
}
.sidebar-card h4 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue-mid);
  margin-bottom: 1rem;
}
.sidebar-card p { font-size: 0.92rem; color: var(--mid-grey); line-height: 1.72; }

.sidebar-list { list-style: none; padding: 0; margin: 0; }
.sidebar-list li {
  font-size: 0.92rem;
  color: var(--mid-grey);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--light-grey);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.sidebar-list li:last-child { border-bottom: none; }
.sidebar-list li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--blue-mid);
  flex-shrink: 0;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ─────────────────────────────────────────────────
   PRODUCTS DETAIL PAGE
───────────────────────────────────────────────── */
.products-detail-section {
  background: var(--off-white);
  padding: 7rem 4rem;
}
.products-detail-section .section-intro-heading {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 3vw, 2.8rem);
  text-transform: uppercase;
  color: var(--dark-text);
  margin-bottom: 3rem;
}
.products-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.product-detail-card {
  background: #fff;
  border: 1px solid var(--light-grey);
  border-top: 4px solid var(--blue-mid);
  padding: 3rem;
  max-width: 760px;
  margin: 0 auto;
  transition: box-shadow 0.25s;
}
.product-detail-card:hover { box-shadow: 0 8px 40px rgba(30,77,183,0.1); }

.product-detail-card h3 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 800;
  font-size: 1.9rem;
  text-transform: uppercase;
  color: var(--dark-text);
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}
.product-detail-card p { color: var(--mid-grey); font-size: 0.97rem; line-height: 1.82; margin-bottom: 1rem; }
.product-detail-card p a {
  color: var(--blue-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.product-detail-card p a:hover {
  color: var(--accent);
}

.spec-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin-top: 1.5rem;
}
.spec-item {
  background: var(--off-white);
  border: 1px solid var(--light-grey);
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  color: var(--dark-text);
}
.spec-item strong {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue-mid);
  margin-bottom: 0.3rem;
}

.product-detail-card.featured {
  background: var(--navy);
  border-top-color: var(--accent);
}
.product-detail-card.featured h3 { color: var(--accent); }
.product-detail-card.featured p { color: rgba(255,255,255,0.6); }
.product-detail-card.featured p em { color: rgba(255,255,255,0.35); font-style: normal; }

/* ─────────────────────────────────────────────────
   CONTACT PAGE
───────────────────────────────────────────────── */
.contact-section {
  background: var(--off-white);
  padding: 7rem 4rem;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 5rem;
  border-bottom: 1px solid var(--light-grey);
}

.contact-info h2 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 3vw, 2.8rem);
  text-transform: uppercase;
  color: var(--dark-text);
  margin-bottom: 1.2rem;
}
.contact-info > p {
  font-size: 1.02rem;
  color: var(--mid-grey);
  line-height: 1.85;
  margin-bottom: 2.8rem;
}

.contact-detail { display: flex; gap: 1.2rem; margin-bottom: 1.8rem; align-items: flex-start; }
.contact-icon {
  width: 46px; height: 40px;
  background: var(--blue-light);
  border: 1px solid rgba(30,77,183,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
  padding-right: 5px;
}
.contact-detail h4 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue-mid);
  margin-bottom: 0.35rem;
}
.contact-detail p { font-size: 0.97rem; color: var(--mid-grey); margin: 0; line-height: 1.72; }

.map-placeholder {
  margin-top: 2.5rem;
  background: var(--light-grey);
  border: 1px solid #d0d4dc;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
}
.map-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(30,77,183,0.07) 0, rgba(30,77,183,0.07) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(90deg, rgba(30,77,183,0.07) 0, rgba(30,77,183,0.07) 1px, transparent 1px, transparent 28px);
}
.map-placeholder iframe { width: 100%; height: 100%; border: none; }
.map-pin { font-size: 2.4rem; position: relative; z-index: 1; }
.map-label {
  position: relative; z-index: 1;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700; font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue-mid);
}
.map-sublabel { position: relative; z-index: 1; font-size: 0.8rem; color: var(--mid-grey); }

.contact-form-wrap {
  background: #fff;
  border: 1px solid var(--light-grey);
  padding: 3.5rem;
  box-shadow: 0 4px 40px rgba(0,0,0,0.06);
}
.contact-form-wrap h3 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 800;
  font-size: 1.9rem;
  text-transform: uppercase;
  color: var(--dark-text);
  margin-bottom: 2rem;
}

/* CF7 + native form styles */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1.3rem; }
.form-group label,
.contact-form-wrap label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dark-text);
  margin-bottom: 0.5rem;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea,
.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap input[type="tel"],
.contact-form-wrap select,
.contact-form-wrap textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  background: var(--off-white);
  border: 1.5px solid var(--light-grey);
  border-bottom: 2px solid var(--blue-mid);
  color: var(--dark-text);
  font-family: 'Barlow', sans-serif;
  font-size: 0.97rem;
  padding: 0.85rem 1rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  border-radius: 0;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.contact-form-wrap input:focus,
.contact-form-wrap select:focus,
.contact-form-wrap textarea:focus,
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  border-color: var(--blue-mid);
  background: white;
  box-shadow: 0 0 0 3px rgba(30,77,183,0.08);
}
.form-group textarea,
.contact-form-wrap textarea,
.wpcf7-form textarea { resize: vertical; min-height: 130px; }

.form-submit,
.wpcf7-submit {
  margin-top: 1.5rem;
}
.wpcf7-submit,
input[type="submit"].btn-primary {
  width: 100%;
  justify-content: center;
  font-size: 1.1rem;
  padding: 1.1rem 2rem;
  clip-path: none;
  cursor: pointer;
  display: block;
  background: var(--blue-mid);
  color: white;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: none;
  transition: background 0.2s;
}
.wpcf7-submit:hover,
input[type="submit"].btn-primary:hover { background: #2c5fda; }

/* CF7 validation */
.wpcf7-not-valid-tip { color: #e74c3c; font-size: 0.8rem; margin-top: 0.3rem; display: block; }
.wpcf7-response-output {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--blue-mid);
  background: var(--blue-light);
  color: var(--dark-text);
  font-size: 0.9rem;
  border-right: none;
  border-top: none;
  border-bottom: none;
}

.form-privacy { font-size: 0.78rem; color: #9aa0ad; margin-top: 1rem; line-height: 1.65; }

/* ─────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────── */
.site-footer {
  background: var(--charcoal);
  padding: 5rem 4rem 2.5rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.footer-brand p {
  color: rgba(255,255,255,0.38);
  font-size: 0.88rem;
  line-height: 1.82;
  margin-top: 1.2rem;
  max-width: 260px;
}

.footer-col h5 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.85);
  margin-bottom: 1.5rem;
}

/* WP nav menu in footer */
.footer-col ul,
.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col ul li { margin-bottom: 0.75rem; }
.footer-col ul li a {
  color: rgba(255,255,255,0.4);
  font-size: 0.88rem;
  transition: color 0.2s;
}
.footer-col ul li a:hover { color: rgba(255,255,255,0.85); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom p { font-size: 0.78rem; color: rgba(255,255,255,0.5); margin: 0; }

.footer-certs { display: flex; gap: 0.8rem; align-items: center; }
.cert-badge {
  border: 1px solid rgba(255,255,255,0.5);
  padding: 0.3rem 0.85rem;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
}

/* ─────────────────────────────────────────────────
   STANDARD WP PAGE / POST CONTENT
───────────────────────────────────────────────── */
.entry-content {
  padding: 120px;
}
.entry-content h1, .entry-content h2, .entry-content h3 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--dark-text);
  margin-bottom: 1rem;
  line-height: 1;
}

.entry-content h1 { font-size: clamp(2.4rem, 4vw, 3.5rem); }
.entry-content h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.entry-content h3 { font-size: 1.6rem; }
.entry-content p  { color: var(--mid-grey); font-size: 1.02rem; line-height: 1.88; margin-bottom: 1.2rem; }
.entry-content ul, .entry-content ol { padding-left: 1.5rem; margin-bottom: 1.2rem; }
.entry-content li { color: var(--mid-grey); font-size: 1.02rem; line-height: 1.78; margin-bottom: 0.4rem; }
.entry-content a  { color: var(--blue-mid); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--accent); }

/* ─────────────────────────────────────────────────
   CONTENT CONTAINER (constrained width)
───────────────────────────────────────────────── */
.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ─────────────────────────────────────────────────
   BLOG LAYOUT (index + single)
───────────────────────────────────────────────── */
.blog-layout {
  display: flex;
  gap: 3rem;
  padding: 4rem 0;
  align-items: flex-start;
}

.blog-main {
  flex: 1;
  min-width: 0;
}

.blog-main .post-entry {
  margin-bottom: 0;
}

.post-title {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  text-transform: uppercase;
  color: var(--dark-text);
  margin-bottom: 0.5rem;
  line-height: 1.15;
}

.post-title a {
  color: var(--dark-text);
  text-decoration: none;
  transition: color 0.2s;
}

.post-title a:hover {
  color: var(--blue-mid);
}

.post-meta {
  font-size: 0.8rem;
  color: var(--mid-grey);
  margin-bottom: 1rem;
}

.post-thumb {
  margin-bottom: 1.5rem;
  border-radius: 4px;
  overflow: hidden;
}

.post-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.post-excerpt {
  color: var(--mid-grey);
  font-size: 1.02rem;
  line-height: 1.88;
  margin-bottom: 1.5rem;
}

.post-separator {
  margin: 2.5rem 0;
  border: none;
  border-top: 1px solid var(--light-grey);
}

.no-posts {
  color: var(--mid-grey);
  font-size: 1.02rem;
}

/* ── Blog Sidebar ── */
.blog-sidebar {
  width: 320px;
  flex-shrink: 0;
}

.sidebar-widget {
  background: var(--off-white);
  border: 1px solid var(--light-grey);
  border-left: 4px solid var(--blue-mid);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.widget-title {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue-mid);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--light-grey);
}

.sidebar-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-widget ul li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--light-grey);
  font-size: 0.92rem;
  color: var(--mid-grey);
  line-height: 1.6;
}

.sidebar-widget ul li:last-child {
  border-bottom: none;
}

.sidebar-widget ul li a {
  color: var(--dark-text);
  text-decoration: none;
  transition: color 0.2s;
}

.sidebar-widget ul li a:hover {
  color: var(--blue-mid);
}

.sidebar-widget ul li .post-count {
  color: var(--mid-grey);
  font-size: 0.85rem;
}

/* ─────────────────────────────────────────────────
   BREADCRUMBS
───────────────────────────────────────────────── */
.breadcrumbs {
  padding: 1.5rem 0;
}

.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.breadcrumbs ol li {
  font-size: 0.82rem;
  color: var(--mid-grey);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumbs ol li + li::before {
  content: '/';
  color: var(--light-grey);
  font-size: 0.8rem;
}

.breadcrumbs ol li a {
  color: var(--blue-mid);
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumbs ol li a:hover {
  color: var(--navy);
  text-decoration: underline;
}

.breadcrumbs ol li[aria-current="page"] {
  color: var(--dark-text);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────
   SINGLE POST CONTENT
───────────────────────────────────────────────── */
.single-post-content {
  padding-bottom: 4rem;
}

.single-post-content p {
  color: var(--mid-grey);
  font-size: 1.02rem;
  line-height: 1.88;
  margin-bottom: 1.2rem;
}

.single-post-content h1,
.single-post-content h2,
.single-post-content h3 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--dark-text);
  margin-bottom: 1rem;
  line-height: 1;
}

.single-post-content h1 { font-size: clamp(2.4rem, 4vw, 3.5rem); }
.single-post-content h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.single-post-content h3 { font-size: 1.6rem; }

.single-post-content ul,
.single-post-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.2rem;
}

.single-post-content li {
  color: var(--mid-grey);
  font-size: 1.02rem;
  line-height: 1.78;
  margin-bottom: 0.4rem;
}

.single-post-content a {
  color: var(--blue-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.single-post-content a:hover {
  color: var(--accent);
}

.single-post-thumb {
  margin-bottom: 2rem;
  border-radius: 4px;
  overflow: hidden;
}

.single-post-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.single-post-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--light-grey);
}

/* ─────────────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────────────── */
@keyframes dq-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-content > * {
  animation: dq-fade-up 0.65s ease both;
}
.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.hero-content > *:nth-child(2) { animation-delay: 0.25s; }
.hero-content > *:nth-child(3) { animation-delay: 0.42s; }
.hero-content > *:nth-child(4) { animation-delay: 0.58s; }

/* ─────────────────────────────────────────────────
   SERVICE TYPE PILLS
───────────────────────────────────────────────── */
.service-pills {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.service-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.35rem 0.85rem;
  border-radius: 3px;
  font-family: 'Alegreya Sans', sans-serif;
}

.service-pill.manufacturing {
  background: rgba(30, 77, 183, 0.12);
  color: var(--blue-mid);
  border: 1px solid rgba(30, 77, 183, 0.25);
}

.service-pill.refurbishing {
  background: rgba(240, 165, 0, 0.12);
  color: #b07800;
  border: 1px solid rgba(240, 165, 0, 0.25);
}

.service-pill.modification {
  background: rgba(0, 150, 100, 0.12);
  color: #006644;
  border: 1px solid rgba(0, 150, 100, 0.25);
}

/* ─────────────────────────────────────────────────
   EQUIPMENT ARCHIVE
───────────────────────────────────────────────── */
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.equipment-card {
  background: #fff;
  border: 1px solid var(--light-grey);
  border-top: 3px solid var(--blue-mid);
  padding: 2rem;
  transition: box-shadow 0.25s, transform 0.25s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.equipment-card:hover {
  box-shadow: 0 10px 50px rgba(30,77,183,0.1);
  transform: translateY(-4px);
}

.equipment-image {
  margin-bottom: 1.5rem;
  border-radius: 8px;
  overflow: hidden;
  background: var(--light-grey);
}
.equipment-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

.equipment-content h3 {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  text-transform: uppercase;
  color: var(--dark-text);
  letter-spacing: 0.03em;
  margin-bottom: 0.9rem;
}

.equipment-excerpt {
  font-size: 0.95rem;
  color: var(--mid-grey);
  line-height: 1.78;
  margin-bottom: 1.5rem;
}

.equipment-specs {
  margin-bottom: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.spec-item {
  background: var(--off-white);
  border: 1px solid var(--light-grey);
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  color: var(--dark-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.spec-item strong {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue-mid);
  flex-shrink: 0;
  min-width: 100px;
}
.spec-item span {
  color: var(--mid-grey);
}

.equipment-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
}

.equipment-card .btn-primary {
  background-color: #033A79 !important;
  color: #ffffff !important;
  position: relative;
  z-index: 1;
  text-decoration: none !important;
}

.no-equipment {
  text-align: center;
  padding: 4rem 2rem;
}

/* ─────────────────────────────────────────────────
   RESPONSIVE EQUIPMENT ARCHIVE
───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top    { grid-template-columns: 1fr 1fr; }
  .equipment-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  /* Header */
  .site-header { padding: 0 1.5rem; }
  .primary-nav-wrap { display: none; }
  .nav-toggle { display: flex; justify-content: center; }
  
  /* Hamburger icon spans - ensure they're visible in mobile view */
  .nav-toggle span {
    display: block !important;
    width: 24px !important;
    height: 4px !important;
    background: var(--blue-mid) !important;
    border-radius: 2px !important;
    transition: transform 0.3s, opacity 0.3s, width 0.3s !important;
    transform-origin: center !important;
  }

  /* Logo mobile sizing */
  #logo-container { font-size: 2em !important; margin-top: 10px !important }
  
  /* Hero */
  .hero { 
    min-height: 100svh; 
    padding: 140px 1.5rem 0;
    margin-top: -120px;
    display: block;
    height: auto;
    overflow: hidden;
  }
  .hero-content { 
    padding: 120px 0 2rem;
    margin-bottom: 0;
  }
  .hero h1 { font-size: 3rem; }
  .hero-sub { font-size: 1rem; }
  .hero-stats { 
    flex-wrap: wrap; 
    padding: 1.5rem; 
    gap: 1rem; 
    position: relative;
    margin-top: 2rem;
  }
  .stat-item { 
    flex: 0 0 100%; 
    border-right: none; 
    margin-right: 0; 
    padding-right: 0;
  }
  .stat-num { font-size: 2rem; }

  /* Sections */
  .about-intro        { grid-template-columns: 1fr; padding: 4.5rem 1.5rem; gap: 3.5rem; }
  .products-section   { padding: 5rem 1.5rem; }
  .products-grid      { grid-template-columns: 1fr; }
  .capabilities-band  { grid-template-columns: 1fr 1fr; padding: 4rem 1.5rem; }
  .cap-item           { padding: 1.5rem; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .cap-item:last-child { border-bottom: none; }
  .process-section    { padding: 5rem 1.5rem; }
  .process-grid       { grid-template-columns: 1fr 1fr; }
  .process-connector  { display: none; }
  .whyus-section      { grid-template-columns: 1fr; }
  .whyus-list { padding: 4rem 2rem; }
  .cta-band           { flex-direction: column; align-items: flex-start; padding: 4rem 1.5rem; }
  .about-content      { grid-template-columns: 1fr; padding: 4.5rem 1.5rem; gap: 3rem; }
  .about-sidebar      { position: static; }
  .products-detail-section { padding: 4.5rem 1.5rem; }
  .products-page-grid { grid-template-columns: 1fr; }
  .contact-section    { grid-template-columns: 1fr; padding: 4.5rem 1.5rem; gap: 3rem; }
  .site-footer        { padding: 4rem 1.5rem 2rem; }
  .footer-top         { grid-template-columns: 1fr 1fr; }
  .page-hero          { padding: 3rem 1.5rem; }
  .page-hero::after   { display: none; }
  .form-row           { grid-template-columns: 1fr; }
  .entry-content      { padding: 3rem 1.5rem; }
  .contact-form-wrap  { padding: 2rem; }
  .value-grid         { grid-template-columns: 1fr; }
  .equipment-grid     { grid-template-columns: 1fr; }
  .blog-layout        { flex-direction: column; }
  .blog-sidebar       { width: 100%; }
  .content-container  { padding: 0 1.5rem; }
}

@media (max-width: 480px) {
  .site-header { height: 80px !important; }
  .mobile-nav { margin-top: -40px !important;}
  .capabilities-band { grid-template-columns: 1fr; }
  .footer-top        { grid-template-columns: 1fr; }
  .footer-certs      { flex-wrap: wrap; }
  .spec-list         { grid-template-columns: 1fr; }
  .hero-bolts        { display: none; }
  
  /* Logo mobile sizing - very small screens */
  #logo-container { font-size: 1.5em !important; margin-top: 5px !important; }
  
  /* Hero mobile fixes */
  .hero h1 { font-size: 2rem; }
  .hero-sub { font-size: 0.9rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions a { width: 100%; justify-content: center; }
  .hero-stats { padding: 1rem; }
  .stat-item { min-width: 100%; }
  .stat-num { font-size: 1.6rem; }
  .stat-label { font-size: 0.6rem; }
  .product-detail-card { padding: 1.5rem; }
}

/* ─────────────────────────────────────────────────────────────
   WORDPRESS GLOBAL STYLE OVERRIDES
   WP adds inline <style> blocks via wp_head() that can set
   text-align:center on .custom-logo-link, .site-title etc.
   These rules live at the end of our stylesheet to win the
   cascade, and use !important to beat inline specificity.
──────────────────────────────────────────────────────────────*/
.custom-logo-link              { display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; }
.custom-logo                   { display: block !important; max-height: 42px !important; height: 42px !important; width: auto !important; margin: 0 !important; }
header .site-title             { text-align: left !important; }
header .wp-block-site-title    { text-align: left !important; }
header .wp-block-site-logo     { display: flex !important; align-items: center !important; text-align: left !important; margin: 0 !important; }
header .wp-block-site-logo img { max-height: 42px !important; height: 42px !important; width: auto !important; }

/* Hide WordPress emoji (we use SVG icons instead) */
img.wp-smiley,
.emoji {
	display: none !important;
}

/* ─────────────────────────────────────────────────
   WORDPRESS ADMIN BAR FIX
   Push header down when logged-in admin bar is present
───────────────────────────────────────────────── */
body.admin-bar .site-header {
  top: var(--wp-admin-bar-height, 32px);
}

/* Adjust mobile nav position when admin bar is present */
body.admin-bar .mobile-nav {
  top: calc(var(--nav-height) + var(--wp-admin-bar-height, 32px));
}

/* Adjust hero margin to account for both header offset and admin bar */
body.admin-bar .hero {
  margin-top: calc(-120px - var(--wp-admin-bar-height, 32px));
}