/* ===========================
   Tokens
   =========================== */
:root{
  --yellow:#feda3e;   /* important buttons */
  --green:#53c704;    /* icons/marks only */
  --black:#0c0c0d;
  --white:#ffffff;

  --glass-bg: rgba(255,255,255,0.72);
  --glass-stroke: rgba(0,0,0,0.10);
  --muted: rgba(0,0,0,0.65);
--radius: 14px;

}

/* ===========================
   Base
   =========================== */
*{ box-sizing:border-box }
html, body{ height:100% }
body{
  margin:0;
  color:var(--black);
  background:#fff;
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
h1,h2,h3,h4{
  margin:0;
  font-family:"Quicksand", ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
p{ margin:.25rem 0 1rem }
a{ color:inherit; text-decoration:none }

/* Layout helper */
.container{
  width:min(1280px, 92%);
  margin-inline:auto;
  padding-inline: clamp(16px, 3.2vw, 48px);
}

/* ===========================
   Header + Navbar
   =========================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:20;
  backdrop-filter:saturate(160%) blur(10px);
  background:linear-gradient(to bottom, rgba(255,255,255,.88), rgba(255,255,255,.60));
  border-bottom:1px solid rgba(0,0,0,.08);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 0;
}

/* Brand */
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; color:#0c0c0d }
.brand-name{ font-family:"Quicksand"; letter-spacing:.2px }
.logo{ height:42px; width:auto; display:block }

/* Desktop nav (DEFAULT = visible) */
.nav{ margin-inline:auto; display:flex; }
.menu{ display:flex; align-items:center; gap:.25rem; list-style:none; margin:0; padding:0 }
.menu > li{ position:relative }
.menu > li > a{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.6rem 1rem;
  border-radius:999px;                /* for the yellow highlight only */
  font-weight:700; color:#1a1a1a; opacity:.9;
}
.menu > li > a:hover{ opacity:1 }
.menu > li > a.is-current{
  background:var(--yellow); color:#111;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* Services dropdown (desktop hover) */
.has-sub > a .chev{
  width:16px; height:16px; fill:none; stroke:#222; stroke-width:2; transition:transform .15s ease;
}
.submenu{
  position:absolute; top:100%; left:0; min-width:240px;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:14px; padding:.4rem;
  box-shadow:0 16px 40px rgba(0,0,0,.12);
  display:none;
}
.has-sub:hover > a .chev{ transform:rotate(180deg) }
.has-sub:hover .submenu{ display:block }
.submenu li{ list-style:none }
.submenu a{
  display:block; padding:.65rem .8rem; border-radius:10px;
  color:#111; font-weight:600;
}
.submenu a:hover{ background:rgba(0,0,0,.05) }

/* Right-side action (desktop) */
.action-pill{
  display:inline-flex; align-items:center; gap:.7rem;
  background:var(--yellow); color:#111;
  border-radius:999px; padding:.65rem .65rem .65rem 1rem;
  border:1px solid rgba(0,0,0,.08); font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}
.action-pill .dot{
  width:36px; height:36px; border-radius:50%;
  background:#1a1a1a; display:grid; place-items:center;
}
.action-pill .dot svg{ width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2 }

/* CTA visibility */
.desktop-cta{ display:inline-flex; }
.mobile-cta{ display:none; }

/* ===========================
   Hamburger + Mobile Nav
   =========================== */
.hamburger{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px;
  border:none;
  cursor:pointer;
  background-color: transparent;
}
.hamburger span{
  width:22px; height:2.5px; background:#111; display:block;
}



/* Medium & Small screens */
@media (max-width:1024px){
  .hamburger{ display:flex; }

  /* Hide desktop pieces */
  .nav{ display:none; }                /* hidden by default on mobile */
  .desktop-cta{ display:none; }

  /* Slide-down panel when open */
  body.nav-open .nav{
    display:flex;
    position:fixed; left:0; right:0; top:64px; /* header height */
    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.08);
    box-shadow:0 16px 40px rgba(0,0,0,.12);
    padding:.75rem clamp(16px, 4vw, 32px) 1rem;
    z-index:19;
    flex-direction:column; gap:.8rem;
  }

  /* Stack items */
  .menu{
    flex-direction:column; align-items:stretch; gap:.25rem;
    margin-top:.5rem;
  }
  .menu > li > a{
    padding:.9rem 1rem;
    border-radius:12px;
    font-weight:700;
  }

  /* Mobile CTA appears at top of panel and is FLUID */
/* Mobile Enquire Now button (auto width, fluid layout) */
.mobile-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--yellow);
  color: #111;
  border-radius: 999px;
  padding: 0.75rem 1.2rem;
  border: 1px solid rgba(0,0,0,0.08);
  font-weight: 700;
  margin-bottom: 1rem;
  width: auto; /* auto not full width */
}
.mobile-cta .dot {
  width: 32px;
  height: 32px;
  background: #111;
  display: grid;
  place-items: center;
  border-radius: 50%;
}


  /* Mobile submenu = collapsible */
  .submenu{
    position:static;
    display:none;
    border:none; border-radius:12px;
    box-shadow:none;
    padding:.25rem 0 .5rem 0;
    margin-left:.25rem;
  }
  .submenu a{ padding:.6rem .9rem }
  .has-sub.open > .submenu{ display:block }
  .has-sub.open > a .chev{ transform:rotate(180deg) }
}

