:root {
  --navy:        #16263F;
  --navy-deep:   #0F1B2E;
  --ink:         #1B2839;
  --ink-soft:    #4A5567;
  --paper:       #FAF8F4;
  --paper-2:     #F2EEE7;
  --line:        #E5E0D6;
  --line-dark:   rgba(255,255,255,0.12);
  --orange:      #E0531A;
  --orange-deep: #BC410F;
  --white:       #FFFFFF;
  --muted-light: #9AA3B0;

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', Arial, Helvetica, sans-serif;

  --nav-h: 76px;
  --maxw: 1280px;
  --pad: 110px;
}

/* Force & to render in sans-serif within all Playfair Display elements */
@font-face {
  font-family: 'Playfair Display';
  src: local('Inter'), local('Arial'), local('Helvetica Neue'), local('Helvetica');
  unicode-range: U+0026;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: 90px; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: var(--nav-h);
}
html.lenis, html.lenis body { height: auto; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ── TYPE ── */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-block;
  margin-bottom: 18px;
}
.eyebrow--muted { color: var(--ink-soft); }
.eyebrow--light { color: var(--orange); }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.08; color: var(--ink); }

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.display--light { color: var(--white); }
.display em { font-style: italic; color: var(--orange); }

.title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.title--light { color: var(--white); }

.lede { font-size: 19px; line-height: 1.6; color: var(--ink-soft); font-weight: 400; }
.lede--light { color: rgba(255,255,255,0.72); }

.body-text { font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); }
.body-text--light { color: rgba(255,255,255,0.7); }

/* ── LAYOUT ── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.section { padding: var(--pad) 0; }
.section--paper { background: var(--paper); }
.section--navy { background: var(--navy); color: var(--white); }
.section--deep { background: var(--navy-deep); color: var(--white); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* ── NAV ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  height: var(--nav-h);
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(229,224,214,0.6);
  display: flex; align-items: center;
  transition: box-shadow .35s, background .35s;
}
.nav--scrolled {
  background: rgba(255,255,255,0.98);
  box-shadow: 0 4px 32px rgba(22,38,63,0.10);
}
.nav__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; }

/* ── BRAND (logo dominant) ── */

/* Logo — main visual element */
.nav__logo {
  width: 80px;
  height: 62px;
  display: block;
  flex-shrink: 0;
  transition: filter 0.4s ease;
  overflow: visible;
}

.logo-rocket-group {
  transform-origin: 25px 35px;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.50, 1);
}

/* Hover state — gentle orange glow but static */

/* Takeoff keyframes for click launch interaction */

@keyframes logoLaunchAnim {
  0% {
    transform: translate(0, 0) scale(1);
  }
  15% {
    transform: translate(-3px, 3px) scale(0.96);
  }
  100% {
    transform: translate(140px, -140px) scale(0.4);
    opacity: 0;
  }
}

/* Brand text — secondary, smaller */

.nav__links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav__links a {
  position: relative;
  font-size: 15px; font-weight: 500; color: var(--ink-soft);
  padding: 8px 14px; border-radius: 6px;
  transition: color .22s;
}
.nav__links a:hover { color: var(--navy); }
.nav__links a.active { color: var(--navy); }
.nav__links a.active::after {
  content: ''; position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px; background: var(--orange); border-radius: 2px;
}
.nav__sep { width: 1px; height: 20px; background: var(--line); margin: 0 8px; }
.nav__cta {
  background: var(--navy) !important; color: #fff !important;
  padding: 10px 20px !important; border-radius: 7px; font-weight: 600 !important;
  transition: background .22s !important;
}
.nav__cta:hover { background: var(--orange) !important; }
.nav__cta.active::after { display: none !important; }
.nav__roof {
  display: flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--orange); border-radius: 7px;
  padding: 6px 13px !important; color: var(--orange) !important;
  font-weight: 600 !important; font-size: 13.5px !important;
  background: rgba(224,83,26,.06); transition: background .18s, color .18s !important;
}
.nav__roof svg { width: 14px; height: 14px; flex-shrink: 0; stroke: currentColor; }
.nav__roof:hover { background: rgba(224,83,26,.14) !important; color: var(--orange-deep) !important; }
.nav__roof.active::after { display: none !important; }
.nav__burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; }
.nav__burger span { width: 24px; height: 2px; background: var(--navy); display: block; transition: transform .25s, opacity .25s; }

@media (max-width: 940px) {
  .nav__logo { width: 44px; height: 44px; }
  .nav__burger { display: flex; }

  /* ── Full-screen drawer — must be above everything on the page ── */
  .nav__links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--navy-deep);
    padding: 0;
    gap: 0;
    display: none;
    z-index: 9999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav__links.open { display: flex; }

  /* Spacer below nav bar */
  .nav__links::before {
    content: '';
    display: block;
    height: var(--nav-h);
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  /* Main nav links */
  .nav__links > li > a,
  .nav__links > li > a:not(.nav__roof):not(.nav__cta) {
    padding: 17px 28px;
    border-radius: 0;
    font-size: 17px;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
    border-left: 3px solid transparent;
    transition: background .15s, border-color .15s, color .15s;
    display: flex;
    align-items: center;
  }
  .nav__links a {
    padding: 17px 28px;
    border-radius: 0;
    font-size: 17px;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
    border-left: 3px solid transparent;
    transition: background .15s, border-color .15s, color .15s;
  }
  .nav__links a:hover {
    background: rgba(255,255,255,0.06);
    border-left-color: var(--orange);
    color: #fff;
  }
  .nav__links a.active {
    border-left-color: var(--orange);
    color: #fff;
    background: rgba(255,255,255,0.05);
    font-weight: 600;
  }
  .nav__links a.active::after { display: none; }

  /* Separator */
  .nav__sep {
    display: block !important;
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 8px 28px;
    width: auto;
  }

  /* Roofing supply */
  .nav__links .nav__roof {
    margin: 8px 20px 4px;
    border-radius: 10px !important;
    padding: 15px 20px !important;
    font-size: 16px !important;
    border: 1.5px solid rgba(224,83,26,0.5) !important;
    border-left: 1.5px solid rgba(224,83,26,0.5) !important;
    background: rgba(224,83,26,0.08) !important;
    color: var(--orange) !important;
    justify-content: flex-start;
    display: flex;
    gap: 8px;
  }
  .nav__links .nav__roof:hover {
    background: rgba(224,83,26,0.16) !important;
    border-color: var(--orange) !important;
    color: var(--orange) !important;
  }
  .nav__links .nav__roof.active::after { display: none !important; }

  /* Contact CTA */
  .nav__links .nav__cta {
    margin: 8px 20px 24px;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    font-size: 16px !important;
    border-left: none !important;
    background: var(--orange) !important;
    color: #fff !important;
    text-align: center;
    justify-content: center;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
  }
  .nav__links .nav__cta:hover {
    background: var(--orange-deep) !important;
  }
  .nav__links .nav__cta.active::after { display: none !important; }

  /* Burger → X animation */
  .nav__burger span { transition: transform .25s, opacity .2s, background .2s; }
  .nav__burger.open span { background: var(--navy); }
  .nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 13px 26px; border-radius: 7px; border: 1px solid transparent;
  cursor: pointer; transition: all .2s; line-height: 1;
}
.btn svg { width: 15px; height: 15px; transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }
.btn--solid { background: var(--orange); color: #fff; }
.btn--solid:hover { background: var(--orange-deep); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-deep); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--navy); }
.btn--ghost:hover { border-color: var(--navy); }
.btn--ghost-light { background: transparent; border-color: rgba(255,255,255,0.3); color: #fff; }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.btn--white { background: #fff; color: var(--navy); }
.btn--white:hover { background: var(--paper-2); }
.link-arrow { display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:15px; color:var(--orange); }
.link-arrow svg { width:15px; height:15px; transition:transform .2s; }
.link-arrow:hover svg { transform: translateX(3px); }

/* ── HERO ── */
.hero { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.hero__inner { max-width: var(--maxw); margin: 0 auto; padding: 96px 32px 72px; }
.hero__lead { max-width: 720px; }
.hero h1 { color: #fff; margin-bottom: 24px; }
.hero h1 em { font-style: italic; color: var(--orange); }
.hero__sub { font-size: 19px; line-height: 1.6; color: rgba(255,255,255,0.72); max-width: 560px; margin-bottom: 0; }

/* ── HERO PHOTO (full-screen) ── */
.hero--photo {
  height: calc(100vh - var(--nav-h));
  min-height: 560px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
}
.hero__bg-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
.hero__bg-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(15,27,46,0.78) 0%, rgba(15,27,46,0.65) 50%, rgba(15,27,46,0.50) 100%);
}
.hero--photo .hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding: 52px 32px 36px;
}
.hero__content { max-width: 800px; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 20px; }
.hero__display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 78px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 20px;
}
.hero__display em { font-style: italic; color: var(--orange); }
.hero--photo .hero__sub { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.7); max-width: 540px; }
.hero__ctas { margin-top: 24px; }

