/* ==========================================================================
   Infinity Plastic Solutions / Marjo Plastics
   Theme stylesheet — ported from the Claude Design canvas.
   Sections:
     1. Tokens
     2. Reset & base
     3. Layout primitives
     4. Typography primitives
     5. Buttons & links
     6. Header
     7. Hero (home)
     8. Home sections
     9. Interior page heroes
    10. Solutions page
    11. Why Us page
    12. Date Tags page
    13. Quote page + Gravity Forms
    14. Footer
    15. Motion (fx)
    16. Responsive
    17. Editor / WP core blocks
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */
:root {
  --mj-ink:        #0F1419;
  --mj-ink-2:      #3C4650;
  --mj-body:       #4A5560;
  --mj-muted:      #7A838D;
  --mj-faint:      #8A929B;

  --mj-red:        #D81E24;
  --mj-red-deep:   #A8121A;
  --mj-red-dark:   #8E0F16;
  --mj-red-rgb:    216, 30, 36;
  --mj-pink:       #F09A9D;
  --mj-pink-2:     #F58A8E;

  --mj-white:      #fff;
  --mj-surface:    #F6F8FB;
  --mj-surface-2:  #F4F6F9;
  --mj-placeholder:#E9EDF3;

  --mj-line:       rgba(15, 20, 25, .09);
  --mj-line-2:     rgba(15, 20, 25, .11);
  --mj-line-soft:  rgba(15, 20, 25, .08);
  --mj-line-input: rgba(15, 20, 25, .14);

  --mj-font-body:    Inter, Helvetica, Arial, sans-serif;
  --mj-font-display: Rajdhani, 'Helvetica Neue', Helvetica, sans-serif;
  --mj-font-label:   'Barlow Condensed', Helvetica, Arial, sans-serif;

  --mj-shell:      1480px;
  --mj-gutter:     clamp(18px, 3.4vw, 52px);
  --mj-header-h:   116px;          /* utility bar 42 + main bar 74 */

  --mj-ease:       cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------------------ *
 * 2. Reset & base
 * ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--mj-white);
  color: var(--mj-ink);
  font-family: var(--mj-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* height:auto keeps the aspect ratio when max-width clamps a wide logo inside
   a narrow column. Rules that need a fixed height override it below. */
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--mj-red); text-decoration: none; }
a:hover { color: var(--mj-red-dark); }
::selection { background: var(--mj-red); color: #fff; }

/* Anchor offset so in-page jumps clear the fixed header. */
:target { scroll-margin-top: calc(var(--mj-header-h) + 24px); }

.mj-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--mj-ink);
  color: #fff;
  padding: 14px 22px;
  font-family: var(--mj-font-label);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mj-skip-link:focus { left: 12px; top: 12px; color: #fff; }

/* Visible keyboard focus everywhere. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--mj-red);
  outline-offset: 3px;
}

.mj-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ *
 * 3. Layout primitives
 * ------------------------------------------------------------------ */
.mj-shell {
  max-width: var(--mj-shell);
  margin: 0 auto;
  padding-inline: var(--mj-gutter);
  width: 100%;
}

.mj-section { padding-block: clamp(64px, 8vw, 132px); }
.mj-section--tight { padding-block: clamp(48px, 6vw, 96px); }
.mj-section--band  { padding-block: clamp(44px, 5.4vw, 84px); }

.mj-bg-white   { background: var(--mj-white); }
.mj-bg-surface { background: var(--mj-surface); }
.mj-bg-ink     { background: var(--mj-ink); color: #fff; }

.mj-border-top    { border-top: 1px solid var(--mj-line-soft); }
.mj-border-bottom { border-bottom: 1px solid var(--mj-line-soft); }

/* Auto-fit grids used throughout the design. */
.mj-grid { display: grid; }
.mj-grid--2  { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: clamp(30px, 4.6vw, 86px); align-items: start; }
.mj-grid--split { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: clamp(28px, 4vw, 72px); align-items: center; }
.mj-grid--cards { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: clamp(12px, 1.4vw, 20px); }

.mj-sticky { position: sticky; top: 130px; }

/* Hairline grid: a bordered cell matrix that collapses cleanly. */
.mj-cellgrid {
  display: grid;
  border-top: 1px solid var(--mj-line-2);
  border-left: 1px solid var(--mj-line-2);
}
.mj-cellgrid > * {
  border-right: 1px solid var(--mj-line-2);
  border-bottom: 1px solid var(--mj-line-2);
}

/* ------------------------------------------------------------------ *
 * 4. Typography primitives
 * ------------------------------------------------------------------ */
.mj-eyebrow {
  display: block;
  font-family: var(--mj-font-label);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mj-red);
  margin-bottom: 16px;
}
.mj-eyebrow--light { color: var(--mj-pink); font-size: 15px; }
.mj-eyebrow--dim   { color: rgba(255, 255, 255, .72); }

.mj-label {
  font-family: var(--mj-font-label);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mj-muted);
}
.mj-label--sm    { font-size: 13.5px; }
.mj-label--red   { color: var(--mj-red); }
.mj-label--white { color: #fff; }
.mj-label--dim   { color: rgba(255, 255, 255, .45); }

.mj-h1 {
  font-family: var(--mj-font-display);
  margin: 0;
  font-size: clamp(38px, 4.8vw, 78px);
  line-height: 1.04;
  letter-spacing: -.004em;
  font-weight: 700;
  color: #fff;
  text-wrap: balance;
}
.mj-h1--hero { font-size: clamp(40px, 5.3vw, 84px); line-height: 1.02; }

.mj-h2 {
  font-family: var(--mj-font-display);
  margin: 0;
  font-size: clamp(30px, 3.5vw, 58px);
  line-height: 1.06;
  letter-spacing: -.002em;
  font-weight: 700;
  color: var(--mj-ink);
}
.mj-h2--sm   { font-size: clamp(28px, 3.3vw, 54px); }
.mj-h2--band { font-size: clamp(23px, 2.5vw, 40px); line-height: 1.14; max-width: 24ch; }
.mj-h2--light{ color: #fff; }

.mj-h3 {
  font-family: var(--mj-font-display);
  margin: 0;
  font-size: clamp(19px, 1.55vw, 26px);
  font-weight: 700;
  color: var(--mj-ink);
}

.mj-lede {
  margin: 0;
  font-size: clamp(16.5px, 1.2vw, 19px);
  line-height: 1.66;
  color: var(--mj-body);
  text-wrap: pretty;
}
.mj-lede--onink { color: rgba(255, 255, 255, .76); }

.mj-copy {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.64;
  color: var(--mj-body);
  text-wrap: pretty;
}
.mj-copy--sm { font-size: 16px; line-height: 1.62; }

.mj-measure-14 { max-width: 14ch; }
.mj-measure-16 { max-width: 16ch; }
.mj-measure-18 { max-width: 18ch; }
.mj-measure-20 { max-width: 20ch; }
.mj-measure-24 { max-width: 24ch; }
.mj-measure-26 { max-width: 26ch; }
.mj-measure-38 { max-width: 38ch; }
.mj-measure-44 { max-width: 44ch; }
.mj-measure-48 { max-width: 48ch; }
.mj-measure-50 { max-width: 50ch; }
.mj-measure-52 { max-width: 52ch; }
.mj-measure-54 { max-width: 54ch; }
.mj-measure-56 { max-width: 56ch; }
.mj-measure-58 { max-width: 58ch; }
.mj-measure-70 { max-width: 70ch; }

/* Rich-text output from ACF WYSIWYG fields. */
.mj-rich > :first-child { margin-top: 0; }
.mj-rich > :last-child  { margin-bottom: 0; }
.mj-rich p  { margin: 0 0 1em; font-size: 16.5px; line-height: 1.66; color: var(--mj-body); text-wrap: pretty; }
.mj-rich ul, .mj-rich ol { margin: 0 0 1em; padding-left: 1.3em; color: var(--mj-body); font-size: 16.5px; line-height: 1.66; }
.mj-rich li { margin-bottom: .5em; }
.mj-rich strong { color: var(--mj-ink); font-weight: 700; }
.mj-rich h2, .mj-rich h3, .mj-rich h4 { font-family: var(--mj-font-display); color: var(--mj-ink); line-height: 1.12; margin: 1.4em 0 .5em; }
.mj-rich h2 { font-size: clamp(24px, 2.4vw, 36px); }
.mj-rich h3 { font-size: clamp(20px, 1.8vw, 27px); }
.mj-rich h4 { font-size: clamp(18px, 1.5vw, 22px); }
.mj-rich a { border-bottom: 1px solid rgba(var(--mj-red-rgb), .4); }

/* ------------------------------------------------------------------ *
 * 5. Buttons & links
 * ------------------------------------------------------------------ */
.mj-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 30px;
  font-family: var(--mj-font-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 17px;
  font-weight: 600;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  text-align: center;
  transition: background .3s, color .3s, border-color .3s, transform .3s;
}
.mj-btn__arrow { font-size: 16px; line-height: 1; }

.mj-btn--primary { background: var(--mj-red); color: #fff; }
.mj-btn--primary:hover { background: var(--mj-ink); color: #fff; transform: translateY(-2px); }

/* On a dark ground the primary button inverts to white instead of ink. */
.mj-btn--primary-onink:hover { background: #fff; color: var(--mj-ink); transform: translateY(-2px); }

.mj-btn--light { background: #fff; color: var(--mj-ink); }
.mj-btn--light:hover { background: var(--mj-ink); color: #fff; transform: translateY(-2px); }

.mj-btn--ghost { border: 1px solid rgba(255, 255, 255, .34); color: #fff; background: transparent; }
.mj-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .12); color: #fff; }
.mj-btn--ghost-solid:hover { background: #fff; color: var(--mj-ink); border-color: #fff; }

.mj-btn--outline { border: 1px solid rgba(15, 20, 25, .18); color: var(--mj-ink-2); background: transparent; padding: 17px 26px; }
.mj-btn--outline:hover { border-color: var(--mj-ink); color: var(--mj-ink); }

.mj-btn--sm { padding: 16px 26px; font-size: 16.5px; }
.mj-btn--nowrap { flex: none; }

/* Underlined text link with an arrow. */
.mj-textlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mj-font-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
  color: var(--mj-red);
  border-bottom: 1px solid rgba(var(--mj-red-rgb), .4);
  padding-bottom: 4px;
  transition: color .3s, border-color .3s;
}
.mj-textlink:hover { color: var(--mj-ink); border-color: var(--mj-ink); }
.mj-textlink span { font-size: 15px; }

/* Pill badge used above hero headlines. */
.mj-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .08);
  padding: 8px 15px;
  border-radius: 100px;
  margin-bottom: clamp(20px, 2.6vw, 32px);
}
.mj-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mj-pink-2); flex: none; }
.mj-pill__rule { width: 1px; height: 12px; background: rgba(255, 255, 255, .28); flex: none; }
.mj-pill img { height: 17px; width: auto; flex: none; }

.mj-rule-sm { width: 26px; height: 2px; background: var(--mj-red); display: block; }
.mj-rule-md { width: 30px; height: 2px; background: var(--mj-red); display: block; }
.mj-rule-lg { width: 34px; height: 2px; background: var(--mj-red); display: block; }

/* ------------------------------------------------------------------ *
 * 6. Header
 * ------------------------------------------------------------------ */
.mj-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: #fff;
  box-shadow: 0 1px 0 var(--mj-line);
  transition: box-shadow .4s var(--mj-ease);
}
.mj-header.is-stuck { box-shadow: 0 6px 26px rgba(15, 20, 25, .09); }

/* Utility bar collapses on scroll. */
.mj-utilbar {
  background: var(--mj-ink);
  overflow: hidden;
  height: 42px;
  transition: height .45s var(--mj-ease), opacity .35s;
}
.mj-header.is-stuck .mj-utilbar { height: 0; opacity: 0; }

.mj-utilbar__inner {
  max-width: var(--mj-shell);
  margin: 0 auto;
  padding-inline: var(--mj-gutter);
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.mj-utilbar__group { display: flex; align-items: center; gap: 11px; white-space: nowrap; }
.mj-utilbar__group--contact { gap: clamp(14px, 2vw, 30px); }
.mj-utilbar img { height: 22px; width: auto; flex: none; }
.mj-utilbar__rule { width: 1px; height: 13px; background: rgba(255, 255, 255, .22); flex: none; }
.mj-utilbar__tag {
  font-family: var(--mj-font-label);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
}
.mj-utilbar__tag--dim { color: rgba(255, 255, 255, .55); }
.mj-utilbar__link { font-size: 14.5px; font-weight: 500; color: rgba(255, 255, 255, .8); transition: color .3s; }
.mj-utilbar__link:hover { color: #fff; }
.mj-utilbar__phone { display: inline-flex; align-items: center; gap: 8px; }
.mj-utilbar__phone-icon { flex: none; display: block; }

.mj-header__bar {
  max-width: var(--mj-shell);
  margin: 0 auto;
  padding-inline: var(--mj-gutter);
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 44px);
}
.mj-header__brand { flex: none; display: flex; align-items: center; gap: 13px; }
.mj-header__brand img { max-height: clamp(36px, 4vw, 52px); width: auto; max-width: 100%; }
.mj-header__brand-text {
  font-family: var(--mj-font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  color: var(--mj-ink);
  line-height: 1;
}

.mj-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 2.2vw, 34px);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}
.mj-nav a {
  font-size: 17px;
  font-weight: 500;
  color: var(--mj-ink-2);
  padding: 26px 0;
  border-bottom: 2px solid transparent;
  transition: color .3s, border-color .3s;
}
.mj-nav a:hover,
.mj-nav .current-menu-item > a,
.mj-nav .current_page_item > a,
.mj-nav .current-menu-ancestor > a { color: var(--mj-ink); border-color: var(--mj-red); }

/* A menu item whose label is an image (the Marjo wordmark). */
.mj-nav__brand { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.mj-nav__img { height: 22px; width: auto; opacity: .9; transition: opacity .3s; }
.mj-nav a:hover .mj-nav__img { opacity: 1; }
.mj-nav__caption {
  font-family: var(--mj-font-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mj-muted);
  line-height: 1;
}
.mj-nav a:hover .mj-nav__caption { color: var(--mj-ink); }

/* Header CTA. Qualified with `a` so it outranks the `.mj-nav a` rule above —
   otherwise that rule's padding, font-size, weight and colour win and the
   button renders as a full-height slab with dark text.
   The sheen sweep is the one decorative animation kept. */
.mj-nav a.mj-nav__cta {
  flex: none;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--mj-red);
  color: #fff;
  padding: 13px 24px;
  font-family: var(--mj-font-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 18.5px;
  font-weight: 600;
  border-radius: 2px;
  border-bottom: 0;
  transition: background .3s, transform .3s;
}
.mj-nav a.mj-nav__cta:hover { background: var(--mj-ink); color: #fff; transform: translateY(-1px); }
.mj-nav a.mj-nav__cta::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 42%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
  animation: mj-sheen 3.6s ease-in-out infinite;
  pointer-events: none;
}
.mj-nav a.mj-nav__cta span { font-size: 15px; }

/* Mobile toggle — hidden until the nav collapses. */
.mj-navtoggle {
  display: none;
  flex: none;
  /* Above the open drawer, so the hamburger→X stays tappable to close. */
  position: relative;
  z-index: 215;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: transparent;
  border: 1px solid var(--mj-line-input);
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
}
.mj-navtoggle__bars { position: relative; width: 20px; height: 14px; display: block; }
.mj-navtoggle__bars::before,
.mj-navtoggle__bars::after,
.mj-navtoggle__bars span {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--mj-ink);
  transition: transform .3s var(--mj-ease), opacity .2s;
}
.mj-navtoggle__bars::before { top: 0; }
.mj-navtoggle__bars span { top: 6px; }
.mj-navtoggle__bars::after { top: 12px; }
.mj-navtoggle[aria-expanded="true"] .mj-navtoggle__bars::before { transform: translateY(6px) rotate(45deg); }
.mj-navtoggle[aria-expanded="true"] .mj-navtoggle__bars span { opacity: 0; }
.mj-navtoggle[aria-expanded="true"] .mj-navtoggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Spacer that keeps content clear of the fixed header on interior pages. */
.mj-header-spacer { height: var(--mj-header-h); }

/* ------------------------------------------------------------------ *
 * 7. Hero (home)
 * ------------------------------------------------------------------ */
.mj-hero {
  position: relative;
  background: var(--mj-ink);
  overflow: hidden;
  padding: calc(var(--mj-header-h) + clamp(44px, 6vw, 94px)) 0 0;
}
.mj-hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .75;
}
.mj-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg, rgba(15,20,25,.95) 0%, rgba(15,20,25,.8) 40%, rgba(15,20,25,.36) 76%, rgba(15,20,25,.18) 100%);
}
.mj-hero__scrim--top {
  background: linear-gradient(180deg, rgba(15,20,25,.6) 0%, rgba(15,20,25,0) 28%);
}
.mj-hero__inner { position: relative; }
.mj-hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  padding-bottom: clamp(44px, 5.5vw, 84px);
}
.mj-hero__lede { margin: clamp(20px, 2.6vw, 32px) 0 0; max-width: 52ch; color: rgba(255, 255, 255, .78); }
.mj-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3.2vw, 40px); }

