/* =========================================================
   STYLE.CSS — guepe-oise.fr (JAUNE + ROUGE + NOIR)
   Nouvelle mise en page : Menu Gauche
   ========================================================= */

/* -------------------- RESET -------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: #000000;
}

body {
  margin: 0;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

iframe {
  max-width: 100%;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), .75);
  outline-offset: 2px;
  border-radius: 10px;
}

/* -------------------- TOKENS -------------------- */
:root {
  --bg: #000000;
  --bg-2: #111111;

  --text: #F3F6FB;
  --muted: rgba(243, 246, 251, .72);

  /* JAUNE & ROUGE */
  --accent: #FFD700;
  /* Jaune Or */
  --accent-2: #FF0000;
  /* Rouge Vif */

  --accent-rgb: 255, 215, 0;
  --accent2-rgb: 255, 0, 0;

  --border: rgba(255, 255, 255, .15);
  --border-2: rgba(255, 255, 255, .25);
  --shadow: 0 12px 40px rgba(0, 0, 0, .85);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;

  --btn-border-radius-pill: 999px;
  --container: 1200px;

  /* Sidebar Width */
  --sidebar-width: 280px;

  /* compat inline HTML */
  --border-radius-md: var(--r-md);
  --border-radius-pill: var(--btn-border-radius-pill);
  --color-secondary: var(--accent);
  --color-primary-dark: var(--accent);
  --color-surface: rgba(255, 215, 0, .05);
  /* very light yellow tint */

  /* Logo header  */
  --header-logo-bg: url("../img/logo.png");
}

/* -------------------- BACKGROUND GLOBAL -------------------- */
/* -------------------- BACKGROUND GLOBAL -------------------- */
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  line-height: 1.7;
  min-height: 100vh;

  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    /* Overlay pour assombrir */
    url("../img/background-hive.png");
  background-repeat: repeat;
  background-size: 400px;
  /* Taille du motif */
  background-attachment: fixed;
}

p {
  color: rgba(255, 255, 255, .8);
}

/* -------------------- CONTAINER -------------------- */
.container {
  width: min(var(--container), calc(100% - 3rem));
  margin-inline: auto;
}

/* -------------------- HEADER (SIDEBAR GAUCHE) -------------------- */
/* PC View : Sidebar */
@media (min-width: 981px) {
  body {
    padding-left: var(--sidebar-width);
  }

  .header {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    z-index: 1000;
    background: #050505 !important;
    border-bottom: none;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    overflow-y: auto;
  }

  .header__container {
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0;
    gap: 2rem;
    height: 100%;
    justify-content: flex-start;
  }

  .header .logo {
    display: block !important;
    width: 100% !important;
    max-width: 300px;
    height: 90px !important;
    /* Bigger logo area */
    background: var(--header-logo-bg) center / contain no-repeat !important;
    background-color: #000 !important;
    border-radius: 12px !important;
    border: 1px solid var(--accent) !important;
    text-indent: -9999px !important;
    margin-bottom: 1rem;
  }

  .nav {
    width: 100%;
    margin-bottom: auto;
    /* Push buttons down if space permits */
  }

  .nav__list {
    flex-direction: column;
    width: 100%;
    /* gap removed in favor of margin on items */
    list-style: none;
    padding: 0;
    margin: 0px;
  }

  .nav__list li {
    width: 100%;
    margin-bottom: 2rem;
  }

  .nav__link {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: #111;
    color: #FFF;
    transition: all 0.3s ease;
    text-decoration: none;
  }

  .nav__link:hover {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
  }

  /* Phone button in sidebar */
  .header .btn {
    width: 100%;
    margin-top: 1rem;
    text-align: center;
  }
}

/* Mobile View : Top Bar (Standard) */
@media (max-width: 980px) {
  .header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(0, 0, 0, .9) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }

  .header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 0;
  }

  .header .logo {
    display: block !important;
    width: 150px !important;
    height: 48px !important;
    background: var(--header-logo-bg) center / contain no-repeat !important;
    background-color: #000 !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    text-indent: -9999px !important;
  }

  .nav {
    display: none;
    /* Hide nav on mobile, maybe rely on footer links or simplest approach since no JS allowed for burger */
  }

  /* Si on veut garder les liens visibles en mobile sans burger menu, on peut les mettre en overflow-x ou juste rely sur le footer
     Ici, on garde le bouton d'appel en haut */
}


