/* Novalite uPVC v4 — Main Stylesheet
   Generated from design system
   Brand: #223154 navy | #4563A9 blue | #7896DC blue-light
*/

/* ============================================================
   NOVALITE uPVC v3
   Brand palette from logo:
     Navy  #223154  — primary dark
     Blue  #4563A9  — brand accent
     Ltblue #7896DC — brand highlight
   Neutral: full greyscale
   Fonts: Inter (sans) + Barlow (headings - clean sans-serif)
   Design: Clean premium — greyscale base, blue accents only
============================================================ */
:root {
  /* ── Brand (from logo) ── */
  --navy:       #223154;
  --navy-mid:   #2d4270;
  --blue:       #4563A9;
  --blue-light: #7896DC;
  --blue-pale:  #eef2fb;
  --blue-ghost: #f5f7fd;

  /* ── Greyscale ── */
  --white:     #ffffff;
  --grey-50:   #f9f9f9;
  --grey-100:  #f2f2f2;
  --grey-200:  #e4e4e4;
  --grey-300:  #cccccc;
  --grey-400:  #999999;
  --grey-500:  #6b6b6b;
  --grey-600:  #4a4a4a;
  --grey-700:  #333333;
  --grey-800:  #1f1f1f;
  --grey-900:  #111111;

  /* ── Semantic ── */
  --text:        var(--grey-800);
  --text-muted:  var(--grey-500);
  --border:      var(--grey-200);
  --surface:     var(--grey-50);

  /* ── Type ── */
  --sans:  'Inter', system-ui, -apple-system, sans-serif;
  --serif: 'Barlow', 'Inter', system-ui, sans-serif;

  /* ── Spacing / radius ── */
  --r-sm:  4px;
  --r-md:  10px;
  --r-lg:  18px;
  --r-xl:  28px;
  --r-pill:99px;

  /* ── Shadows (greyscale only) ── */
  --sh-xs: 0 1px 3px rgba(0,0,0,.06);
  --sh-sm: 0 2px 8px rgba(0,0,0,.08);
  --sh-md: 0 6px 24px rgba(0,0,0,.10);
  --sh-lg: 0 16px 56px rgba(0,0,0,.13);

  --max-w: 1240px;
  --px:    clamp(1.25rem, 5vw, 3rem);
  --py:    clamp(3.5rem, 8vw, 6rem);
}