.mj-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(30px, 3.6vw, 50px);
  padding-top: clamp(24px, 2.8vw, 34px);
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.mj-hero__stat { display: flex; flex-direction: column; gap: 5px; }
.mj-hero__stat-value { font-size: clamp(24px, 2.2vw, 34px); font-weight: 700; letter-spacing: -.02em; color: #fff; }
.mj-hero__stat-label {
  font-family: var(--mj-font-label);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.mj-hero__stat-divider { width: 1px; background: rgba(255, 255, 255, .2); }

/* Floating logo lockup on the right of the hero. */
.mj-hero__art {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.6vw, 36px);
  min-height: clamp(280px, 32vw, 470px);
}
.mj-hero__glow {
  position: absolute;
  top: 38%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(86%, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--mj-red-rgb), .4) 0%, rgba(var(--mj-red-rgb), .1) 42%, rgba(var(--mj-red-rgb), 0) 68%);
}
.mj-hero__mark {
  position: relative;
  width: min(94%, 620px);
  height: auto;
  animation: mj-float 7s ease-in-out infinite;
  filter: drop-shadow(0 30px 52px rgba(0, 0, 0, .55));
}
.mj-hero__taglist {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(12px, 1.6vw, 22px);
  width: min(94%, 540px);
  padding-top: clamp(14px, 1.8vw, 22px);
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.mj-hero__tag {
  font-family: var(--mj-font-label);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.mj-hero__diamond { width: 5px; height: 5px; background: var(--mj-red); transform: rotate(45deg); flex: none; }

/* Numbered capability strip sitting under the hero. */
.mj-quicklinks { position: relative; border-top: 1px solid rgba(15, 20, 25, .1); background: #fff; }
.mj-quicklinks__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 50%), 1fr)); }
.mj-quicklink {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 22px;
  border-right: 1px solid rgba(15, 20, 25, .1);
  font-size: 16px;
  font-weight: 600;
  color: var(--mj-ink);
  transition: color .3s;
}
.mj-quicklink:last-child { border-right: 0; padding-inline: 22px 0; }
.mj-quicklink:hover { color: var(--mj-red); }
.mj-quicklink__num { font-family: var(--mj-font-label); font-size: 13px; letter-spacing: .14em; color: var(--mj-red); }