/* Stats strip at the bottom of the hero */
.hero__stats {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 20px;
  flex-wrap: wrap;
  align-items: center;
}
.hero__stat {
  flex: 1;
  min-width: 120px;
  padding-right: 32px;
  border-right: 1px solid rgba(255,255,255,0.12);
  margin-right: 32px;
}
.hero__stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.hero__stat-num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 34px);
  color: var(--orange);
  line-height: 1;
  margin-bottom: 6px;
  font-weight: 400;
}
.hero__stat-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* Divisions as standalone section */
.divisions-section { padding: 48px 0; }
.divisions-section .divisions { margin-top: 0; }

@media (max-width: 760px) {
  .hero--photo .hero__inner { padding: 56px 24px 40px; }
  .hero__display { font-size: clamp(38px, 10vw, 64px); }
  .hero__stats { gap: 24px 0; padding-top: 24px; }
  .hero__stat { flex: 0 0 50%; border-right: none; margin-right: 0; padding-right: 0; border-bottom: 1px solid rgba(255,255,255,0.10); padding-bottom: 16px; margin-bottom: 4px; }
  .hero__stat:nth-last-child(-n+2) { border-bottom: none; }
}

.divisions { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 0; }
.division {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 36px 34px;
  display: flex; flex-direction: column;
  transition: border-color .4s cubic-bezier(0.16, 1, 0.3, 1),
              background .4s cubic-bezier(0.16, 1, 0.3, 1),
              transform .4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.division:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.22); transform: translateY(-2px); }
.division--primary { background: rgba(224,83,26,0.1); border-color: rgba(224,83,26,0.4); }
.division--primary:hover { background: rgba(224,83,26,0.16); border-color: rgba(224,83,26,0.6); }
.division__icon { color: var(--orange); margin-bottom: 22px; }
.division__icon svg { width: 34px; height: 34px; }
.division__label { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-light); margin-bottom: 10px; font-weight: 600; }
.division__title { font-family: var(--serif); font-size: 27px; color: #fff; line-height: 1.1; margin-bottom: 14px; }
.division__desc { font-size: 15px; color: rgba(255,255,255,0.66); line-height: 1.6; margin-bottom: 24px; flex-grow: 1; }
.division__foot { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: #fff; }
.division__foot svg { width: 16px; height: 16px; color: var(--orange); transition: transform .2s; }
.division:hover .division__foot svg { transform: translateX(4px); }

/* ── PAGE HEADER ── */
.page-head {
  position: relative;
  background: var(--navy);
  color: #fff;
  /*
   * All inner pages share this exact block height.
   * min-height locks the floor; flexbox centres content vertically.
   * h1 font-size is capped below so even the longest title stays on one line
   * at desktop widths — preventing any page from growing taller than others.
   */
  min-height: 360px;
  display: flex;
  align-items: center;
  padding: 48px 0;
  overflow: hidden;
}
.page-head::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 85% 0%, rgba(255,107,53,.15), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 26px),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  pointer-events: none;
}
.page-head .wrap { position: relative; z-index: 1; width: 100%; }
.page-head .crumb,
.wpg-hero .crumb {
  display: inline-flex; gap: 6px; align-items: center;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 9px 18px; border-radius: 100px;
  margin-top: 0;
  margin-bottom: 24px;
  transition: background .3s ease, color .3s ease;
}
.page-head .crumb a { color: rgba(255,255,255,.75); text-decoration: none; transition: color .2s; }
.page-head .crumb a:hover { color: #fff; }
.page-head h1 {
  /* Cap the heading so long titles (Roofing, Services) never wrap at desktop widths.
     clamp(28px, 3.5vw, 52px) keeps headings single-line above ~900px viewport. */
  font-size: clamp(28px, 3.5vw, 52px);
  line-height: 1.08;
  color: #fff;
  margin-bottom: 16px;
  transition: opacity .3s ease, transform .3s ease;
}
.page-head h1 em { font-style: italic; color: var(--orange); }
.page-head .lede { transition: opacity .3s ease; }
.crumb { font-size: 13.5px; color: var(--muted-light); margin-bottom: 22px; }
.crumb a:hover { color: #fff; }
.crumb span { margin: 0 8px; opacity: .5; }

/* ── TRUST STRIP ── */
.strip { background: var(--paper); border-bottom: 1px solid var(--line); }
.strip__inner { max-width: var(--maxw); margin: 0 auto; padding: 22px 32px; display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: center; }
.strip__item { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-soft); font-weight: 500; }
.strip__item svg { width: 16px; height: 16px; color: var(--orange); flex-shrink: 0; }

/* ── SERVICE LIST ── */
.svc { padding: 34px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 52px 1fr; gap: 28px; align-items: start; }
.svc:last-child { border-bottom: 1px solid var(--line); }
.svc__num { font-family: var(--serif); font-size: 18px; color: var(--orange); padding-top: 4px; }
.svc__title { font-family: var(--serif); font-size: 24px; color: var(--ink); margin-bottom: 8px; }
.svc__/* ── FEATURE CARD (flagship services) ── */

.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--ink); }
.check svg { width: 17px; height: 17px; color: var(--orange); flex-shrink: 0; margin-top: 2px; }

