/* Neutralisation des widgets, styles en ligne et boutons — chargé après la feuille de référence */
/* 2. Neutralisation des styles propres aux widgets : la mise en forme posée sur
      l'enveloppe doit atteindre le contenu. */
body .elementor.elementor .pi-w.elementor-widget-heading .elementor-heading-title,
body .elementor.elementor .pi-w.elementor-widget-text-editor > *,
body .elementor.elementor .pi-w.elementor-widget-text-editor {
  font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit;
  text-transform: inherit; text-align: inherit; margin: 0;
}
/* Les règles « img » de la référence désignent désormais l'enveloppe. */
/* Defaut : l'image garde sa taille naturelle. main.css declare img{height:auto}
   et ne cadre que les medias listes juste apres — une regle fourre-tout
   width/height:100% + object-fit:cover etirait monogramme et visuels de contenu. */
body .elementor.elementor .pi-w.elementor-widget-image img { display: block; max-width: 100%; }
/* Cadrages imposes par la maquette — report exact des regles « X img » de main.css.
   Deux ecritures : la classe reste sur le conteneur (.pi-c) ou tombe sur
   l'enveloppe du widget (.pi-w) selon la conversion. */
body .elementor.elementor .hero__media .pi-w.elementor-widget-image img,
body .elementor.elementor .page-hero__media .pi-w.elementor-widget-image img,
body .elementor.elementor .property-card__media .pi-w.elementor-widget-image img,
body .elementor.elementor .team-card__media .pi-w.elementor-widget-image img,
body .elementor.elementor .cta-band__media .pi-w.elementor-widget-image img,
body .elementor.elementor .bien-gallery__main .pi-w.elementor-widget-image img,
body .elementor.elementor .bien-thumb .pi-w.elementor-widget-image img,
body .elementor.elementor .bien2-hero__stage .pi-w.elementor-widget-image img,
body .elementor.elementor .bien2-thumb .pi-w.elementor-widget-image img,
body .elementor.elementor .pi-w.hero__media img,
body .elementor.elementor .pi-w.page-hero__media img,
body .elementor.elementor .pi-w.property-card__media img,
body .elementor.elementor .pi-w.team-card__media img,
body .elementor.elementor .pi-w.cta-band__media img{ width: 100%; height: 100%; object-fit: cover; }
body .elementor.elementor .pi-w.elementor-widget-image figure,
body .elementor.elementor .pi-w.elementor-widget-image .elementor-widget-container { display: contents; }
/* Le widget icône ajoute deux enveloppes autour du SVG. */
body .elementor.elementor .pi-w.elementor-widget-icon .elementor-icon-wrapper,
body .elementor.elementor .pi-w.elementor-widget-icon .elementor-icon { display: contents; }
body .elementor.elementor .pi-w.elementor-widget-icon svg { display: block; width: 100%; height: 100%; }
/* Compteurs : le nombre hérite de l'enveloppe .stat__num */
body .elementor.elementor .pi-w.elementor-widget-counter .elementor-counter,
body .elementor.elementor .pi-w.elementor-widget-counter .elementor-counter-number-wrapper,
body .elementor.elementor .pi-w.elementor-widget-counter .elementor-counter-number-prefix,
body .elementor.elementor .pi-w.elementor-widget-counter .elementor-counter-number-suffix,
body .elementor.elementor .pi-w.elementor-widget-counter .elementor-counter-number {
  font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; display: inline; flex: none; white-space: nowrap;
}
body .elementor.elementor .pi-w.elementor-widget-counter .elementor-counter-number-prefix { display: none; }
/* Boutons : l'ancre interne porte l'allure, l'enveloppe s'efface. */
body .elementor.elementor .pi-w.elementor-widget-button .elementor-button-wrapper,
body .elementor.elementor .pi-w.elementor-widget-button .elementor-button-content-wrapper { display: contents; }
body .elementor.elementor .pi-w.elementor-widget-button .elementor-button { background-image: none; }
body .elementor.elementor .pi-w.btn, body .elementor.elementor .pi-w.link-arrow { display: inline-flex; padding: 0; background: none; border: 0; }
/* Le widget shortcode ne doit rien imposer au rendu du plugin Métier. */
body .elementor.elementor .pi-w.pi-shortcode .elementor-shortcode { display: block; }
/* hidden doit gagner sur le reste de la feuille. */
body .elementor.elementor.elementor [hidden] { display: none !important; }