/* ------------------------------------------------------------------ *
 * 8. Home sections
 * ------------------------------------------------------------------ */

/* -- Customers grid -- */
.mj-customers { grid-template-columns: repeat(auto-fit, minmax(min(200px, 50%), 1fr)); }
.mj-customer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  min-height: clamp(130px, 13vw, 182px);
  padding: clamp(20px, 2.4vw, 32px);
  background: #fff;
  transition: background .4s;
}
.mj-customer:hover { background: var(--mj-surface); }
.mj-customer__name {
  font-family: var(--mj-font-display);
  font-size: clamp(21px, 1.9vw, 29px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--mj-ink);
}
.mj-customer__kind {
  font-family: var(--mj-font-label);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mj-muted);
}

/* -- Marquee -- */
.mj-marquee {
  background: var(--mj-surface-2);
  color: var(--mj-ink);
  padding: clamp(26px, 3.4vw, 46px) 0;
  overflow: hidden;
  border-top: 1px solid var(--mj-line);
  border-bottom: 1px solid var(--mj-line);
}
.mj-marquee__track {
  display: flex;
  width: max-content;
  animation: mj-marquee 38s linear infinite;
  white-space: nowrap;
}
.mj-marquee__run {
  display: flex;
  align-items: center;
  gap: clamp(26px, 3.6vw, 58px);
  padding-right: clamp(26px, 3.6vw, 58px);
}
.mj-marquee__word {
  font-size: clamp(38px, 5.6vw, 92px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--mj-ink);
}
.mj-marquee__word--outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(15, 20, 25, .3);
}
.mj-marquee__note {
  font-family: var(--mj-font-label);
  font-weight: 600;
  font-size: clamp(13px, 1.2vw, 17px);
  letter-spacing: .28em;
  color: var(--mj-muted);
}
.mj-marquee__dot {
  width: clamp(8px, 1vw, 14px);
  height: clamp(8px, 1vw, 14px);
  background: var(--mj-red);
  flex: none;
  border-radius: 50%;
}

