/* ============================================================
   Page Contact — scoped via .lm-page-contact pour override obsidian.css
   ============================================================ */

/* ─── HERO CONTACT ─── */

.lm-hero-contact {
  position: relative;
  height: 40vh;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.lm-hero-contact__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--bg3) 0%, var(--bg4, #221e17) 40%, var(--bg3) 100%);
}

.lm-hero-contact__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.lm-hero-contact__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(201,169,110,.012) 2px,
      rgba(201,169,110,.012) 4px
    );
  pointer-events: none;
}

.lm-hero-contact__bg::before {
  content: '';
  position: absolute;
  left: clamp(1.5rem, 5vw, 5rem);
  top: 2rem;
  bottom: 4rem;
  width: 1px;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(201,169,110,.30) 30%,
    rgba(201,169,110,.30) 70%,
    transparent
  );
}

.lm-hero-contact__inner {
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 5vw, 5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  width: 100%;
}

.lm-hero-contact__eyebrow {
  margin-bottom: 1.5rem;
}

.lm-hero-contact__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--text);
  max-width: 600px;
}

.lm-hero-contact__title em {
  font-style: italic;
  color: var(--gold);
}

/* ─── EYEBROW ─── */

.lm-page-contact .lm-eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: clamp(.65rem, 1vw, .72rem);
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}

/* ─── DISPLAY ─── */

.lm-page-contact .lm-display {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.lm-page-contact .lm-display em {
  font-style: italic;
  color: var(--gold);
}

/* ─── FILET OR ─── */

.lm-page-contact .lm-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--border2) 20%,
    var(--border2) 80%,
    transparent 100%
  );
  border: none;
}

/* ─── SECTION "QUI SUIS-JE" ─── */

/* Sélecteur COMPOSÉ, pas descendant : le bloc pose `lm-page-contact` sur sa
   propre section racine (il n’y a plus de conteneur de page), donc les deux
   classes sont sur le MÊME élément. Écrite en descendant, la règle ne trouvait
   personne : la section perdait son fond et ses marges, et la grille 40 %/60 %
   plus son `gap` de 64 px débordait alors de 24 px hors du cadre. */
.lm-page-contact.lm-about-contact {
  background: var(--bg3);
  padding: clamp(4rem, 7vw, 7rem) clamp(1.5rem, 5vw, 5rem);
}

.lm-page-contact .lm-about-contact__grid {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.lm-page-contact .lm-about-contact__visual {
  position: relative;
}

.lm-page-contact .lm-about-contact__frame {
  position: absolute;
  inset: 0;
  transform: translate(12px, 12px);
  border: 1px solid rgba(201,169,110,.40);
  z-index: 0;
}

[data-theme="light"] .lm-page-contact .lm-about-contact__frame {
  border-color: rgba(138,106,58,.40);
}

.lm-page-contact .lm-about-contact__img-wrap {
  position: relative;
  z-index: 1;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg4, #221e17);
}

.lm-page-contact .lm-about-contact__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lm-page-contact .lm-about-contact__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(201,169,110,.05);
  transition: opacity 600ms cubic-bezier(.22,.61,.36,1);
  opacity: 0;
}

.lm-page-contact .lm-about-contact__visual:hover .lm-about-contact__img-wrap::after {
  opacity: 1;
}

.lm-page-contact .lm-about-contact__body {
  padding-left: 1.5rem;
}

.lm-page-contact .lm-about-contact__label {
  margin-bottom: 1.5rem;
}

.lm-page-contact .lm-about-contact__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-bottom: 2rem;
}

.lm-page-contact .lm-about-contact__title em {
  font-style: italic;
  color: var(--gold);
}

.lm-page-contact .lm-about-contact__text {
  font-family: 'Jost', sans-serif;
  font-size: clamp(.9rem, 1.2vw, 1rem);
  font-weight: 200;
  line-height: 2;
  color: var(--muted);
  max-width: 480px;
  margin-bottom: 3rem;
}