/* ── Reset ─────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px }
body { font-family:var(--sans); color:var(--text); background:var(--white); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden }
img  { max-width:100%; height:auto; display:block }
a    { color:inherit; text-decoration:none }
ul,ol{ list-style:none }
address { font-style:normal }
button { font-family:var(--sans); cursor:pointer }

/* ── Layout helpers ─────────────────────────────────── */
.container { max-width:var(--max-w); margin:0 auto; padding:0 var(--px) }
.skip-nav  { position:absolute; top:-999px; background:var(--blue); color:#fff; padding:.5rem 1rem; z-index:9999 }
.skip-nav:focus { top:0 }
.section   { padding:var(--py) 0 }
.section-alt  { background:var(--grey-50) }
.section-dark { background:var(--navy); color:#fff }

/* ── Typography ─────────────────────────────────────── */
h1 { font-family:var(--serif); font-weight:700; font-size:clamp(2.4rem,5.5vw,4rem); line-height:1.1; color:var(--grey-900); letter-spacing:-.03em }
h2 { font-family:var(--serif); font-weight:700; font-size:clamp(1.8rem,3.5vw,2.6rem); line-height:1.2;  color:var(--grey-900); letter-spacing:-.01em }
h3 { font-family:var(--sans);  font-weight:600; font-size:clamp(1rem,2vw,1.15rem);    line-height:1.35; color:var(--grey-800) }
p  { color:var(--grey-600); line-height:1.75; font-size:.95rem }

.eyebrow {
  display:block; font-size:.7rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--blue);
  margin-bottom:.75rem;
}
.lead { font-size:1.05rem; color:var(--grey-500); max-width:580px; line-height:1.8; margin-top:.75rem }

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.6rem; border-radius:var(--r-sm);
  font-family:var(--sans); font-weight:600; font-size:.82rem;
  letter-spacing:.05em; text-transform:uppercase;
  transition:all .2s; border:none; cursor:pointer; white-space:nowrap;
}
.btn-primary   { background:var(--blue); color:#fff }
.btn-primary:hover { background:var(--navy-mid); transform:translateY(-1px); box-shadow:0 6px 20px rgba(69,99,169,.35) }
.btn-navy      { background:var(--navy); color:#fff }
.btn-navy:hover{ background:var(--navy-mid) }
.btn-ghost-w   { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.45) }
.btn-ghost-w:hover { background:rgba(255,255,255,.1); border-color:#fff }
.btn-outline   { background:transparent; color:var(--blue); border:1.5px solid var(--blue) }
.btn-outline:hover { background:var(--blue); color:#fff }
.btn-ghost-dk  { background:transparent; color:var(--grey-700); border:1.5px solid var(--grey-300) }
.btn-ghost-dk:hover{ background:var(--grey-100) }

/* ══════════════════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════════════════ */
.topbar {
  background:var(--navy);
  padding:.5rem 0;
  font-size:.75rem; font-weight:500; color:rgba(255,255,255,.75);
}
.topbar-inner {
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; flex-wrap:wrap;
}
.topbar-left  { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding-left:.25rem }
.topbar-phone { color:#fff; font-weight:700; display:flex; align-items:center; gap:.4rem; letter-spacing:.03em }
.topbar-phone:hover { color:var(--blue-light) }
.topbar-sep   { opacity:.3 }

/* ══════════════════════════════════════════════════════
   HEADER — Logo left | Nav centre | CTA right
   Two-tier: primary nav (clean, few items) + mega dropdowns
══════════════════════════════════════════════════════ */
.site-header {
  position:sticky; top:0; z-index:200;
  background:#fff;
  border-bottom:1px solid var(--grey-100);
  transition:box-shadow .25s;
}
.site-header.scrolled { box-shadow:var(--sh-md) }
.header-inner {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  height:80px; gap:2.5rem;
}

/* Logo */
.logo { display:flex; align-items:center; flex-shrink:0; text-decoration:none }
.logo img { height:68px; width:auto }

/* Primary nav */
.main-nav { display:flex; justify-content:center; align-self:stretch }
.nav-list  { display:flex; align-items:stretch; gap:.1rem; height:100% }

.nav-item  { position:relative; display:flex; align-items:stretch }
.nav-link  {
  display:flex; align-items:center; gap:.3rem;
  padding:0 1rem;
  font-size:.78rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--grey-600); border-radius:0;
  transition:color .18s, background .18s;
  white-space:nowrap; cursor:pointer; background:none; border:none;
  /* Fill full header height — eliminates gap between button and dropdown */
  height:100%; width:100%;
}
.nav-link:hover, .nav-item.is-active > .nav-link { color:var(--blue); background:var(--blue-ghost) }
.nav-caret {
  width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  opacity:.5; transition:transform .2s; flex-shrink:0;
}
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform:rotate(180deg) }

/* ── Mega dropdown ── */
.mega {
  position:absolute;
  /* Sit flush at bottom of header — no gap = no lost hover */
  top:100%;
  background:#fff; border:1px solid var(--grey-100);
  border-top:none; /* merges visually with header */
  border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:0 8px 32px rgba(0,0,0,.12);
  padding:1.5rem; z-index:300;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(0); transition:opacity .18s, visibility .18s;
  /* No translateY animation needed since flush — avoids any gap */
}
.nav-item:hover .mega,
.nav-item:focus-within .mega {
  opacity:1; visibility:visible; pointer-events:all;
}

/* Windows mega — left-aligned, two columns */
.mega-windows { left:0; width:520px }
.mega-doors   { left:0; width:340px }
.mega-simple  { left:50%; transform:translateX(-50%); width:220px }
.mega-contact { left:auto; right:0; transform:none; width:210px }
.nav-item:hover .mega-simple,
.nav-item:focus-within .mega-simple { transform:translateX(-50%) }
.nav-item:hover .mega-contact,
.nav-item:focus-within .mega-contact { transform:none }

.mega-section-label {
  font-size:.65rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--grey-400);
  padding:.25rem .85rem .6rem; display:block;
}
.mega-cols { display:grid; grid-template-columns:1fr 1fr; gap:.2rem }
.mega-cols-1 { display:grid; gap:.2rem }
.mega-item {
  display:flex; align-items:center; gap:.5rem;
  padding:.7rem .85rem; border-radius:var(--r-sm);
  font-size:.92rem; font-weight:500; color:var(--grey-700);
  transition:background .15s, color .15s;
}
.mega-item:hover { background:var(--blue-ghost); color:var(--blue) }
/* Hub "All X" link at top of mega menu */
.mega-item-hub {
  font-weight:700; color:var(--navy);
  border-bottom:none;
  font-size:.85rem;
}
.mega-item-hub:hover { background:var(--blue-ghost); color:var(--blue) }

.mega-divider { height:1px; background:var(--grey-100); margin:.75rem 0 }

/* ── Header CTA ── */
.header-actions { display:flex; align-items:center; gap:.75rem; flex-shrink:0 }
.hdr-phone {
  font-size:.8rem; font-weight:700; color:var(--grey-800);
  display:flex; align-items:center; gap:.35rem;
  white-space:nowrap; letter-spacing:.02em;
}
.hdr-phone:hover { color:var(--blue) }
.hdr-phone-icon { color:var(--blue) }

/* Hamburger */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:.5rem; cursor:pointer;
}
.hamburger span {
  display:block; width:22px; height:2px;
  background:var(--grey-800); border-radius:2px; transition:all .3s;
}
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
.hamburger.open span:nth-child(2) { opacity:0 }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }

