/* ==========================================================================
   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); }
/* The strip runs straight on from the section above it. */
.mj-section--band-flush { padding-top: 0; }

.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 section 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-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 date tag). */
.mj-nav__img { height: 22px; width: auto; opacity: .82; transition: opacity .3s; }
.mj-nav a:hover .mj-nav__img { opacity: 1; }

/* 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(92%, 560px);
  height: auto;
  animation: mj-float 7s ease-in-out infinite;
  filter: drop-shadow(0 30px 52px rgba(0, 0, 0, .55));
}
/* The badge sits inside the hero art column, under the floating mark. The
   column already supplies the gap, so this instance drops the pill's own
   bottom margin. */
.mj-hero__badge { position: relative; margin-bottom: 0; }

/* 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, 33%), 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__dot { width: 7px; height: 7px; background: var(--mj-red); transform: rotate(45deg); flex: none; }

/* ------------------------------------------------------------------ *
 * 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: 500vh; 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: #0C1420; color: #fff; overflow: hidden; }
.mj-ctaband__bg {
  position: absolute;
  inset: -10% 0;
  width: 100%; height: 120%;
  object-fit: cover;
  opacity: .85;
}
.mj-ctaband__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(12,20,32,.94) 0%, rgba(12,20,32,.7) 48%, rgba(12,20,32,.4) 100%);
}
.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; }
/* The Date Tags plate. Its "EST. 1948" is embossed at 64% across the file; the
   Marjo tag sits at ~74% of the hero, so the plate is run wider than the hero
   and anchored left to slide the lettering under the tag. Below the point the
   hero stops being two columns the tag is centred and there is nothing to line
   up with, so it reverts to a plain cover. */
.mj-phero__bg--plate { opacity: .78; }
@media (min-width: 900px) {
  /* max-width:none is required: the global img rule caps every image at 100%
     of its container, which would silently clamp this back to a plain cover. */
  .mj-phero__bg--plate { width: 115%; max-width: none; }
}
@media (max-width: 899px) {
  /* Stacked layout. The cover crop magnifies the plate about 3x here, which
     turns the lettering into a single oversized word across the copy, so the
     crop is pushed to the left of the file and the plate reads as bare metal. */
  .mj-phero__bg--plate { object-position: 0% 50%; }
}
.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%);
}
/* Why Us sits on a deeper, bluer ink than the other interior heroes. */
.mj-phero--deepink { background: #090E16; }
.mj-phero--deepink .mj-phero__bg { opacity: .9; }
/* Why Us — the ISO 9001 statement sits on ink directly under the hero, so the
   hero's bottom edge dissolves into it instead of ending on a hard line. */
.mj-phero__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(120px, 18vw, 260px);
  background: linear-gradient(180deg, rgba(15, 20, 25, 0) 0%, rgba(15, 20, 25, .55) 52%, var(--mj-ink) 100%);
  pointer-events: none;
}
.mj-isoband { background: var(--mj-ink); padding-block: clamp(40px, 4.8vw, 76px); }
.mj-isoband__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: clamp(22px, 3.4vw, 60px);
  align-items: start;
}
.mj-isoband__eyebrow { font-size: 14px; margin-bottom: 14px; }
.mj-isoband__heading {
  font-family: var(--mj-font-display);
  margin: 0;
  font-size: clamp(26px, 2.8vw, 44px);
  line-height: 1.1;
  letter-spacing: -.002em;
  font-weight: 700;
  color: #fff;
  max-width: 22ch;
}
.mj-isoband__copy {
  margin: 0;
  font-size: clamp(16.5px, 1.15vw, 18px);
  line-height: 1.68;
  color: rgba(255, 255, 255, .76);
  max-width: 60ch;
  text-wrap: pretty;
}

.mj-phero__scrim--satellite {
  background: linear-gradient(95deg, rgba(9,14,22,.93) 0%, rgba(9,14,22,.7) 44%, rgba(9,14,22,.24) 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); }
/* The 2026-09-02 canvas dropped this from 82px to 56px and gave it a two-line
   min-height: the labels became phrases ("Built to Adapt") rather than the
   couple of words they were, and at the old size they ran out of the card.
   The min-height keeps all three values sitting on the same baseline whether
   they wrap or not. */
.mj-metric__value {
  font-size: clamp(34px, 3.7vw, 56px);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.05;
  margin: 16px 0 14px;
  color: var(--mj-ink);
  min-height: 2.1em;
  display: flex;
  align-items: flex-end;
  text-wrap: balance;
}

.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); }

/* -- Framed logo panel (Why Us) --
   Replaces the photograph beside "What you actually get" with the wordmark on
   a light card. */
.mj-logopanel {
  position: sticky;
  top: 130px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--mj-surface);
  border: 1px solid var(--mj-line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 64px);
}
.mj-logopanel img { width: 100%; max-width: 400px; height: auto; }

/* -- Marjo product gallery -- */
.mj-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(10px, 1.2vw, 16px);
}
.mj-gallery__item { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--mj-placeholder); }
.mj-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--mj-ease); }
.mj-gallery__item:hover img { transform: scale(1.05); }

/* -- Contact page --
   No hero: the form sits straight under the fixed header, so the section
   carries the header offset itself. */
.mj-contact-section { padding: calc(var(--mj-header-h) + clamp(40px, 4.8vw, 76px)) 0 clamp(56px, 7vw, 112px); }
.mj-quote__intro .mj-eyebrow { margin-bottom: 14px; }
.mj-quote__panel .mj-quote__intro p { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * 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. */
/* The canvas footer leads with the tall stacked mark and no blurb. */
.mj-footer__brandcol { display: flex; align-items: center; }
.mj-footer__logo { max-height: clamp(96px, 10vw, 136px); width: auto; max-width: 100%; }
.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 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; } }