/* ── PROJECT (editorial split) ── */
.proj { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 28px; background: #fff; }
.proj__img { background: var(--paper-2); min-height: 320px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.proj__img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.proj__img-ph { color: var(--muted-light); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.proj__img-ph svg { width: 40px; height: 40px; opacity: .5; }
.proj__.proj__loc { font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--orange); font-weight: 600; margin-bottom: 12px; }
.proj__name { font-family: var(--serif); font-size: 30px; color: var(--ink); line-height: 1.08; margin-bottom: 16px; }
.proj__desc { font-size: 15.5px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 22px; }
.proj__meta { display: flex; gap: 36px; }
.proj__meta .k { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-light); margin-bottom: 4px; }
.proj__meta .v { font-size: 14px; font-weight: 600; color: var(--ink); }

/* ── SERVICE BLOCKS (construction.html) ── */
.svcblock {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  padding: 52px 0;
  align-items: start;
}
.svcblock__img {
  margin-top: 20px;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.svcblock__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.svcblock__label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  display: block;
  padding-top: 4px;
}
.svcblock__desc {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 600px;
}
.svcblock__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 32px;
}
.svcblock__list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.svcblock__list li svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--orange);
}
.svcblock__divider {
  height: 1px;
  background: var(--line);
}

/* small project teaser tiles */
.tile {
  display: block; text-decoration: none;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  transition: box-shadow .5s cubic-bezier(0.16, 1, 0.3, 1),
              transform .5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color .4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0,0,0,.35);
  border-color: rgba(224,83,26,0.35);
}
.tile__img { aspect-ratio: 16/10; overflow: hidden; background: var(--navy-deep); }
.tile__img img { width:100%; height:100%; object-fit:cover; transition: transform .8s cubic-bezier(0.16, 1, 0.3, 1); }
.tile:hover .tile__img img { transform: scale(1.05); }

.tile__body {
  padding: 14px 20px;
  transition: background .3s ease;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.tile__loc {
  display:inline-flex; align-items:center;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--orange); font-weight: 700;
  background: rgba(224,83,26,0.08);
  padding: 4px 10px; border-radius: 100px;
  order: 2; flex-shrink: 0;
  white-space: nowrap;
}
.tile__name {
  font-family: var(--serif); font-size: 20px; font-weight: 500;
  color: var(--ink-soft); letter-spacing: -0.01em;
  display: inline-block;
  padding-left: 14px;
  border-left: 2px solid rgba(224,83,26,0.45);
  order: 1;
}
.tile__desc { display: none; }

/* ── PRODUCT CARDS ── */
.prod {
  display: block; text-decoration: none;
  border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(229,224,214,0.8);
  transition: box-shadow .5s cubic-bezier(0.16, 1, 0.3, 1),
              transform .5s cubic-bezier(0.16, 1, 0.3, 1),
              background .4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color .4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.prod:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(10,22,40,.12);
  background: rgba(255,255,255,0.78);
  border-color: rgba(224,83,26,0.28);
}
.prod__img {
  aspect-ratio: 16/9; position: relative; overflow: hidden;
  padding: 22px; box-sizing: border-box;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), var(--paper-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.prod__brand {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 100px;
  padding: 5px 13px;
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.prod__body {
  padding: 18px 20px 22px;
}
.prod__body::before {
  content: '';
  display: block;
  width: 24px; height: 3px;
  background: var(--orange);
  border-radius: 2px;
  margin-bottom: 8px;
}
.prod__desc { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.prod__img { position: relative; }
.prod__img span { position: relative; z-index: 1; }
.prod__img > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(22,38,63,.12)); transition: transform .8s cubic-bezier(0.16, 1, 0.3, 1); }
.prod:hover .prod__img > img { transform: scale(1.04); }
.prod__dims { display: flex; gap: 18px; margin: 12px 0 0; }
.prod__dims div { font-size: 12px; color: var(--ink-soft); }
.prod__dims b { display: block; color: var(--ink); font-weight: 600; font-size: 13px; }
.prod__order {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--orange); background: none; border: none;
  padding: 0; cursor: pointer;
}
.prod__order svg { width: 15px; height: 15px; transition: transform .2s; }
.prod__order:hover svg { transform: translateX(4px); }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,27,46,0.55);
  display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff; border-radius: 12px; max-width: 460px; width: 100%;
  padding: 38px 36px; position: relative;
}
.modal h3 { font-family: var(--serif); font-size: 24px; margin-bottom: 6px; font-weight: 500; }
.modal p.sub { font-size: 14px; color: var(--ink-soft); margin-bottom: 24px; }
.modal__close {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px;
  border: none; background: var(--paper); border-radius: 8px; cursor: pointer;
  color: var(--ink-soft); display: flex; align-items: center; justify-content: center;
}
.modal__close:hover { background: var(--paper-2); color: var(--ink); }
.modal__close svg { width: 16px; height: 16px; }

.prod-group { margin-bottom: 52px; }
.prod-group__head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 14px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.prod-group__head h3 { font-family: var(--serif); font-size: 26px; color: var(--ink); }
.prod-group__head span { font-size: 13.5px; color: var(--ink-soft); }