.lm-page-contact .lm-about-contact__signature {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.35rem;
  color: var(--gold);
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: inline-block;
}

/* ─── SECTION CONTACT — Coordonnées + Formulaire ─── */

.lm-page-contact .lm-contact-section {
  background: var(--bg);
  padding: clamp(4rem, 7vw, 7rem) clamp(1.5rem, 5vw, 5rem);
}

.lm-page-contact .lm-contact-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

.lm-page-contact .lm-contact-info__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 300;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}

.lm-page-contact .lm-contact-info__intro {
  font-family: 'Jost', sans-serif;
  font-size: .9rem;
  font-weight: 200;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: clamp(2rem, 3vw, 3rem);
}

.lm-page-contact .lm-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}

.lm-page-contact .lm-contact-item:first-of-type {
  border-top: 1px solid var(--border);
}

.lm-page-contact .lm-contact-item__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border2);
  border-radius: 50%;
}

.lm-page-contact .lm-contact-item__icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lm-page-contact .lm-contact-item__label {
  font-family: 'Jost', sans-serif;
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .3rem;
}

.lm-page-contact .lm-contact-item__value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--text);
  line-height: 1.5;
}

.lm-page-contact .lm-contact-item__value a {
  transition: color 300ms cubic-bezier(.22,.61,.36,1);
}

.lm-page-contact .lm-contact-item__value a:hover {
  color: var(--gold);
}

/* ─── FORMULAIRE — spécificité élevée pour override obsidian.css ─── */

.lm-page-contact .lm-form-wrap {
  position: relative;
}

.lm-page-contact .lm-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  transition:
    opacity 600ms cubic-bezier(.22,.61,.36,1),
    transform 600ms cubic-bezier(.22,.61,.36,1);
}

.lm-page-contact .lm-form.is-hidden {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}

.lm-page-contact .lm-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.lm-page-contact .lm-form__group {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.lm-page-contact .lm-form__group label {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  font-weight: 300;
  color: var(--text);
  opacity: .85;
  letter-spacing: normal;
  text-transform: none;
}

.lm-page-contact .lm-form__group input,
.lm-page-contact .lm-form__group textarea {
  font-family: 'Jost', sans-serif;
  font-size: .9rem;
  font-weight: 200;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: 0;
  padding: .85rem 1.1rem;
  outline: none;
  transition:
    border-color 300ms cubic-bezier(.22,.61,.36,1),
    box-shadow 300ms cubic-bezier(.22,.61,.36,1);
  resize: none;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
}

.lm-page-contact .lm-form__group input::placeholder,
.lm-page-contact .lm-form__group textarea::placeholder {
  color: var(--muted);
  font-weight: 200;
  opacity: .5;
}

.lm-page-contact .lm-form__group input:focus,
.lm-page-contact .lm-form__group textarea:focus {
  border-color: rgba(201,169,110,.40);
  box-shadow:
    0 0 0 2px rgba(201,169,110,.12),
    inset 0 1px 0 rgba(201,169,110,.06);
}

.lm-page-contact .lm-form__group textarea {
  min-height: 160px;
  line-height: 1.8;
  resize: none;
}

/* Bouton submit — effet rideau vertical */
.lm-page-contact .lm-btn-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.5rem;
  background: var(--gold);
  color: var(--bg);
  font-family: 'Jost', sans-serif;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: color 300ms cubic-bezier(.22,.61,.36,1);
  align-self: flex-start;
}

.lm-page-contact .lm-btn-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--text);
  transform: translateY(100%);
  transition: transform 600ms cubic-bezier(.22,.61,.36,1);
}

.lm-page-contact .lm-btn-submit:hover::before {
  transform: translateY(0);
}

.lm-page-contact .lm-btn-submit:hover {
  color: var(--gold);
}

.lm-page-contact .lm-btn-submit span {
  position: relative;
  z-index: 1;
}

/* ─── CONFIRMATION ENVOI ─── */