/* -- Pinned horizontal capability scroller --
   The sideways motion is driven by JS. Without JS the tall pinned section
   would strand every card past the second one off-screen, so the no-JS state
   falls back to the same stacked grid used on small screens. The identical
   fallback appears again in the max-width:900px block. */
html:not(.js) .mj-pin { height: auto; padding-block: clamp(56px, 9vw, 96px); }
html:not(.js) .mj-pin__stage { position: static; height: auto; display: block; overflow: visible; }
html:not(.js) .mj-pin__track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(276px, 100%), 1fr));
  transform: none;
  gap: 16px;
}
html:not(.js) .mj-capcard { width: auto; }
html:not(.js) .mj-pin__progress { display: none; }

.mj-pin { position: relative; height: 430vh; background: var(--mj-surface); }
.mj-pin__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mj-pin__head {
  max-width: var(--mj-shell);
  width: 100%;
  margin: 0 auto;
  padding-inline: var(--mj-gutter);
  flex: none;
}
.mj-pin__headrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: clamp(24px, 3.2vw, 46px);
  flex-wrap: wrap;
}
.mj-pin__progress { display: flex; align-items: center; gap: 14px; }
.mj-pin__progress-label {
  font-family: var(--mj-font-label);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mj-muted);
}
.mj-pin__progress-rail { position: relative; width: clamp(90px, 12vw, 170px); height: 2px; background: rgba(15, 20, 25, .14); }
.mj-pin__progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--mj-red); }
.mj-pin__track {
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  padding-inline: var(--mj-gutter);
  will-change: transform;
}

.mj-capcard {
  flex: none;
  width: clamp(276px, 30vw, 452px);
  background: #fff;
  border: 1px solid var(--mj-line);
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 14px rgba(15, 20, 25, .04);
}
.mj-capcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mj-placeholder); }
.mj-capcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--mj-ease); }
.mj-capcard:hover .mj-capcard__media img { transform: scale(1.05); }
.mj-capcard__body { padding: clamp(20px, 2vw, 30px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.mj-capcard__title { font-family: var(--mj-font-display); margin: 0; font-size: clamp(20px, 1.5vw, 26px); font-weight: 700; color: var(--mj-ink); }
.mj-capcard__copy { margin: 0; font-size: 16px; line-height: 1.62; color: var(--mj-body); text-wrap: pretty; }

.mj-numtag {
  position: absolute;
  top: 0; left: 0;
  background: var(--mj-red);
  color: #fff;
  font-family: var(--mj-font-label);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  padding: 8px 14px;
}
.mj-numtag--lg { font-size: 13.5px; padding: 9px 15px; }

/* Terminal "next step" card at the end of the scroller. */
.mj-capcard--cta {
  background: var(--mj-red);
  border: 0;
  justify-content: space-between;
  padding: clamp(24px, 2.4vw, 38px);
}
.mj-capcard--cta .mj-label { color: rgba(255, 255, 255, .78); font-size: 13.5px; }
.mj-capcard__ctabody { display: flex; flex-direction: column; gap: 20px; }
.mj-capcard__ctatitle {
  font-family: var(--mj-font-display);
  margin: 0;
  font-size: clamp(25px, 2.3vw, 38px);
  font-weight: 700;
  letter-spacing: -.002em;
  line-height: 1.08;
  color: #fff;
}
.mj-capcard__ctacopy { margin: 0; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .9); }
.mj-capcard--cta .mj-btn { align-self: flex-start; }

/* -- Numbered "why" list -- */
.mj-whylist { display: flex; flex-direction: column; border-top: 1px solid var(--mj-line-2); }
.mj-whyitem {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 2.2vw, 34px);
  padding: clamp(22px, 2.6vw, 36px) 0;
  border-bottom: 1px solid var(--mj-line-2);
  transition: padding-left .4s;
}
.mj-whyitem:hover { padding-left: 12px; }
.mj-whyitem__num {
  font-family: var(--mj-font-label);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--mj-red);
  padding-top: 6px;
}
.mj-whyitem h3 { margin: 0 0 9px; }

/* Framed image with a caption burned into the bottom edge. */
.mj-figure { position: relative; overflow: hidden; background: var(--mj-placeholder); }
.mj-figure--43 { aspect-ratio: 4 / 3; }
.mj-figure--34 { aspect-ratio: 3 / 4; }
.mj-figure--219 { aspect-ratio: 21 / 9; }
.mj-figure img { width: 100%; height: 112%; object-fit: cover; }
.mj-figure__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,20,25,0) 48%, rgba(15,20,25,.78) 100%);
}
.mj-figure__caption {
  position: absolute;
  left: clamp(16px, 1.8vw, 28px);
  bottom: clamp(16px, 1.8vw, 28px);
  font-family: var(--mj-font-label);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
}

/* -- Full-bleed red CTA band -- */
.mj-ctaband { position: relative; background: var(--mj-red-deep); color: #fff; overflow: hidden; }
.mj-ctaband__bg {
  position: absolute;
  inset: -10% 0;
  width: 100%; height: 120%;
  object-fit: cover;
  opacity: .14;
  filter: grayscale(1);
}
.mj-ctaband__inner {
  position: relative;
  max-width: var(--mj-shell);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 140px) var(--mj-gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.mj-ctaband__title {
  font-family: var(--mj-font-display);
  margin: 0;
  font-size: clamp(32px, 4.2vw, 68px);
  line-height: 1.04;
  letter-spacing: -.004em;
  font-weight: 700;
  color: #fff;
  max-width: 16ch;
}
.mj-ctaband__side { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(20px, 2.4vw, 32px); }
.mj-ctaband__copy { margin: 0; max-width: 44ch; font-size: clamp(16.5px, 1.2vw, 19px); line-height: 1.66; color: rgba(255, 255, 255, .84); text-wrap: pretty; }
.mj-ctaband .mj-btn--light { padding: 19px 32px; font-size: 17.5px; }

/* -- Simple inline CTA strip (interior pages) -- */
.mj-ctastrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
}
.mj-ctastrip .mj-btn { padding: 18px 32px; }

/* -- Process rail -- */
.mj-process {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 28px);
  padding-left: clamp(24px, 2.8vw, 46px);
}
.mj-process__rail { position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: rgba(15, 20, 25, .1); }
.mj-process__rail-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--mj-red); }
.mj-step { background: var(--mj-surface); padding: clamp(24px, 2.8vw, 42px); border: 1px solid var(--mj-line-soft); }
.mj-step__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.mj-step__num { font-size: clamp(28px, 3vw, 48px); font-weight: 700; color: var(--mj-red); letter-spacing: -.03em; line-height: 1; }
.mj-step__title {
  font-family: var(--mj-font-display);
  margin: 0;
  font-size: clamp(21px, 1.9vw, 32px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--mj-ink);
}
.mj-step p { margin: 0; font-size: 17px; line-height: 1.66; color: var(--mj-body); max-width: 54ch; text-wrap: pretty; }

