/* =====================================================================
   Mineralocity Aggregates — PRODUCERS Landing Page Design System
   Class-based styles. Brand tokens in :root.
   ===================================================================== */

:root {
  --ml-navy:        #0a222f;
  --ml-navy-2:      #16313e;
  --ml-gold:        #e49a25;
  --ml-gold-dark:   #cf8a1d;
  --ml-heading:     #c7c8c6;
  --ml-text:        #b9c2c7;
  --ml-text-soft:   #9aa6ad;
  --ml-text-faint:  #aab4b8;
  --ml-text-quote:  #cdd5da;
  --ml-label:       #8b969d;
  --ml-line:        rgba(255, 255, 255, .30);
  --ml-font-sans:  'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ml-font-serif: 'Rokkitt', Georgia, serif;
  --ml-maxw:  1240px;
  --ml-pad-x: clamp(32px, 5.5vw, 104px);
}

.ml-page * { margin: 0; padding: 0; box-sizing: border-box; }
.ml-page {
  font-family: var(--ml-font-sans);
  -webkit-font-smoothing: antialiased;
  color: var(--ml-navy);
  background: var(--ml-navy);
  overflow-x: hidden;
}
.ml-page img { display: block; max-width: 100%; }
.ml-page a { text-decoration: none; }
.ml-page ::selection { background: var(--ml-gold); color: var(--ml-navy); }
.ml-serif { font-family: var(--ml-font-serif); }

/* ---------------------------------------------------------------------
   Accessibility — skip link + keyboard focus ring
   The Colza theme + Gravity Forms stylesheets load AFTER this file (via
   wp_head) and strip outlines globally (core.min.css: a/input:focus{
   outline:none}; theme.min.css: button:focus{outline:0}). Re-establish a
   visible focus indicator, scoped under .ml-page (plus :focus-visible, a
   pseudo-class) so it out-specifies the theme's outline-killers without
   !important.
   --------------------------------------------------------------------- */
.ml-skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  background: var(--ml-gold);
  color: var(--ml-navy);
  font-family: var(--ml-font-sans);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 12px 20px;
  border-radius: 8px;
  transform: translateY(-150%);
  transition: transform .15s ease;
}
.ml-skip-link:focus { transform: translateY(0); }

.ml-page a:focus-visible,
.ml-page button:focus-visible,
.ml-page input:focus-visible,
.ml-page .ml-btn-pill:focus-visible {
  outline: 3px solid var(--ml-gold);
  outline-offset: 3px;
}
/* Gold-on-gold would be invisible: the skip link gets a navy ring instead. */
.ml-page .ml-skip-link:focus,
.ml-page .ml-skip-link:focus-visible { outline: 3px solid var(--ml-navy); outline-offset: 2px; }

