:root {
  --o: #f25524;
  --o2: #ff7618;
  --ink: #181a1d;
  --aqua: #08a7a5;
  --muted: #686d72;
  --cream: #f6f3ee;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
}
.shell {
  width: min(1180px, calc(100% - 40px));
  margin: auto;
}
.top {
  height: 34px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
}
.topin {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}
.top span,
.top a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
}
.top svg {
  width: 14px;
}
.top a {
  margin-left: auto;
}
header {
  height: 84px;
  background: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 30;
}
.nav {
  height: 100%;
  display: flex;
  align-items: center;
}
.nav > a img {
  width: 200px;
  height: auto;
}
.nav nav {
  display: flex;
  gap: 27px;
  margin-left: auto;
}
.nav nav a {
  font-size: 13px;
  font-weight: 800;
  color: #25272a;
  text-decoration: none;
}
.nav nav a:hover {
  color: var(--o);
}
.actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 26px;
}
.langs {
  background: #f1f1f1;
  border-radius: 99px;
  padding: 3px;
}
.langs button {
  border: 0;
  background: none;
  border-radius: 99px;
  padding: 7px 9px;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}
.langs .on {
  background: var(--ink);
  color: #fff;
}
.btn {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  transition: 0.2s;
}
.btn svg {
  width: 16px;
}
.orange {
  background: linear-gradient(135deg, var(--o), var(--o2));
  color: #fff;
  box-shadow: 0 10px 25px #f2552430;
}
.orange:hover {
  transform: translateY(-2px);
}
.dark {
  background: var(--ink);
  color: #fff;
}
.pale {
  background: #fff;
  color: var(--ink);
  border: 1px solid #ddd;
}
.big {
  min-height: 54px;
  padding: 0 25px;
}
.menub {
  display: none;
  background: none;
  border: 0;
}
.mobilemenu {
  display: none;
}
.hero {
  background: var(--cream);
  min-height: 660px;
  overflow: hidden;
}
.herogrid {
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: center;
  min-height: 660px;
}
.herotxt {
  padding: 65px 35px 65px 0;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  text-transform: uppercase;
  color: #d9491d;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 900;
}
.eyebrow svg {
  width: 15px;
}
.hero h1 {
  font-size: clamp(48px, 5.5vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  margin: 22px 0;
}
.herotxt > p {
  font-size: 18px;
  line-height: 1.7;
  color: #5e6267;
  max-width: 620px;
}
.buttons {
  display: flex;
  gap: 11px;
  margin-top: 28px;
}
.proof {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.proof span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
}
.proof svg {
  width: 16px;
  height: 16px;
  padding: 3px;
  border-radius: 50%;
  background: #dff3e6;
  color: #16843f;
}
.heroimage {
  height: 560px;
  position: relative;
  border-radius: 32px 0 0 32px;
  overflow: visible;
}
.heroimage > img {
  object-fit: cover;
  border-radius: 32px;
}
.heroimage:before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: var(--o);
  left: -50px;
  top: 100px;
  z-index: -1;
}
.float {
  position: absolute;
  left: -35px;
  bottom: 38px;
  background: #fff;
  padding: 15px 18px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 20px 60px #1115;
}
.float svg {
  color: var(--o);
}
.float b,
.float small {
  display: block;
}
.float small {
  font-size: 9px;
  color: #777;
  margin-top: 3px;
}
.section {
  padding: 95px 0;
}
.title {
  text-align: center;
  margin-bottom: 45px;
}
.title > span,
.realcopy > span,
.quotegrid > div > span {
  color: var(--o);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 900;
}
.title h2,
.realcopy h2,
.quotegrid h2 {
  font-size: clamp(35px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 13px auto 0;
  max-width: 830px;
}
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.card {
  padding: 36px;
  border: 1px solid #e4e2de;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 70px #1111110d;
}
.card:before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  right: -100px;
  top: -100px;
  background: #0ba8a515;
}
.card.orange:before {
  background: #f255241c;
}
.card > img {
  width: 190px;
  height: 58px;
  object-fit: contain;
  object-position: left;
}
.cardicon {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: #def4f2;
  color: var(--aqua);
  display: grid;
  place-items: center;
  margin-top: 18px;
}
.card.orange .cardicon {
  background: #ffe8df;
  color: var(--o);
}
.card h3 {
  font-size: 29px;
  margin: 20px 0 10px;
}
.card > p {
  color: var(--muted);
  line-height: 1.7;
  min-height: 80px;
}
.card ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.card li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  margin: 9px 0;
}
.card li svg {
  width: 15px;
  color: #159346;
}
.card > div:last-child {
  display: flex;
  align-items: center;
  gap: 20px;
}
.card > div:last-child > a:last-child {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #222;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}
.card > div:last-child svg {
  width: 15px;
}
.sectors {
  background: #181a1d;
  color: #fff;
}
.title.light h2 {
  color: #fff;
}
.sectorgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.sectorgrid > a {
  display: flex;
  gap: 16px;
  padding: 24px;
  background: #ffffff08;
  border: 1px solid #ffffff13;
  border-radius: 14px;
  color: #fff;
  text-decoration: none;
  transition: 0.2s;
}
.sectorgrid > a > svg {
  min-width: 27px;
  color: var(--o);
}
.sectorgrid h3 {
  font-size: 16px;
  margin: 0 0 7px;
}
.sectorgrid p {
  font-size: 12px;
  line-height: 1.55;
  color: #b4b6b9;
  min-height: 52px;
}
.sectorgrid b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}
.sectorgrid b svg {
  width: 14px;
}
.sectorgrid > a:hover {
  background: #fff;
  color: #222;
  transform: translateY(-4px);
}
.sectorgrid > a:hover p {
  color: #666;
}
.sectorgrid > a:hover b {
  color: var(--o);
}
.real {
  display: grid;
  grid-template-columns: 48% 52%;
  gap: 75px;
  align-items: center;
}
.realimg {
  height: 550px;
  position: relative;
  border-radius: 26px;
  box-shadow: 0 30px 70px #1112;
}
.realimg > img {
  object-fit: cover;
  border-radius: 26px;
}
.realimg > div {
  position: absolute;
  right: -25px;
  bottom: 35px;
  background: #fff;
  border-radius: 13px;
  padding: 14px 18px;
  display: flex;
  gap: 10px;
  align-items: center;
  box-shadow: 0 18px 55px #1114;
}
.realimg > div svg {
  color: var(--o);
}
.realimg b,
.realimg small {
  display: block;
}
.realimg small {
  font-size: 9px;
  color: #777;
  margin-top: 3px;
}
.realcopy > p {
  color: var(--muted);
  line-height: 1.8;
}
.realcopy ul {
  list-style: none;
  padding: 0;
  margin: 25px 0;
}
.realcopy li {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 15px 0;
}
.realcopy li > svg {
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 11px;
  background: #ffebe3;
  color: var(--o);
}
.realcopy li b,
.realcopy li small {
  display: block;
}
.realcopy li small {
  font-size: 10px;
  color: #777;
  margin-top: 3px;
}
.steps {
  background: var(--cream);
}
.stepgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.stepgrid article {
  padding: 5px 17px;
}
.stepgrid article > b {
  font-size: 11px;
  color: var(--o);
}
.stepgrid i {
  display: block;
  height: 2px;
  background: #ddd4c7;
  margin: 15px 0 22px;
  position: relative;
}
.stepgrid i:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--o);
  top: -3px;
}
.stepgrid h3 {
  font-size: 18px;
}
.stepgrid p {
  color: #6b6e72;
  font-size: 12px;
  line-height: 1.6;
}
.quote {
  background: linear-gradient(135deg, #f04f24, #ef771b);
  color: #fff;
}
.quotegrid {
  display: grid;
  grid-template-columns: 42% 58%;
  gap: 65px;
  align-items: center;
}
.quotegrid > div > span {
  color: #fff;
}
.quotegrid h2 {
  margin: 14px 0;
}
.quotegrid > div > p {
  color: #ffe6dd;
  line-height: 1.7;
}
.quotegrid > div > a {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  text-decoration: none;
  margin: 20px 0;
}
.quotegrid > div > a > svg {
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid #ffffff60;
  border-radius: 50%;
}
.quotegrid a b,
.quotegrid a small {
  display: block;
}
.quotegrid a small {
  font-size: 10px;
  margin-top: 3px;
}
.quote form {
  background: #fff;
  color: #222;
  padding: 32px;
  border-radius: 20px;
  box-shadow: 0 30px 85px #8a251044;
}
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.quote label {
  display: block;
  font-size: 10px;
  font-weight: 900;
  margin-bottom: 12px;
}
.quote input,
.quote select,
.quote textarea {
  width: 100%;
  display: block;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  margin-top: 6px;
  font: inherit;
  font-size: 12px;
  outline: none;
}
.quote input:focus,
.quote select:focus,
.quote textarea:focus {
  border-color: var(--o);
  box-shadow: 0 0 0 3px #f2552415;
}
.formend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.upload {
  display: flex !important;
  align-items: center;
  gap: 7px;
  border: 1px dashed #aaa;
  border-radius: 8px;
  padding: 13px;
  margin: 0 !important;
  cursor: pointer;
}
.upload svg {
  width: 16px;
}
.privacy {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #888;
  margin-top: 15px;
}
.privacy svg {
  width: 14px;
}
.success {
  text-align: center;
  padding: 45px 15px;
}
.success > svg {
  width: 60px;
  height: 60px;
  padding: 16px;
  border-radius: 50%;
  background: #daf2e2;
  color: #178b42;
}
.success h3 {
  font-size: 27px;
}
.success p {
  color: #666;
  line-height: 1.6;
}
footer {
  background: #111315;
  color: #fff;
  padding: 70px 0 25px;
}
.footgrid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 45px;
}
.whiteLogo {
  filter: brightness(0) invert(1);
  width: 220px;
  height: auto;
}
.footgrid p,
.footgrid a,
.footgrid small {
  display: block;
  color: #aeb0b3;
  font-size: 11px;
  line-height: 1.8;
  text-decoration: none;
  margin: 5px 0;
}
.footgrid h4 {
  color: var(--o);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.logos {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.logos img {
  background: #fff;
  border-radius: 5px;
  padding: 4px;
  object-fit: contain;
}
.copyright {
  border-top: 1px solid #ffffff15;
  margin-top: 45px;
  padding-top: 22px;
  color: #6f7275;
  font-size: 10px;
}
.wa,
.aib {
  position: fixed;
  bottom: 20px;
  z-index: 45;
  border: 0;
  box-shadow: 0 10px 35px #1115;
}
.wa {
  right: 18px;
  width: 56px;
  height: 56px;
  background: #20c863;
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.aib {
  right: 88px;
  height: 50px;
  background: #181a1d;
  color: #fff;
  border-radius: 99px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  cursor: pointer;
}
.aib svg {
  color: var(--o);
}
.chat {
  position: fixed;
  right: 18px;
  bottom: 87px;
  width: 350px;
  background: #fff;
  border-radius: 17px;
  box-shadow: 0 25px 90px #1115;
  z-index: 50;
  overflow: hidden;
}
.chathead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: #181a1d;
  color: #fff;
}
.chathead > svg {
  background: var(--o);
  border-radius: 9px;
  padding: 7px;
  width: 38px;
  height: 38px;
}
.chathead b,
.chathead small {
  display: block;
}
.chathead small {
  font-size: 9px;
  color: #53db86;
  margin-top: 3px;
}
.chathead button {
  margin-left: auto;
  background: none;
  border: 0;
  color: #fff;
}
.chatbody {
  height: 355px;
  overflow: auto;
  padding: 16px;
  background: #f6f6f6;
}
.chatbody p {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 11px;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.5;
  max-width: 88%;
}
.chatbody .mine {
  background: #ffe5da;
  margin-left: auto;
}
.chatbody > div {
  display: grid;
  gap: 6px;
  margin-top: 15px;
}
.chatbody > div button {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 7px;
  padding: 9px;
  text-align: left;
  font-size: 10px;
}
.chatinput {
  padding: 11px;
  display: flex;
  gap: 7px;
}
.chatinput input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 7px;
  padding: 10px;
}
.chatinput button {
  width: 40px;
  border: 0;
  border-radius: 7px;
  background: var(--o);
  color: #fff;
}
.chatinput svg {
  width: 16px;
}
@media (max-width: 1000px) {
  .nav nav,
  .headcta {
    display: none;
  }
  .menub {
    display: block;
  }
  .actions {
    margin-left: auto;
  }
  .mobilemenu {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 118px;
    background: #fff;
    padding: 10px 25px;
    flex-direction: column;
    box-shadow: 0 20px 35px #1112;
  }
  .mobilemenu a {
    display: flex;
    justify-content: space-between;
    padding: 14px;
    border-bottom: 1px solid #eee;
    color: #222;
    text-decoration: none;
    font-weight: 800;
  }
  .herogrid {
    grid-template-columns: 1fr;
  }
  .herotxt {
    position: relative;
    z-index: 2;
    max-width: 760px;
  }
  .heroimage {
    position: absolute;
    right: 0;
    width: 57%;
    opacity: 0.28;
  }
  .choices,
  .real,
  .quotegrid {
    grid-template-columns: 1fr;
  }
  .sectorgrid {
    grid-template-columns: 1fr 1fr;
  }
  .realimg {
    max-width: 650px;
  }
  .footgrid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 650px) {
  .shell {
    width: calc(100% - 26px);
  }
  .topin span:nth-child(2) {
    display: none;
  }
  header {
    height: 72px;
  }
  .nav > a img {
    width: 155px;
  }
  .mobilemenu {
    top: 106px;
  }
  .hero,
  .herogrid {
    min-height: 680px;
  }
  .heroimage {
    width: 100%;
    height: 680px;
    opacity: 0.16;
  }
  .herotxt {
    padding: 75px 0;
  }
  .hero h1 {
    font-size: 48px;
  }
  .herotxt > p {
    font-size: 17px;
  }
  .buttons {
    flex-direction: column;
  }
  .section {
    padding: 70px 0;
  }
  .choices,
  .sectorgrid,
  .stepgrid,
  .offergrid {
    grid-template-columns: 1fr;
  }
  .card {
    padding: 0 26px 28px;
  }
  .card > p {
    min-height: 0;
  }
  .card > div:last-child {
    align-items: flex-start;
    flex-direction: column;
  }
  .cardMedia {
    margin: 0 -26px 22px;
  }
  .real {
    gap: 42px;
  }
  .realimg {
    height: 410px;
  }
  .realimg > div {
    right: 10px;
  }
  .row {
    grid-template-columns: 1fr;
  }
  .quotegrid {
    gap: 40px;
  }
  .quote form {
    padding: 21px;
  }
  .formend {
    align-items: stretch;
    flex-direction: column;
  }
  .footgrid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .aib {
    width: 50px;
    padding: 0;
    justify-content: center;
    right: 80px;
  }
  .aib span {
    display: none;
  }
  .chat {
    width: calc(100% - 24px);
    right: 12px;
  }
  .companyInner {
    grid-template-columns: 100px 1fr;
  }
  .companyInner > svg {
    display: none;
  }
  .companyInner > img {
    width: 100px;
  }
  .catalogNote {
    align-items: flex-start;
  }
  .offergrid article {
    padding: 26px;
  }
  .offerhead {
    align-items: flex-start;
  }
}

/* v1.1 readability, catalogues and brand hierarchy */
body {
  font-size: 16px;
}
.nav nav a {
  font-size: 14px;
}
.herotxt > p {
  font-size: 20px;
}
.proof span {
  font-size: 13px;
}
.btn {
  font-size: 13px;
}
.catalogHero {
  border: 2px solid var(--o);
  color: #c9441c;
}
.companyStrip {
  background: #fff;
  border-top: 1px solid #ece8e2;
  border-bottom: 1px solid #ece8e2;
}
.companyInner {
  min-height: 150px;
  display: grid;
  grid-template-columns: 180px 1fr 50px;
  align-items: center;
  gap: 28px;
}
.companyInner > img {
  width: 175px;
  height: 112px;
  object-fit: cover;
  object-position: center;
}
.companyInner b {
  font-size: 17px;
}
.companyInner p {
  font-size: 14px;
  color: #666;
  margin: 7px 0 0;
}
.companyInner > svg {
  width: 38px;
  height: 38px;
  color: var(--o);
}
.card {
  padding: 0 36px 34px;
}
.cardMedia {
  height: 235px;
  position: relative;
  margin: 0 -36px 24px;
  overflow: hidden;
}
.cardMedia img {
  object-fit: cover;
}
.cardBrand {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cardBrand > img {
  width: 190px;
  height: 58px;
  object-fit: contain;
  object-position: left;
}
.cardicon {
  margin-top: 0;
}
.card > p {
  font-size: 16px;
}
.card li {
  font-size: 14px;
}
.card > div:last-child > a:last-child {
  font-size: 13px;
}
.card > div:last-child .btn {
  font-size: 13px;
  letter-spacing: 0.03em;
}
.catalogNote {
  max-width: 850px;
  margin: 28px auto 0;
  padding: 20px 24px;
  border: 2px solid var(--o);
  border-radius: 14px;
  background: #fff8f4;
  display: flex;
  align-items: center;
  gap: 16px;
}
.catalogNote > svg {
  min-width: 30px;
  color: var(--o);
}
.catalogNote b {
  font-size: 17px;
}
.catalogNote p {
  font-size: 14px;
  line-height: 1.6;
  color: #62666a;
  margin: 5px 0 0;
}
.offer {
  background: #f6f3ee;
}
.offergrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.offergrid article {
  background: #fff;
  border: 1px solid #e2ded7;
  border-radius: 20px;
  padding: 34px;
  box-shadow: 0 20px 60px #1111110d;
}
.offerhead {
  display: flex;
  gap: 18px;
  align-items: center;
}
.offerhead > svg {
  width: 52px;
  height: 52px;
  padding: 13px;
  background: #ffebe3;
  color: var(--o);
  border-radius: 14px;
}
.offerhead img {
  width: 170px;
  height: 50px;
  object-fit: contain;
  object-position: left;
}
.offerhead p {
  font-size: 15px;
  line-height: 1.55;
  color: #62666a;
  margin: 7px 0 0;
}
.offergrid ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  list-style: none;
  padding: 0;
  margin: 25px 0;
}
.offergrid li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 14px;
  line-height: 1.45;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.offergrid li svg {
  width: 16px;
  min-width: 16px;
  color: #159346;
}
.sectorgrid p,
.stepgrid p {
  font-size: 14px;
}
.sectorgrid h3 {
  font-size: 18px;
}
.sectorgrid b {
  font-size: 12px;
}
.realcopy > p {
  font-size: 17px;
}
.realcopy li b {
  font-size: 15px;
}
.realcopy li small {
  font-size: 12px;
}
.quotegrid > div > p {
  font-size: 17px;
}
.quote label {
  font-size: 12px;
}
.quote input,
.quote select,
.quote textarea {
  font-size: 14px;
}
.footgrid p,
.footgrid a,
.footgrid small {
  font-size: 13px;
}
.chatbody p {
  font-size: 13px;
}
.chatbody > div button {
  font-size: 12px;
}

/* v1.2 high contrast, categories, projects and legal footer */
.card.theme-aqua,
.card.theme-orange {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 70px #11111118;
}
.card.theme-aqua {
  border-top: 5px solid var(--aqua);
}
.card.theme-orange {
  border-top: 5px solid var(--o);
}
.card.theme-orange:before {
  background: #f255241c;
}
.card.theme-orange .cardicon {
  background: #ffe8df;
  color: var(--o);
}
.card.theme-orange > p,
.card.theme-aqua > p {
  color: #34383c;
}
.card.theme-orange .cardBrand > img {
  background: #fff;
  padding: 7px 10px;
  border: 1px solid #eee;
  border-radius: 9px;
  width: 220px;
}
.articleCount {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin: 18px 0 6px;
  padding: 13px 16px;
  border-radius: 10px;
  background: #181a1d;
  color: #fff;
}
.theme-aqua .articleCount {
  background: #087f7d;
}
.articleCount strong {
  font-size: 31px;
  line-height: 1;
  color: #fff;
}
.articleCount span {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.categorySection {
  background: #fff;
}
.categoryGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.categoryGrid a {
  min-height: 76px;
  display: grid;
  grid-template-columns: 40px 1fr 22px;
  align-items: center;
  gap: 10px;
  padding: 15px;
  border: 1px solid #dedad4;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  transition: 0.2s;
}
.categoryGrid a > span {
  color: var(--o);
  font-size: 12px;
  font-weight: 900;
}
.categoryGrid a > b {
  font-size: 15px;
}
.categoryGrid a > svg {
  width: 16px;
  color: var(--o);
}
.categoryGrid a:hover {
  border-color: var(--o);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px #f2552418;
}
.clothingCategory {
  margin-top: 18px;
  padding: 22px 25px;
  border-radius: 14px;
  background: #e9f8f7;
  border: 1px solid #bfe8e5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.clothingCategory > div {
  display: flex;
  align-items: center;
  gap: 15px;
}
.clothingCategory > div > svg {
  width: 45px;
  height: 45px;
  padding: 10px;
  background: var(--aqua);
  color: #fff;
  border-radius: 12px;
}
.clothingCategory strong,
.clothingCategory small {
  display: block;
}
.clothingCategory strong {
  font-size: 23px;
}
.clothingCategory small {
  margin-top: 4px;
  color: #3e5655;
  font-size: 13px;
}
.projectSection {
  background: #f6f3ee;
}
.projectIntro {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  align-items: end;
  gap: 60px;
  margin-bottom: 38px;
}
.projectIntro span {
  color: var(--o);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.projectIntro h2 {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 12px 0 0;
}
.projectIntro > p {
  color: #4e5358;
  font-size: 16px;
  line-height: 1.7;
}
.projectGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.projectGrid article {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px #11111112;
}
.projectGrid .featuredProject {
  grid-column: span 2;
}
.projectImage {
  position: relative;
  height: 285px;
  background: #ddd;
}
.featuredProject .projectImage {
  height: 430px;
}
.projectImage img {
  object-fit: cover;
}
.projectImage > span {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  background: var(--o);
  color: #fff;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.projectBody {
  padding: 20px 22px;
}
.projectBody small {
  color: var(--o);
  font-weight: 800;
}
.projectBody h3 {
  font-size: 23px;
  margin: 7px 0 16px;
}
.projectBody > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.projectBody a {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
}
.projectBody a svg {
  width: 15px;
}
.projectBody button {
  width: 37px;
  height: 37px;
  border: 0;
  border-radius: 9px;
  background: #ffe8df;
  color: var(--o);
}
.projectBody button svg {
  width: 17px;
}
.legalRow {
  border-top: 1px solid #ffffff18;
  margin-top: 44px;
  padding: 22px 220px 5px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.legalLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.legalLinks a,
.aiwebbCredit {
  color: #c5c7c9;
  font-size: 11px;
  text-decoration: none;
}
.legalLinks a:hover,
.aiwebbCredit:hover {
  color: #fff;
}
.aiwebbCredit strong {
  color: #fff;
}
.copyright {
  margin-top: 12px;
  padding-top: 12px;
  padding-right: 220px;
}
.chat {
  bottom: 104px;
}
@media (max-width: 850px) {
  .categoryGrid {
    grid-template-columns: 1fr 1fr;
  }
  .projectIntro {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .legalRow {
    align-items: flex-start;
    flex-direction: column;
    padding-right: 0;
  }
  .copyright {
    padding-right: 0;
  }
}
@media (max-width: 650px) {
  .categoryGrid,
  .projectGrid {
    grid-template-columns: 1fr;
  }
  .projectGrid .featuredProject {
    grid-column: auto;
  }
  .featuredProject .projectImage,
  .projectImage {
    height: 245px;
  }
  .clothingCategory {
    align-items: stretch;
    flex-direction: column;
  }
  .articleCount {
    align-items: flex-start;
    flex-direction: column;
  }
  .articleCount strong {
    font-size: 28px;
  }
}

/* v1.0.7: één stilstaand, willekeurig pitcherbeeld */
.realimg .fadeImage {
  object-fit: cover;
  opacity: 0;
  animation: none !important;
  transform: none !important;
  transition: none !important;
  visibility: hidden;
}
.realimg .fadeImage.mr01-random-visible { opacity: 1; visibility: visible; }
.realimg > div {
  z-index: 5;
}
@media (prefers-reduced-motion: reduce) {
  .realimg .fadeImage {
    animation: none;
  }
}

.staticwrap .priceMessage {
  margin: 14px 0 4px;
  padding: 13px 15px;
  border-radius: 10px;
  background: #fff3ed;
  border-left: 4px solid var(--o);
}
.staticwrap .offergrid article:first-child .priceMessage {
  background: #e9f8f7;
  border-left-color: var(--aqua);
}
.staticwrap .priceMessage strong,
.staticwrap .priceMessage span {
  display: block;
}
.staticwrap .priceMessage strong {
  margin-bottom: 4px;
  font-size: 14px;
}
.staticwrap .priceMessage span {
  color: #484d51;
  font-size: 13px;
  line-height: 1.45;
}
.staticwrap .chat{display:none}.staticwrap.showchat .chat{display:block}

/* MR-01 v1.0.2: zichtbare ankerkoppen, cataloguscontrast en rustige projecten. */
.staticwrap section[id],
.staticwrap footer[id] {
  scroll-margin-top: 118px;
}
.staticwrap .card.theme-orange .cardBrand > img {
  width: 235px;
  height: 66px;
  padding: 6px 9px;
}
.staticwrap .projectGrid article {
  opacity: 1;
  transition: opacity 1.2s ease-in-out;
}
.staticwrap .projectGrid article.mr01-project-fade {
  opacity: 0.12;
}
.staticwrap .projectImage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f1efeb;
}
@media (max-width: 782px) {
  .staticwrap section[id],
  .staticwrap footer[id] {
    scroll-margin-top: 92px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .staticwrap .projectGrid article {
    transition: none;
  }
}

/* v1.0.17 AI Sales Assistant */
.mr01-ai-wait{opacity:.65;font-style:italic}
.mr01-ai-visual{margin:10px 0;border:1px solid rgba(34,197,230,.35);border-radius:12px;overflow:hidden;background:#0c222b}
.mr01-ai-visual img{display:block;width:100%;height:120px;object-fit:cover}
.mr01-ai-visual span{display:block;padding:7px 10px;color:#dff8ff;font-size:12px}
.mr01-ai-ctas{display:flex!important;gap:7px!important;margin:9px 0 13px!important;flex-wrap:wrap}
.mr01-ai-ctas a{display:inline-flex;padding:9px 11px;border-radius:999px;text-decoration:none!important;font-weight:800;font-size:12px;background:#ff5a22;color:#fff!important}
.mr01-ai-ctas a:first-child{background:#16a765}
.chatbody{max-height:420px;overflow:auto}

/* MR-01 v1.0.18 — AI Sales cards & conversion actions */
.mr01-ai-server-cards{margin:10px 0 12px;display:grid;gap:10px}
.mr01-ai-cards{display:grid;gap:10px}
.mr01-ai-card{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:9px;background:#fff;border:1px solid #e5e7eb;border-radius:13px;box-shadow:0 8px 20px rgba(0,0,0,.06);color:#111}
.mr01-ai-card img{width:92px;height:78px;object-fit:cover;border-radius:9px;background:#f4f4f4}
.mr01-ai-card strong{display:block;font-size:13px;line-height:1.3;margin:2px 0 4px}
.mr01-ai-card span{display:block;font-size:11px;color:#6b7280}
.mr01-ai-card-actions{margin-top:7px}.mr01-ai-card-actions a{display:inline-flex;padding:6px 9px;border-radius:999px;background:#ff5a1f;color:#fff!important;text-decoration:none!important;font-size:11px;font-weight:800}
.mr01-ai-ctas{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 12px}
.mr01-ai-ctas a{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 10px;border-radius:999px;text-decoration:none!important;font-size:11px;font-weight:900}
.mr01-ai-ctas .mr01-ai-wa{background:#25D366;color:#fff!important}.mr01-ai-ctas .mr01-ai-offer{background:#ff5a1f;color:#fff!important}
.mr01-ai-wait{opacity:.72;font-style:italic}
@media(max-width:480px){.mr01-ai-card{grid-template-columns:76px 1fr}.mr01-ai-card img{width:76px;height:70px}}

/* v1.0.19 — De Busschere-style AI sales panel */
.staticwrap .chat{width:min(390px,calc(100vw - 24px));max-height:min(76vh,760px);border-radius:22px;overflow:hidden;box-shadow:0 24px 65px rgba(0,0,0,.22)}
.staticwrap .chathead{padding:15px 16px;min-height:58px}
.staticwrap .chatbody{padding:15px;max-height:min(58vh,560px);overflow-y:auto;overscroll-behavior:contain;background:#fff}
.mr01-ai-direct{display:grid!important;gap:8px!important;margin:0 0 13px!important}
.mr01-ai-direct a{display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:10px;border:1px solid #e7e7e7;background:#fff;color:#111!important;text-decoration:none!important;font-weight:850;font-size:12px;line-height:1.1}
.mr01-ai-direct .wa{background:#25D366;border-color:#25D366;color:#fff!important}
.mr01-ai-direct .offer{background:#ff5a1f;border-color:#ff5a1f;color:#fff!important}
.mr01-ai-direct .contact{background:#111827;border-color:#111827;color:#fff!important}
.mr01-ai-section-title{font-size:12px;font-weight:900;color:#111;margin:12px 0 7px;display:block}
.mr01-ai-quicklinks{display:grid!important;grid-template-columns:1fr 1fr;gap:7px!important;margin:8px 0 12px!important}
.mr01-ai-quicklinks a{display:flex;align-items:center;justify-content:center;min-height:38px;padding:5px 7px;border-radius:10px;border:1px solid #e6e6e6;background:#f8fafb;color:#111!important;text-decoration:none!important;font-weight:800;font-size:11px;text-align:center}
.mr01-ai-quicklinks a.primary{background:#eef8ff;border-color:#c9eafb;color:#036c8e!important}
.mr01-ai-server-cards .mr01-ai-card-actions{display:flex;gap:6px;flex-wrap:wrap}
.mr01-ai-server-cards .mr01-ai-card-actions a{cursor:pointer}
.staticwrap .chatinput{background:#fff;border-top:1px solid #eee;padding:11px 12px}
.staticwrap .chatinput input{min-height:42px}
.staticwrap .chatinput button{min-width:42px;min-height:42px}
@media(max-width:640px){.staticwrap .chat{right:12px!important;bottom:86px!important;width:calc(100vw - 24px)!important;max-height:78vh}.staticwrap .chatbody{max-height:58vh}.mr01-ai-quicklinks{grid-template-columns:1fr!important}}

/* v1.0.20 — Sales Closer UX */
.mr01-ai-direct{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
.mr01-ai-direct a{min-height:34px!important;padding:7px 6px!important;font-size:11px!important}
.mr01-ai-direct .contact{display:none!important}
.mr01-ai-section-title{font-size:11px!important;margin:5px 0!important}
.mr01-ai-quicklinks{gap:6px!important;margin:6px 0 10px!important}
.mr01-ai-quicklinks a{padding:7px 5px!important;font-size:10.5px!important}
.mr01-ai-ctas{margin:8px 0 2px!important}
.mr01-ai-ctas a{padding:7px 10px!important;font-size:11px!important}

/* v1.0.21 — directe WhatsApp in AI salespanel */
.mr01-ai-direct .mr01-direct-wa{
  position:static!important;
  inset:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:auto!important;
  height:auto!important;
  min-height:34px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:7px 6px!important;
  border-radius:10px!important;
  background:#25D366!important;
  border:1px solid #25D366!important;
  color:#fff!important;
  box-shadow:none!important;
  font-size:11px!important;
  font-weight:850!important;
  text-decoration:none!important;
  z-index:auto!important;
}

/* v1.0.22 — prominente AI-verkoopbanner */
.mr01-ai-sales-banner{padding:26px 0 8px;background:#fff}
.mr01-ai-sales-banner-inner{max-width:1180px;margin:0 auto;background:linear-gradient(110deg,#111318,#191c22);border:1px solid #2c3038;border-radius:18px;padding:24px 28px;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(250px,.65fr);gap:28px;align-items:center;box-shadow:0 18px 45px rgba(17,19,24,.14);position:relative;overflow:hidden}
.mr01-ai-sales-banner-inner:after{content:"AI";position:absolute;right:25%;top:-42px;font-size:150px;line-height:1;font-weight:900;color:rgba(255,255,255,.025);pointer-events:none}
.mr01-ai-kicker{display:block;color:#ff5a1f;font-size:11px;font-weight:900;letter-spacing:.14em;margin-bottom:7px}
.mr01-ai-sales-copy h2{margin:0 0 7px;color:#fff;font-size:clamp(25px,2.2vw,35px);line-height:1.05}
.mr01-ai-sales-copy p{margin:0;color:#d9dde4;font-size:14px;line-height:1.6;max-width:760px}
.mr01-ai-sales-copy p strong{color:#fff;font-size:15px}
.mr01-ai-sales-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;position:relative;z-index:1}
.mr01-ai-banner-start,.mr01-ai-banner-wa{border:0;border-radius:11px;min-height:44px;padding:0 17px;font-size:12px;font-weight:900;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.mr01-ai-banner-start{background:#ff5a1f;color:#fff;box-shadow:0 9px 24px rgba(255,90,31,.24)}
.mr01-ai-banner-wa{background:#25D366;color:#fff}
.mr01-ai-sales-actions small{width:100%;text-align:right;color:#969da8;font-size:10.5px;margin-top:2px}
.mr01-ai-banner-start:hover{transform:translateY(-1px)}
@media(max-width:760px){.mr01-ai-sales-banner{padding:18px 12px 4px}.mr01-ai-sales-banner-inner{grid-template-columns:1fr;padding:20px;gap:17px}.mr01-ai-sales-actions{justify-content:flex-start}.mr01-ai-sales-actions small{text-align:left}.mr01-ai-banner-start,.mr01-ai-banner-wa{flex:1 1 auto}.mr01-ai-sales-banner-inner:after{right:-20px}}


/* v1.0.31 SAFE LABEL-ONLY — visual labels; existing AI click handlers untouched */
.mr01-ai-banner-start{flex-direction:column;align-items:flex-start!important;text-align:left;line-height:1.08;padding:9px 16px!important;gap:2px}
.mr01-ai-banner-start .mr01-ai-label-top{font-size:9px;letter-spacing:.08em;opacity:.86;font-weight:800}
.mr01-ai-banner-start strong{font-size:13px;font-weight:900}
.mr01-ai-banner-start .mr01-ai-label-sub{font-size:9px;opacity:.82;font-weight:700}
.aib .mr01-ai-float-label{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;text-align:left;gap:1px}
.aib .mr01-ai-float-label small{font-size:8px;letter-spacing:.05em;font-style:normal;opacity:.8;font-weight:800}
.aib .mr01-ai-float-label strong{font-size:11px;font-weight:900}
.aib .mr01-ai-float-label em{font-size:8px;font-style:normal;opacity:.78;font-weight:700}
@media(max-width:760px){.aib .mr01-ai-float-label small,.aib .mr01-ai-float-label em{display:none}.aib .mr01-ai-float-label strong{font-size:10px}.mr01-ai-banner-start .mr01-ai-label-top,.mr01-ai-banner-start .mr01-ai-label-sub{font-size:8px}}

/* v1.0.32 — AI CTA layout polish only; chat JavaScript untouched */
@media (min-width:761px){
  .mr01-ai-sales-actions{
    display:grid;
    grid-template-columns:minmax(200px,1fr) auto;
    grid-template-areas:"ai wa" "note note";
    align-items:center;
    justify-content:end;
    column-gap:10px;
    row-gap:4px;
    min-width:340px;
  }
  .mr01-ai-banner-start{grid-area:ai;min-width:210px}
  .mr01-ai-banner-wa{grid-area:wa;min-width:92px}
  .mr01-ai-sales-actions>small{grid-area:note;width:auto;text-align:right;margin-top:0}
  /* Keep one WhatsApp CTA beside the orange AI button; suppress the duplicate floating WhatsApp shortcut. */
  .wa{display:none!important}
  /* Lift the floating AI opener slightly and give its three-line label room to breathe. */
  .aib{
    right:22px;
    bottom:34px;
    min-width:225px;
    height:auto;
    min-height:58px;
    padding:8px 16px;
    border-radius:18px;
  }
  .aib .mr01-ai-float-label{gap:2px}
  .aib .mr01-ai-float-label small{font-size:8.5px}
  .aib .mr01-ai-float-label strong{font-size:12px;line-height:1.1}
  .aib .mr01-ai-float-label em{font-size:8.5px}
}
@media (max-width:760px){
  .mr01-ai-sales-actions{display:grid;grid-template-columns:1fr auto;gap:8px}
  .mr01-ai-banner-start{min-width:0}
  .mr01-ai-banner-wa{white-space:nowrap}
}


/* v1.0.33 — FINAL AI CTA VISUAL POLISH ONLY; no chat JS/click-handler changes */
.mr01-ai-banner-start .mr01-ai-label-click{
  display:block;
  font-size:10px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:.02em;
  opacity:.98;
}
.aib .mr01-ai-float-click{
  display:block;
  font-size:9px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:.02em;
  opacity:.96;
}
@media (min-width:761px){
  .mr01-ai-sales-banner-inner{
    grid-template-columns:minmax(0,1.52fr) minmax(410px,.88fr);
    gap:24px;
  }
  .mr01-ai-sales-actions{
    grid-template-columns:minmax(245px,255px) 104px;
    grid-template-areas:"ai wa" "note note";
    justify-content:start;
    justify-self:start;
    min-width:370px;
    column-gap:10px;
    row-gap:5px;
  }
  .mr01-ai-banner-start{
    min-width:245px;
    min-height:72px;
    padding:10px 17px!important;
    border-radius:12px;
    gap:2px;
  }
  .mr01-ai-banner-start .mr01-ai-label-top{
    font-size:9.5px;
    line-height:1.05;
    letter-spacing:.06em;
  }
  .mr01-ai-banner-start strong{
    font-size:16px;
    line-height:1.05;
  }
  .mr01-ai-banner-start .mr01-ai-label-click{
    font-size:10px;
  }
  .mr01-ai-banner-start .mr01-ai-label-sub{
    font-size:9px;
    line-height:1.05;
  }
  .mr01-ai-banner-wa{
    min-width:104px;
    min-height:72px;
    padding:0 14px;
    border-radius:12px;
    font-size:12px;
    white-space:nowrap;
  }
  .mr01-ai-sales-actions>small{
    text-align:left;
    padding-left:2px;
  }
  .wa{display:none!important}
  .aib{
    right:22px;
    bottom:50px;
    min-width:270px;
    min-height:72px;
    height:auto;
    padding:10px 17px;
    border-radius:18px;
    gap:10px;
  }
  .aib>svg{flex:0 0 auto}
  .aib .mr01-ai-float-label{
    gap:2px;
    line-height:1.03;
  }
  .aib .mr01-ai-float-label small{
    font-size:8.8px;
    line-height:1.05;
  }
  .aib .mr01-ai-float-label strong{
    font-size:13.5px;
    line-height:1.05;
  }
  .aib .mr01-ai-float-click{
    font-size:9px;
  }
  .aib .mr01-ai-float-label em{
    font-size:8.7px;
    line-height:1.05;
  }
}
@media (max-width:760px){
  .mr01-ai-sales-actions{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:stretch;
  }
  .mr01-ai-banner-start{
    min-height:64px;
    padding:9px 12px!important;
  }
  .mr01-ai-banner-wa{
    min-height:64px;
    padding:0 12px;
  }
  .mr01-ai-banner-start strong{font-size:13px}
  .mr01-ai-banner-start .mr01-ai-label-click{font-size:9px}
  .aib{
    bottom:26px;
    min-width:190px;
    min-height:52px;
    padding:8px 12px;
  }
  .aib .mr01-ai-float-label small,
  .aib .mr01-ai-float-label em{display:none}
  .aib .mr01-ai-float-label strong{font-size:10.5px}
  .aib .mr01-ai-float-click{font-size:8px}
}