/* -- Industries tiles -- */
.mj-industries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(235px, calc(50% - 11px)), 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
.mj-industry { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--mj-placeholder); }
.mj-industry img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--mj-ease); }
.mj-industry:hover img { transform: scale(1.06); }
.mj-industry__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,20,25,0) 42%, rgba(15,20,25,.88) 100%); }
.mj-industry__foot {
  position: absolute;
  left: clamp(16px, 1.5vw, 24px);
  right: clamp(16px, 1.5vw, 24px);
  bottom: clamp(16px, 1.5vw, 24px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mj-industry__name { color: #fff; font-size: clamp(18px, 1.5vw, 24px); font-weight: 700; }
.mj-industry__arrow { color: #fff; font-size: 18px; }

/* ------------------------------------------------------------------ *
 * 9. Interior page heroes
 * ------------------------------------------------------------------ */
.mj-phero {
  position: relative;
  overflow: hidden;
  background: var(--mj-ink);
  padding: calc(var(--mj-header-h) + clamp(52px, 6.4vw, 104px)) 0 clamp(48px, 6vw, 92px);
  display: flex;
  align-items: flex-end;
}
.mj-phero--split {
  display: block;
  padding: calc(var(--mj-header-h) + clamp(46px, 5.6vw, 88px)) 0 clamp(44px, 5.4vw, 84px);
}
.mj-phero__bg {
  position: absolute;
  inset: -8% 0;
  width: 100%; height: 116%;
  object-fit: cover;
  opacity: .62;
}
.mj-phero__bg--dim { opacity: .5; }
.mj-phero__bg--mid { opacity: .6; }
.mj-phero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgba(15,20,25,.94) 0%, rgba(15,20,25,.76) 46%, rgba(15,20,25,.34) 100%);
}
.mj-phero__scrim--deep {
  background: linear-gradient(95deg, rgba(15,20,25,.95) 0%, rgba(15,20,25,.8) 46%, rgba(15,20,25,.42) 100%);
}
.mj-phero__inner { position: relative; width: 100%; }
.mj-phero__lede { margin: clamp(20px, 2.6vw, 32px) 0 clamp(26px, 3.2vw, 40px); }
.mj-phero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: clamp(26px, 3.6vw, 64px);
  align-items: center;
}
.mj-phero__art { position: relative; display: flex; align-items: center; justify-content: center; }
.mj-phero__glow {
  position: absolute;
  width: min(92%, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--mj-red-rgb), .34) 0%, rgba(var(--mj-red-rgb), .08) 44%, rgba(var(--mj-red-rgb), 0) 68%);
}
.mj-phero__product { position: relative; width: min(96%, 540px); height: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55)); }

/* Stat tiles on a dark ground (quote hero). */
.mj-statgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, calc(50% - 7px)), 1fr));
  gap: 14px;
  max-width: 900px;
}
.mj-stattile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(18px, 2vw, 26px);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
}
.mj-stattile__value { font-family: var(--mj-font-display); font-size: clamp(26px, 2.6vw, 40px); font-weight: 700; line-height: 1; color: #fff; }
.mj-stattile__label {
  font-family: var(--mj-font-label);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

/* ------------------------------------------------------------------ *
 * 10. Solutions page
 * ------------------------------------------------------------------ */
.mj-solutions { display: flex; flex-direction: column; gap: clamp(24px, 3.4vw, 60px); }
.mj-solution {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: clamp(22px, 3.4vw, 64px);
  align-items: center;
  background: var(--mj-surface);
  border: 1px solid var(--mj-line-soft);
  padding: clamp(18px, 2vw, 30px);
}
.mj-solution__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--mj-placeholder); }
.mj-solution__media img { width: 100%; height: 110%; object-fit: cover; }
.mj-solution__body { padding: clamp(8px, 1.2vw, 20px) clamp(8px, 1.6vw, 28px); }
.mj-solution__title {
  font-family: var(--mj-font-display);
  margin: 0 0 16px;
  font-size: clamp(26px, 2.6vw, 42px);
  font-weight: 700;
  letter-spacing: -.002em;
  line-height: 1.08;
  color: var(--mj-ink);
}
.mj-solution__copy { margin: 0 0 22px; font-size: 17px; line-height: 1.66; color: var(--mj-body); max-width: 50ch; text-wrap: pretty; }
.mj-solution__specs {
  margin: 0;
  padding: 22px 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  border-top: 1px solid rgba(15, 20, 25, .1);
}
.mj-solution__specs li { font-size: 16.5px; line-height: 1.62; color: var(--mj-body); }
.mj-solution__specs li::before { content: '—'; color: var(--mj-red); margin-right: 12px; font-weight: 700; }
.mj-solution__specs strong { color: var(--mj-ink); font-weight: 700; }

/* The approved design keeps the photo on the left for every row. To make the
   sides alternate instead, add:
     .mj-solution--flip .mj-solution__media { order: 2; }
   (the template already tags every second row with .mj-solution--flip). */

/* ------------------------------------------------------------------ *
 * 11. Why Us page
 * ------------------------------------------------------------------ */
.mj-metrics { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.mj-metric { padding: clamp(26px, 3.2vw, 48px); }
.mj-metric__value {
  font-size: clamp(42px, 5vw, 82px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  margin: 16px 0 12px;
  color: var(--mj-ink);
}

.mj-person {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(26px, 3vw, 44px);
  background: #fff;
  border: 1px solid rgba(15, 20, 25, .1);
}
.mj-person__name { font-family: var(--mj-font-display); margin: 6px 0 0; font-size: clamp(23px, 2vw, 32px); font-weight: 700; color: var(--mj-ink); }
.mj-person__role {
  font-family: var(--mj-font-label);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mj-muted);
}
.mj-person p { margin: 6px 0 0; }

.mj-deliverables { display: flex; flex-direction: column; border-top: 1px solid var(--mj-line-2); }
.mj-deliverable { padding: clamp(20px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--mj-line-2); }
.mj-deliverable h3 { margin: 0 0 9px; }

/* ------------------------------------------------------------------ *
 * 12. Date Tags page
 * ------------------------------------------------------------------ */
.mj-tagcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.mj-tagcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(24px, 2.8vw, 38px);
  background: #fff;
  border: 1px solid rgba(15, 20, 25, .1);
}
.mj-tagcard h3 { font-family: var(--mj-font-display); margin: 6px 0 0; font-size: clamp(20px, 1.7vw, 27px); font-weight: 700; color: var(--mj-ink); }

.mj-specgrid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); margin-bottom: clamp(34px, 4.4vw, 64px); }
.mj-spec { padding: clamp(24px, 2.8vw, 40px); background: var(--mj-surface); }
.mj-spec__value { margin: 14px 0 0; font-size: 18px; line-height: 1.5; color: var(--mj-ink); font-weight: 600; }
.mj-spec__note { margin: 10px 0 0; font-size: 16px; line-height: 1.62; color: var(--mj-body); }

.mj-tagshead {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: clamp(26px, 4.5vw, 80px);
  align-items: end;
  margin-bottom: clamp(30px, 3.8vw, 54px);
}

/* ------------------------------------------------------------------ *
 * 13. Quote page + Gravity Forms
 * ------------------------------------------------------------------ */
.mj-quote {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(24px, 3vw, 52px);
  align-items: start;
}
.mj-quote__panel {
  background: #fff;
  border: 1px solid rgba(15, 20, 25, .1);
  box-shadow: 0 14px 44px rgba(15, 20, 25, .06);
  padding: clamp(24px, 3vw, 48px);
}
.mj-quote__aside { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 28px); position: sticky; top: 130px; }