/* ── VALUE ROWS (dark) ── */
.value { padding: 26px 0; border-top: 1px solid var(--line-dark); display: grid; grid-template-columns: 44px 1fr; gap: 22px; }
.value:first-of-type { border-top: none; padding-top: 0; }
.value__num { font-family: var(--serif); font-size: 16px; color: var(--orange); padding-top: 3px; }
.value__title { font-family: var(--serif); font-size: 21px; color: #fff; margin-bottom: 7px; }
.value__/* ── FACTS (dark info card) ── */
.facts { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 36px; }
.facts__row { display: flex; align-items: center; gap: 11px; padding: 11px 0; font-size: 15px; color: rgba(255,255,255,0.78); }
.facts__row svg { width: 16px; height: 16px; color: var(--orange); flex-shrink: 0; }

/* ── CTA BAND ── */
.cta { background: var(--orange); color: #fff; text-align: center; padding: 80px 0; }
.cta h2 { font-family: var(--serif); font-size: clamp(28px, 4vw, 42px); color: #fff; margin-bottom: 14px; line-height: 1.1; }
.cta p { font-size: 17px; color: rgba(255,255,255,0.85); margin-bottom: 30px; }

/* ── CONTACT ── */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 40px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f-group { margin-bottom: 18px; }
.f-group label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.f-group input, .f-group select, .f-group textarea {
  width: 100%; padding: 12px 14px; font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 7px; outline: none;
  transition: border-color .2s, background .2s;
}
.f-group input:focus, .f-group select:focus, .f-group textarea:focus { border-color: var(--orange); background: #fff; }
.f-group textarea { resize: vertical; min-height: 120px; }
.info-card { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 26px; margin-bottom: 16px; }
.info-card h4 { font-family: var(--serif); font-size: 17px; color: var(--ink); margin-bottom: 14px; font-weight: 500; }
.info-card p { font-size: 15px; color: var(--ink-soft); line-height: 1.7; }
.info-card a { color: var(--orange); }

/* ── FOOTER ── */
.footer { background: var(--navy-deep); color: #fff; padding: 72px 0 32px; }
.footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 44px; border-bottom: 1px solid var(--line-dark); margin-bottom: 30px; }

.footer__brand span { color: var(--orange); }
.footer__logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  /* Invert to look good on dark bg */
  filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(224,83,26,0.4));
  opacity: 0.85;
}
.footer__desc { font-size: 14.5px; color: rgba(255,255,255,0.55); line-height: 1.7; margin-bottom: 20px; max-width: 340px; }
.footer__ci { display: flex; gap: 9px; font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 8px; }
.footer__ci svg { width: 15px; height: 15px; color: var(--orange); flex-shrink: 0; margin-top: 4px; }
.footer__ci a:hover { color: var(--orange); }
.footer__col h5 { font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--orange); margin-bottom: 18px; font-weight: 600; }
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer__col a { font-size: 14.5px; color: rgba(255,255,255,0.6); }
.footer__col a:hover { color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.45); }

/* ── UTIL ── */
.mb-12 { margin-bottom: 12px; } .mb-20 { margin-bottom: 20px; } .mb-28 { margin-bottom: 28px; }
.mb-40 { margin-bottom: 40px; } .mb-56 { margin-bottom: 56px; }
.section .center.mb-56 { margin-bottom: 64px; }
.section .center.mb-56 .title { margin-top: 8px; }
.center { text-align: center; }
.max-640 { max-width: 640px; } .mx-auto { margin-left: auto; margin-right: auto; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }

/* ── REVEAL ANIMATIONS ── */

/* Base keyframes */

/* Triggered state — element is in viewport */

/* Variant: cards/tiles (scale up) */

/* Faster, smoother transitions site-wide */
.btn, .nav__links a, .wpg-card__btn {
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Smooth card hovers */
.wpg-card {
  transition: box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.wpg-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(10,22,40,.14);
}
.wpg-card__img img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.wpg-card:hover .wpg-card__img img { transform: scale(1.04); }

/* Optimise manufacturer marquee */
.mfr-track {
  will-change: transform;
}

/* Smooth page transitions feel */

/* Nav smooth transitions */
.nav {
  transition: box-shadow 0.2s ease;
}
.nav.scrolled {
  box-shadow: 0 2px 24px rgba(10,22,40,.12);
}

/* Smooth gallery images */
.gallery-grid__item img,
.projects-card__img img,
.proj-hero__img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.35s ease;
}

/* Lightbox smooth */
.lightbox__img-wrap {
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Product swatch click feedback */
.pd-swatch {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pd-swatch:hover { transform: scale(1.08); }
.pd-swatch.active {
  transform: scale(1.05);
  box-shadow: 0 0 0 2px #111, 0 0 0 4px rgba(255,255,255,0.8);
}

/* Smooth pd-main-img color switch */
#pd-main-img {
  transition: opacity 0.2s ease;
}

/* Roofing sticky nav smooth */
.roofing-cat-nav {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Launch animation on click — only */

  15%  { transform: translate(-3px,3px)    scaleX(.85) scaleY(1.18); opacity:1; }
  100% { transform: translate(120px,-120px) scaleX(1.4) scaleY(.5); opacity:0; }

@media (max-width:940px) {
  
  
}

/* ── Footer cleanup ── */

/* ── Prevent modal flash before JS loads ── */

/* ════════════════════════════════════════
   NAV: Rocket + WPG-UK (static, click-to-launch)
════════════════════════════════════════ */
.nav__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: visible;
}
.nav__rocket {
  height: 58px;
  width: auto;
  display: block;
  flex-shrink: 0;
  transition: filter .2s ease;
  transform-origin: 60% 50%;
  margin-top: -6px;
}
.nav__brand:hover .nav__rocket {
  filter: drop-shadow(0 2px 8px rgba(255,107,53,.45));
}
.nav__brand-text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: var(--orange);
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
}
.nav__red { color: var(--orange); }

/* Click: only the rocket flies away, text stays */
.nav__brand.launching .nav__rocket {
  animation: rocketFly .5s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events: none;
}
@keyframes rocketFly {
  0%   { transform: translate(0,0) scale(1); opacity:1; }
  15%  { transform: translate(-2px,2px) scaleX(.9) scaleY(1.12); opacity:1; }
  100% { transform: translate(100px,-100px) scaleX(1.3) scaleY(.5); opacity:0; }
}

@media (max-width:940px) {
  .nav__rocket { height: 40px; }
  .nav__brand-text { font-size: 19px; }
}

/* ════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS — slide from side
════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
               transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateX(0);
}

/* Explicit side direction (set by JS based on nearest edge) */
.reveal-left  { transform: translateX(-24px); }
.reveal-right { transform: translateX(24px); }
.reveal-left.in,
.reveal-right.in { transform: translateX(0); }

/* Cards — slide from side, no vertical drift, subtle scale for depth */
.wpg-card.reveal,
.projects-card.reveal,
.division.reveal,
.tile.reveal,
.rel-card.reveal,
.mfr-card.reveal {
  transform: translateX(24px);
}
.reveal-left.wpg-card,
.reveal-left.projects-card,
.reveal-left.division,
.reveal-left.tile,
.reveal-left.rel-card,
.reveal-left.mfr-card { transform: translateX(-24px); }

.wpg-card.reveal.in,
.projects-card.reveal.in,
.division.reveal.in,
.tile.reveal.in,
.rel-card.reveal.in,
.mfr-card.reveal.in {
  transform: translateX(0);
}

/* Gallery items — fade + side slide */
.gallery-grid__item.reveal {
  transition-duration: 0.85s;
}

/* Feature blocks — wider slide, slower */
.feature.reveal {
  transition-duration: 1.1s;
}

/* Section banners — slide up (kept, reads as a curtain) */
.section-banner.reveal,
.wpg-section-head.reveal {
  transform: translateY(20px);
  transition-duration: 0.8s;
}
.section-banner.reveal.in,
.wpg-section-head.reveal.in {
  transform: translateY(0);
}