/* Visually-hidden, screen-reader-only text (e.g. "opens in a new tab"). */
.ml-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- Buttons ---- */
.ml-btn-pill {
  display: inline-block;
  text-align: center;
  width: 360px;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 18px 24px;
  border-radius: 30px;
  cursor: pointer;
  transition: filter .2s ease, background .2s ease;
}
.ml-btn-pill:hover { filter: brightness(1.06); }
.ml-btn-pill--gold    { background: var(--ml-gold); color: var(--ml-navy); border: none; }
.ml-btn-pill--outline { background: var(--ml-navy); color: #fff; border: 1.5px solid rgba(255,255,255,.55); padding: 16.5px 24px; }

.ml-btn-gold {
  border: none;
  cursor: pointer;
  background: var(--ml-gold);
  color: var(--ml-navy);
  font-family: var(--ml-font-sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 16px 30px;
  border-radius: 40px;
  align-self: flex-start;
  margin-top: 10px;
  transition: background .2s ease;
}
.ml-btn-gold:hover { background: var(--ml-gold-dark); }

/* ---- Pill input ----
   Scoped under .ml-page (specificity 0,2,0) so these win over the Colza theme's
   global  input[type="text"] { border-radius: 0; background: <light>; height: 50px }
   rule (specificity 0,1,1) that loads later via wp_head(). height:auto undoes the
   theme's fixed 50px so the pill is sized by its own padding. */
.ml-page .ml-input-pill {
  width: 100%;
  height: auto;
  padding: 17px 24px;
  border: 1.5px solid rgba(255, 255, 255, .28);
  border-radius: 40px;
  background: var(--ml-navy);
  font-family: var(--ml-font-sans);
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  outline: none;
}
.ml-page .ml-input-pill::placeholder { color: var(--ml-text-soft); }
.ml-page .ml-input-pill:focus { border-color: var(--ml-gold); }

/* ---- Navbar ---- */
/* The bar background spans full width; its inner content uses the same centered
   max-width column as every section below, so the logo aligns with the hero and
   other section content (both edges) at every screen size. */
.ml-nav { background: var(--ml-navy); padding: 0 var(--ml-pad-x); }
.ml-nav__inner {
  max-width: var(--ml-maxw);
  margin: 0 auto;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ml-nav__logo-link { display: inline-flex; line-height: 0; }
.ml-nav__logo { height: 62px; width: auto; }

/* ---- Hero ---- */
.ml-hero {
  position: relative;
  overflow: hidden;
  background: var(--ml-navy-2) url('../img/producers-hero-bg.jpg') center center / cover no-repeat;
  min-height: clamp(560px, 74vh, 780px);
}
.ml-hero__inner {
  position: relative;
  z-index: 4;
  width: min(var(--ml-maxw), calc(100% - 2 * var(--ml-pad-x)));
  margin: 0 auto;
  display: flex;
  align-items: center;
  min-height: clamp(500px, 62vh, 720px);
}
.ml-hero__text { padding: 48px 0 64px; }
.ml-hero__title {
  color: var(--ml-heading);
  font-size: clamp(34px, 6vw, 86px);  /* 34px mobile floor (matches suppliers) so it isn't small on phones */
  line-height: 0.8;
  font-weight: 500;
  letter-spacing: -.5px;
  max-width: 760px;
}
.ml-hero__title .gold { color: var(--ml-gold); }
.ml-hero__desc {
  margin-top: 30px;
  color: var(--ml-text-faint);
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 470px;
  font-weight: 400;
}
.ml-hero__actions {
  margin-top: 38px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
/* Selector intentionally `.ml-page img.ml-hero__laptop` (0,2,1) so the size cap
   beats the `.ml-page img { max-width:100% }` reset (also 0,2,1, but earlier in
   source). With only `.ml-hero__laptop` (0,1,0) the reset wins and `width:63%`
   runs UNCAPPED — on wide monitors the laptop balloons past 720px and climbs above
   the hero/navbar. */
.ml-page img.ml-hero__laptop {
  position: absolute;
  right: -1%;
  bottom: 0;
  width: 63%;
  max-width: 1000px;  /* match the suppliers hero laptop size */
  z-index: 2;
}

/* ---- Platform tour video ---- */
.ml-video { background: var(--ml-navy); padding: clamp(52px, 7vw, 92px) var(--ml-pad-x); }
.ml-video__grid {
  max-width: var(--ml-maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: stretch;
  border-radius: 6px;
  overflow: hidden;
}
.ml-video__player { position: relative; background: #000; min-height: 300px; padding: 18px; }
.ml-video__player video {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
  border-radius: 4px;
}
.ml-video__panel {
  background: var(--ml-navy-2);
  padding: clamp(30px, 3.5vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.ml-video__title {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -.3px;
  color: var(--ml-gold);
}
.ml-video__text { font-size: 15.5px; line-height: 1.65; color: var(--ml-text); max-width: 340px; }
.ml-video__play {
  margin-top: 6px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ml-gold);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ml-video__play span {
  width: 0; height: 0;
  border-left: 18px solid var(--ml-navy);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 5px;
}

/* ---- Trusted by ---- */
.ml-trusted { background: var(--ml-navy); padding: 8px 0 64px; }
.ml-trusted__label {
  text-align: center;
  color: var(--ml-label);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 42px;
}
.ml-trusted__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 34px 60px;
}
.ml-trusted__logos img { width: auto; opacity: .9; filter: brightness(0) invert(1); }
/* Per-logo heights (moved off inline styles per the no-inline-styles rule). */
.ml-page .ml-logo-knife  { height: 36px; }
.ml-page .ml-logo-esri   { height: 62px; }
.ml-page .ml-logo-lannon { height: 86px; }
.ml-page .ml-logo-altius { height: 58px; }
.ml-page .ml-logo-nssga  { height: 48px; }

/* ---- Features / Own the data ---- */
.ml-features { background: var(--ml-navy); padding: clamp(48px, 6vw, 92px) var(--ml-pad-x); }
.ml-features__inner { max-width: var(--ml-maxw); margin: 0 auto; }
.ml-section-title {
  text-align: center;
  font-size: clamp(32px, 3.3vw, 42px);  /* 32px mobile floor so it isn't small on phones */
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -.5px;
  color: var(--ml-gold);
  max-width: none;
  margin: 0 auto;
  white-space: nowrap;  /* keep the heading on one line (desktop); restored to wrap <=880px */
  text-wrap: balance;   /* balances the wrapped lines on small screens */
}
.ml-data-card {
  margin-top: clamp(38px, 5vw, 60px);
  border: 1px solid var(--ml-line);
  border-radius: 22px;
  padding: clamp(30px, 4vw, 56px);
}
.ml-data-card__title {
  text-align: center;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -.3px;
  color: #fff;
  margin-bottom: 12px;
}
.ml-data-card__lead {
  text-align: center;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--ml-text);
  max-width: 1180px;
  margin: 0 auto clamp(26px, 3.5vw, 42px);
}
.ml-data-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(22px, 3vw, 40px); }
.ml-data-item__title {
  font-size: 19px;
  line-height: 1.22;
  font-weight: 600;
  color: var(--ml-gold);
  margin-bottom: 12px;
}
.ml-data-item__text { font-size: 14.5px; line-height: 1.6; color: var(--ml-text-soft); }

.ml-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 30px);
  margin-top: clamp(20px, 2.5vw, 30px);
}
.ml-feature-card { border: 1px solid var(--ml-line); border-radius: 18px; padding: clamp(28px, 3vw, 40px); }
.ml-feature-card__icon { display: block; margin-bottom: 24px; }
.ml-feature-card__title {
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -.3px;
  color: #fff;
  margin-bottom: 14px;
}
.ml-feature-card__text { font-size: 15px; line-height: 1.62; color: var(--ml-text-soft); }

/* ---- Testimonial ---- */
.ml-quote { background: var(--ml-navy); color: #fff; padding: clamp(56px, 7vw, 90px) var(--ml-pad-x) clamp(40px, 5vw, 64px); }
.ml-quote__inner { max-width: var(--ml-maxw); margin: 0 auto; text-align: center; }
.ml-quote__rule-row { display: flex; align-items: flex-end; gap: 24px; margin-bottom: clamp(34px, 4vw, 52px); }
.ml-quote__rule { flex: 1; height: 1px; background: var(--ml-gold); opacity: .8; }
.ml-quote__mark { display: block; flex: none; }
.ml-quote__text {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.6;
  font-weight: 400;
  color: var(--ml-text-quote);
  margin: 0 auto;
  text-align: justify;
  text-align-last: center;
}
/* It's a semantic <blockquote>, so Colza's blockquote styling (loaded after via
   wp_head) leaks in: a black left border, padding, margin, italic, and a light
   box background. Neutralize it. Scoped high enough (0,3,1) to beat the theme's
   blockquote:not(.wp-block-quote):not(.has-text-color) rule (0,2,1). */
.ml-page .ml-quote__inner blockquote.ml-quote__text {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  font-style: normal;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.6;
  font-weight: 400;
  color: var(--ml-text-quote);
}
/* <cite> for the attribution: reset its default italic + make it block-level. */
.ml-quote__cite { display: block; font-style: normal; margin-top: 22px; font-size: clamp(14px, 1.4vw, 16px); font-weight: 800; color: #fff; }
.ml-quote__rule--bottom { margin-top: clamp(34px, 4vw, 52px); height: 1px; background: var(--ml-gold); opacity: .8; }

/* ---- Bottom (PASS form + footer share ONE continuous topo background) ---- */
.ml-bottom {
  background: var(--ml-navy) url('../img/producers-hero-bg.jpg') center top / cover no-repeat;
}

/* ---- PASS report (form + iPad) ---- */
.ml-pass {
  padding: clamp(20px, 3vw, 40px) var(--ml-pad-x) clamp(56px, 7vw, 96px);
  background: linear-gradient(to bottom, var(--ml-navy) 0%, var(--ml-navy) 20%, rgba(10, 34, 47, 0) 46%);
}
.ml-pass__card {
  max-width: 1140px;
  margin: 0 auto;
  background: var(--ml-navy);
  border: 1px solid var(--ml-line);
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  align-items: stretch;
}
.ml-pass__body { padding: clamp(34px, 4vw, 56px); }
.ml-pass__eyebrow {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.ml-pass__title {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.0;
  font-weight: 500;
  letter-spacing: -.3px;
  color: var(--ml-gold);
  margin-bottom: 18px;
}
.ml-pass__text { font-size: 15.5px; line-height: 1.62; color: var(--ml-text); margin-bottom: 18px; max-width: 430px; }
.ml-pass__text--last { margin-bottom: 30px; }
.ml-form { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
/* Extra breathing room above the submit button (fallback form); the GF render
   matches this via .gform_footer margin. 12px + the 14px flex gap = 26px. */
.ml-form .ml-btn-gold { margin-top: 12px; }
.ml-pass__media { position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(34px, 4vw, 56px); }
/* Frame the iPad/map screenshot: rounded corners + subtle border + soft shadow.
   object-fit:contain + width/height auto keep the WHOLE image visible (never cropped). */
.ml-pass__media img {
  width: auto;
  max-width: 100%;
  max-height: clamp(400px, 48vw, 600px);
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  border: 10px solid #000;
  /* white ring sits just outside the black border, then the soft drop shadow */
  box-shadow: 0 0 0 1px #fff, 0 22px 48px rgba(0, 0, 0, .45);
}

/* ---- Footer (transparent; sits on the shared .ml-bottom topo background) ---- */
.ml-footer {
  color: #fff;
  padding: clamp(60px, 7vw, 96px) var(--ml-pad-x) clamp(80px, 9vw, 130px);
}
.ml-footer__inner { max-width: var(--ml-maxw); margin: 0 auto; }
.ml-footer__logo { height: 58px; width: auto; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .ml-page img.ml-hero__laptop { position: static; width: 100%; max-width: 540px; margin: 18px auto 0; }  /* match base specificity so this stacked-layout cap wins */
  .ml-hero__text { padding-bottom: 36px; }
  .ml-hero, .ml-hero__inner { min-height: 0; }
  .ml-hero__inner { flex-direction: column; align-items: stretch; }
}
@media (max-width: 880px) {
  .ml-video__grid,
  .ml-pass__card { grid-template-columns: 1fr; }
  .ml-data-grid { grid-template-columns: 1fr 1fr; }
  .ml-section-title { white-space: normal; }  /* let the heading wrap on tablets/phones */
}
@media (max-width: 620px) {
  .ml-feature-grid,
  .ml-data-grid { grid-template-columns: 1fr; }
  .ml-trusted__logos { gap: 24px 32px; }
  .ml-btn-pill { width: 100%; white-space: normal; letter-spacing: 1px; padding-left: 18px; padding-right: 18px; }
  /* Justify stretches inter-word spaces into big gaps on narrow columns; center the quote on phones. */
  .ml-quote__text { text-align: center; }
}

/* ---------------------------------------------------------------------
   Motion — scroll reveal + hover micro-interactions
   Reveal is gated on BOTH html.ml-anim (a class a tiny inline script adds only
   when JS runs) AND prefers-reduced-motion: no-preference, so no-JS and
   reduced-motion visitors always see fully-visible, unanimated content.
   --------------------------------------------------------------------- */
@keyframes ml-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  html.ml-anim .ml-hero__text,
  html.ml-anim .ml-hero__laptop,
  html.ml-anim .ml-video__grid,
  html.ml-anim .ml-trusted__label,
  html.ml-anim .ml-trusted__logos,
  html.ml-anim .ml-section-title,
  html.ml-anim .ml-data-card,
  html.ml-anim .ml-feature-card,
  html.ml-anim .ml-quote__inner,
  html.ml-anim .ml-pass__card,
  html.ml-anim .ml-footer__logo {
    opacity: 0;
  }

  html.ml-anim .ml-hero__text.is-visible,
  html.ml-anim .ml-hero__laptop.is-visible,
  html.ml-anim .ml-video__grid.is-visible,
  html.ml-anim .ml-trusted__label.is-visible,
  html.ml-anim .ml-trusted__logos.is-visible,
  html.ml-anim .ml-section-title.is-visible,
  html.ml-anim .ml-data-card.is-visible,
  html.ml-anim .ml-feature-card.is-visible,
  html.ml-anim .ml-quote__inner.is-visible,
  html.ml-anim .ml-pass__card.is-visible,
  html.ml-anim .ml-footer__logo.is-visible {
    animation: ml-rise .7s cubic-bezier(.22, .61, .36, 1) both;
  }

  /* gentle stagger across the feature-card row */
  html.ml-anim .ml-feature-grid .ml-feature-card:nth-child(2).is-visible { animation-delay: .08s; }
  html.ml-anim .ml-feature-grid .ml-feature-card:nth-child(3).is-visible { animation-delay: .16s; }
}

/* Hover micro-interactions. Reveal targets animate via transform, so their
   hover effects avoid transform (border/shadow only) to prevent clashes. */
.ml-btn-pill { transition: filter .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.ml-btn-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
/* Gold pills hover exactly like the gold "Download Sample Report" form button:
   darken to gold-dark + lift -2px + the shared shadow (inherited from
   .ml-btn-pill:hover). filter:none cancels the brightness bump so the darken reads
   cleanly. */
.ml-btn-pill--gold:hover { background: var(--ml-gold-dark); filter: none; }
/* The gold pill CTA is an <a> tag, so the parent theme's red a:hover/a:focus
   color (specificity 0,1,1) outranks the button's base color (0,1,0) and turns
   the label red on hover. Lock the text color here, scoped under .ml-page so it
   wins. */
.ml-page .ml-btn-pill--gold:hover,
.ml-page .ml-btn-pill--gold:focus { color: var(--ml-navy); }
/* Same root cause for the outline CTA (white text on a navy button): the theme's
   a:hover/a:focus/a:active force color:inherit (a dark color), making the label
   vanish on click/focus. Lock its fill + text across every state. */
.ml-page .ml-btn-pill--outline,
.ml-page .ml-btn-pill--outline:hover,
.ml-page .ml-btn-pill--outline:focus,
.ml-page .ml-btn-pill--outline:active { background: var(--ml-navy); color: #fff; }

.ml-btn-gold { transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.ml-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }

.ml-feature-card { transition: border-color .25s ease, box-shadow .25s ease; }
.ml-feature-card:hover { border-color: rgba(255, 255, 255, .55); box-shadow: 0 16px 38px rgba(0, 0, 0, .28); }

.ml-video__play { transition: transform .2s ease, background .2s ease; }
.ml-video__play:hover { transform: scale(1.06); background: var(--ml-gold-dark); }

.ml-trusted__logos img { transition: opacity .25s ease, transform .25s ease; }
.ml-trusted__logos img:hover { opacity: 1; transform: translateY(-2px); }

.ml-page .ml-input-pill { transition: border-color .2s ease, box-shadow .2s ease; }
.ml-page .ml-input-pill:focus { box-shadow: 0 0 0 3px rgba(228, 154, 37, .18); }

@media (prefers-reduced-motion: reduce) {
  .ml-btn-pill:hover,
  .ml-btn-gold:hover,
  .ml-video__play:hover,
  .ml-trusted__logos img:hover { transform: none; }
  .ml-skip-link { transition: none; }
}

/* ---------------------------------------------------------------------
   Gravity Forms skin (PASS report form, id 1)
   Makes the Gravity Forms output match the navy pill design. Scoped under
   .ml-page so it wins over both the Colza global input[type=...] rule and the
   GF theme. Labels are visually hidden (kept for screen readers); placeholders
   carry the field names, matching the original design.
   --------------------------------------------------------------------- */
.ml-page .gform_wrapper { margin: 0; }
.ml-page .gform_wrapper .gform_fields { display: flex; flex-direction: column; gap: 14px; grid-template-columns: none; }
.ml-page .gform_wrapper .gfield { margin: 0; padding: 0; }

/* Visually hide labels (screen-reader accessible); required asterisk hidden with them. */
.ml-page .gform_wrapper .gfield_label {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Inputs as navy pills */
.ml-page .gform_wrapper input[type="text"],
.ml-page .gform_wrapper input[type="email"] {
  width: 100%;
  height: auto;
  padding: 17px 24px;
  border: 1.5px solid rgba(255, 255, 255, .28);
  border-radius: 40px;
  background: var(--ml-navy);
  font-family: var(--ml-font-sans);
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ml-page .gform_wrapper input[type="text"]::placeholder,
.ml-page .gform_wrapper input[type="email"]::placeholder { color: var(--ml-text-soft); }
.ml-page .gform_wrapper input[type="text"]:focus,
.ml-page .gform_wrapper input[type="email"]:focus { border-color: var(--ml-gold); box-shadow: 0 0 0 3px rgba(228, 154, 37, .18); }

/* Submit button = gold pill.
   Gravity Forms' orbital theme styles the submit via a (0,6,1) selector
   (.gform-theme--framework.gform_wrapper input[type=submit].button.gform_button)
   driven by CSS variables, which outranks a normal class. !important is the
   targeted way to win here without an unmaintainable specificity arms race. */
.ml-page .gform_wrapper .gform_footer { margin: 26px 0 0; padding: 0; }
.ml-page .gform_wrapper .gform_button {
  border: none !important;
  cursor: pointer;
  width: auto !important;
  min-width: 0 !important;
  background: var(--ml-gold) !important;
  color: var(--ml-navy) !important;
  font-family: var(--ml-font-sans) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  padding: 16px 30px !important;
  border-radius: 40px !important;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ml-page .gform_wrapper .gform_button:hover { background: var(--ml-gold-dark) !important; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
/* GF's framework theme strips the submit button's outline on focus (high
   specificity, CSS-var driven), so keyboard users get NO visible focus on
   "Download Sample Report" and it looks skipped in the tab order. Re-assert the
   gold focus ring with !important so it wins — matches every other button.
   The 3px offset places the ring on the navy card, so it reads clearly. */
.ml-page .gform_wrapper .gform_button:focus-visible {
  outline: 3px solid var(--ml-gold) !important;
  outline-offset: 3px !important;
}

/* Validation errors — visible on the navy background */
.ml-page .gform_wrapper .gfield_error input[type="text"],
.ml-page .gform_wrapper .gfield_error input[type="email"] { border-color: #e26b6b; }
.ml-page .gform_wrapper .validation_message {
  color: #f1a9a9;
  font-size: 13px;
  font-weight: 600;
  margin-top: 6px;
  padding-left: 24px;
  background: none;
  border: none;
}
.ml-page .gform_wrapper .gform_validation_errors {
  background: rgba(226, 107, 107, .12);
  border: 1px solid rgba(226, 107, 107, .5);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: none;
}
.ml-page .gform_wrapper .gform_validation_errors h2,
.ml-page .gform_wrapper .gform_submission_error { color: #f1a9a9; font-size: 14px; }
.ml-page .gform_wrapper .gfield_required { color: var(--ml-gold); }

/* AJAX confirmation message */
.ml-page .gform_confirmation_message { color: var(--ml-text); font-size: 15px; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .ml-page .gform_wrapper .gform_button:hover { transform: none; }
}

/* ---------------------------------------------------------------------
   Hide the global mobile-menu plugin on these self-contained landing pages.
   It injects a fixed bar + slide-out via wp_footer() on every page and pads
   <body> by the bar height (84px) to clear it. These pages render their own
   nav, so hide its markup and remove the body padding. Scoped to the landing
   body class so other pages keep their mobile menu.
   --------------------------------------------------------------------- */
.page-template-mineralocity-landing .mob-menu-header-holder,
.page-template-mineralocity-landing .mobmenur-container,
.page-template-mineralocity-landing .mobmenu-overlay,
.page-template-mineralocity-landing .mobmenu-panel,
.page-template-mineralocity-landing .mobmenu-content,
.page-template-mineralocity-landing .mob-menu-logo-holder,
.page-template-mineralocity-landing .mob-menu-right-bg-holder,
.page-template-mineralocity-landing .menu-mobile-menu-container { display: none !important; }
body.page-template-mineralocity-landing { padding-top: 0 !important; }