.lm-page-contact .lm-form-confirm {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition:
    opacity 600ms cubic-bezier(.22,.61,.36,1),
    transform 600ms cubic-bezier(.22,.61,.36,1);
  text-align: center;
  padding: 4rem;
}

.lm-page-contact .lm-form-confirm.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.lm-page-contact .lm-form-confirm__icon {
  width: 64px;
  height: 64px;
  border: 1px solid rgba(201,169,110,.40);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lm-page-contact .lm-form-confirm__icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lm-page-contact .lm-form-confirm__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 300;
  letter-spacing: -.02em;
  color: var(--text);
}

.lm-page-contact .lm-form-confirm__sub {
  font-family: 'Jost', sans-serif;
  font-size: .9rem;
  font-weight: 200;
  color: var(--muted);
  line-height: 1.8;
}

.lm-page-contact .lm-form-confirm__reset {
  margin-top: 1rem;
  font-family: 'Jost', sans-serif;
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border2);
  padding-bottom: 2px;
  cursor: pointer;
  transition: color 300ms cubic-bezier(.22,.61,.36,1);
}

.lm-page-contact .lm-form-confirm__reset:hover {
  color: var(--gold);
}

/* ─── MAP ─── */

/* Même correction qu’en tête de « SECTION "QUI SUIS-JE" » : sélecteur composé,
   la classe de portée est posée par le bloc sur sa propre section racine. */
.lm-page-contact.lm-map-section {
  background: var(--bg3);
  padding: clamp(4rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5rem);
}

.lm-page-contact .lm-map-section__header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.lm-page-contact .lm-map-section__label {
  margin-bottom: 1.5rem;
}

.lm-page-contact .lm-map-section__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 300;
  letter-spacing: -.02em;
  color: var(--text);
}

.lm-page-contact .lm-map-section__title em {
  font-style: italic;
  color: var(--gold);
}

.lm-page-contact .lm-map-section__container {
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid var(--border);
  overflow: hidden;
}

.lm-page-contact .lm-map-section__container iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
}

/* ─── RESPONSIVE ─── */

@media (max-width: 768px) {
  .lm-page-contact .lm-about-contact__grid {
    grid-template-columns: 1fr;
  }

  .lm-page-contact .lm-about-contact__body {
    padding-left: 0;
  }

  .lm-page-contact .lm-about-contact__visual {
    max-width: 280px;
    margin: 0 auto;
  }

  .lm-page-contact .lm-contact-section__grid {
    grid-template-columns: 1fr;
  }

  .lm-page-contact .lm-form__row {
    grid-template-columns: 1fr;
  }

  .lm-hero-contact__title {
    font-size: clamp(1.8rem, 8vw, 2.8rem);
  }
}

/* ─── REDUCED MOTION ─── */

@media (prefers-reduced-motion: reduce) {
  .lm-page-contact .lm-form,
  .lm-page-contact .lm-form-confirm,
  .lm-page-contact .lm-btn-submit::before {
    transition: none;
  }
}

/* ============================================================
   FLUENT FORMS — habillage du formulaire du bloc « Contact »
   ------------------------------------------------------------
   Le bloc acf/lm-contact rend son formulaire par le shortcode de Fluent
   Forms : c'est lui qui reçoit et enregistre les messages, et son balisage
   ne peut pas être celui du <form class="lm-form"> de Django. Ces règles
   reportent, classe par classe, les valeurs des règles .lm-form* de
   obsidian.css (l. 729-762) sur le balisage de Fluent Forms, pour que les
   deux formulaires se confondent à l'écran.

     .lm-form          → form, et le <fieldset> que Fluent Forms intercale
     .lm-form__row     → .ff-t-container (+ .ff-t-cell)
     .lm-form__group   → .ff-el-group
     label             → .ff-el-input--label (+ le <label> qu'il contient)
     input, textarea   → .ff-el-form-control
     .lm-form__submit  → .ff-btn-submit

   Portée : la section .lm-contact du bloc, jamais les autres formulaires
   du site. La feuille de Fluent Forms n'est pas désactivée : chaque règle
   ci-dessous passe devant elle par la spécificité. Attention, deux de ses
   règles mordent plus fort qu'il n'y paraît et demandent une classe de
   plus : `form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style)` (le
   style par formulaire imprimé en ligne, 0-3-1) et l'astérisque des champs
   obligatoires (0-4-1).
   ============================================================ */