/* Strip items — gentle, fast side slide */
.strip__item.reveal {
  transform: translateX(28px);
  transition-duration: 0.7s;
}
.reveal-left.strip__item { transform: translateX(-28px); }
.strip__item.reveal.in { transform: translateX(0); }

/* Project sidebar sections */
.proj-sidebar__section.reveal {
  transform: translateX(24px);
  transition-duration: 0.85s;
}
.reveal-left.proj-sidebar__section { transform: translateX(-24px); }
/* ════════════════════════════════════════
   PROJECTS — project cards
════════════════════════════════════════ */
.projects-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}

.projects-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(229,224,214,0.8);
  border-radius: 14px; overflow: hidden;
  transition: box-shadow .5s cubic-bezier(0.16, 1, 0.3, 1),
              transform .5s cubic-bezier(0.16, 1, 0.3, 1),
              background .4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color .4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.projects-card:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.projects-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(10,22,40,.12);
  background: rgba(255,255,255,0.78);
  border-color: rgba(224,83,26,0.28);
}

.projects-card__img { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--navy); }
.projects-card__img img {
  width:100%; height:100%; object-fit:cover;
  transition: transform .8s cubic-bezier(0.16, 1, 0.3, 1);
}
.projects-card:hover .projects-card__img img { transform: scale(1.06); }

/* Location — glass pill over the photo */
.projects-card__loc {
  position: absolute; top: 16px; left: 16px; z-index: 1;
  display: inline-flex; align-items: center;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: #fff;
  background: rgba(15,27,46,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px 10px; border-radius: 100px;
}

.projects-card__overlay {
  position:absolute; inset:auto 0 0 0; padding: 16px;
  background: linear-gradient(180deg, transparent, rgba(10,22,40,.6));
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.projects-card:hover .projects-card__overlay { opacity: 1; transform: translateY(0); }
.projects-card__view { color:#fff; font-size:13px; font-weight:600; letter-spacing:.04em; }

.projects-card__body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; flex: 1;
}

/* Small accent rule above the title — echoes the section accent bar */


.projects-card__name {
  font-family: var(--serif); font-size: 19px; font-weight: 500;
  color: var(--ink-soft); line-height: 1.3;
  letter-spacing: -0.01em;
  display: inline-block;
  padding-left: 14px;
  border-left: 2px solid rgba(224,83,26,0.45);
  margin-bottom: 8px;
}
.projects-card__scope {
  font-size: 13px; color: var(--ink-soft); line-height: 1.5;
  margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.projects-card__tags { display:flex; gap:8px; flex-wrap:wrap; margin-top: auto; }
.projects-card__tags .tag {
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: var(--ink-soft);
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(229,224,214,0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 4px 10px; border-radius: 100px;
}

@media (max-width: 760px) {
  .projects-grid { grid-template-columns: 1fr; gap: 28px; }
  .projects-card__body { padding: 26px 24px 28px; }
  .projects-card__name { font-size: 24px; }
}

/* Directional reveals */
.reveal-left  { transform: translateX(-32px); }
.reveal-left.in  { transform: translateX(0); }
.reveal-right { transform: translateX(32px); }
.reveal-right.in { transform: translateX(0); }
.reveal-left, .reveal-right { transition: opacity 1.0s cubic-bezier(0.16, 1, 0.3, 1), transform 1.0s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--reveal-delay,0ms); }

/* Native smooth scroll — works safely on every device, no JS engine needed */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* cat-sticky uses native position:sticky (see roofing.html inline styles) */

/* ════════════════════════════════════════
   ORDER / CALCULATE POPUP
════════════════════════════════════════ */
.order-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15,27,46,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .3s cubic-bezier(0.16,1,0.3,1);
}
.order-overlay.open { opacity: 1; }
.order-modal {
  background: #fff; border-radius: 16px;
  width: 100%; max-width: 480px;
  max-height: 88vh; overflow-y: auto;
  padding: 40px 36px 32px;
  position: relative;
  transform: scale(.94) translateY(14px);
  transition: transform .35s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 30px 80px rgba(10,22,40,.28);
}
.order-overlay.open .order-modal { transform: scale(1) translateY(0); }
.order-modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: none; cursor: pointer;
  color: var(--ink-soft);
  transition: background .2s, color .2s, transform .2s;
}
.order-modal__close:hover { background: #FBE7E7; color: #C22126; transform: rotate(90deg); }
.order-modal__close svg { width: 16px; height: 16px; }
.order-modal h3.order-modal__title {
  font-family: var(--serif); font-size: 24px; font-weight: 500;
  color: var(--ink); margin-bottom: 4px;
}
.order-modal p.order-modal__sub {
  font-size: 14px; color: var(--ink-soft); margin-bottom: 24px;
}
.order-field { margin-bottom: 22px; }
.order-field__label {
  display: block; font-size: 13px; font-weight: 600;
  color: #C22126; margin-bottom: 8px; line-height: 1.4;
}
.order-field__input {
  width: 100%; border: none; border-bottom: 1.5px solid var(--line);
  background: transparent; padding: 9px 2px; font-size: 15px;
  font-family: inherit; color: var(--ink); outline: none;
  transition: border-color .2s;
}
.order-field__input:focus { border-bottom-color: #C22126; }
.order-submit {
  width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #C22126; color: #fff; border: none; border-radius: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 11px 22px; cursor: pointer; margin-top: 6px;
  transition: background .2s, transform .15s;
}
.order-submit:hover { background: #A01B1F; }
.order-submit:active { transform: scale(.98); }
.order-submit:disabled { opacity: .7; cursor: default; }
.order-success {
  display: none; text-align: center; font-size: 16px;
  color: var(--ink); line-height: 1.7; padding: 24px 4px;
}
@media (max-width: 560px) {
  .order-modal { padding: 32px 22px 26px; }
}

@media (max-width: 760px) {
  .page-head { min-height: 260px; padding: 36px 0; }
}

/* ════════════════════════════════════════
   SUBTLE GLASS TOUCHES (minimal)
════════════════════════════════════════ */
.wpg-card {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tag {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(229,224,214,0.8);
}
.tag--pill {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1.5px solid #c8c2b8;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ════════════════════════════════════════
   ROOFING HERO (.wpg-hero)
════════════════════════════════════════ */
.wpg-hero {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}
.wpg-hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 85% 0%, rgba(255,107,53,.15), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 26px),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  pointer-events: none;
}
.wpg-hero__inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; }
.wpg-hero h1 { margin-bottom: 28px; }
.wpg-hero .hero__sub { margin-bottom: 48px; line-height: 1.75; }

/* ════════════════════════════════════════
   SERVICES — minimal feature cards
════════════════════════════════════════ */
.feature {
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
  display: grid; grid-template-columns: 520px 1fr;
  transition: box-shadow .5s cubic-bezier(0.16, 1, 0.3, 1), transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature:hover { box-shadow: 0 16px 40px rgba(10,22,40,.10); transform: translateY(-3px); }
.feature__side {
  position: relative; min-height: 320px;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end; padding: 24px;
}
.feature__side::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,22,40,0) 35%, rgba(10,22,40,.78) 100%);
}
.feature__side .eyebrow {
  position: relative; z-index: 1;
  color: #fff; background: rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 5px 12px; border-radius: 100px;
  font-size: 11px; letter-spacing: .14em;
}
.feature__side--accent .eyebrow { background: rgba(255,255,255,.22); }
.feature__side h3, .feature__side p { display: none; } /* moved into main */
.feature__main { padding: 48px 56px; display:flex; flex-direction:column; justify-content:center; }
.feature__main h3 {
  font-family: var(--serif); font-size: 30px; font-weight: 500;
  color: var(--ink); margin-bottom: 14px; line-height: 1.15;
}
.feature__main > p:first-of-type {
  font-size: 16px; color: var(--ink-soft); line-height: 1.75; margin-bottom: 22px;
}
@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; }
  .feature__side { min-height: 220px; }
}
.feature--sm { grid-template-columns: 400px 1fr; }
.feature--sm .feature__side { min-height: 180px; }
.feature--sm .feature__main { padding: 28px 32px; }
.feature--sm .feature__main h3 { font-size: 22px; margin-bottom: 8px; }
.feature--sm .feature__main > p:first-of-type { font-size: 14.5px; line-height: 1.65; margin-bottom: 14px; }
.feature--sm .checks { gap: 6px 14px; }
.feature--sm .check { font-size: 13px; }
@media (max-width: 860px) {
  .feature--sm { grid-template-columns: 1fr; }
  .feature--sm .feature__side { min-height: 160px; }
}