.mj-nextcard { background: #fff; border: 1px solid rgba(15, 20, 25, .1); padding: clamp(24px, 2.6vw, 36px); }
.mj-nextcard .mj-eyebrow { margin-bottom: 20px; }
.mj-nextsteps { display: flex; flex-direction: column; gap: 22px; }
.mj-nextstep { display: flex; gap: 18px; align-items: flex-start; }
.mj-nextstep__num { font-family: var(--mj-font-display); font-size: 26px; font-weight: 700; color: var(--mj-red); line-height: 1; flex: none; width: 34px; }
.mj-nextstep h3 { font-family: var(--mj-font-display); margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--mj-ink); }
.mj-nextstep p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--mj-body); }

.mj-contactcard {
  background: var(--mj-ink);
  color: #fff;
  padding: clamp(24px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mj-contactcard .mj-label { color: rgba(255, 255, 255, .5); font-size: 14px; letter-spacing: .2em; }
.mj-contactcard__phone {
  font-family: var(--mj-font-display);
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  transition: color .3s;
}
.mj-contactcard__phone:hover { color: var(--mj-pink); }
.mj-contactcard a:not(.mj-contactcard__phone) { font-size: 16.5px; line-height: 1.5; color: rgba(255, 255, 255, .72); transition: color .3s; }
.mj-contactcard a:not(.mj-contactcard__phone):hover { color: #fff; }
.mj-contactcard__rule { height: 1px; background: rgba(255, 255, 255, .14); margin: 4px 0; }

/* -- FAQ -- */
.mj-faq { border-top: 1px solid rgba(15, 20, 25, .12); max-width: 1000px; }
.mj-faq__item { border-bottom: 1px solid rgba(15, 20, 25, .12); padding: 20px 0; }
.mj-faq__q {
  font-family: var(--mj-font-display);
  font-size: clamp(19px, 1.7vw, 25px);
  font-weight: 700;
  color: var(--mj-ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.mj-faq__q::-webkit-details-marker { display: none; }
.mj-faq__q::after {
  content: '+';
  flex: none;
  font-family: var(--mj-font-body);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: var(--mj-red);
  transition: transform .3s var(--mj-ease);
}
.mj-faq__item[open] .mj-faq__q::after { transform: rotate(45deg); }
.mj-faq__a { margin: 12px 0 0; font-size: 16.5px; line-height: 1.66; color: var(--mj-body); max-width: 70ch; text-wrap: pretty; }

/* -- Gravity Forms --------------------------------------------------
   GF's own theme-framework CSS is switched off for this form (see
   inc/gravity-forms.php), so the rules below supply the layout as well as
   the skin. Nothing here needs !important as a result.
   ------------------------------------------------------------------ */
.mj-gf .gform_wrapper { margin: 0; }
.mj-gf .gform_wrapper form { margin: 0; }
.mj-gf .gform_heading { display: none; }

/* Field grid. GF emits gfield--width-* classes from its layout editor. */
.mj-gf .gform_fields {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 16px;
  row-gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mj-gf .gfield { grid-column: span 12; min-width: 0; margin: 0; padding: 0; }
.mj-gf .gfield--width-quarter       { grid-column: span 3; }
.mj-gf .gfield--width-third         { grid-column: span 4; }
.mj-gf .gfield--width-five-twelfths { grid-column: span 5; }
.mj-gf .gfield--width-half          { grid-column: span 6; }
.mj-gf .gfield--width-seven-twelfths{ grid-column: span 7; }
.mj-gf .gfield--width-two-thirds    { grid-column: span 8; }
.mj-gf .gfield--width-three-quarters{ grid-column: span 9; }
.mj-gf .gfield--width-full          { grid-column: span 12; }

@media (max-width: 620px) {
  .mj-gf .gfield[class*="gfield--width-"] { grid-column: span 12; }
}

/* GF's honeypot and any conditionally hidden field. */
.mj-gf .gform_validation_container,
.mj-gf .gfield_visibility_hidden,
.mj-gf .gform_hidden { display: none !important; }

.mj-gf .gfield_description {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--mj-faint);
}
.mj-gf .gform_page { margin: 0; }
.mj-gf fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.mj-gf .ginput_container { margin: 0; }
.mj-gf .ginput_complex { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.mj-gf .ginput_complex > span { display: flex; flex-direction: column; gap: 8px; }
.mj-gf .ginput_complex label {
  order: -1;
  font-family: var(--mj-font-label);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mj-muted);
}
.mj-gf .gform_ajax_spinner { margin-left: 12px; }

/* Multi-page progress bar → the design's thin red rail. */
.mj-gf .gf_progressbar_wrapper { margin: 0 0 clamp(24px, 2.8vw, 36px); padding: 0; }
.mj-gf .gf_progressbar_title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
  font-family: var(--mj-font-label);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mj-red);
  background: none;
  border: 0;
  padding: 0;
}
.mj-gf .gf_progressbar_title .gf_step_current_page,
.mj-gf .gf_progressbar_title .gf_step_page_count { color: var(--mj-red); }
.mj-gf .gf_progressbar {
  position: relative;
  height: 3px;
  background: rgba(15, 20, 25, .1);
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.mj-gf .gf_progressbar_percentage {
  height: 3px;
  background: var(--mj-red);
  border-radius: 0;
  transition: width .5s var(--mj-ease);
  box-shadow: none;
  /* Gravity Forms' script writes the percentage ("25%") into this element at
     runtime. The step count is already spelled out above the bar, so the
     injected text is collapsed rather than shown. */
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.mj-gf .gf_progressbar_percentage span { display: none; }

/* Page titles inside the form act as the step heading. */
.mj-gf .gform_page_footer { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.mj-gf .gform_footer { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }

.mj-gf .gform_fields { grid-row-gap: 18px; }
.mj-gf .gfield_label,
.mj-gf legend.gfield_label {
  font-family: var(--mj-font-label);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mj-muted);
  margin-bottom: 8px;
  padding: 0;
}
.mj-gf .gfield_required { color: var(--mj-red); margin-left: .4em; font-weight: 400; }
.mj-gf .gfield_required .gfield_required { margin-left: 0; }

.mj-gf input[type="text"],
.mj-gf input[type="email"],
.mj-gf input[type="tel"],
.mj-gf input[type="url"],
.mj-gf input[type="number"],
.mj-gf select,
.mj-gf textarea {
  background: var(--mj-surface);
  border: 1px solid var(--mj-line-input);
  color: var(--mj-ink);
  padding: 14px 15px;
  font-family: var(--mj-font-body);
  font-size: 16.5px;
  outline: none;
  border-radius: 2px;
  width: 100%;
  transition: border-color .3s, background .3s;
}
.mj-gf select { appearance: none; cursor: pointer; background-image: none; }
.mj-gf textarea { resize: vertical; }
.mj-gf input:focus,
.mj-gf select:focus,
.mj-gf textarea:focus { border-color: var(--mj-red); background: #fff; }

/* Step 1's "what do you need" list → the design's selectable cards. */
.mj-gf .mj-gf-cards .gfield_radio { display: flex; flex-direction: column; gap: 10px; }
.mj-gf .mj-gf-cards .gchoice { position: relative; margin: 0; }
.mj-gf .mj-gf-cards input[type="radio"] { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mj-gf .mj-gf-cards label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
  width: 100%;
  padding: 20px 22px;
  background: #fff;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--mj-font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--mj-ink);
  box-shadow: inset 0 0 0 1px rgba(15, 20, 25, .16);
  transition: box-shadow .25s, background .25s;
}
.mj-gf .mj-gf-cards label { font-family: var(--mj-font-display); }
/* Choice text written as "Title|Hint" renders as two lines — see
   mj_gf_choice_hint() in inc/gravity-forms.php. */
.mj-gf .mj-choice-title { font-family: var(--mj-font-display); font-size: 20px; font-weight: 700; color: var(--mj-ink); }
.mj-gf .mj-choice-hint  { font-family: var(--mj-font-body); font-size: 15.5px; font-weight: 400; line-height: 1.55; color: var(--mj-body); }
.mj-gf .mj-gf-cards input[type="radio"]:checked + label,
.mj-gf .mj-gf-cards input[type="radio"]:focus-visible + label {
  box-shadow: inset 0 0 0 2px var(--mj-red);
  background: rgba(var(--mj-red-rgb), .06);
}

/* Chip-style radio rows (timeline, contact preference). */
.mj-gf .mj-gf-chips .gfield_radio { display: flex; flex-wrap: wrap; gap: 10px; }
.mj-gf .mj-gf-chips .gchoice { position: relative; margin: 0; }
.mj-gf .mj-gf-chips input[type="radio"] { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mj-gf .mj-gf-chips label {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  background: #fff;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--mj-font-body);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--mj-ink-2);
  box-shadow: inset 0 0 0 1px rgba(15, 20, 25, .16);
  transition: box-shadow .25s, background .25s, color .25s;
}
.mj-gf .mj-gf-chips input[type="radio"]:checked + label,
.mj-gf .mj-gf-chips input[type="radio"]:focus-visible + label {
  box-shadow: inset 0 0 0 2px var(--mj-red);
  background: rgba(var(--mj-red-rgb), .06);
  color: var(--mj-ink);
}

/* File upload → the dashed drop zone. */
.mj-gf .mj-gf-upload .ginput_container_fileupload,
.mj-gf .mj-gf-upload .gform_drop_area {
  padding: 24px;
  border: 1px dashed rgba(15, 20, 25, .24);
  background: var(--mj-surface);
  border-radius: 0;
  transition: border-color .3s, background .3s;
}
.mj-gf .mj-gf-upload .gform_drop_area:hover { border-color: var(--mj-red); background: rgba(var(--mj-red-rgb), .04); }
.mj-gf .mj-gf-upload .gform_button_select_files {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--mj-red);
  color: #fff;
  border: 0;
  padding: 17px 30px;
  font-family: var(--mj-font-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 17.5px;
  font-weight: 600;
  border-radius: 2px;
  cursor: pointer;
  transition: background .3s, transform .3s;
}
.mj-gf .mj-gf-upload .gform_button_select_files:hover { background: var(--mj-ink); transform: translateY(-2px); }
.mj-gf .mj-gf-upload .gform_drop_instructions { color: var(--mj-faint); font-size: 14.5px; }
.mj-gf .mj-gf-upload .gform_fileupload_rules { color: var(--mj-faint); font-size: 14.5px; }

/* Buttons */
.mj-gf .gform_button,
.mj-gf .gform_next_button,
.mj-gf .gform_previous_button,
.mj-gf input[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 30px;
  font-family: var(--mj-font-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 17.5px;
  font-weight: 600;
  border-radius: 2px;
  border: 0;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s, transform .3s;
}
.mj-gf .gform_button,
.mj-gf .gform_next_button,
.mj-gf input[type="submit"] { background: var(--mj-red); color: #fff; }
.mj-gf .gform_button:hover,
.mj-gf .gform_next_button:hover,
.mj-gf input[type="submit"]:hover { background: var(--mj-ink); color: #fff; transform: translateY(-2px); }

.mj-gf .gform_previous_button {
  background: transparent;
  color: var(--mj-ink-2);
  border: 1px solid rgba(15, 20, 25, .18);
  padding: 17px 26px;
}
.mj-gf .gform_previous_button:hover { border-color: var(--mj-ink); color: var(--mj-ink); background: transparent; transform: none; }

/* Validation + confirmation */
.mj-gf .gform_validation_errors {
  background: rgba(var(--mj-red-rgb), .06);
  border: 1px solid rgba(var(--mj-red-rgb), .35);
  border-radius: 2px;
  box-shadow: none;
  padding: 16px 18px;
  margin: 0 0 24px;
}
.mj-gf .gform_validation_errors h2 {
  font-family: var(--mj-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--mj-red);
  margin: 0;
}
.mj-gf .gfield_validation_message,
.mj-gf .validation_message {
  background: none;
  border: 0;
  border-left: 2px solid var(--mj-red);
  padding: 4px 0 4px 12px;
  margin-top: 8px;
  color: var(--mj-red);
  font-size: 15px;
}
.mj-gf .gfield_error input,
.mj-gf .gfield_error select,
.mj-gf .gfield_error textarea { border-color: var(--mj-red); }
.mj-gf .gform_confirmation_message { font-size: 0; }

/* The design's "Request received" panel, shown after submission. */
.mj-quote__done { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.mj-quote__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(var(--mj-red-rgb), .12);
  color: var(--mj-red);
  font-size: 24px;
  font-weight: 700;
}
.mj-quote__done h2 {
  font-family: var(--mj-font-display);
  margin: 0;
  font-size: clamp(25px, 2.5vw, 38px);
  line-height: 1.1;
  letter-spacing: -.002em;
  font-weight: 700;
  color: var(--mj-ink);
}
.mj-quote__done p { margin: 0; font-size: 16.5px; line-height: 1.62; color: var(--mj-body); max-width: 52ch; text-wrap: pretty; }
.mj-quote__done-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.mj-quote__intro { margin: 0 0 clamp(22px, 2.6vw, 32px); }
.mj-quote__intro h2 {
  font-family: var(--mj-font-display);
  margin: 0 0 10px;
  font-size: clamp(25px, 2.5vw, 38px);
  line-height: 1.1;
  letter-spacing: -.002em;
  font-weight: 700;
  color: var(--mj-ink);
}
.mj-quote__privacy { margin: 16px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--mj-faint); }

/* ------------------------------------------------------------------ *
 * 14. Footer
 * ------------------------------------------------------------------ */
.mj-footer { background: var(--mj-ink); color: #fff; padding: clamp(52px, 6.5vw, 100px) 0 0; }
.mj-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: clamp(24px, 3.2vw, 52px);
  padding-bottom: clamp(40px, 4.6vw, 72px);
}
/* Capped by height on a wide viewport, by the column width on a narrow one —
   max-height rather than height so the ratio survives either constraint. */
.mj-footer__logo { max-height: clamp(40px, 4.4vw, 56px); width: auto; max-width: 100%; margin-bottom: 24px; }
.mj-footer__blurb { margin: 0; max-width: 42ch; font-size: 16.5px; line-height: 1.66; color: rgba(255, 255, 255, .6); text-wrap: pretty; }
.mj-footer__links { display: flex; flex-direction: column; gap: 13px; margin-top: 20px; }
.mj-footer__links--wide { gap: 15px; }
/* Link line-height follows the design: tight for the list columns, 1.5 only
   on the two-line address. */
.mj-footer a { font-size: 16.5px; color: rgba(255, 255, 255, .78); transition: color .3s; }
.mj-footer__address { line-height: 1.5; }
.mj-footer a:hover { color: var(--mj-pink-2); }
.mj-footer__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.mj-footer__cta p { margin: 0; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .6); max-width: 26ch; }
.mj-footer__cta .mj-btn:hover { background: #fff; color: var(--mj-ink); }
.mj-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.mj-footer__copy { font-size: 15px; color: rgba(255, 255, 255, .42); }
.mj-footer__made { display: flex; align-items: center; gap: 11px; white-space: nowrap; }
.mj-footer__made img { height: 22px; width: auto; flex: none; }

/* ------------------------------------------------------------------ *
 * 15. Motion (fx)
 * ------------------------------------------------------------------ */
@keyframes mj-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes mj-float   { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } }
@keyframes mj-sheen   { 0% { transform: translate3d(-180%, 0, 0) skewX(-20deg); } 48%, 100% { transform: translate3d(320%, 0, 0) skewX(-20deg); } }

/* Scroll-reveal.
   Elements are visible by default. The hiding rule is scoped to
   html.mj-reveal, which theme.js only sets once it has confirmed an
   IntersectionObserver is available to take it back off — so content is never
   hidden with no mechanism to reveal it (no JS, old browser, reduced motion,
   a script error before this point all leave the page readable). */
[data-fx-rv] { opacity: 1; transform: none; }

.mj-reveal [data-fx-rv] {
  opacity: 0;
  transform: translate3d(0, var(--mj-rv, 24px), 0);
  transition: opacity .8s var(--mj-ease) var(--mj-rv-delay, 0ms),
              transform 1s var(--mj-ease) var(--mj-rv-delay, 0ms);
  will-change: opacity, transform;
}
.mj-reveal [data-fx-rv].is-in { opacity: 1; transform: translate3d(0, 0, 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mj-reveal [data-fx-rv] { opacity: 1; transform: none; transition: none; }
  .mj-hero__mark { animation: none; }
  .mj-marquee__track { animation: none; }
  .mj-nav a.mj-nav__cta::after { animation: none; }
  [data-fx-px] { transform: none !important; }
}

/* ------------------------------------------------------------------ *
 * 16. Responsive
 * ------------------------------------------------------------------ */

/* Collapse the desktop nav into a drawer. */
@media (max-width: 1100px) {
  .mj-navtoggle { display: inline-flex; }
  .mj-nav {
    position: fixed;
    top: 0; right: 0;
    z-index: 210; /* within .mj-header's stacking context */
    width: min(380px, 86vw);
    height: 100dvh;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 92px 26px 40px;
    box-shadow: -18px 0 44px rgba(15, 20, 25, .14);
    transform: translateX(100%);
    transition: transform .4s var(--mj-ease);
    overflow-y: auto;
    white-space: normal;
  }
  .mj-nav.is-open { transform: translateX(0); }
  .mj-nav a { padding: 18px 0; border-bottom: 1px solid var(--mj-line); font-size: 19px; }
  .mj-nav__brand { flex-direction: row; align-items: center; gap: 10px; }
  .mj-nav__img { height: 24px; }
  .mj-nav a.mj-nav__cta { margin-top: 24px; justify-content: center; padding: 17px 24px; }
  .mj-nav a.mj-nav__cta::after { display: none; }

  .mj-navscrim {
    position: fixed;
    inset: 0;
    /* Below .mj-header (z-index 200). The header creates its own stacking
       context, so the drawer's z-index cannot beat a scrim stacked above the
       header — the scrim has to go under it instead. */
    z-index: 190;
    background: rgba(15, 20, 25, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s;
  }
  .mj-navscrim.is-open { opacity: 1; pointer-events: auto; }
  body.mj-nav-open { overflow: hidden; }
}

@media (max-width: 900px) {
  /* The pinned horizontal scroller doesn't work on touch — fall back to a
     normal vertical stack so all five capabilities stay reachable. */
  .mj-pin { height: auto; background: var(--mj-surface); padding-block: clamp(56px, 9vw, 96px); }
  .mj-pin__stage { position: static; height: auto; display: block; overflow: visible; }
  .mj-pin__track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(276px, 100%), 1fr));
    transform: none !important;
    gap: 16px;
  }
  .mj-capcard { width: auto; }
  .mj-pin__progress { display: none; }

  .mj-hero__stat-divider { display: none; }
  .mj-sticky, .mj-quote__aside { position: static; }
  .mj-solution--flip .mj-solution__body { order: 0; }
  .mj-solution--flip .mj-solution__media { order: 0; }
}

@media (max-width: 720px) {
  :root { --mj-header-h: 74px; }
  /* The utility bar's contact links duplicate the footer on small screens. */
  .mj-utilbar { display: none; }
  .mj-quicklink { border-right: 0; border-bottom: 1px solid rgba(15, 20, 25, .1); }
  .mj-quicklink:last-child { border-bottom: 0; padding-left: 22px; }
  .mj-ctastrip { align-items: flex-start; }
  .mj-marquee__word { font-size: clamp(34px, 11vw, 52px); }
}

/* ------------------------------------------------------------------ *
 * 17. Editor / WP core blocks (for the blog + generic pages)
 * ------------------------------------------------------------------ */
.mj-page { padding-block: clamp(48px, 6vw, 96px); }
.mj-page__header { margin-bottom: clamp(28px, 3.4vw, 48px); }
.mj-page__title { font-family: var(--mj-font-display); margin: 0; font-size: clamp(32px, 4vw, 62px); line-height: 1.06; font-weight: 700; color: var(--mj-ink); }
.mj-entry { max-width: 74ch; }
.mj-entry img { height: auto; margin-block: 1.5em; }
.mj-entry .alignleft  { float: left;  margin: .4em 1.6em 1em 0; }
.mj-entry .alignright { float: right; margin: .4em 0 1em 1.6em; }
.mj-entry .aligncenter { margin-inline: auto; }
.mj-entry blockquote {
  margin: 1.6em 0;
  padding-left: 24px;
  border-left: 2px solid var(--mj-red);
  font-size: 19px;
  line-height: 1.6;
  color: var(--mj-ink);
}
.mj-entry code, .mj-entry pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.mj-entry pre { background: var(--mj-surface); padding: 18px; overflow-x: auto; border: 1px solid var(--mj-line-soft); }

.mj-postlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.mj-postcard { background: #fff; border: 1px solid var(--mj-line); padding: clamp(22px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 12px; }
.mj-postcard__title { font-family: var(--mj-font-display); margin: 0; font-size: clamp(21px, 1.8vw, 28px); font-weight: 700; }
.mj-postcard__title a { color: var(--mj-ink); }
.mj-postcard__title a:hover { color: var(--mj-red); }
.mj-postcard__meta { font-family: var(--mj-font-label); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--mj-muted); }

.mj-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(30px, 4vw, 56px); }
.mj-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding-inline: 12px;
  border: 1px solid var(--mj-line-input);
  color: var(--mj-ink-2);
  font-weight: 600;
  transition: border-color .3s, color .3s, background .3s;
}
.mj-pagination .page-numbers:hover { border-color: var(--mj-ink); color: var(--mj-ink); }
.mj-pagination .page-numbers.current { background: var(--mj-red); border-color: var(--mj-red); color: #fff; }

/* WP admin bar offset for the fixed header. */
.admin-bar .mj-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .mj-header { top: 46px; } }