/* -------------------- BUTTONS -------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.4rem;
  border-radius: 4px;
  /* More sturdy, sharp look or minimal rounded */
  font-weight: 800;
  text-decoration: none;
  letter-spacing: .5px;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: .2s ease;
  user-select: none;
  white-space: nowrap;
  font-size: 0.9rem;
}

.btn--primary {
  background: var(--accent) !important;
  color: #000 !important;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.btn--primary:hover {
  background: #FFF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
}

.btn--secondary {
  background: transparent !important;
  border: 2px solid var(--accent-2) !important;
  color: var(--accent-2) !important;
}

.btn--secondary:hover {
  background: var(--accent-2) !important;
  color: #FFF !important;
}

/* -------------------- HERO -------------------- */
.hero {
  padding: 6rem 0 4rem;
  position: relative;
  overflow: hidden;
}

/* Décoration asymétrique jaune/rouge */
.hero::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 0, 0, 0.15) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: -50px;
  left: -50px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

.hero__container {
  position: relative;
  text-align: center;
  max-width: 1000px;
  margin-inline: auto;
}

.hero__title {
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.1;
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  margin: 0 0 1.5rem;
  color: #FFF;
}

.text-highlight {
  color: var(--accent) !important;
  /* Jaune */
  display: inline-block;
}

/* -------------------- ABOUT LIST (BUTTON STYLE) -------------------- */
.about__list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 6rem;
  display: grid;
  gap: 2rem;
}

.about__item {
  background: #0F0F0F;
  border: 1px solid var(--border);
  padding: 1.2rem;
  border-radius: var(--r-md);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: all .2s ease;
  cursor: default;
}

.about__item:hover {
  border-color: var(--accent);
  background: #161616;
  transform: translateX(5px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.about__icon {
  font-size: 1.8rem;
  background: rgba(255, 215, 0, 0.1);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 215, 0, 0.2);
}



.hero__subtitle {
  max-width: 750px;
  margin: 0 auto 2.5rem;
  color: #CCC !important;
  font-size: 1.25rem;
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* -------------------- SECTION TITLES -------------------- */
.section__title {
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  color: #FFF;
}

.section__title::after {
  content: ".";
  color: var(--accent-2);
  /* Point rouge */
}

.section__subtitle {
  font-size: 1.1rem;
  color: #AAA;
  margin-bottom: 2.5rem;
  max-width: 700px;
}

/* -------------------- BREADCRUMBS -------------------- */
.pj-breadcrumbs {
  background: #111 !important;
  border: 1px solid var(--border) !important;
}

.pj-breadcrumbs a:hover {
  text-decoration-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* =========================================================
   CARDS (Styles unifiés Noir/Jaune/Rouge)
   ========================================================= */
.pj-card,
.service-card,
.gallery-item,
.faq-card-bubble,
.sector-block,
.city-card {
  background: #0A0A0A;
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  /* Prêt pour hover */
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: .25s ease;
  position: relative;
  overflow: hidden;
}

.pj-card:hover,
.service-card:hover,
.gallery-item:hover,
.faq-card-bubble:hover,
.sector-block:hover,
.city-card:hover {
  border-color: var(--border-2);
  border-left-color: var(--accent);
  /* Barre jaune au survol */
  transform: translateX(5px);
  background: #101010;
}

.pj-card {
  padding: 2rem;
  margin-bottom: 2rem;
}

/* Cas particulier transparent */
.pj-card[style*="background: transparent" i],
.pj-card[style*="box-shadow: none" i],
.pj-card[style*="border: none" i] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* -------------------- SERVICES GRID -------------------- */
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.service-card {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.service-card__icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.4));
}

.service-card__title {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: #FFF;
}

.service-card__text {
  color: #BBB;
  font-size: 0.95rem;
  margin: 0;
}

/* -------------------- CONTACT / HORAIRES -------------------- */
.pj-contact-row {
  background: #111;
  border: 1px solid var(--border);
  padding: 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: start;
}

.pj-contact-icon {
  min-width: 40px;
  height: 40px;
  background: var(--accent-2);
  /* Rouge */
  color: #FFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.pj-hours-list ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 0;
  list-style: none;
}

.pj-hours-list li {
  background: #0F0F0F;
  border: 1px solid var(--border);
  padding: 0.8rem;
  border-radius: 8px;
  color: #DDD;
}

/* -------------------- GALLERY GRID -------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3 images side by side */
  gap: 1rem;
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

.gallery-grid img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}