/* ════════════════════════════════════════
   TABLET — mid-size breakpoint (900px)
════════════════════════════════════════ */
@media (max-width: 900px) {
  /* 3-col and 4-col grids → 2 columns at tablet (prevents ~240px-wide cards) */
  .grid-3 { grid-template-columns: 1fr 1fr; gap: 20px; }
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ════════════════════════════════════════
   MOBILE — comprehensive responsive fixes
════════════════════════════════════════ */
@media (max-width: 760px) {
  :root {
    --pad: 56px;
  }

  /* Tighter horizontal padding on small screens */
  .wrap { padding: 0 20px; }
  .nav__inner { padding: 0 20px; }
  .strip__inner { padding: 16px 20px; }

  /* Core grid layouts → single column */
  .grid-2 { grid-template-columns: 1fr; gap: 36px; }
  .grid-3 { grid-template-columns: 1fr; gap: 20px; }
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* Divisions (home page two-up cards) */
  .divisions { grid-template-columns: 1fr; }

  /* Footer → stacked */
  .footer__top { grid-template-columns: 1fr; gap: 28px; }
  .footer { padding: 48px 0 28px; }
  .footer__desc { max-width: 100%; }

  /* Contact form rows → single column */
  .f-row { grid-template-columns: 1fr; gap: 0; }

  /* Project detail split → stacked */
  .proj { grid-template-columns: 1fr; }
  .proj__img { min-height: 220px; position: relative; }

  /* Check lists → single column */
  .checks { grid-template-columns: 1fr; }

  /* Head rows (section title + link) → stacked */
  .head-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .head-row .btn { align-self: flex-start; }

  /* CTA band */
  .cta { padding: 56px 0; }

  /* Hero stats → 2-up then flow */
  .hero__stats { gap: 16px 0; }

  /* Inline service mini-grid on home page → full width cells */
  .grid-2[style*="gap:0"] { grid-template-columns: 1fr; }

  /* Roofing product grid on home page tease → 2-up is fine at 760px */

  /* Form card padding */
  .form-card { padding: 28px 22px; }

  /* Modal */
  .modal { padding: 30px 24px; }

  /* Tile body — allow text to wrap naturally */
  .tile__body { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tile__loc { order: 1; }
  .tile__name { order: 2; border-left: none; padding-left: 0; border-top: 2px solid rgba(224,83,26,0.45); padding-top: 8px; width: 100%; }

  /* Project meta strip */
  .proj__meta { flex-wrap: wrap; gap: 20px; }

  /* Section padding tweak for tighter pages */
  .divisions-section { padding: 32px 0; }

  /* Roofing section heads — allow sub-text to wrap */
  .wpg-section-head { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Prod group head */
  .prod-group__head { flex-wrap: wrap; gap: 8px; }

  /* Value rows */
  .value { grid-template-columns: 36px 1fr; gap: 14px; }

  /* Facts card padding */
  .facts { padding: 24px 20px; }
}

/* ── MOBILE: new svcblock, hero stats strip, projects ── */
@media (max-width: 760px) {
  /* Service blocks → stacked */
  .svcblock { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; }
  .svcblock__img { aspect-ratio: 16/9; margin-top: 12px; }
  .svcblock__list { grid-template-columns: 1fr; gap: 8px; }

  /* Hero stats strip on home → 2 columns */
  .hero__stats { flex-wrap: wrap; }
  .hero__stat { flex: 0 0 48%; }

  /* Projects grid → 1 column */
  .projects-grid { grid-template-columns: 1fr !important; }
  .projects-card__img { aspect-ratio: 16/9; }

  /* CTA section padding */
  .cta h2 { font-size: clamp(22px, 6vw, 34px); }

  /* Services page partner intro → stack */
  .section--paper .grid-2 { grid-template-columns: 1fr; gap: 32px; }

  /* WHY US navy section → stack */
  .section--navy .grid-2 { grid-template-columns: 1fr; gap: 32px; }

  /* Head row with More projects button */
  .head-row { flex-wrap: wrap; }

}

/* ── ABOUT PAGE ── */
.about-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  padding: 80px 0 64px;
  overflow: hidden;
  background: var(--navy);
}
.about-hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 85% 10%, rgba(224,83,26,.18), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 26px),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  pointer-events: none;
}
.about-hero__inner { position: relative; z-index: 1; width: 100%; }
.about-hero__heading {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 20px;
  max-width: 680px;
}
.about-hero__sub {
  font-size: clamp(15px, 2vw, 18px);
  color: rgba(255,255,255,.65);
  max-width: 540px;
  line-height: 1.6;
}

/* About two-column layout */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 64px;
  align-items: start;
  margin-bottom: 56px;
}
.about-grid__text {}