/* Mobile nav overlay */
.mobile-nav {
  display: none;
  position: fixed;
  left: 0; right: 0;
  top: 72px; bottom: 0;
  background: #fff;
  z-index: 999;
  overflow-y: auto;
  padding: 1.5rem var(--px);
  border-top: 2px solid var(--blue);
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  -webkit-overflow-scrolling: touch;
}
/* JS sets style.display = 'block' directly — no class needed */
.mobile-nav-group { margin-bottom:1.5rem }
.mobile-group-title {
  font-size:.65rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--grey-400); padding:.5rem 0; border-bottom:1px solid var(--grey-100); margin-bottom:.5rem;
}
.mobile-nav a {
  display:block; padding:.6rem .5rem; font-size:.9rem; font-weight:500;
  color:var(--grey-700); border-radius:var(--r-sm); transition:background .15s, color .15s;
}
.mobile-nav a:hover { background:var(--blue-ghost); color:var(--blue) }
.mobile-ctas { display:flex; flex-direction:column; gap:.75rem; margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--grey-100) }
.mobile-ctas .btn { justify-content:center }

/* ══════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════ */
.hero {
  position:relative; overflow:hidden;
  background:var(--navy);
  min-height:88vh; display:flex; align-items:center;
  padding:clamp(4rem,10vw,6rem) 0;
}

/* Hero background image */
.hero-bg {
  position:absolute; inset:0;
  background-image:url('/assets/img/hero-banner.webp');
  background-size:cover; background-position:center right;
  opacity:.18; /* subtle — greyscale feel over navy */
}
/* Strong left-side navy gradient so text is always readable */
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(105deg, var(--navy) 40%, rgba(34,49,84,.6) 70%, rgba(34,49,84,.2) 100%);
}
/* Grid texture */
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
}
/* Blue accent stripe — left edge */
.hero-stripe {
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(to bottom, var(--blue-light), transparent);
}

.hero-inner {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 420px;
  gap:4rem; align-items:center;
}

/* Left content */
.hero-eyebrow { color:var(--blue-light); letter-spacing:.2em }
.hero h1 { color:#fff; margin-bottom:1.25rem }
.hero h1 em { font-style:normal; color:var(--blue-light); font-weight:400 }
.hero-desc {
  color:rgba(255,255,255,.65); font-size:1.05rem;
  max-width:500px; margin-bottom:2.5rem; line-height:1.8;
}
.hero-ctas { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:3rem }
.hero-trust { display:flex; gap:2rem; flex-wrap:wrap }
.trust-item {
  display:flex; align-items:center; gap:.5rem;
  font-size:.72rem; color:rgba(255,255,255,.5);
  font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.trust-dot { width:5px; height:5px; border-radius:50%; background:var(--blue-light); flex-shrink:0 }

/* ── Hero right panel ── */
.hero-panel {
  position:relative;
  padding-top:1.5rem; /* space for badge */
}
.mim-badge {
  position:absolute; top:0; right:0; z-index:3;
  background:var(--blue); color:#fff;
  font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.35rem .9rem; border-radius:var(--r-pill);
  box-shadow:0 4px 14px rgba(69,99,169,.5);
}

/* Hero image — tall aspect ratio, full bleed, stats overlaid at bottom */
.hero-panel-img {
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  aspect-ratio:4/5;
  background:var(--grey-800);
}
.hero-panel-img img {
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block;
}
/* Dark gradient at bottom for stat readability */
.hero-panel-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    to bottom,
    transparent 40%,
    rgba(10,20,40,.85) 100%
  );
}

/* Stats — absolutely positioned over image bottom */
.hero-stats {
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  display:flex; align-items:stretch;
  border-top:1px solid rgba(255,255,255,.12);
}
.hero-stat {
  flex:1; text-align:center;
  padding:1.1rem .5rem;
}
.hero-stat-divider {
  width:1px; background:rgba(255,255,255,.15); flex-shrink:0;
  margin:.75rem 0;
}
.stat-num {
  font-family:var(--serif); font-size:1.75rem; color:#fff; line-height:1;
  margin-bottom:.3rem; display:block; letter-spacing:-.02em;
  font-weight:700;
}
.stat-lbl {
  font-size:.62rem; color:rgba(255,255,255,.6); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; display:block;
}