/* .lm-form : colonne, 1.4rem entre les groupes. Fluent Forms glisse un
   <fieldset> (marges et bordures déjà annulées en ligne) entre <form> et
   les groupes : la colonne se pose sur les deux. La légende de lecture
   d'écran, invisible mais en flux, deviendrait un élément de la colonne et
   ajouterait un espace en tête : on la sort du flux sans la masquer. */
.lm-contact .fluentform form,
.lm-contact .fluentform form > fieldset {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.lm-contact .fluentform form > fieldset > legend {
  position: absolute;
}

/* .lm-form__group. Les deux pseudo-éléments de dégagement (clearfix) de
   Fluent Forms deviendraient deux éléments de la colonne : deux espaces de
   .5rem en trop dans chaque groupe. Ils ne servent à rien ici. */
.lm-contact .fluentform .ff-el-group {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
}

.lm-contact .fluentform .ff-el-group::before,
.lm-contact .fluentform .ff-el-group::after {
  display: none;
}

/* .lm-form__row : la rangée « Prénom / Nom » de Fluent Forms est un
   conteneur en deux cellules, décalé de 10 px de chaque côté par sa feuille. */
.lm-contact .fluentform .ff-t-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0;
}

.lm-contact .fluentform .ff-t-cell {
  padding: 0;
  width: auto;
}

/* .lm-form__group label. Le libellé de Fluent Forms est un <label> en ligne
   dans une boîte : sans la même typographie sur la BOÎTE, sa ligne reste
   calée sur les 16 px hérités du corps de page (27 px de haut au lieu de
   16). La hauteur de ligne n'est jamais déclarée : le rapport 1,7 de
   config.css s'applique aux deux, comme côté Django. */
.lm-contact .fluentform .ff-el-input--label,
.lm-contact .fluentform .ff-el-input--label label {
  font-family: 'Jost', sans-serif;
  font-size: .6rem;
  font-weight: 300;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
  padding: 0;
}

.lm-contact .fluentform .ff-el-input--label label {
  display: block;
}

/* L'astérisque des champs obligatoires prend la couleur du libellé : le
   rouge de Fluent Forms jure avec la palette. Le repère reste, il ne
   change ni la hauteur du libellé ni celle du champ. */
.lm-contact .fluentform .ff-el-input--label.ff-el-is-required label::after,
.lm-contact .fluentform .ff-el-input--label.ff-el-is-required label::before {
  color: inherit;
}

/* .lm-form__group input, .lm-form__group textarea */
.lm-contact .fluentform .ff-el-form-control {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  padding: .9rem 1.1rem;
  font-family: 'Jost', sans-serif;
  font-size: .88rem;
  font-weight: 300;
  line-height: normal;
  height: auto;
  outline: none;
  box-shadow: none;
  transition: border-color .3s;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.lm-contact .fluentform .ff-el-form-control:focus {
  border-color: var(--gold);
  box-shadow: none;
}

.lm-contact .fluentform textarea.ff-el-form-control {
  resize: vertical;
  min-height: 130px;
}

/* .lm-form__submit — l'effet rideau d'obsidian.css passe par un ::before
   posé au-dessus du fond, sous un <span> remis au-dessus par z-index. Le
   bouton de Fluent Forms n'a pas ce <span> : son texte passerait sous le
   rideau. Même effet, même durée, même courbe, obtenus par un dégradé de
   fond deux fois plus large que le bouton, qu'on fait glisser — le fond
   est toujours peint sous le texte.
   La graisse 400 n'est pas un choix : c'est celle que le navigateur donne
   au <button> de Django, qu'aucune règle n'habille. */
.lm-contact .fluentform .ff-el-group .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  font-family: 'Jost', sans-serif;
  font-size: .68rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bg);
  background-color: var(--gold);
  background-image: linear-gradient(to right, var(--bg2) 0 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: 100% 0;
  padding: 1.1rem 2.5rem;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .4s, background-position .4s cubic-bezier(.77,0,.175,1);
  align-self: flex-start;
}