/* Division cards */
.about-div-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  text-decoration: none;
  transition: box-shadow .25s, transform .25s;
}
.about-div-card:last-child { margin-bottom: 0; }
.about-div-card:hover { box-shadow: 0 8px 32px rgba(22,38,63,.12); transform: translateY(-2px); }
.about-div-card__img {
  aspect-ratio: 16/8;
  background: var(--navy) center/cover no-repeat;
  position: relative;
}
.about-div-card__img--roofing {
  background-image: url('../images/about/div-roofing.jpg');
}
.about-div-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(22,38,63,.55) 100%);
  display: flex;
  align-items: flex-end;
  padding: 16px 20px;
}
.about-div-card__body {
  padding: 20px 24px;
  background: #fff;
}
.about-div-card__title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
}
.about-div-card__desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

/* Stats strip */
.about-stats {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
}
.about-stat {
  flex: 1;
  padding: 32px 36px;
  text-align: center;
}
.about-stat__num {
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 40px);
  color: var(--navy);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 8px;
}
.about-stat__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.5;
}
.about-stat__divider {
  width: 1px;
  height: 64px;
  background: var(--line);
  flex-shrink: 0;
}

/* Construction card photo (set inline in HTML or here) */
#about-card-construction {
  background-image: url('../images/about/div-construction.jpg');
}

@media (max-width: 940px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-grid__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .about-div-card { margin-bottom: 0; }
}
@media (max-width: 640px) {
  .about-grid__cards { grid-template-columns: 1fr; }
  .about-stats { flex-direction: column; }
  .about-stat__divider { width: 80%; height: 1px; }
  .about-hero { padding: 60px 0 48px; }
  .about-hero__heading { font-size: clamp(28px, 8vw, 44px); }
}

@media (max-width: 480px) {
  /* On the smallest phones, 4-col and 2-col product grids → single column */
  .grid-4 { grid-template-columns: 1fr; }

  /* Roofing product tease on home (grid-2 inside section--paper) */
  .section--paper .grid-2 > .grid-2 { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* Buttons should be full width on tiny screens */
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn,
  .btn-row .link-arrow { width: 100%; justify-content: center; }

  /* Hero display font on tiny phones */
  .hero__display { font-size: clamp(34px, 9vw, 52px); }

  /* Page heading on tiny phones */
  .page-head h1 { font-size: clamp(26px, 7.5vw, 42px); }
  .display { font-size: clamp(30px, 8vw, 52px); }

  /* Division cards padding */
  .division { padding: 26px 22px; }

  /* Footer brand size */
  .footer__brand { font-size: 22px; }

  /* Nav CTA button — shorter text context */
  .nav__cta { padding: 10px 14px !important; font-size: 13px !important; }
}

/* ═══════════════════════════════════════════
   MOBILE DRAWER — injected into body by JS
   z-index above everything on the page
═══════════════════════════════════════════ */
#mob-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
}
#mob-drawer.open { display: block; }

/* Semi-transparent backdrop */
#mob-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 32, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Slide-in panel from right */
#mob-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 88vw);
  background: var(--navy-deep);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#mob-drawer.open #mob-drawer__panel {
  transform: translateX(0);
}

/* Top bar inside panel */
#mob-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: var(--nav-h);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
#mob-drawer__brand {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
#mob-drawer__close {
  width: 40px; height: 40px;
  border: none; background: rgba(255,255,255,0.08);
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background 0.2s;
}
#mob-drawer__close:hover { background: rgba(255,255,255,0.16); }
#mob-drawer__close svg { width: 18px; height: 18px; }

/* Nav links list */
#mob-drawer__links {
  list-style: none;
  padding: 10px 0;
  flex: 1;
}
#mob-drawer__links li a {
  display: flex;
  align-items: center;
  padding: 15px 24px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  border-left: 3px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  text-decoration: none;
}
#mob-drawer__links li a:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-left-color: var(--orange);
}
#mob-drawer__links li a.mob-active {
  color: #fff;
  font-weight: 600;
  border-left-color: var(--orange);
  background: rgba(255,255,255,0.05);
}

/* Footer buttons */
#mob-drawer__foot {
  padding: 12px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
#mob-drawer__roof {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 10px;
  border: 1.5px solid rgba(224,83,26,0.5);
  color: var(--orange);
  font-size: 15px;
  font-weight: 600;
  background: rgba(224,83,26,0.08);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
#mob-drawer__roof:hover {
  background: rgba(224,83,26,0.16);
  border-color: var(--orange);
}
#mob-drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s;
  letter-spacing: 0.02em;
}
#mob-drawer__cta:hover { background: var(--orange-deep); }

/* Only show on mobile */
#mob-drawer { display: none; }
@media (max-width: 940px) {
  #mob-drawer { display: none; } /* JS controls via .open class */
  #mob-drawer.open { display: block; }
}


/* ═══════════════════════════════════════════
   ACCREDITATIONS — polished / high-visibility
═══════════════════════════════════════════ */
.accreditations {
  margin-top: 30px;
}
.accreditations__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.accreditations__intro .eyebrow {
  margin-bottom: 7px;
}
.accreditations__title {
  margin: 0;
  max-width: 430px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.15;
  font-weight: 400;
  color: #fff;
}
.accreditations__count {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: rgba(255,255,255,.62);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.accreditations__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
.accreditation-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 104px;
  gap: 16px;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  text-decoration: none;
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.accreditation-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.34);
  background: linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.055));
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}
.accreditation-card__logo {
  flex: 0 0 98px;
  width: 98px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.accreditation-card__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 94%;
  max-height: 86%;
  object-fit: contain;
  image-rendering: auto;
}
.accreditation-card__logo--chas img { max-width: 94%; max-height: 72%; }
.accreditation-card__logo--wide img { max-width: 98%; max-height: 68%; }
.accreditation-card__logo--bsa img { max-width: 72%; max-height: 88%; }
.accreditation-card__logo--social {
  background: #2d1e5f;
}
.accreditation-card__logo--social img { max-width: 100%; max-height: 100%; }
.accreditation-card__copy {
  min-width: 0;
  display: block;
  padding-right: 14px;
}
.accreditation-card__name {
  display: block;
  color: #fff;
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 700;
}
.accreditation-card__desc {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.58);
  font-size: 10.5px;
  line-height: 1.35;
}
.accreditation-card__meta {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.36);
  font-size: 9.5px;
  line-height: 1.3;
}
.accreditation-card__arrow {
  position: absolute;
  right: 10px;
  top: 8px;
  color: rgba(255,255,255,.34);
  font-size: 13px;
  transition: color .2s, transform .2s;
}
.accreditation-card:hover .accreditation-card__arrow {
  color: var(--orange);
  transform: translate(1px,-1px);
}

@media (max-width: 560px) {
  .accreditations__intro {
    align-items: flex-start;
  }
  .accreditations__count { display: none; }
  .accreditations__grid {
    grid-template-columns: 1fr;
  }
  .accreditation-card {
    min-height: 104px;
  }
  .accreditation-card__logo {
    flex-basis: 104px;
    width: 104px;
    height: 80px;
  }
}