/* Keep desktop hover dropdown only on large screens */
@media (min-width:1025px){
  .submenu{ display:none; position:absolute }
  .has-sub:hover .submenu{ display:block }
}

/* Responsive header tweaks */
@media (max-width:1024px){
  .menu > li > a{ padding:.55rem .8rem }
  .action-pill{ padding:.6rem .6rem .6rem .9rem }
  .action-pill .dot{ width:34px; height:34px }
}
@media (max-width:820px){
  .header-row{ flex-wrap:wrap; gap:.6rem }
}

/* ===== CTA component ===== */
.cta,
.action-pill,          /* legacy alias kept for compatibility */
.mobile-cta {          /* legacy alias kept for compatibility */
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  background: var(--yellow);
  color: #111;
  border-radius: 999px;
  padding: .75rem 1.2rem;
  border: 1px solid rgba(0,0,0,.08);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  transition: filter .18s ease, transform .06s ease, box-shadow .18s ease;
}

/* Dot with arrow */
.cta__dot,
.action-pill .dot,
.mobile-cta .dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #111;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.cta__dot svg,
.action-pill .dot svg,
.mobile-cta .dot svg {
  width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2;
}

/* Make the hero button visually match inputs and feel premium */
.hero-form .hero-quote{
  border-radius: 999px;
  padding: .9rem 1.2rem;              /* same vertical rhythm as inputs */
  line-height: 1;
  height: 48px;                        /* lock height so it aligns with inputs */
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}

/* Keep the dot neat on this button */
.hero-form .hero-quote .cta__dot{
  width: 36px;
  height: 36px;
  background: #111;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

/* Tight, crisp arrow */
.hero-form .hero-quote .cta__dot svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
}

/* Hover/focus polish */
@media (hover:hover){
  .hero-form .hero-quote:hover{
    filter: brightness(.97);
    box-shadow: 0 8px 22px rgba(0,0,0,.12);
  }
}
.hero-form .hero-quote:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(254,218,62,.45), 0 6px 18px rgba(0,0,0,.10);
}

/* Mobile: make the button full width so the trio stacks nicely */
@media (max-width: 720px){
  .hero-form .hero-quote{
    width: 100%;
    justify-content: space-between;    /* label left, dot right */
  }
}

/* Center "Get Quote" text on small screens */
@media (max-width: 720px){
  .hero-form .hero-quote{
    justify-content: center;   /* center text */
    text-align: center;
  }
  .hero-form .hero-quote .cta__dot{
    display: none;             /* hide arrow on small screen */
  }
}


/* Interactions */
@media (hover:hover){
  .cta:hover { filter: brightness(.97); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
}
.cta:active { transform: translateY(1px); }
.cta:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(254,218,62,.45), 0 6px 18px rgba(0,0,0,.10);
}

/* Size variants (optional) */
.cta--sm { padding: .6rem 1rem; }
.cta--lg { padding: 1rem 1.4rem; }

/* Width variants */
.cta--full { width: 100%; justify-content: space-between; }
.cta--fluid { width: auto; }

/* Desktop vs Mobile visibility (matches your nav breakpoints) */
.desktop-cta { display: inline-flex; }
.mobile-cta  { display: none; }