/* `opacity: .8` au survol vient de la feuille par défaut du greffon : rien
   de tel côté Django, le rideau suffit. */
.lm-contact .fluentform .ff-el-group .ff-btn-submit:hover,
.lm-contact .fluentform .ff-el-group .ff-btn-submit:focus {
  color: var(--gold);
  background-position: 0 0;
  opacity: 1;
}

/* .lm-form__row passe en une colonne sous 768 px (règle du formulaire de
   la page Contact, plus haut dans cette feuille). */
@media (max-width: 768px) {
  .lm-contact .fluentform .ff-t-container {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lm-contact .fluentform .ff-el-group .ff-btn-submit {
    transition: none;
  }
}

/* ============================================================
   BLOC CONTACT — report des valeurs du gabarit dédié
   ------------------------------------------------------------
   La page /contact/ de Django a son propre gabarit (.lm-contact-section,
   classes en .lm-contact-*). Côté WordPress, la section des coordonnées est
   rendue par le bloc « Contact » de la tâche 2.3, dont le balisage vient de
   section_contact_block.html (classes en .lm-contact__*, habillées par
   obsidian.css). Ces règles reportent, classe par classe, les valeurs de
   .lm-page-contact .lm-contact-section* sur ce balisage, pour que la page de
   contact garde exactement la même allure.

     .lm-contact-section        → .lm-contact
     .lm-contact-section__grid  → .lm-contact__grid
     .lm-contact-info__title    → .lm-contact__info-title
     .lm-contact-info__intro    → .lm-contact__info-intro
     .lm-contact-item*          → .lm-contact__item*

   Portée : .lm-page-contact, posée par le bloc sur sa section racine — il n’y
   a plus de conteneur de page côté WordPress. Spécificité 0-2-0 contre les
   0-1-0 d’obsidian.css : chaque règle passe devant.
   ============================================================ */

.lm-page-contact.lm-contact { background: var(--bg); padding: clamp(4rem, 7vw, 7rem) clamp(1.5rem, 5vw, 5rem); }
.lm-page-contact .lm-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 7rem); max-width: 1200px; margin: 0 auto; align-items: start; }
.lm-page-contact .lm-contact__info { display: block; }
.lm-page-contact .lm-contact__info-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 300; letter-spacing: -.02em; margin-bottom: 1rem; }
.lm-page-contact .lm-contact__info-intro { font-family: 'Jost', sans-serif; font-size: .9rem; font-weight: 200; color: var(--muted); line-height: 1.8; margin-bottom: clamp(2rem, 3vw, 3rem); }
.lm-page-contact .lm-contact__item { display: flex; align-items: flex-start; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.lm-page-contact .lm-contact__item:first-of-type { border-top: 1px solid var(--border); }
.lm-page-contact .lm-contact__item-icon { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border2); border-radius: 50%; }
.lm-page-contact .lm-contact__item-icon svg { width: 14px; height: 14px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lm-page-contact .lm-contact__item-label { font-family: 'Jost', sans-serif; font-size: .65rem; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.lm-page-contact .lm-contact__item-value { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 300; color: var(--text); line-height: 1.5; }
.lm-page-contact .lm-contact__item-value a { transition: color 300ms cubic-bezier(.22,.61,.36,1); }
.lm-page-contact .lm-contact__item-value a:hover { color: var(--gold); }
.lm-page-contact .lm-contact__item-value p { margin: 0; }

@media (max-width: 768px) {
  .lm-page-contact .lm-contact__grid { grid-template-columns: 1fr; }
}