/* ══════════════════════════════════════════════════════
   USP STRIP
══════════════════════════════════════════════════════ */
.usp-strip { background:var(--navy-mid); padding:1.1rem 0; border-top:1px solid rgba(255,255,255,.07) }
.usp-list  { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.usp-item  {
  display:flex; align-items:center; gap:.6rem;
  color:rgba(255,255,255,.75); font-size:.73rem;
  font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.usp-check {
  width:18px; height:18px; border-radius:50%;
  border:1.5px solid rgba(120,150,220,.6);
  display:flex; align-items:center; justify-content:center;
  font-size:.6rem; color:var(--blue-light); flex-shrink:0;
}

/* ══════════════════════════════════════════════════════
   WHY NOVALITE
══════════════════════════════════════════════════════ */
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center }
.why-features { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2.25rem }
.feat-card {
  padding:1.25rem; border:1px solid var(--grey-100); border-radius:var(--r-md);
  background:#fff; transition:border-color .2s, transform .2s, box-shadow .2s;
}
.feat-card:hover { border-color:var(--blue-light); transform:translateY(-2px); box-shadow:var(--sh-md) }
.feat-icon {
  width:36px; height:36px; background:var(--grey-100); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; margin-bottom:.75rem; transition:background .2s;
}
.feat-card:hover .feat-icon { background:var(--blue-pale) }
.feat-card h3 { font-size:.88rem; margin-bottom:.3rem }
.feat-card p  { font-size:.82rem; line-height:1.65 }

/* Why — right image */
.why-visual { position:relative }
.why-img {
  border-radius:var(--r-xl); overflow:hidden; aspect-ratio:3/4;
  background:var(--grey-200);
  display:flex; align-items:center; justify-content:center;
}
.why-img img { width:100%; height:100%; object-fit:cover; filter:saturate(.7) }
/* No image fallback — styled placeholder */
.why-img-placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; color:var(--grey-400); width:100%; height:100%; padding:2rem;
  background:linear-gradient(160deg,var(--grey-100),var(--grey-200));
}
.why-img-placeholder svg { width:60px; height:60px; opacity:.4 }
.why-img-placeholder p { font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; opacity:.5; text-align:center }
/* Factory badge */
.factory-badge {
  position:absolute; bottom:2rem; left:-2rem;
  background:#fff; border-radius:var(--r-md); padding:.9rem 1.1rem;
  box-shadow:var(--sh-lg); display:flex; align-items:center; gap:.75rem; max-width:210px;
}
.fb-icon { width:32px; height:32px; background:var(--blue-pale); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0 }
.fb-text strong { display:block; font-size:.82rem; font-weight:700; color:var(--grey-900) }
.fb-text span   { font-size:.72rem; color:var(--grey-500) }

/* ══════════════════════════════════════════════════════
   PRODUCTS
══════════════════════════════════════════════════════ */
.products-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem }
.prod-card {
  border-radius:var(--r-lg); overflow:hidden; background:#fff;
  border:1px solid var(--grey-100);
  transition:transform .25s, box-shadow .25s, border-color .25s;
  display:flex; flex-direction:column;
}
.prod-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--grey-200) }

/* Product image — greyscale gradient placeholder with overlay title */
.prod-img {
  aspect-ratio:16/9; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--grey-700) 0%,var(--grey-600) 60%,var(--navy-mid) 100%);
  display:flex; align-items:flex-end;
}
.prod-img img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:saturate(.5) brightness(.85);
  transition:transform .4s, filter .4s;
}
.prod-card:hover .prod-img img { transform:scale(1.04); filter:saturate(.7) brightness(.9) }
.prod-img-label {
  position:relative; z-index:2; padding:2rem 1rem .9rem; width:100%;
  background:linear-gradient(transparent,rgba(0,0,0,.72));
  font-family:var(--serif); font-size:1.05rem; color:#fff; line-height:1.3;
}
/* When no image — show label as absolute */
.prod-img-bg-label {
  display:flex; align-items:flex-end; padding:1rem; width:100%; height:100%;
  background:linear-gradient(135deg,var(--grey-700) 0%,var(--navy) 100%);
}
.prod-img-bg-label span {
  font-family:var(--serif); font-size:1.05rem; color:rgba(255,255,255,.9); line-height:1.3;
}
.prod-body { padding:1rem 1.1rem 1.25rem; flex:1; display:flex; flex-direction:column }
.prod-body p { font-size:.83rem; line-height:1.65; flex:1; color:var(--grey-500) }
.prod-link {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.75rem; font-weight:700; color:var(--blue);
  margin-top:.85rem; letter-spacing:.05em; text-transform:uppercase;
  transition:gap .2s;
}
.prod-card:hover .prod-link { gap:.6rem }

/* ══════════════════════════════════════════════════════
   PROCESS
══════════════════════════════════════════════════════ */
.process-steps {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2rem; margin-top:3rem; position:relative;
}
.process-steps::before {
  content:''; position:absolute;
  top:23px; left:calc(12.5% + 12px); right:calc(12.5% + 12px);
  height:1px; background:linear-gradient(90deg, var(--blue-pale), var(--blue-light), var(--blue-pale));
}
.p-step { text-align:center }
.p-circle {
  width:46px; height:46px; border-radius:50%;
  background:#fff; border:2px solid var(--blue-light);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1.3rem; font-weight:700; color:var(--blue);
  margin:0 auto 1.25rem; position:relative; z-index:1;
  transition:background .2s, color .2s, border-color .2s;
}
.p-step:hover .p-circle { background:var(--blue); color:#fff; border-color:var(--blue) }
.p-step h3 { font-size:.88rem; margin-bottom:.4rem }
.p-step p  { font-size:.82rem; color:var(--grey-500); line-height:1.65 }

/* ══════════════════════════════════════════════════════
   REVIEWS
══════════════════════════════════════════════════════ */
.reviews-bar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:2.5rem; flex-wrap:wrap; gap:1.5rem;
}
.rating-block { display:flex; align-items:center; gap:1.25rem }
.rating-num   { font-family:var(--serif); font-size:3.5rem; color:var(--grey-900); line-height:1 }
.rating-stars { color:var(--grey-900); font-size:.95rem; letter-spacing:.04em }
.rating-meta  { font-size:.78rem; color:var(--grey-500); margin-top:.15rem }
.rating-google { display:flex; align-items:center; gap:.4rem; font-size:.73rem; color:var(--grey-400); margin-top:.3rem }