@media (max-width:1024px){
  .desktop-cta { display: none; }
  .mobile-cta  { display: inline-flex; }

  /* Ensure the mobile CTA stays auto-width and doesn’t stretch in the column panel */
  body.nav-open .nav { align-items: flex-start; }     /* panel children not stretched */
  .mobile-cta       { align-self: flex-start; }       /* pill sized by content */
  .cta__dot,
  .mobile-cta .dot  { width: 32px; height: 32px; }    /* slightly smaller dot on mobile */
}

/* Optional dark-mode tweak (if you add a dark header later) */
/*
@media (prefers-color-scheme: dark){
  .cta { box-shadow: 0 6px 18px rgba(0,0,0,.35); }
}
*/

/* ===========================
   Hero
   =========================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  margin-top:64px;             /* fixed header offset */
  isolation:isolate;
}
.hero-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(0,0,0,.22), rgba(0,0,0,.06)),
    url("solar-panel-installation-solar-store-uk-4-hero.webp") center right / cover no-repeat;
  z-index:-2;
}
.hero-inner{
  position:relative;
  width:100%;
  display:grid; align-items:end;
  grid-template-columns: 1fr;
  padding: clamp(24px, 4vw, 48px) 0 clamp(36px, 6vw, 72px);
  max-width: 1280px;              /* Match navbar container max width */
  margin-inline: auto;            /* Center it */
  padding-inline: clamp(16px, 3.2vw, 48px); /* Match navbar side padding */
}
@media (min-width:1100px){
  .hero-inner{ grid-template-columns: 1.2fr .8fr }
}

/* Glass card */
.glass-card{
  width:min(760px, 100%);
  background:var(--glass-bg);
  border:1px solid var(--glass-stroke);
  border-radius:16px;
  box-shadow:0 22px 60px rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
  padding: clamp(18px, 2.2vw, 28px);
  margin-left: 0;
  min-height: 360px;
}

/* Eyebrow chip */
.eyebrow{
  display:inline-block;
  max-width:max-content;
  padding:.34rem .62rem;
  border-radius:999px;
  border:1px solid var(--green);
  background:var(--green);
  font-size:.8rem; letter-spacing:.10em; text-transform:uppercase;
  color:#ffffff; margin-bottom:.8rem;
}

/* Headline & lead */
.hero-title{
  font-size: clamp(2.6rem, 6vw, 4.25rem);
  line-height:1.04; color:#121212;
  margin-bottom:.7rem;
}
.hero-lead{
  color:var(--muted);
  font-size:1.02rem;
  margin-bottom:1rem;
}


/* ===========================
   Floating talk pill
   =========================== */
.talk-pill{
  position:fixed;
  right:min(3.5vw, 28px);
  bottom:min(3.5vw, 28px);
  display:flex; align-items:center; gap:.9rem;
  background:#fff;
  border:1px solid var(--glass-stroke);
  border-radius:14px;
  padding:.7rem .7rem .7rem .6rem;
  box-shadow:0 18px 45px rgba(0,0,0,.18);
}
/* Keep existing talk-pill layout but modify text + Trustpilot link style */
.talk-pill {
  gap: 1rem;
}

.pill-text {
  font-size: .95rem;
  color: #111;
}

.trustpilot-link img {
  height: 28px;
  display: block;
  transition: opacity .2s ease;
}

.trustpilot-link:hover img {
  opacity: 0.8;
}

.avatars{ display:flex; align-items:center }
.avatars img{
  width:36px; height:36px; object-fit:cover; border-radius:50%;
  border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.12);
  margin-left:-6px;
}
.avatars img:first-child{ margin-left:0 }
.pill-text{ font-weight:600; letter-spacing:.02em; white-space:nowrap }
.pill-go{
  margin-left:.4rem;
  width:42px; height:42px; border:none; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--yellow);
}

/* Float ABOVE everything */
.trust-pill{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;               /* higher than any section/header */
  padding: .9rem 1.2rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

/* Hide on small screens */
@media (max-width: 768px){
  .trust-pill{ display: none !important; }
}

/* ===========================
   Extra Responsive & A11y
   =========================== */
@media (max-width:599px){
  .brand-name{ font-size:1rem }
  .glass-card{ border-radius:14px }
  .hero-title{ font-size: clamp(2rem, 8vw, 3rem) }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important }
}