/* 3. Styles en ligne de la référence, portés tout en haut de l'échelle. */
body .elementor.elementor.elementor.elementor.elementor .pi-mb0 { margin-bottom: 0; }
body .elementor.elementor.elementor.elementor.elementor .pi-on-ink { color: #fff; }
body .elementor.elementor.elementor.elementor.elementor .pi-on-ink-soft { color: rgba(255,255,255,.82); }
body .elementor.elementor.elementor.elementor.elementor .pi-stat-center { justify-content: center; margin-top: .5rem; }
body .elementor.elementor.elementor.elementor.elementor .pi-stat-c { text-align: center; align-items: center; }
body .elementor.elementor.elementor.elementor.elementor .testi-band { margin-top: 2.5rem; }

/* Garde de couleur : les classes listees tiennent lieu d'attribut style dans
   la reference et doivent primer. Elle est ecrite avec :where() pour ne RIEN
   ajouter a la specificite du selecteur : un :not(.x) simple l'aurait relevee
   d'un cran et aurait inverse l'ordre avec les regles de page.
   Selecteur type : ...pi-w.lead:not(:where(.pi-on-ink,...)) { color: ... } */
/* 4. Report des règles de boutons sur l'ancre interne d'Elementor */
body .elementor.elementor.elementor .pi-w.btn .elementor-button--primary{ background: var(--accent); color: var(--text-on-accent); }
body .elementor.elementor.elementor .pi-w.btn .elementor-button--dark{ background: var(--accent); color: var(--text-on-accent); }
body .elementor.elementor.elementor .pi-w.btn .elementor-button--primary:hover{ background: var(--accent-hover); box-shadow: var(--shadow-accent); color: #fff; }
body .elementor.elementor.elementor .pi-w.btn .elementor-button--dark:hover{ background: var(--accent-hover); box-shadow: var(--shadow-accent); color: #fff; }
body .elementor.elementor.elementor .pi-w.btn .elementor-button--light{ background: #fff; color: var(--plum-800); }
body .elementor.elementor.elementor .pi-w.btn .elementor-button--light:hover{ background: var(--paper-100); color: var(--plum-900); }
body .elementor.elementor.elementor .pi-w.link-arrow .elementor-button{ display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--accent); transition: gap var(--dur-base) var(--ease-out), color var(--dur-fast); }
body .elementor.elementor.elementor .pi-w.link-arrow .elementor-button:hover{ gap: .85rem; color: var(--accent-hover); }



/* ==========================================================================
   5. COUCHE COMMUNE (ex page-agence / page-ajouter-bien / page-catalogue)
   Ces trois feuilles portaient les MEMES regles generiques, sans portee de
   page, et se chargeaient dans l'ordre alphabetique : le display:block de
   .pi-c.container (ajouter-bien, catalogue) passait APRES le display:grid de
   .pi-c.split (agence), a specificite egale — toutes les grilles .split du
   site retombaient donc en bloc. Les regles vivent desormais ici, une seule
   fois, avant toutes les feuilles page-*.css.
   ========================================================================== */


/* Chargeur de la couche commune (voir rapport) : n'occupe aucune place. */
body .elementor.elementor .pi-fid-loader{ display: none; }

/* base.css — titres et paragraphes, portes par l'enveloppe du widget */
body .elementor.elementor .pi-h1,
body .elementor.elementor .pi-h2,
body .elementor.elementor .pi-h3{
  font-family: var(--font-display); color: var(--text-strong);
  font-weight: var(--fw-semibold); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter); margin: 0 0 .5em; text-wrap: balance;
}
body .elementor.elementor .pi-h1{ font-size: var(--display-lg); }
body .elementor.elementor .pi-h2{ font-size: var(--display-md); }
body .elementor.elementor .pi-h3{ font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
body .elementor.elementor.elementor .pi-p{ margin: 0 0 1em; }

/* main.css — .page-hero */
body .elementor.elementor .page-hero .pi-h1{ color: var(--white); margin: 1rem 0 .8rem; font-size: var(--display-lg); }
body .elementor.elementor.elementor .page-hero .pi-p{ color: rgba(255,255,255,.86); max-width: 580px; font-size: var(--text-md); }

/* main.css — .cta-band */
body .elementor.elementor.elementor .cta-band .pi-h2{ color: var(--white); max-width: 620px; font-size: var(--display-md); margin: var(--space-3) 0 0; }
body .elementor.elementor.elementor .cta-band .pi-p{ color: rgba(255,255,255,.88); max-width: 540px; margin-top: 1rem; }
body .elementor.elementor .cta-band .pi-w.btn{ margin-top: 2rem; }

/* Widget « bouton » : adaptation.css vide l'enveloppe .pi-w.btn au profit
   d'une classe .elementor-button--x qu'Elementor ne produit pas. On rend
   l'allure a l'enveloppe (qui porte .btn / .btn--x) et l'ancre interne
   devient la surface cliquable pleine. */
body .elementor.elementor.elementor .pi-w.btn{ padding: 0 22px; border: 1.5px solid transparent; }
body .elementor.elementor.elementor .pi-w.btn.btn--primary{ background: var(--accent); color: var(--text-on-accent); }
body .elementor.elementor.elementor .pi-w.btn.btn--primary:hover{ background: var(--accent-hover); box-shadow: var(--shadow-accent); color: #fff; }
body .elementor.elementor.elementor .pi-w.btn.btn--ghost{ background: transparent; color: var(--text-strong); border-color: var(--border-strong); }
body .elementor.elementor.elementor .pi-w.btn.btn--ghost:hover{ border-color: var(--accent); color: var(--accent); background: var(--plum-50); }
body .elementor.elementor.elementor .pi-w.btn.btn--light{ background: #fff; color: var(--plum-800); }
body .elementor.elementor.elementor .pi-w.btn.btn--light:hover{ background: var(--paper-100); color: var(--plum-900); }
body .elementor.elementor.elementor .pi-w.btn > .elementor-button{
  all: unset; display: flex; align-items: center; justify-content: center;
  gap: inherit; width: 100%; height: 100%; cursor: pointer; color: inherit; font: inherit;
}

/* --- .section-head ----------------------------------------------------- */
body .elementor.elementor .section-head .pi-h2{ margin: var(--space-4) 0 0; font-size: var(--display-md); }
body .elementor.elementor.elementor .section-head .pi-p{ margin-top: var(--space-4); color: var(--text-muted); font-size: var(--text-md); }

/* --- .section--ink ----------------------------------------------------- */
body .elementor.elementor .section--ink .pi-h1,
body .elementor.elementor .section--ink .pi-h2,
body .elementor.elementor .section--ink .pi-h3{ color: var(--white); }
body .elementor.elementor .section--ink .pi-p,
body .elementor.elementor .section--ink .lead{ color: rgba(246,241,233,.82); }
body .elementor.elementor .section--ink .section-head .pi-p{ color: rgba(246,241,233,.78); }
body .elementor.elementor .section--ink .feature-card .pi-h3{ color: #fff; }
body .elementor.elementor .section--ink .feature-card .pi-p{ color: rgba(246,241,233,.7); }

/* --- .split ------------------------------------------------------------ */
body .elementor.elementor .split__content .pi-h2{ margin: var(--space-4) 0 var(--space-5); font-size: var(--display-md); }
body .elementor.elementor.elementor .split__content .pi-p + .pi-p{ margin-top: 1rem; }
body .elementor.elementor .split__content .pi-w.btn{ margin-top: 2rem; }

/* --- .feature-card ----------------------------------------------------- */
body .elementor.elementor .feature-card .pi-h3{ font-size: var(--text-2xl); margin-bottom: .6rem; }
body .elementor.elementor.elementor .feature-card .pi-p{ color: var(--text-muted); font-size: .95rem; margin: 0; }
/* le pictogramme garde la taille ecrite dans le fichier SVG (26 px) */
body .elementor.elementor.elementor .pi-w.feature-card__icon svg{ width: 26px; height: 26px; }

/* --- Styles en ligne de la reference ----------------------------------- */
body .elementor.elementor.elementor.elementor.elementor .pi-agc-statrow{ justify-content: center; margin-top: 4rem; }
body .elementor.elementor.elementor.elementor.elementor .pi-agc-joinwrap{ text-align: center; margin: 3rem 0 1em; }
body .elementor.elementor.elementor.elementor.elementor .pi-w.pi-agc-join{ justify-content: center; }

/* --- Dispositions des conteneurs ---------------------------------------
   Elementor stylise ses conteneurs par variables : .e-con lit --display
   (0,1,0) mais .e-con.e-flex lit --flex-direction / --align-items (0,2,0),
   qui l'emporte sur les regles a une classe de main.css. On repose donc
   explicitement la disposition des conteneurs repris de la reference. */
body .elementor.elementor .pi-c.page-hero,
body .elementor.elementor .pi-c.container,
body .elementor.elementor .pi-c.section-head,
body .elementor.elementor .pi-c.feature-card,
body .elementor.elementor .pi-c.split__content,
body .elementor.elementor .pi-c.cta-band{ display: block; }
body .elementor.elementor .pi-c.split{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
/* main.css : les blocs video elargissent la colonne media (0,2,0 dans la
   reference). Sans ces deux lignes, .pi-c.split imposait 1fr 1fr et la
   video de l'accueil comme celle d'Estimation tombaient a 526 px au lieu
   de 674 px, colonne texte elargie d'autant. */
body .elementor.elementor.elementor .pi-c.split--video.split--media-right{ grid-template-columns: 0.72fr 1.28fr; }
body .elementor.elementor.elementor .pi-c.split--video.split--media-left { grid-template-columns: 1.28fr 0.72fr; }
/* main.css : .testi-band{ max-width:1120px } — le plafond de largeur d'un
   conteneur Elementor de premier niveau (0,2,0) l'ecrasait. */
body .elementor.elementor.elementor .pi-c.testi-band,
body .elementor.elementor.elementor .pi-w.testi-band{ max-width: 1120px; margin-inline: auto; }
body .elementor.elementor .pi-c.grid{ display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
body .elementor.elementor .pi-c.cards-3{ grid-template-columns: repeat(3, 1fr); }
body .elementor.elementor .pi-c.stat-row{ display: flex; flex-direction: row; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 4rem); }
body .elementor.elementor .pi-c.stat{ display: flex; flex-direction: column; }

/* --- Contre-mesures aux neutralisations d'adaptation.css et du kit ------
   1. adaptation.css impose font/line-height/letter-spacing: inherit a
      l'enveloppe .pi-w.elementor-widget-text-editor (0,4,1) : les classes
      typographiques de base.css doivent etre reposees au-dessus.
   2. le kit Elementor pose margin-block-end:0 sur tout widget non dernier
      (0,2,0), ce qui efface les marges basses ecrites dans main.css.
   3. l'ancre interne du widget bouton garde le gabarit d'Elementor. */
body .elementor.elementor.elementor .pi-p.lead{ font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-body); }
body .elementor.elementor.elementor .pi-p.breadcrumb{ letter-spacing: .04em; }
body .elementor.elementor.elementor .pi-w.link-arrow > .elementor-button{ padding: 0; font-size: inherit; line-height: inherit; background: none; border-radius: 0; }
body .elementor.elementor .pi-w.feature-card__icon{ margin-bottom: 1.3rem; }

/* Un conteneur de premier niveau (.e-parent) recoit d'Elementor un plafond
   de largeur a deux classes (0,2,0) qui l'emporte sur .container de
   base.css : on repose la contrainte au niveau « largeurs ». */
body .elementor.elementor.elementor .pi-c.container{ max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }

/* ==========================================================================
   6. CORRECTIONS DE RENDU DES WIDGETS (passe de fidelite, comparaison section
      par section avec http://localhost:8882/ a 1440 px).
   ========================================================================== */

/* a. Widget « bouton » de .link-arrow : le picto est rendu AVANT le libelle,
      alors que le reglage icon_align vaut « right » et que la reference ecrit
      <a>Tout le catalogue <svg></a>. Cette version d'Elementor n'emet pas la
      classe elementor-align-icon-right. L'enveloppe .elementor-button-content-wrapper
      etant en display:contents, picto et libelle sont freres dans le flex de
      l'ancre : « order » retablit l'ordre de la reference. */
body .elementor.elementor.elementor .pi-w.link-arrow .elementor-button-icon { order: 2; }

/* b. Widget « compteur » : le suffixe est un <span> separe du nombre par les
      blancs de mise en forme du gabarit, rendus comme une espace — « 15 + » au
      lieu de « 15+ ». Un contexte flex ignore les noeuds de texte entierement
      blancs ; la ligne de base est conservee par align-items. */
body .elementor.elementor.elementor .pi-w.elementor-widget-counter .elementor-counter-number-wrapper {
  display: inline-flex; align-items: baseline;
}

/* c. main.css : .hero-stamp__ring { display:flex; flex-direction:column;
      gap:.25rem }. Elementor lit --flex-direction et --gap sur .e-con.e-flex
      (0,2,0) et reset.css les remet a « row » / 0 pour tous les .pi-c : la
      regle a une classe de la reference perdait, et les trois lignes du tampon
      « CE QUE NOUS AVONS CREE » s'alignaient cote a cote. */
body .elementor.elementor .pi-c.hero-stamp__ring {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .25rem;
}

/* ==========================================================================
   === MOBILE ===
   Adaptation au telephone. Aucune regle ci-dessus n'est touchee : tout ce qui
   suit vit dans des @media (sauf le point 7, sans effet visuel) et reste donc
   sans incidence a 1440 px, ou la fidelite mesuree est l'acquis a preserver.

   Cause principale des debordements horizontaux : les feuilles de fidelite
   recopiaient les grilles de main.css SANS leurs @media, a une specificite
   superieure. Les bascules du theme (1024 / 760 px) ne reprenaient donc plus
   la main. On les retablit ici un cran au-dessus des feuilles page-*.css,
   qui sont chargees APRES adaptation.css.
   ========================================================================== */

/* 1 - Grilles de cartes : 3 -> 2 colonnes sous 1024 px (main.css, section 13). */
@media (max-width: 1024px) {
  body .elementor.elementor.elementor .pi-c.cards-3,
  body .elementor.elementor.elementor.elementor .cards-3,
  body .elementor.elementor.elementor .pi-c.property-grid,
  body .elementor.elementor.elementor .pi-c.team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 2 - Sous 760 px : pile complete. Ces cartes portent un vrai paragraphe,
       elles passent en colonne unique. Les vignettes produit (.supports-grid)
       gardent deux colonnes jusqu'a 520 px : main.css le prevoit deja et sa
       regle n'etait pas ecrasee, on n'y touche pas. */
@media (max-width: 760px) {
  body .elementor.elementor.elementor .pi-c.cards-3,
  body .elementor.elementor.elementor.elementor .cards-3,
  body .elementor.elementor.elementor .pi-c.property-grid,
  body .elementor.elementor.elementor .pi-c.team-grid,
  body .elementor.elementor.elementor .pi-c.form-grid,
  body .elementor.elementor.elementor .pi-c.footer-grid {
    grid-template-columns: 1fr;
  }
  body .elementor.elementor.elementor.elementor .pi-c.split,
  body .elementor.elementor.elementor.elementor .pi-c.split--video,
  body .elementor.elementor.elementor.elementor .pi-c.split--video.split--media-left,
  body .elementor.elementor.elementor.elementor .pi-c.split--video.split--media-right {
    grid-template-columns: 1fr;
  }
  /* Empilement dans l'ordre du HTML (texte puis media), comme main.css. */
  body .elementor.elementor.elementor.elementor .pi-c.split > .pi-c.split__media,
  body .elementor.elementor.elementor.elementor .pi-c.split > .pi-c.split__content {
    order: 0;
  }
}

/* 2bis - Blocs video : main.css degroupe .split--video des 900 px
        (@media max-width:900px). La regle 0.72/1.28fr posee plus haut
        vit a (0,4,1) : il faut la reprendre ici au meme niveau. */
@media (max-width: 900px) {
  body .elementor.elementor.elementor .pi-c.split--video,
  body .elementor.elementor.elementor .pi-c.split--video.split--media-left,
  body .elementor.elementor.elementor .pi-c.split--video.split--media-right { grid-template-columns: 1fr; }
}

/* 3 - Colonnes de grille : autoriser le retrecissement.
       Un <select> impose sa plus longue option comme largeur minimale
       (min-width:auto sur un enfant de grille) : la colonne "poste vise" de
       Recrutement mesurait 381 px dans 220 px disponibles, et le formulaire
       debordait alors meme que la grille etait bien passee sur une colonne. */
@media (max-width: 1024px) {
  body .form-grid > *,
  body .estim-auto__grid > *,
  body .container.split > *,
  body .footer-grid > *,
  body .grid > * { min-width: 0; }

  body .field input, body .field select, body .field textarea,
  body .estim-auto__grid input, body .estim-auto__grid select,
  body .file-drop input[type="file"] { width: 100%; max-width: 100%; }

  body .footer-contact li, body .footer-contact a,
  body .contact-info-card li, body .vcard__person a { overflow-wrap: anywhere; }
}

/* 4 - Contact : la carte de visite demande environ 510 px de large. La grille
       .split du gabarit ne se degroupait qu'a 760 px, d'ou un debordement
       continu de 800 a 1100 px (jusqu'a +252 px) - invisible a 375 comme a
       1440, il ne se voyait qu'entre les ruptures. */
@media (max-width: 1100px) {
  body.page-id-9 .container.split { grid-template-columns: 1fr; }
}

/* 5 - Cibles tactiles. Les champs sont deja a 16 px (pas de zoom iOS) et les
       boutons a 48 px ; seule la case de consentement restait a 13 px. */
@media (max-width: 760px) {
  body .form-consent { min-height: 44px; align-items: center; padding-block: .3rem; }
  body .form-consent input[type="checkbox"] { width: 22px; height: 22px; margin-top: 0; flex: none; }
}

/* 6 - Boutons : les capitales espacees d'un libelle long depassaient leur
       carte sur les tres petites largeurs (white-space:nowrap du .btn). */
@media (max-width: 420px) {
  body .btn { white-space: normal; height: auto; min-height: 48px; padding-block: .6rem; text-align: center; }
  body .elementor.elementor.elementor .pi-w.btn .elementor-button { white-space: normal; height: auto; min-height: 48px; }
}

/* 7 - Tiroir de navigation du theme. Hors ecran il restait dans l'ordre de
       tabulation : dix liens atteignables au clavier depuis l'en-tete alors
       que le panneau est ferme. visibility l'en retire sans toucher au JS du
       theme ; le glissement de fermeture est preserve par le delai. */
body .mobile-nav {
  transition-property: transform, visibility;
  transition-duration: var(--dur-slow), 0s;
  transition-delay: 0s, var(--dur-slow);
}
body .mobile-nav:not(.is-open) { visibility: hidden; }
body .mobile-nav.is-open { visibility: visible; transition-delay: 0s, 0s; }

/* Fin === MOBILE === */

/* ==========================================================================
   === HERO UNIFORME ===
   Ecart assume par rapport a la reference, demande par le client : dans la
   maquette, .page-hero n'a que des paddings, sa hauteur suit donc le nombre
   de lignes du titre et du chapo — les heros des pages interieures n'ont pas
   deux fois la meme hauteur. On leur impose une hauteur commune et on centre
   le contenu verticalement, en gardant le padding haut qui degage l'en-tete
   fixe (~140 px).
   ========================================================================== */
body .elementor.elementor.elementor .pi-c.page-hero{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 460px;
  padding-top: clamp(9rem, 12vw, 11rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
body .elementor.elementor.elementor .pi-c.page-hero > .pi-c.container{
  width: 100%;
}
@media (max-width: 900px){
  body .elementor.elementor.elementor .pi-c.page-hero{ min-height: 380px; }
}
@media (max-width: 640px){
  body .elementor.elementor.elementor .pi-c.page-hero{
    min-height: 320px;
    padding-top: clamp(7rem, 22vw, 9rem);
  }
}