/* -------------------- INTERVENTION BLOCK -------------------- */
.pj-card.intervention-block .intervention-content {
  display: block;
  /* Allows float */
}

@media (max-width: 980px) {
  .pj-card.intervention-block .intervention-img-wrapper {
    float: none;
    margin: 0 auto 1.5rem;
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .pj-card.intervention-block .intervention-img-wrapper img {
    width: 100%;
  }
}

.pj-card.intervention-block .intervention-img-wrapper {
  float: left;
  margin: 0 2rem 1rem 0;
  /* Marge augmentée pour le texte */
  max-width: 300px;
}

.pj-card.intervention-block .intervention-img-wrapper img {
  border: 2px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

/* -------------------- FAQ -------------------- */
.faq-grid-styled {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.faq-card-bubble {
  padding: 1.5rem;
}

.faq-bubble-icon {
  color: var(--accent);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 900;
}

.faq-question-text {
  color: #FFF;
  margin-bottom: 0.5rem;
}

.faq-answer-text {
  color: #AAA;
}

/* -------------------- ZONES (INDEX FIX) -------------------- */
#zones.section.intervention-zone,
#intervention-zone.section.intervention-zone {
  background: #000000 !important;
  border: 1px solid var(--border) !important;
  padding: 3rem !important;
  color: #FFF !important;
  /* Force text color */
}

#zones.section.intervention-zone *,
#intervention-zone.section.intervention-zone * {
  color: #FFF !important;
  /* Aggressive text color fix for inline styles */
}

#zones.section.intervention-zone .section__subtitle,
#intervention-zone.section.intervention-zone .section__subtitle {
  color: #CCC !important;
}

#zones .intervention__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

#zones .sectors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

#zones .sector-block {
  padding: 1.5rem;
  background: #111 !important;
  border: 1px solid var(--border);
}

#zones .sector-title {
  color: var(--accent);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

#zones .sector-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#zones .sector-cities .city-link {
  font-size: 0.8rem;
  background: #222;
  color: #FFF;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  text-decoration: none;
  transition: 0.2s;
  border: 1px solid #333;
}

#zones .sector-cities .city-link:hover {
  background: var(--accent-2);
  /* Rouge au survol */
  border-color: var(--accent-2);
  color: #FFF;
}

#zones .intervention__map {
  background: #111;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

@media (max-width: 980px) {
  #zones .intervention__content {
    grid-template-columns: 1fr;
  }

  #zones .intervention__map {
    order: -1;
    margin-bottom: 1rem;
  }
}

/* -------------------- CONTACT FORM -------------------- */
/* -------------------- CONTACT FORM -------------------- */
.contact__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch;
  /* Hauteur égale */
  margin-top: 4rem;
  /* Espace avec le bloc du dessus */
}