/* ====== GLOBAL BUTTONS ====== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; color:var(--ink);
  padding:.8rem 1.15rem; border-radius:999px;
  text-decoration:none; border:1px solid transparent;
  box-shadow:var(--shadow);
  transition:filter .18s ease, box-shadow .18s ease, transform .06s ease;
}
.btn:active{ transform:translateY(1px); }

.btn--primary{
  background:var(--yellow); color:var(--black);
  border-color:var(--yellow);
}
.btn--primary:hover{ background: var(--black); box-shadow:var(--shadow-lg);color: var(--yellow);}

.btn--ghost{
  background:#fff; color:var(--ink);
  border-color:rgba(0,0,0,.12);
}
.btn--ghost:hover{ box-shadow:var(--shadow-lg); }

/* Map existing buttons to the global look without changing HTML everywhere */
.btn-about, .btn-gallery, .desktop-cta, .mobile-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; border-radius:999px; text-decoration:none;
  padding:.8rem 1.15rem; border:1px solid rgba(0,0,0,.08);
  background:var(--brand); color:var(--brand-ink);
  box-shadow:var(--shadow);
  transition:filter .18s ease, box-shadow .18s ease, transform .06s ease;
}
.btn-about:hover, .btn-gallery:hover, .desktop-cta:hover, .mobile-cta:hover{
  filter:brightness(.98); box-shadow:var(--shadow-lg);
}

/* ===== Testimonials ===== */
.testimonials-section{
  padding: clamp(56px, 6vw, 92px) 0;
  background: #fff8d6; /* soft yellow to match About */
}

.testi-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom: clamp(20px, 3vw, 28px);
}

.testi-title{
  font-family: "Quicksand", ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  margin: 0 0 .25rem 0;
}
.testi-desc{
  margin: 0;
  max-width: 780px;
  color: #333;
}

.testi-nav{
  display:flex; gap:.5rem;
}
.testi-nav button{
  width:44px; height:44px; border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff; display:grid; place-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .06s ease, box-shadow .18s ease, filter .18s ease;
}
.testi-nav button:hover{ filter:brightness(.98); box-shadow:0 8px 22px rgba(0,0,0,.12); }
.testi-nav button:active{ transform:translateY(1px); }

/* Swiper slide */
.testi-swiper{ overflow:visible; }
.swiper-slide{ height:auto; }

/* Card */
.testi-card{
  background: #fff2b3;                  /* brand yellow, a touch deeper */
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:20px 18px;
  height:100%;
  display:flex; flex-direction:column; gap:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}

.testi-top{
  display:flex; align-items:center; gap:12px;
}

.avatar{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-weight:800; color:#111;
  background:#ffe370; border:1px solid rgba(0,0,0,.06);
}

.name{
  font-size:1rem; font-weight:800; margin:0 0 2px 0; color:#111;
}

.stars{ color:#f4b400; font-size:1rem; line-height:1; }

.quote{
  color:#222; margin:4px 0 0 0; line-height:1.6;
}

.tag{
  align-self:flex-start;
  margin-top:auto;
  font-size:.8rem; font-weight:700;
  padding:.25rem .55rem; border-radius:999px;
  background:#fff; border:1px solid rgba(0,0,0,.08);
}

/* Responsive counts are handled in JS via Swiper breakpoints */
.trustpilot-wrapper {
  margin-top: 40px;
  text-align: center;
}

.trustpilot-logo {
  height: 100px !important; /* ✅ Bigger logo */
  margin-bottom: 12px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
}

.tp-rating {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-weight: 600;
}

.tp-rating i {
  color: #00B67A; /* Trustpilot green */
  font-size: 1.2rem;
}

.rated-text {
  margin-left: 6px;
  font-size: 1rem;
}

.see-reviews {
  display: block;
  margin-top: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #00B67A;
}

.see-reviews:hover {
  text-decoration: underline;
}

.testi-swiper,
.swiper { overflow: hidden !important; }

/* Trustpilot badge: stack text under stars on small screens */
@media (max-width: 576px){
  .tp-rating{
    display: inline-block;      /* stop flex wrapping issues */
    text-align: center;
  }
  .tp-rating i{                 /* keep the five stars on one line */
    display: inline-block;
    margin: 0 1px;
  }
  .tp-rating .rated-text{       /* force caption onto its own line */
    display: block;
    margin-top: 6px;
  }
}

/* ============== CERTIFICATIONS ============== */
.cert-section{
  background:#fff;
  padding: clamp(56px, 6vw, 96px) 0;
}

.cert-title{
  font-family:"Quicksand", ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:800;
  line-height:1.12;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  margin: 4px 0 10px;
}

.cert-lead{
  font-size:1.06rem;
  color:#333;
  max-width: 760px;
  margin-bottom: 12px;
}

.cert-bullets{
  list-style:none;
  padding:0;
  margin: 6px 0 18px;
  display:grid;
  gap:8px;
  padding-bottom: 40px;
}
.cert-bullets li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-weight:600;
}
.cert-bullets i{
  color:#00B67A;
  margin-top:3px;
}