.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem }
.rev-card {
  background:#fff; border:1px solid var(--grey-100); border-radius:var(--r-md);
  padding:1.5rem; display:flex; flex-direction:column; gap:.85rem;
  transition:box-shadow .2s, border-color .2s;
}
.rev-card:hover { box-shadow:var(--sh-md); border-color:var(--grey-200) }
.rev-stars { color:var(--grey-900); font-size:.85rem; letter-spacing:.04em }
.rev-text  {
  font-size:.85rem; line-height:1.75; color:var(--grey-500); flex:1;
  cursor:pointer; transition:color .2s;
}
.rev-text:hover { color:var(--grey-700) }
.rev-text.clamped { display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden }
.rev-row   { display:flex; align-items:center; gap:.65rem }
.rev-avatar {
  width:34px; height:34px; border-radius:50%;
  background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; flex-shrink:0;
}
.rev-name { font-weight:700; font-size:.82rem; color:var(--grey-800) }
.rev-date { font-size:.72rem; color:var(--grey-400) }
.reviews-footer { text-align:center; margin-top:2rem }

/* ══════════════════════════════════════════════════════
   QUOTE CTA BAND — uses request-callback image
══════════════════════════════════════════════════════ */
.cta-band {
  position:relative; overflow:hidden;
  background:var(--navy);
  padding:clamp(2.5rem,7vw,4.5rem) 0;
}
.cta-band-bg {
  position:absolute; inset:0;
  background-image:url('/assets/img/request-callback.webp');
  background-size:cover; background-position:center;
  opacity:.12; filter:grayscale(100%);
}
.cta-band-overlay {
  position:absolute; inset:0;
  background:linear-gradient(90deg, var(--navy) 50%, rgba(34,49,84,.85) 100%);
}
.cta-band-inner {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:3rem;
}
.cta-band h2 { color:#fff; margin-bottom:.6rem }
.cta-band p  { color:rgba(255,255,255,.6); font-size:1rem; max-width:520px }
.cta-band-btns { display:flex; flex-direction:column; gap:.75rem; align-items:flex-end; flex-shrink:0 }

/* ══════════════════════════════════════════════════════
   QUOTE SECTION — uses get-a-quote image as section accent
══════════════════════════════════════════════════════ */
.quote-section { background:var(--grey-50) }
.quote-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start }
.quote-info .lead { color:var(--grey-600) }
.quote-benefits { display:flex; flex-direction:column; gap:.85rem; margin-top:2rem }
.qb { display:flex; align-items:flex-start; gap:.8rem }
.qb-tick {
  width:22px; height:22px; background:var(--blue); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.6rem; font-weight:700; flex-shrink:0; margin-top:.15rem;
}
.qb h4 { font-size:.85rem; font-weight:700; color:var(--grey-800); margin-bottom:.2rem }
.qb p  { font-size:.82rem; color:var(--grey-500) }

.quote-form-box {
  background:#fff; border:1px solid var(--grey-200);
  border-radius:var(--r-xl); padding:2rem; box-shadow:var(--sh-sm);
}
.qf-title {
  font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grey-800); margin-bottom:1.5rem; padding-bottom:1rem;
  border-bottom:1px solid var(--grey-100);
}
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:.85rem }
.form-g     { display:flex; flex-direction:column; gap:.3rem; margin-bottom:.85rem }
.form-g label { font-size:.68rem; font-weight:700; color:var(--grey-400); text-transform:uppercase; letter-spacing:.1em }
.form-g input, .form-g select, .form-g textarea {
  border:1.5px solid var(--grey-200); border-radius:var(--r-sm);
  padding:.7rem .9rem; font-family:var(--sans); font-size:.9rem;
  color:var(--grey-800); background:var(--grey-50);
  transition:border-color .2s, box-shadow .2s; width:100%;
}
.form-g input:focus, .form-g select:focus, .form-g textarea:focus {
  outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(69,99,169,.1); background:#fff;
}
.form-g textarea { resize:vertical; min-height:80px }
.form-submit { width:100%; padding:1rem; border-radius:var(--r-sm); justify-content:center; letter-spacing:.08em; margin-top:.25rem }
.form-note   { font-size:.7rem; color:var(--grey-400); text-align:center; margin-top:.65rem }
.form-success { background:var(--blue-ghost); border:1px solid var(--blue-pale); border-radius:var(--r-md); padding:1.5rem; text-align:center; display:none }
.form-success.show { display:block }
.form-success p:first-child { font-weight:700; color:var(--navy) }