.contact__form {
  order: 1;
  background: #111;
  border: 1px solid var(--border);
  padding: 3rem;
  /* Plus d'espace interne */
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact__info {
  order: 2;
  /* Coordonnées à droite */
  background: #111;
  border: 1px solid var(--border);
  padding: 2.5rem;
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  height: 100%;
  /* Match form height if possible, or just neat box */
}

/* Contact Info Styling */
.contact__details {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact__details li {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.1rem;
  color: #DDD;
}

.contact__details li a {
  text-decoration: none;
  transition: .2s;
}

.contact__details li a:hover {
  color: var(--accent);
}

@media (max-width: 980px) {
  .contact__wrapper {
    grid-template-columns: 1fr;
  }

  .contact__form {
    order: 1;
  }

  .contact__info {
    order: 2;
  }

  /* Keep logical order on mobile? Or swapping? Form first is usually better for conversion, or info first? User asked for form left (first) on desktop. Vertical stack usually Form then Info or vice versa. Let's keep Form first. */
}

.contact__form input,
.contact__form textarea {
  background: #151515 !important;
  border: 1px solid #333 !important;
  color: #FFF !important;
  border-radius: 8px !important;
  padding: 1.2rem !important;
  font-size: 1rem !important;
  width: 100%;
  margin-bottom: 1rem;
}

.contact__form input:focus,
.contact__form textarea:focus {
  border-color: var(--accent) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
}

.contact__form button[type="submit"] {
  background: var(--accent) !important;
  color: #000 !important;
  font-weight: 900;
  text-transform: uppercase;
  border-radius: 4px !important;
}

.contact__form button[type="submit"]:hover {
  background: #FFF !important;
}

/* -------------------- FOOTER -------------------- */
.site-footer {
  background: #020202 !important;
  border-top: 1px solid var(--border) !important;
  padding: 4rem 3rem !important;
  margin-top: 4rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2rem;
  max-width: var(--container);
  margin: 0 auto;
}

.footer-col h3 {
  color: #FFF;
  border-bottom: 2px solid var(--accent-2);
  display: inline-block;
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.8rem;
}

.footer-links a {
  text-decoration: none;
  color: #888;
  display: block;
  transition: .2s;
  border-radius: 4px;
  padding: 0.2rem 0;
}

.footer-links a:hover {
  color: var(--accent) !important;
  transform: translateX(5px);
}

/* -------------------- RESPONSIVE GENERAL -------------------- */
@media (max-width: 980px) {
  body {
    padding-left: 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero__title {
    font-size: 2.5rem;
  }

  .site-footer {
    padding: 2rem 1rem !important;
  }
}

/* -------------------- STICKY MOBILE CTA -------------------- */
.sticky-mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000;
  border-top: 1px solid var(--accent);
  padding: 10px;
  z-index: 999;
}

@media (max-width: 980px) {
  .sticky-mobile-cta {
    display: flex;
    gap: 10px;
  }

  .sticky-mobile-cta .btn {
    flex: 1;
  }

  body {
    padding-bottom: 70px;
  }
}

/* -------------------- ICON SYSTEM -------------------- */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: middle;
}

/* SVG Shapes */
.icon--phone {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}

.icon--mail {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

.icon--pin {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}

.icon--clock {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
}

.icon--shield {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z'/%3E%3C/svg%3E");
}

.icon--home {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
}

.icon--check {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}

.icon--faq {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z'/%3E%3C/svg%3E");
}

.icon--star {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
}

.icon--wasp {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a2 2 0 012 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 017 7h1a1 1 0 011 1v3a1 1 0 01-1 1h-1v1a2 2 0 01-2 2H5a2 2 0 01-2-2v-1H2a1 1 0 01-1-1v-3a1 1 0 011-1h1a7 7 0 017-7V5.73C7.4 5.39 7 4.74 7 4a2 2 0 012-2h3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a2 2 0 012 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 017 7h1a1 1 0 011 1v3a1 1 0 01-1 1h-1v1a2 2 0 01-2 2H5a2 2 0 01-2-2v-1H2a1 1 0 01-1-1v-3a1 1 0 011-1h1a7 7 0 017-7V5.73C7.4 5.39 7 4.74 7 4a2 2 0 012-2h3z'/%3E%3C/svg%3E");
}

/* Container Adjustments to hide old text */
.pj-contact-icon,
.service-card__icon,
.about__icon,
.faq-bubble-icon {
  font-size: 0 !important;
  /* Hide emoji */
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.pj-contact-icon .icon,
.service-card__icon .icon,
.about__icon .icon,
.faq-bubble-icon .icon {
  font-size: 1.5rem;
  /* Restore size for icon */
  width: 1em;
  height: 1em;
}