/* ── HOME: compact, seamless certification marquee ── */
.hero--photo {
  height: auto;
  min-height: calc(100vh - var(--nav-h));
}

.hero--photo .hero__inner {
  padding-bottom: 0;
}

.hero__stats {
  width: 100%;
  flex-wrap: nowrap;
  margin-top: 8px;
  padding-top: 22px;
  padding-bottom: 22px;
}

.hero__stat { min-width: 0; }
.hero__stat:nth-child(3) {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

.hero__accreditations {
  width: 100%;
  background: #fff;
  color: var(--navy);
  overflow: hidden;
  padding: 15px 0 13px;
}

.hero__accreditations-head {
  text-align: center;
  padding: 0 24px 7px;
}

.hero__accreditations-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(23px, 2.15vw, 31px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.hero__accreditations-head p {
  margin: 5px 0 0;
  color: #718096;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .01em;
}

.cert-marquee {
  /* Equal visual spacing: items now size to their own logo (see .cert-marquee__item
     below), so this single gap value IS the real distance between every logo — no
     more uneven whitespace from mismatched badge/wordmark proportions. */
  --cert-gap: clamp(120px, 8vw, 180px);
  width: 100%;
  overflow: hidden;
}

.cert-marquee__viewport {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}

.cert-marquee__track {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
  align-items: center;
  will-change: transform;
  animation: cert-marquee-scroll 58s linear infinite;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

.cert-marquee__set {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  /* Never let one complete set be narrower than the viewport.
     This prevents the end of one set and the beginning of the duplicate
     set from appearing together, so the same logo cannot be visible twice. */
  width: max-content;
  min-width: 100vw;
  box-sizing: border-box;
  padding-inline: clamp(24px, 6vw, 120px);
  gap: var(--cert-gap);
}

.cert-marquee__item {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  text-decoration: none;
  box-sizing: border-box;
}

.cert-marquee__item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 70px;
  object-fit: contain;
  image-rendering: auto;
}

.cert-marquee__item:nth-child(1) img {
  width: auto;
  max-width: 92px;
  max-height: 70px;
}

.cert-marquee__item:nth-child(2) img {
  max-width: 360px;
  max-height: 62px;
}

.cert-marquee__item:nth-child(3) img {
  max-width: 360px;
  max-height: 62px;
}

.cert-marquee__item:nth-child(4) img {
  max-width: 270px;
  max-height: 70px;
}

@keyframes cert-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  /* The track holds two identical sets back-to-back, so shifting by exactly
     half its total width always lands the seam perfectly — regardless of how
     wide each logo actually renders. */
  to { transform: translate3d(-50%, 0, 0); }
}

/* Deliberately never pauses: the duplicated set is separated far enough that
   the same certification can never appear twice inside the viewport at once. */
.cert-marquee__track:hover,
.cert-marquee__track:focus-within {
  animation-play-state: running;
}

@media (max-width: 760px) {
  .hero--photo .hero__inner { padding-bottom: 0; }

  .hero__stats {
    flex-wrap: nowrap;
    gap: 0;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .hero__stat {
    flex: 1 1 33.333% !important;
    border-right: 1px solid rgba(255,255,255,0.12) !important;
    border-bottom: none !important;
    margin-right: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .hero__stat:nth-child(3) {
    border-right: none !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  .hero__stat-num { font-size: clamp(20px, 6vw, 28px); }
  .hero__stat-label { font-size: 9px; letter-spacing: .06em; }

  .hero__accreditations { padding: 12px 0 10px; }
  .hero__accreditations-head { padding-bottom: 5px; }
  .hero__accreditations-head h2 { font-size: 22px; }
  .hero__accreditations-head p { font-size: 10px; }

  .cert-marquee {
    --cert-gap: 48px;
  }

  .cert-marquee__track { animation-duration: 42s; }
  .cert-marquee__item {
    height: 70px;
  }

  .cert-marquee__item img {
    max-width: 100%;
    max-height: 58px;
  }

  .cert-marquee__item:nth-child(1) img {
    max-width: 72px;
    max-height: 58px;
  }

  .cert-marquee__item:nth-child(2) img,
  .cert-marquee__item:nth-child(3) img {
    max-width: 210px;
    max-height: 54px;
  }

  .cert-marquee__item:nth-child(4) img {
    max-width: 190px;
    max-height: 58px;
  }
}

/* Constructionline Gold: match the visual footprint of the other wide badges. */
.cert-marquee__item img[alt="Constructionline Gold"] {
  max-width: 360px;
  max-height: 62px;
}
.accreditation-card__logo--wide img[alt="Constructionline Gold"] {
  max-width: 98%;
  max-height: 68%;
}

/* Constructionline Gold: keep the complete mark optically centered, like the original artwork. */
.cert-marquee__item img[src*="constructionline-gold"],
.accreditation-card__logo--wide img[src*="constructionline-gold"] {
  display: block;
  margin-inline: auto;
  align-self: center;
  object-position: 50% 50%;
  object-fit: contain;
}

.cert-marquee__item:has(img[src*="constructionline-gold"]),
.accreditation-card__logo--wide:has(img[src*="constructionline-gold"]) {
  align-items: center;
  justify-content: center;
}

/* Final Constructionline Gold sizing: give the complete mark the same visual presence as the other wide badges. */
.cert-marquee__item:has(img[src*="constructionline-gold"]) {
  min-width: 250px;
  height: 100px;
}
.cert-marquee__item img[src*="constructionline-gold"] {
  width: 250px;
  max-width: 250px;
  height: auto;
  max-height: 100px;
  object-fit: contain;
  object-position: center;
  margin-inline: auto;
}
.accreditation-card__logo--wide:has(img[src*="constructionline-gold"]) {
  flex-basis: 118px;
  width: 118px;
  height: 90px;
}
.accreditation-card__logo--wide img[src*="constructionline-gold"] {
  width: 112px;
  max-width: 112px;
  height: auto;
  max-height: 86px;
  object-fit: contain;
  object-position: center;
  margin-inline: auto;
}
@media (max-width: 700px) {
  .cert-marquee__item:has(img[src*="constructionline-gold"]) {
    min-width: 220px;
    height: 92px;
  }
  .cert-marquee__item img[src*="constructionline-gold"] {
    width: 220px;
    max-width: 220px;
    max-height: 92px;
  }
  .accreditation-card__logo--wide:has(img[src*="constructionline-gold"]) {
    flex-basis: 108px;
    width: 108px;
    height: 86px;
  }
  .accreditation-card__logo--wide img[src*="constructionline-gold"] {
    width: 102px;
    max-width: 102px;
    max-height: 82px;
  }
}

/* ── HERO headline: light-blue accent (WPG-UK / trust.) ── */
.hero__display .hero__blue { font-style: italic; color: #86A9EA; }
.hero__display .hero__brand { display: block; font-size: 0.85em; line-height: 1.1; margin-bottom: 0.08em; }