/* ══════════════════════════════════════════════════════
   SERVICE AREAS
══════════════════════════════════════════════════════ */
.areas-wrap { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.75rem }
.area-pill {
  padding:.45rem 1.1rem; border-radius:var(--r-pill);
  border:1px solid var(--grey-200); background:#fff;
  font-size:.8rem; font-weight:600; color:var(--grey-600);
  transition:all .18s; letter-spacing:.02em; text-decoration:none;
}
.area-pill:hover { background:var(--blue); color:#fff; border-color:var(--blue) }
.area-pill.primary { background:var(--navy); color:#fff; border-color:var(--navy) }

/* ══════════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════════ */
.faq-wrap { max-width:760px; margin:2.5rem auto 0; display:flex; flex-direction:column; gap:.75rem }
details.faq {
  border:1px solid var(--grey-100); border-radius:var(--r-md);
  background:#fff; overflow:hidden; transition:border-color .2s;
}
details.faq[open] { border-color:var(--grey-200) }
details.faq summary {
  padding:1.1rem 1.25rem; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-weight:600; font-size:.9rem; color:var(--grey-800); user-select:none;
}
details.faq summary::-webkit-details-marker { display:none }
details.faq[open] > summary { border-bottom:1px solid var(--grey-100); color:var(--blue) }
.faq-plus { font-size:1.3rem; color:var(--blue); transition:transform .2s; flex-shrink:0 }
details[open] .faq-plus { transform:rotate(45deg) }
.faq-body { padding:.75rem 1.25rem 1.25rem; font-size:.88rem; color:var(--grey-500); line-height:1.75 }

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
.site-footer { background:var(--navy); color:rgba(255,255,255,.78); padding:4rem 0 0; position:relative; overflow:hidden }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem; position:relative; z-index:1 }
/* Footer geometric background pattern */
.site-footer::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:52px 52px;
}
/* Blue accent line at top of footer */
.site-footer::after {
  content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
  background:linear-gradient(90deg, var(--blue), var(--blue-light), var(--blue));
}
.footer-brand p { font-size:.88rem; line-height:1.75; margin:.85rem 0 1.25rem; color:rgba(255,255,255,.82) }
.footer-brand address { font-size:.88rem; line-height:2; color:rgba(255,255,255,.78) }
.footer-brand address a { color:rgba(255,255,255,.9); font-weight:500 }
.footer-brand address a:hover { color:#fff }
.footer-logo { display:block; margin-bottom:.25rem }
.footer-logo img { height:36px; width:auto }
.footer-social { display:flex; gap:.65rem; margin-top:1.25rem }
.footer-social a {
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; transition:all .2s;
}
.footer-social a:hover { border-color:#fff; color:#fff; background:rgba(255,255,255,.08) }
.footer-col h4 {
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-bottom:.85rem;
}
.footer-col ul { display:flex; flex-direction:column; gap:.4rem }
.footer-col a { font-size:.88rem; transition:color .2s; color:rgba(255,255,255,.72) }
.footer-col a:hover { color:#fff }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.18);
  margin-top:2rem;
  padding:.9rem 0;
  display:flex; justify-content:center; align-items:center; flex-direction:column;
  text-align:center; gap:.4rem;
  font-size:.7rem; flex-wrap:wrap;
  color:rgba(255,255,255,.65);
  background:rgba(0,0,0,.22);
  margin-left:calc(-1 * var(--px));
  margin-right:calc(-1 * var(--px));
  padding-left:var(--px);
  padding-right:var(--px);
}
.footer-bottom a:hover { color:var(--blue-light) }
.footer-bottom a { color:rgba(255,255,255,.55) }
.footer-bottom p { color:rgba(255,255,255,.65) }
/* Footer enquiry link */
.footer-contact-link {
  display:inline-block; margin-top:1rem;
  font-size:.85rem; font-weight:600; color:var(--blue-light);
  transition:color .2s;
}
.footer-contact-link:hover { color:#fff }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .hero-inner { grid-template-columns:1fr; text-align:center }
  .hero-panel { display:none }
  .hero-trust { justify-content:center }
  .hero-ctas  { justify-content:center }
  .hero-desc  { margin-left:auto; margin-right:auto }
  .why-grid   { grid-template-columns:1fr }
  .why-visual { display:none }
  .why-features { grid-template-columns:1fr 1fr }
  .products-grid { grid-template-columns:repeat(2,1fr) }
  .process-steps { grid-template-columns:1fr 1fr }
  .process-steps::before { display:none }
  .reviews-grid { grid-template-columns:1fr 1fr }
  .quote-grid { grid-template-columns:1fr }
  .cta-band-inner { grid-template-columns:1fr }
  .cta-band-btns { align-items:flex-start }
  .footer-top { grid-template-columns:1fr 1fr; gap:2rem }
}
@media(max-width:768px){
  .main-nav { display:none }
  /* Hide header-actions CHILDREN but keep the container so grid column exists */
  .header-actions .hdr-phone,
  .header-actions .btn { display:none }
  /* Reliable mobile header: full flexbox, logo left, hamburger right */
  .site-header {
    position:sticky; top:0; z-index:200;
    background:#fff !important;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
    border-bottom:1px solid var(--grey-100);
  }
  .header-inner {
    display:flex !important; flex-direction:row !important;
    align-items:center; justify-content:space-between;
    height:72px; padding:0 var(--px); gap:0;
  }
  /* Logo stays left, collapses naturally */
  .logo { flex-shrink:0 }
  /* Hamburger: always visible, always right, always inside the white bar */
  .hamburger {
    display:flex !important;
    position:static !important;
    flex-shrink:0;
    margin-left:auto;
    z-index:1;
    padding:.6rem;
    border-radius:var(--r-sm);
  }
  .hamburger:hover { background:var(--grey-50) }
  .topbar-sep { display:none }
  .topbar-inner { flex-direction:column; align-items:flex-start; gap:.3rem; padding:.4rem var(--px) }
  .topbar-left  { flex-direction:column; align-items:flex-start; gap:.2rem; padding-left:0 }
  .topbar { padding:.35rem 0 }
  .products-grid { grid-template-columns:1fr }
  .reviews-grid  { grid-template-columns:1fr }
  .footer-top    { grid-template-columns:1fr }
  .usp-list      { justify-content:flex-start; gap:1rem }
  .why-features  { grid-template-columns:1fr }
  .process-steps { grid-template-columns:1fr }
  .form-row      { grid-template-columns:1fr }
}

/* ── Fade-in on scroll ── */
@media(prefers-reduced-motion:no-preference){
  .fade { opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease }
  .fade.visible { opacity:1; transform:none }
  .fade-d1 { transition-delay:.1s }
  .fade-d2 { transition-delay:.2s }
  .fade-d3 { transition-delay:.3s }
}

/* ══════════════════════════════════════════════════════
   BREADCRUMB BAR — inner pages
══════════════════════════════════════════════════════ */
.breadcrumb-bar {
  background:var(--navy);
  padding:.7rem 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.breadcrumb {
  display:flex; flex-wrap:wrap; gap:.3rem;
  list-style:none; font-size:.78rem; color:rgba(255,255,255,.55);
}
.breadcrumb li + li::before { content:'›'; margin-right:.3rem; opacity:.5 }
.breadcrumb a { color:rgba(255,255,255,.7); transition:color .2s }
.breadcrumb a:hover { color:#fff }
.breadcrumb li[aria-current="page"] { color:rgba(255,255,255,.9) }

/* ══════════════════════════════════════════════════════
   INNER PAGE HERO — shared styles for landing pages
══════════════════════════════════════════════════════
   Pages using .page-hero get a navy header block
   matching the main site style so they don't look bare
══════════════════════════════════════════════════════ */
.page-hero-section {
  background:var(--navy);
  position:relative; overflow:hidden;
  padding:clamp(2.5rem,6vw,4.5rem) 0;
}
.page-hero-section::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
}
.page-hero-section::after {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(to bottom,var(--blue-light),transparent);
}
.page-hero-section .container { position:relative; z-index:1 }
.page-hero-section h1 { color:#fff }
.page-hero-section .lead { color:rgba(255,255,255,.7); max-width:640px }
.page-hero-section .eyebrow { color:var(--blue-light) }

/* Section header alignment — left by default, centred with .center modifier */
.section-header { margin-bottom:2.5rem }
.section-header h2 { margin-top:.5rem }
.section-header .lead { margin-top:.75rem }
.section-header.center { text-align:center }
.section-header.center .lead { margin-left:auto; margin-right:auto }
/* ══════════════════════════════════════════════════════
   LANDING PAGE HERO — trust items on dark background
══════════════════════════════════════════════════════ */
.lp-trust-dark .lp-trust-item { color:rgba(255,255,255,.65) }
.lp-trust-dark .lp-dot { background:var(--blue-light) }
.page-hero-section .lp-ctas .btn-ghost-dk {
  color:#fff; border-color:rgba(255,255,255,.45);
  background:transparent;
}
.page-hero-section .lp-ctas .btn-ghost-dk:hover {
  background:rgba(255,255,255,.1); border-color:#fff;
}
/* Specs panel on dark — keep white bg */
.page-hero-section .lp-specs {
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.15);
}
.page-hero-section .lp-specs-title { color:rgba(255,255,255,.45) }
.page-hero-section .lp-spec-row { border-bottom-color:rgba(255,255,255,.08) }
.page-hero-section .lp-spec-label { color:rgba(255,255,255,.9) }
.page-hero-section .lp-spec-value { color:rgba(255,255,255,.6) }
.page-hero-section h1 { color:#fff }
.page-hero-section .lead { color:rgba(255,255,255,.72) }

/* ══════════════════════════════════════════════════════
   SHOWROOM -- See Every Product 2-column intro
══════════════════════════════════════════════════════ */
.showroom-intro-grid {
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 3.5rem;
  align-items: center;
  margin-bottom: 3rem;
}
.showroom-intro-img {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.showroom-intro-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 420px;
}
@media(max-width: 900px) {
  .showroom-intro-grid { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem }
  .showroom-intro-img  { max-height: 280px; overflow: hidden }
  .showroom-intro-img img { max-height: 280px; object-fit: cover }
}

/* ══════════════════════════════════════════════════════
   SHOWROOM -- Expert advice section
══════════════════════════════════════════════════════ */
.experts-grid {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 3.5rem;
  align-items: start;
}
/* Content column first in DOM = left column; image second = right column */
.experts-img-wrap {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  /* Sticky so image stays in view while reading long content */
  position: sticky;
  top: 100px;
}
.experts-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.experts-points {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin-top: 1.5rem;
}
.expert-point {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .85rem 1rem;
  background: var(--grey-50);
  border: 1px solid var(--grey-100);
  border-radius: var(--r-md);
}
.expert-point-check {
  width: 22px;
  height: 22px;
  background: var(--blue);
  border-radius: 50%;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: .1rem;
}
.expert-point strong {
  display: block;
  font-size: .87rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .2rem;
}
.expert-point p {
  font-size: .83rem;
  color: var(--grey-500);
  line-height: 1.6;
  margin: 0;
}

/* ── Pre-footer separator (sits between CTA band and footer) ── */
.pre-footer-sep {
  background: var(--grey-50);
  border-top: 1px solid var(--grey-100);
}

@media(max-width: 900px) {
  .experts-grid { grid-template-columns: 1fr; gap: 2.5rem }
  .experts-img-wrap { max-height: 340px; overflow: hidden; position: static }
  .experts-img-wrap img { object-fit: cover; height: 340px; width: 100% }
}

/* ══════════════════════════════════════════════════════
   LANDING PAGES -- Shared styles for 4 product pages
   (double glazed, triple glazed, timber look, european)
══════════════════════════════════════════════════════ */

/* 2-column content + image layout */
.content-img-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 4rem;
  align-items: center;
}
.content-img-grid-reverse {
  grid-template-columns: 420px 1fr;
}
.content-img {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.content-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* Product comparison table (shared) */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.compare-table th {
  padding: .85rem 1rem;
  background: var(--navy);
  color: #fff;
  text-align: left;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.compare-table th.compare-highlight { background: var(--blue) }
.compare-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--grey-100);
  color: var(--grey-600);
  vertical-align: top;
}
.compare-table tr:hover td { background: var(--grey-50) }
.compare-highlight-cell {
  background: var(--blue-ghost) !important;
  font-weight: 600;
  color: var(--blue) !important;
}

/* Benefits 4-col grid (double glazed page) */
.dg-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.dg-benefit {
  padding: 1.25rem;
  background: var(--grey-50);
  border: 1px solid var(--grey-100);
  border-radius: var(--r-md);
}
.dg-benefit-icon {
  font-size: 1.5rem;
  margin-bottom: .75rem;
  display: block;
}
.dg-benefit h3 {
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .4rem;
}
.dg-benefit p {
  font-size: .82rem;
  color: var(--grey-500);
  line-height: 1.65;
  margin: 0;
}

/* Triple glazed comparison visual */
.tg-comparison {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}
.tg-option {
  flex: 1;
  padding: 1.25rem;
  background: var(--grey-50);
  border: 1px solid var(--grey-100);
  border-radius: var(--r-md);
  text-align: center;
}
.tg-option-best {
  background: var(--blue-ghost);
  border-color: var(--blue-light);
}
.tg-panes {
  display: flex;
  justify-content: center;
  gap: 4px;
  height: 50px;
  align-items: center;
  margin-bottom: .75rem;
}
.tg-panes span {
  width: 10px;
  height: 100%;
  background: linear-gradient(180deg, rgba(120,150,220,.4), rgba(120,150,220,.15));
  border: 1px solid rgba(69,99,169,.3);
  border-radius: 2px;
}
.tg-option strong {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .25rem;
}
.tg-option p {
  font-size: .72rem;
  color: var(--grey-500);
  margin: 0;
}

/* Responsive for all product pages */
@media(max-width: 1100px) {
  .dg-benefits-grid { grid-template-columns: 1fr 1fr }
}
@media(max-width: 1024px) {
  .content-img-grid,
  .content-img-grid-reverse { grid-template-columns: 1fr }
  .tg-comparison { flex-direction: column }
}
@media(max-width: 768px) {
  .dg-benefits-grid { grid-template-columns: 1fr }
}

/* ══════════════════════════════════════════════════════
   FORM VALIDATION STYLES
══════════════════════════════════════════════════════ */
/* Invalid field highlight */
.field-invalid,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: #e53e3e !important;
  background: #fff5f5 !important;
  box-shadow: 0 0 0 3px rgba(229,62,62,.12) !important;
}
/* Error message under field */
.field-error {
  display: block;
  color: #e53e3e;
  font-size: .78rem;
  font-weight: 600;
  margin-top: .3rem;
  padding-left: .1rem;
}
/* General form error banner */
.form-api-error {
  background: #fff5f5;
  border: 1px solid #feb2b2;
  border-radius: var(--r-md);
  color: #c53030;
  font-size: .875rem;
  font-weight: 500;
  padding: .85rem 1.1rem;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
/* Success box */
.form-success {
  background: #f0fff4;
  border: 1px solid #9ae6b4;
  border-radius: var(--r-md);
  color: #276749;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.6;
}
.form-success/* [hidden] uses browser default — do not override globally */
/* Mobile nav open state set via JS inline style */
.mobile-nav.open,
.mobile-nav[style*="display: block"],
.mobile-nav[style*="display:block"] {
  display: block !important;
}