/* ===== FIXED CERT LOGO LAYOUT ===== */
.cert-logos {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 20px;
}

/* First row - MCS alone */
.logo-row.mcs {
  display: flex;
  justify-content: flex-start;
}

/* Second row - RECC + TrustMark */
.logo-row.duo {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

/* Clean logo style - no background/border */
.logo-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
}

.logo-item img {
  display: block;
  height: auto;
  width: auto;
  max-height: 65px;
}

/* Make MCS logo bigger */
.logo-item.mcs img {
  max-width: 300px;    /* prevents overlap */
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Mobile stack */
@media (max-width: 576px) {
  .logo-row.duo {
    flex-direction: column;
    gap: 14px;
  }
}


/* Right side hero image */
.cert-image-wrap{
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,.14);
  border:1px solid rgba(0,0,0,.08);
}
.cert-image{ display:block; width:100%; height:auto; }

/* Self-sufficiency highlight */
.cert-highlight{ margin-top: 24px; }

.self-card{
  background:#fffef1;                /* soft brand yellow background */
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:22px 22px 20px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.self-badge{
  display:inline-block;
  background:#111;
  color:#fff;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.02em;
  padding:.25rem .55rem;
  border-radius:999px;
  margin-bottom:10px;
}
.self-title{
  font-weight:800;
  margin:0 0 8px;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
}
.self-title span{ color:#1a7f00; }
.self-text{ margin:0 0 12px; color:#333; }
.self-stats{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:6px;
  font-weight:600;
}
.self-stats i{ color:#53c704; margin-right:6px; }

/* Self image */
.self-figure{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
  background:#fafafa;
}
.self-image{ display:block; width:100%; height:auto; }
.self-figure figcaption{
  font-size:.9rem;
  padding:10px 12px;
  color:rgba(0,0,0,.7);
}


/* Extra top spacing after the lightning before this section */
.lightning-between + .cert-section {
  padding-top: clamp(80px, 8vw, 120px);   /* more air above the content */
}

/* Global between-sections lightning */
.lightning-between{
  position: relative;
  height: 0;                  /* no extra layout height */
  z-index: 5;                 /* on top of both sections */
}
.lightning-between i{
  position: absolute;
  left: 50%;
  top: 0;                     /* sits on the boundary */
  transform: translate(-50%, -50%);  /* half above, half below */
  font-size: 96px;            /* bigger icon */
  line-height: 1;
  color: var(--yellow, #feda3e);
  pointer-events: none;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.12));
}

/* Rows */
.logo-row {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

/* Row 1: MCS alone */
.logo-row.mcs {
  justify-content: flex-start;
}

/* Row 2: RECC + TrustMark side-by-side */
.logo-row.duo {
  justify-content: flex-start; /* or space-between */
}

/* Logo items — no borders/background (clean) */
.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: transform .15s ease;
}
.logo-item:hover { transform: translateY(-2px); }


/* Responsive: stack the duo on small screens */
@media (max-width: 576px){
  .logo-row.duo { flex-direction: column; align-items: flex-start; }
}

/* CERT logos layout */
.cert-logos{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:20px;
}
.logo-row{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.logo-row.mcs{ justify-content:flex-start; }
.logo-row.duo{ justify-content:flex-start; }

/* Logos – clean */
.cert-logos .logo-item{
  display:flex; align-items:center; justify-content:flex-start;
  background:none; border:0; padding:0; box-shadow:none;
}
.cert-logos .logo-item img{
  display:block; height:auto; width:auto; max-height:72px;   /* regular logos */
}
.cert-logos .logo-item.mcs img{
  max-height:140px;                                          /* ✅ make MCS wider/taller */
}

/* Keep the right column aligned on big screens; give a little top gap on small */
@media (max-width: 991.98px){
  .cert-image-wrap{ margin-top:12px; }
}
/* Remove hover effect ONLY for MCS logo */
.logo-item.mcs:hover {
  transform: none !important;
}


.case-section {
  background: #fff8d6;
  padding: clamp(56px, 6vw, 96px) 0;
}

.case-head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 18px;
}

.case-badge {
  display: inline-block;
  background: #111;
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  padding: .25rem .65rem;
  border-radius: 999px;
  margin-bottom: 8px;
}

.case-title {
  font-family: "Quicksand";
  font-weight: 800;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  margin-bottom: 6px;
}

.case-lead {
  max-width: 760px;
  margin: 0 auto;
}

.case-figure {
  max-width: 980px;
  margin: 20px auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: white;
  box-shadow: 0 10px 24px rgba(0,0,0,.1);
}

.case-image {
  width: 100%;
  height: auto;
}

.case-figure figcaption {
  font-size: .9rem;
  text-align: center;
  padding: 8px;
  color: rgba(0,0,0,.7);
}

.case-stats {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  padding-top: 10px;
}

.case-stats i {
  color: #53c704;
  margin-right: 8px;
}

.case-cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}

.case-cta .cta__dot {
  width: 34px;
  height: 34px;
  background: #000;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.case-stats-wrapper {
  text-align: center;
  display: flex;
  justify-content: center;
}

.case-stats {
  text-align: left;
  display: inline-block;
  margin-top: 15px;
}

/* ===== Footer (slimmer) ===== */
.site-footer{
  background:#fff;
  color:#0c0c0d;
  border-top:1px solid rgba(0,0,0,.06);
  padding: 28px 0 32px;             /* thinner overall */
}

.footer-inner{ width:min(1280px,92%); margin-inline:auto; padding-top: 30px; }

.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;  /* brand + 3 cols */
  gap: clamp(16px,2.4vw,36px);
  align-items:flex-start;
}

/* Headings */
.footer-title{
  margin:0 0 .6rem 0;
  font-family:"Quicksand", ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:800;
  font-size:1rem;
  color: var(--green);
}

/* Lists & links */
.footer-list{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.footer-list a{
  color:#0c0c0d;
  text-decoration:none;
  transition: color .18s ease;
}
.footer-list a:hover{ color: var(--yellow); }

/* Brand block */
.footer-brand { display:grid; gap:.6rem; }
.footer-logo img{ height:80px; width:auto; display:block; }
.footer-blurb{
  margin:0;
  line-height:1.55;
  font-size:.95rem;
}

/* Social */
.footer-social{ display:flex; gap:.5rem; margin-top:.35rem; }
.social-btn{
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.15);
  color:#0c0c0d;
  transition: color .18s ease, border-color .18s ease, transform .06s ease;
}
.social-btn:hover{ color: var(--yellow); border-color: var(--yellow); transform: translateY(-1px); }

/* Rule + legal */
.footer-rule{ border:0; height:1px; background:rgba(0,0,0,.08); margin: 18px 0; }
.footer-legal{ font-size:.92rem; line-height:1.55; }
.footer-copy a{ color:#0c0c0d; text-decoration:none; }
.footer-copy a:hover{ color: var(--yellow); }

/* Utility */
.mt-16{ margin-top:1rem; }

/* Responsive */
@media (max-width: 992px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ order:-1; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-logo img{ height:40px; }
}

/* Add consistent top padding to first element inside any section */
section > *:first-child {
  padding-top: 40px; /* adjust to your spacing preference */
}

/* Consistent spacing for all sections */
section {
  padding-bottom: 80px;
}

/* --- Legal page hero (re-uses your style language) --- */
.legal-hero{
  padding: 120px 0 64px;                 /* clears the fixed header */
  text-align: center;
  background: linear-gradient(to bottom, #fffce6, #fff);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.legal-hero .eyebrow{
  display:inline-block;
  font-weight:800;
  letter-spacing:.02em;
  background:#fff6bf;
  color:#111;
  padding:6px 10px;
  border-radius:999px;
}
.legal-hero h1{
  font-family:"Quicksand",sans-serif;
  font-weight:800;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  margin:10px 0 8px;
}
.legal-hero .lead{
  max-width: 860px;
  margin: 0 auto;
  color:#333;
  line-height:1.6;
}

/* Body copy wrapper */
.legal-body{
  padding: clamp(36px, 5vw, 64px) 0;
}
.legal-body .narrow{ max-width: 860px; margin-inline:auto; }
.legal-body h2{ margin-top: 18px; font-weight: 800; }
.legal-body p, .legal-body li{ color:#222; }