/* Marketing Lead layout + consultation form polish — 2026-09-05 */
:root{--mlp-ink:#101828;--mlp-text:#5f6674;--mlp-purple:#7560b6;--mlp-pink:#ff5fa8;--mlp-orange:#e88932;--mlp-border:#eaded5;--mlp-soft:#fffaf7}

/* Keep anchor jumps clear of the sticky navigation. */
[id]{scroll-margin-top:110px}

/* Better desktop hero balance: align copy and form from the top instead of vertically drifting. */
.hero .hero-grid{align-items:start!important}

/* Unified luxury consultation card treatment across every commercial page. */
.ml-form-shell{position:relative!important;overflow:hidden!important;border:1px solid rgba(232,137,50,.24)!important;border-radius:24px!important;background:linear-gradient(160deg,#fff 0%,#fffdfb 62%,#fbf8ff 100%)!important;box-shadow:0 24px 60px rgba(16,24,40,.10)!important}
.ml-form-shell:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--mlp-purple),var(--mlp-pink),var(--mlp-orange));z-index:1}
.ml-form-kicker{display:inline-flex;align-items:center;margin:0 0 10px;padding:7px 11px;border-radius:999px;background:#fff2e8;color:var(--mlp-orange);font:800 10px/1.2 Poppins,Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase}
.ml-form-shell h2,.ml-form-shell h3{letter-spacing:-.025em}
.ml-form-shell>p:not(.form-note):not(.ml-form-privacy){line-height:1.7}

/* Compact two-column layout reduces excessive vertical height while keeping mobile simple. */
form[data-ml-form="consultation"]{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important;align-items:start}
form[data-ml-form="consultation"]>input:not([type="hidden"]),
form[data-ml-form="consultation"]>select,
form[data-ml-form="consultation"]>textarea,
form[data-ml-form="consultation"]>button{width:100%!important;margin:0!important;box-sizing:border-box!important;font-family:Poppins,Arial,sans-serif!important}
form[data-ml-form="consultation"]>input:not([type="hidden"]),
form[data-ml-form="consultation"]>select{min-height:52px!important}
form[data-ml-form="consultation"]>input[name="email"],
form[data-ml-form="consultation"]>input[name="website"],
form[data-ml-form="consultation"]>select,
form[data-ml-form="consultation"]>textarea,
form[data-ml-form="consultation"]>button{grid-column:1/-1}
form[data-ml-form="consultation"]>textarea{min-height:112px!important;resize:vertical}
form[data-ml-form="consultation"]>button{min-height:54px!important;margin-top:2px!important;border-radius:12px!important;font-weight:800!important;transition:transform .18s ease,box-shadow .18s ease!important}
form[data-ml-form="consultation"]>button:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(232,137,50,.26)!important}
form[data-ml-form="consultation"]>input:focus,
form[data-ml-form="consultation"]>select:focus,
form[data-ml-form="consultation"]>textarea:focus{outline:none!important;border-color:var(--mlp-orange)!important;box-shadow:0 0 0 4px rgba(232,137,50,.10)!important;background:#fff!important}

.ml-form-privacy{grid-column:1/-1;margin:2px 0 0!important;text-align:center;color:#777081!important;font:500 11px/1.55 Poppins,Arial,sans-serif!important}
.ml-form-privacy a{color:var(--mlp-purple)!important;font-weight:700;text-decoration:none}
.ml-form-privacy a:hover{text-decoration:underline}

/* Generic consultation sections used on hub/CRM pages that previously had no inline form. */
.ml-consult-section{padding:78px 0;background:linear-gradient(180deg,#fff 0%,#fff8f3 100%)}
.ml-consult-wrap{width:min(1180px,92%);margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.9fr);gap:44px;align-items:center}
.ml-consult-copy .ml-form-kicker{margin-bottom:14px}
.ml-consult-copy h2{margin:0 0 14px;color:var(--mlp-ink);font-size:clamp(30px,4vw,46px);line-height:1.14;letter-spacing:-.045em}
.ml-consult-copy p{margin:0;color:var(--mlp-text);font-size:16px;line-height:1.85}
.ml-consult-points{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.ml-consult-points li{position:relative;padding:12px 13px 12px 36px;border:1px solid rgba(117,96,182,.11);border-radius:13px;background:#fff;color:var(--mlp-ink);font-weight:700;font-size:13px;box-shadow:0 9px 26px rgba(16,24,40,.04)}
.ml-consult-points li:before{content:"✓";position:absolute;left:12px;top:12px;color:var(--mlp-orange);font-weight:900}
.ml-consult-card{padding:30px}
.ml-consult-card h3{margin:0 0 8px;color:var(--mlp-ink);font-size:25px;line-height:1.25}
.ml-consult-card>p{margin:0 0 18px;color:var(--mlp-text);font-size:14px}

/* Hub forms moved earlier in the page need clear separation from adjacent content. */
#contact.smm-section,#contact.sem-section,#contact.dev-section,#contact.elg-section{position:relative;border-top:1px solid rgba(117,96,182,.08);border-bottom:1px solid rgba(232,137,50,.10);background:linear-gradient(180deg,#fffaf7 0%,#fff 100%)}
#contact .smm-split,#contact .sem-split,#contact .dev-split,#contact .elg-split{align-items:start!important}
#contact .smm-panel,#contact .sem-panel,#contact .dev-panel,#contact .elg-panel{padding:30px!important}

/* CTA and footer spacing: avoid visual collisions on long pages. */
main+nav.ml-context-links,.page-main+nav.ml-context-links{margin-top:0}
.ml-lux-footer{margin-top:0}

@media(max-width:900px){
  .ml-consult-wrap{grid-template-columns:1fr;gap:26px}
  .ml-consult-section{padding:60px 0}
}
@media(max-width:680px){
  form[data-ml-form="consultation"]{grid-template-columns:1fr}
  form[data-ml-form="consultation"]>input:not([type="hidden"]),
  form[data-ml-form="consultation"]>select,
  form[data-ml-form="consultation"]>textarea,
  form[data-ml-form="consultation"]>button{grid-column:1/-1!important}
  .ml-form-shell{border-radius:20px!important}
  .ml-consult-card{padding:22px}
  .ml-consult-points{grid-template-columns:1fr}
  .ml-consult-copy h2{font-size:32px}
}

/* Balanced two-column form sections — 2026-09-05
   Keep the copy/CTA column and consultation card on one visual baseline on desktop. */
@media (min-width: 981px){
  .hero .hero-grid{align-items:stretch!important}
  .hero .hero-grid>.ml-form-shell{align-self:stretch!important;height:100%!important}

  #contact .smm-split,
  #contact .sem-split,
  #contact .dev-split,
  #contact .elg-split{align-items:stretch!important}

  #contact .smm-panel.ml-form-shell,
  #contact .sem-panel.ml-form-shell,
  #contact .dev-panel.ml-form-shell,
  #contact .elg-panel.ml-form-shell,
  .ml-consult-wrap>.ml-form-shell{align-self:stretch!important;height:100%!important}

  .ml-consult-wrap{align-items:stretch!important}

  /* On the homepage, let the form card occupy the same full hero height as the copy column. */
  .hero .hero-grid>aside#contact.ml-form-shell{display:flex!important;flex-direction:column!important}
  .hero .hero-grid>aside#contact.ml-form-shell form[data-ml-form="consultation"]{flex:1 1 auto!important}
  .hero .hero-grid>aside#contact.ml-form-shell .ml-form-privacy{margin-top:auto!important;padding-top:10px!important}
}

@media (max-width: 980px){
  .hero .hero-grid>.ml-form-shell,
  #contact .smm-panel.ml-form-shell,
  #contact .sem-panel.ml-form-shell,
  #contact .dev-panel.ml-form-shell,
  #contact .elg-panel.ml-form-shell,
  .ml-consult-wrap>.ml-form-shell{height:auto!important}
}

/* Form normalization: these forms already carry aria-labels/placeholders, so inline labels
   are kept for assistive technology without occupying visual grid cells. */
form[data-ml-form="consultation"]>label{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important
}
form[data-ml-form="consultation"]>p{display:none!important}

/* Homepage: use the extra matched height for the message field rather than leaving dead space. */
@media (min-width:981px){
  .hero .hero-grid>aside#contact.ml-form-shell form[data-ml-form="consultation"]{
    min-height:0!important;
    grid-template-rows:auto auto minmax(150px,1fr) auto!important;
  }
  .hero .hero-grid>aside#contact.ml-form-shell form[data-ml-form="consultation"]>textarea{
    height:100%!important;min-height:150px!important
  }
}

/* Cache-busted final form consistency hook — detailed field styling lives in luxury-ui-system.css. */
.ml-consultation-form{max-width:100%}