:root {
  --mfx-ink: #111111;
  --mfx-paper: #f4efe2;
  --mfx-paper-2: #e5f0d2;
  --mfx-night: #080808;
  --mfx-coral: #ff3f3a;
  --mfx-lime: #c7ff37;
  --mfx-teal: #00c2b3;
  --mfx-gold: #ffbd18;
  --mfx-blue: #284bff;
  --mfx-pink: #ff4fd8;
  --mfx-muted: #57534b;
  --mfx-border: rgba(17, 17, 17, 0.18);
  --mfx-shadow: 0 32px 90px rgba(0, 0, 0, 0.28);
  --mfx-radius: 8px;
  --mfx-max: 1320px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.mfx-theme {
  margin: 0;
  color: var(--mfx-ink);
  background: var(--mfx-paper);
  font-family: Lexend, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

body.mfx-theme::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
  background: radial-gradient(circle at 18% 22%, rgba(255, 79, 216, 0.18), transparent 24%), radial-gradient(circle at 80% 12%, rgba(199, 255, 55, 0.2), transparent 20%), radial-gradient(circle at 78% 82%, rgba(0, 194, 179, 0.18), transparent 26%);
}

body.mfx-lightbox-open,
body.mfx-nav-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

.screen-reader-text,
.mfx-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.mfx-skip-link:focus {
  z-index: 1000;
  top: 1rem;
  left: 1rem;
  width: auto;
  height: auto;
  padding: 0.7rem 1rem;
  clip: auto;
  color: #fff;
  background: var(--mfx-night);
}

.mfx-container {
  width: min(calc(100% - 36px), var(--mfx-max));
  margin-inline: auto;
}

.mfx-site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  background: rgba(244, 239, 226, 0.82);
  border-bottom: 2px solid var(--mfx-ink);
  backdrop-filter: blur(16px);
}

.mfx-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(calc(100% - 32px), 1380px);
  min-height: 76px;
  margin-inline: auto;
  gap: 1rem;
}

.mfx-brand img {
  width: min(210px, 48vw);
  max-height: 54px;
  object-fit: contain;
}

.mfx-menu,
.mfx-footer-menu {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.mfx-menu a,
.mfx-footer-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  color: var(--mfx-ink);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
}

.mfx-menu a:hover,
.mfx-menu a:focus-visible {
  color: var(--mfx-coral);
}

.mfx-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--mfx-ink);
  background: var(--mfx-lime);
  border-radius: var(--mfx-radius);
}

.mfx-nav-toggle span:not(.screen-reader-text) {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: var(--mfx-ink);
}

.mfx-hero {
  position: relative;
  min-height: calc(100vh - 76px);
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 7.5rem) 0 clamp(4.5rem, 8vw, 7rem);
  color: var(--mfx-paper);
  background: linear-gradient(135deg, rgba(255, 63, 58, 0.34), transparent 34%), linear-gradient(315deg, rgba(40, 75, 255, 0.30), transparent 40%), var(--mfx-night);
}

.mfx-hero-bg {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image: linear-gradient(90deg, rgba(244, 239, 226, 0.13) 1px, transparent 1px), linear-gradient(rgba(244, 239, 226, 0.13) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: rotate(-4deg) scale(1.12);
}

.mfx-hero::after {
  content: "MEDIA FX";
  position: absolute;
  right: -0.05em;
  bottom: -0.35em;
  color: rgba(244, 239, 226, 0.055);
  font-family: "Space Grotesk", Lexend, sans-serif;
  font-size: clamp(7rem, 22vw, 21rem);
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.mfx-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.mfx-kicker {
  margin: 0 0 0.9rem;
  color: var(--mfx-blue);
  font-family: "Space Grotesk", Lexend, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.mfx-hero .mfx-kicker {
  color: var(--mfx-lime);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: "Space Grotesk", Lexend, sans-serif;
  line-height: 0.95;
  letter-spacing: 0;
}

h1 {
  max-width: 980px;
  font-size: clamp(4.1rem, 10vw, 10.7rem);
}

h1 span {
  color: var(--mfx-lime);
}

h2 {
  font-size: clamp(2.35rem, 5.8vw, 6rem);
}

.mfx-hero-lede {
  max-width: 760px;
  margin: 1.5rem 0 0;
  color: rgba(244, 239, 226, 0.82);
  font-size: clamp(1.08rem, 2vw, 1.45rem);
}

.mfx-hero-actions,
.mfx-hero-card-caption,
.mfx-footer-contact,
.mfx-footer-bottom {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.mfx-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0.88rem 1.18rem;
  border: 3px solid var(--mfx-ink);
  border-radius: var(--mfx-radius);
  box-shadow: 7px 7px 0 var(--mfx-ink);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.mfx-hero-actions {
  margin-top: 2rem;
}

.mfx-button:hover,
.mfx-button:focus-visible {
  transform: translate(4px, 4px);
  box-shadow: 3px 3px 0 var(--mfx-ink);
}

.mfx-button-primary {
  background: var(--mfx-coral);
  color: #fff;
}

.mfx-button-secondary {
  background: var(--mfx-lime);
  color: var(--mfx-ink);
}

.mfx-hero-card {
  position: relative;
  min-height: 650px;
}

.mfx-hero-card img,
.mfx-hero-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 3px solid var(--mfx-paper);
  border-radius: var(--mfx-radius);
  box-shadow: var(--mfx-shadow);
}

.mfx-hero-photo {
  position: absolute;
  z-index: 2;
  inset: 4% 9% 15% 5%;
  transform: rotate(2deg);
}

.mfx-hero-photo img {
  aspect-ratio: 4 / 5;
}

.mfx-hero-mini {
  position: absolute;
  z-index: 3;
  overflow: hidden;
}

.mfx-hero-mini-one {
  right: 0;
  bottom: 4%;
  width: 48%;
  aspect-ratio: 1.34 / 1;
  transform: rotate(-5deg);
}

.mfx-hero-mini-two {
  top: 0;
  right: 3%;
  width: 43%;
  aspect-ratio: 1 / 0.78;
  transform: rotate(5deg);
}

.mfx-hero-card-caption {
  position: absolute;
  z-index: 4;
  left: 0;
  bottom: 0;
  align-items: center;
  justify-content: space-between;
  width: min(440px, 84%);
  padding: 1rem;
  border: 3px solid var(--mfx-ink);
  border-radius: var(--mfx-radius);
  color: var(--mfx-ink);
  background: var(--mfx-gold);
  box-shadow: 8px 8px 0 var(--mfx-pink);
  font-size: 0.92rem;
  transform: rotate(-2deg);
}

.mfx-hero-card-caption span {
  color: var(--mfx-blue);
  font-weight: 800;
}

.mfx-hero-card-caption strong {
  max-width: 260px;
}

.mfx-section {
  padding: clamp(5rem, 10vw, 9rem) 0;
}

.mfx-proof {
  background: linear-gradient(120deg, rgba(255, 189, 24, 0.35), transparent 44%), #fff;
}

.mfx-proof-grid,
.mfx-split,
.mfx-book-grid,
.mfx-contact-grid,
.mfx-storieze-grid,
.mfx-freelance-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
}

.mfx-proof-cards {
  display: grid;
  gap: 1rem;
}

.mfx-proof-cards article,
.mfx-contact-card,
.mfx-ai-panel,
.mfx-testimonial-grid blockquote,
.mfx-post-card {
  border: 3px solid var(--mfx-ink);
  border-radius: var(--mfx-radius);
  background: var(--mfx-paper);
  box-shadow: 9px 9px 0 var(--mfx-ink);
}

.mfx-proof-cards article {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1rem;
  padding: 1.25rem;
  transition: transform 180ms ease, background 180ms ease;
}

.mfx-proof-cards article:nth-child(2) {
  background: var(--mfx-lime);
}

.mfx-proof-cards article:nth-child(3) {
  background: #fff;
}

.mfx-proof-cards article:hover {
  transform: translate(-5px, -5px);
}

.mfx-proof-cards strong {
  color: var(--mfx-coral);
  font-family: "Space Grotesk", Lexend, sans-serif;
  font-size: 1.45rem;
}

.mfx-ai {
  color: #fff;
  background: linear-gradient(135deg, rgba(40, 75, 255, 0.45), transparent 46%), var(--mfx-night);
}

.mfx-ai .mfx-kicker,
.mfx-ai p {
  color: var(--mfx-paper);
}

.mfx-ai p {
  max-width: 680px;
}

.mfx-check-list {
  padding: 0;
  margin: 1.4rem 0 0;
  list-style: none;
}

.mfx-check-list li {
  display: flex;
  gap: 0.75rem;
  margin: 0.55rem 0;
  font-weight: 700;
}

.mfx-check-list li::before {
  content: "+";
  color: var(--mfx-lime);
  font-weight: 900;
}

.mfx-ai-panel {
  display: grid;
  place-items: center;
  row-gap: 0.45rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--mfx-ink);
  background: linear-gradient(135deg, var(--mfx-lime), var(--mfx-gold) 48%, var(--mfx-coral));
  border: 3px solid var(--mfx-paper);
  border-radius: var(--mfx-radius);
  text-align: center;
  transform: rotate(-2.5deg);
}

.mfx-ai-panel span,
.mfx-ai-panel strong {
  display: block;
  font-family: "Space Grotesk", Lexend, sans-serif;
  font-size: clamp(1.7rem, 4vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
}

/* the + and = are connectives, not terms - drop them back so the three
   phrases carry the weight and the stack closes up */
.mfx-ai-panel span:nth-of-type(2),
.mfx-ai-panel span:nth-of-type(4) {
  font-size: clamp(1rem, 2vw, 1.85rem);
  line-height: 1;
  opacity: 0.66;
}

.mfx-ai-panel strong {
  color: #fff;
  text-shadow: 3px 3px 0 var(--mfx-ink);
}

.mfx-freelance {
  background: repeating-linear-gradient(-8deg, rgba(17, 17, 17, 0.08) 0 2px, transparent 2px 18px), var(--mfx-gold);
  border-block: 3px solid var(--mfx-ink);
}

.mfx-freelance-grid {
  grid-template-columns: 1.2fr 1fr auto;
}

.mfx-section-heading {
  max-width: 1080px;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.mfx-gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.9rem, 2vw, 1.35rem);
}

.mfx-gallery-tile {
  position: relative;
  grid-column: span 4;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 3px solid var(--mfx-ink);
  border-radius: var(--mfx-radius);
  background: #fff;
  box-shadow: 10px 10px 0 var(--mfx-ink);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.mfx-gallery-tile:first-child {
  grid-column: span 7;
  grid-row: span 2;
}

.mfx-gallery-tile:nth-child(2),
.mfx-gallery-tile:nth-child(3),
.mfx-gallery-tile:nth-child(4) {
  grid-column: span 5;
}

.mfx-gallery-tile:nth-child(5),
.mfx-gallery-tile:nth-child(6) {
  grid-column: span 6;
}

.mfx-gallery-tile img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1.08 / 1;
  object-fit: cover;
  filter: saturate(1.16) contrast(1.04);
  transition: transform 280ms ease, filter 280ms ease;
}

.mfx-gallery-tile:first-child img {
  aspect-ratio: 1.24 / 1;
}

.mfx-gallery-tile span {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  left: 0.8rem;
  padding: 0.7rem 0.8rem;
  border: 2px solid var(--mfx-ink);
  border-radius: var(--mfx-radius);
  color: var(--mfx-ink);
  background: rgba(244, 239, 226, 0.92);
  font-family: "Space Grotesk", Lexend, sans-serif;
  font-size: clamp(0.95rem, 1.6vw, 1.4rem);
  font-weight: 800;
  line-height: 1.05;
  text-align: left;
}

.mfx-gallery-tile:hover img,
.mfx-gallery-tile:focus-visible img {
  filter: saturate(1.35) contrast(1.12);
  transform: scale(1.07);
}

.mfx-gallery-tile:hover,
.mfx-gallery-tile:focus-visible {
  box-shadow: 4px 4px 0 var(--mfx-ink);
  transform: translate(6px, 6px);
}

.mfx-gallery-open {
  margin-top: 2.5rem;
}

.mfx-eco {
  background: linear-gradient(90deg, rgba(0, 194, 179, 0.25), transparent 42%), var(--mfx-paper-2);
}

.mfx-polaroid-stack {
  position: relative;
  min-height: 620px;
}

.mfx-polaroid-stack img {
  position: absolute;
  width: 72%;
  border: 16px solid #fff;
  border-bottom-width: 58px;
  border-radius: 4px;
  box-shadow: var(--mfx-shadow);
  object-fit: cover;
}

.mfx-polaroid-stack img:first-child {
  top: 0;
  right: 0;
  aspect-ratio: 1.35 / 1;
  transform: rotate(4deg);
}

.mfx-polaroid-stack img:last-child {
  left: 0;
  bottom: 0;
  aspect-ratio: 0.9 / 1;
  transform: rotate(-5deg);
}

.mfx-storieze {
  background: linear-gradient(180deg, #fff 0%, #fff 58%, var(--mfx-lime) 58%, var(--mfx-lime) 100%);
}

.mfx-storieze-media {
  position: relative;
}

.mfx-storieze-media > img:not(.mfx-storieze-logo) {
  border: 3px solid var(--mfx-ink);
  border-radius: var(--mfx-radius);
  box-shadow: 16px 16px 0 var(--mfx-blue);
}

.mfx-storieze-logo {
  position: absolute;
  z-index: 2;
  top: -52px;
  right: -20px;
  width: 210px;
  border: 3px solid var(--mfx-ink);
  border-radius: 50%;
  background: var(--mfx-night);
  box-shadow: 6px 6px 0 var(--mfx-coral);
}

.mfx-book {
  color: #fff;
  background: linear-gradient(90deg, rgba(255, 63, 58, 0.24), transparent), repeating-linear-gradient(90deg, rgba(244, 239, 226, 0.08) 0 1px, transparent 1px 36px), var(--mfx-night);
}

.mfx-book .mfx-kicker {
  color: var(--mfx-gold);
}

.mfx-book-cover {
  display: flex;
  justify-content: center;
}

/* the frame carries the tilt so the badge rides along with the cover */
.mfx-book-cover-frame {
  position: relative;
  display: inline-block;
  transform: rotate(-2deg);
}

.mfx-book-cover img {
  max-height: 720px;
  margin-inline: auto;
  border: 3px solid var(--mfx-paper);
  border-radius: var(--mfx-radius);
  box-shadow: 18px 18px 0 var(--mfx-coral);
}

.mfx-book-badge {
  position: absolute;
  top: clamp(-58px, -3.7vw, -28px);
  right: clamp(-66px, -4.3vw, -32px);
  z-index: 2;
  display: grid;
  place-content: center;
  width: clamp(96px, 10vw, 138px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid var(--mfx-paper);
  background: var(--mfx-gold);
  box-shadow: 7px 7px 0 var(--mfx-coral);
  color: var(--mfx-night);
  font-family: "Space Grotesk", Lexend, sans-serif;
  font-size: clamp(0.78rem, 1.15vw, 1.02rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(9deg);
}

.mfx-book-badge > span {
  display: block;
}

@media (max-width: 720px) {
  /* the cover's -2deg tilt widens its box by ~11px a side; leave room for that
     plus the seal so the section can't push the page sideways */
  .mfx-book-cover-frame {
    max-width: calc(100% - 22px);
  }

  .mfx-book-badge {
    top: -12px;
    right: -6px;
    width: 78px;
    font-size: 0.68rem;
    border-width: 2px;
    box-shadow: 5px 5px 0 var(--mfx-coral);
  }
}

.mfx-testimonials {
  background: linear-gradient(135deg, rgba(255, 79, 216, 0.18), transparent 38%), var(--mfx-paper);
}

.mfx-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.mfx-testimonial-slider {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(232, 223, 207, 0.16);
  border-radius: var(--mfx-radius);
  background: rgba(232, 223, 207, 0.05);
}

.mfx-testimonial-track {
  display: flex;
  transition: transform 340ms ease;
}

.mfx-testimonial-slide {
  flex: 0 0 100%;
  min-width: 100%;
  margin: 0;
  padding: clamp(2rem, 6vw, 4.5rem);
}

.mfx-testimonial-slide p {
  max-width: 980px;
  margin: 0;
  color: var(--mfx-paper);
  font-family: "Space Grotesk", Lexend, sans-serif;
  font-size: clamp(1.7rem, 4.5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.05;
}

.mfx-testimonial-slide cite {
  display: block;
  margin-top: 1.5rem;
  color: var(--mfx-muted);
  font-style: normal;
  font-weight: 800;
}

.mfx-slider-controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.8rem;
  padding: 0 1rem 1rem;
}

.mfx-slider-controls button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(232, 223, 207, 0.3);
  border-radius: 50%;
  color: var(--mfx-paper);
  background: rgba(232, 223, 207, 0.08);
  font-size: 1.25rem;
  cursor: pointer;
}

.mfx-slider-controls button:hover,
.mfx-slider-controls button:focus-visible {
  color: var(--mfx-night);
  background: var(--mfx-gold);
}

.mfx-testimonial-grid blockquote {
  margin: 0;
  padding: 1.25rem;
}

.mfx-testimonial-grid p {
  margin-top: 0;
  font-weight: 700;
}

.mfx-testimonial-grid cite {
  color: var(--mfx-muted);
  font-style: normal;
}

.mfx-contact {
  color: #fff;
  background: linear-gradient(135deg, rgba(199, 255, 55, 0.20), transparent 45%), var(--mfx-blue);
}

.mfx-contact .mfx-kicker {
  color: var(--mfx-lime);
}

.mfx-contact-card {
  display: grid;
  gap: 0.9rem;
  padding: 1.5rem;
  color: var(--mfx-ink);
  background: #fff;
}

.mfx-contact-card a {
  font-family: "Space Grotesk", Lexend, sans-serif;
  font-size: clamp(1.35rem, 3.6vw, 2.8rem);
  font-weight: 800;
  line-height: 1.05;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.mfx-site-footer {
  padding: 3rem 0 1.2rem;
  color: var(--mfx-paper);
  background: var(--mfx-night);
}

.mfx-footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  gap: 2rem;
  width: min(calc(100% - 36px), var(--mfx-max));
  margin-inline: auto;
}

.mfx-footer-logo {
  width: 120px;
  margin-bottom: 1rem;
}

/* The logo PNG carries ~23px of transparent padding on its left edge (13px at the
   rendered 240px width). Every block of footer copy takes the same inset so the
   whole footer lines up on the logo mark rather than on the image's invisible edge. */
.mfx-footer-grid > div:first-child p,
.mfx-footer-menu,
.mfx-footer-contact,
.mfx-footer-bottom span {
  padding-left: 13px;
}

.mfx-footer-menu {
  align-items: flex-start;
  flex-direction: column;
  gap: 0.15rem;
}

.mfx-footer-menu a,
.mfx-footer-contact a {
  color: var(--mfx-paper);
  text-decoration: none;
}

.mfx-footer-contact {
  flex-direction: column;
  align-items: flex-start;
}

.mfx-footer-bottom {
  justify-content: space-between;
  width: min(calc(100% - 36px), var(--mfx-max));
  padding-top: 1.2rem;
  margin: 2rem auto 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(244, 239, 226, 0.72);
  font-size: 0.86rem;
}

.mfx-lightbox[hidden] {
  display: none;
}

#mfx-gallery-data {
  display: none !important;
}

.mfx-lightbox {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(8, 8, 8, 0.9);
}

.mfx-lightbox-dialog {
  position: relative;
  width: min(1240px, 100%);
}

.mfx-lightbox figure {
  margin: 0;
  padding: 0.8rem;
  border: 3px solid #fff;
  border-radius: var(--mfx-radius);
  background: var(--mfx-paper);
}

.mfx-lightbox img {
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  background: #111;
}

.mfx-lightbox figcaption {
  padding: 0.75rem 0.2rem 0;
  color: var(--mfx-ink);
  font-weight: 800;
}

.mfx-lightbox button {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 3px solid var(--mfx-ink);
  border-radius: var(--mfx-radius);
  background: var(--mfx-lime);
  color: var(--mfx-ink);
  font-size: 1.4rem;
  font-weight: 900;
  cursor: pointer;
}

.mfx-lightbox-close {
  top: -18px;
  right: -12px;
}

.mfx-lightbox-prev,
.mfx-lightbox-next {
  top: 50%;
  transform: translateY(-50%);
}

.mfx-lightbox-prev {
  left: -18px;
}

.mfx-lightbox-next {
  right: -18px;
}

.mfx-page {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.mfx-page-article {
  width: min(calc(100% - 36px), 980px);
  margin-inline: auto;
}

.mfx-page-header {
  margin-bottom: 2rem;
}

.mfx-page-content > * {
  max-width: 760px;
}

.mfx-page-content > .alignwide {
  max-width: 1100px;
}

.mfx-page-content > .alignfull {
  max-width: none;
  margin-inline: calc(50% - 50vw);
}

.mfx-post-list {
  display: grid;
  gap: 1rem;
}

.mfx-post-card {
  padding: 1.25rem;
}

.mfx-post-card h2 {
  font-size: 1.8rem;
}

.mfx-page-content .gallery,
.mfx-page-content .wp-block-gallery,
.elementor-widget-gallery .elementor-gallery__container,
.elementor-image-gallery .gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.mfx-page-content .gallery-item,
.mfx-page-content .wp-block-image,
.elementor-widget-gallery .e-gallery-item,
.elementor-image-gallery .gallery-item {
  overflow: hidden;
  border: 3px solid var(--mfx-ink);
  border-radius: var(--mfx-radius);
  background: #fff;
  box-shadow: 9px 9px 0 var(--mfx-ink);
}

.mfx-page-content .gallery img,
.mfx-page-content .wp-block-gallery img,
.elementor-widget-gallery .e-gallery-image,
.elementor-image-gallery .gallery img {
  width: 100%;
  aspect-ratio: 1.2 / 1;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 980px) {
  .mfx-nav-toggle {
    display: block;
  }

  .mfx-primary-nav {
    position: fixed;
    inset: 76px 0 auto;
    display: none;
    padding: 1rem 18px 1.4rem;
    background: var(--mfx-paper);
    border-bottom: 3px solid var(--mfx-ink);
  }

  .mfx-primary-nav.is-open {
    display: block;
  }

  .mfx-menu {
    align-items: stretch;
    flex-direction: column;
  }

  .mfx-menu a {
    min-height: 46px;
    border-bottom: 1px solid var(--mfx-border);
  }

  .mfx-hero-grid,
  .mfx-proof-grid,
  .mfx-split,
  .mfx-book-grid,
  .mfx-contact-grid,
  .mfx-storieze-grid,
  .mfx-freelance-grid,
  .mfx-footer-grid {
    grid-template-columns: 1fr;
  }

  .mfx-freelance-grid {
    align-items: start;
  }

  .mfx-gallery-grid,
  .mfx-testimonial-grid,
  .mfx-page-content .gallery,
  .mfx-page-content .wp-block-gallery,
  .elementor-widget-gallery .elementor-gallery__container,
  .elementor-image-gallery .gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .mfx-gallery-tile,
  .mfx-gallery-tile:first-child,
  .mfx-gallery-tile:nth-child(2),
  .mfx-gallery-tile:nth-child(3),
  .mfx-gallery-tile:nth-child(4),
  .mfx-gallery-tile:nth-child(5),
  .mfx-gallery-tile:nth-child(6) {
    grid-column: auto;
  }

  .mfx-hero-card {
    max-width: 560px;
    min-height: 650px;
    margin-inline: auto;
  }

  .mfx-storieze-logo {
    right: 12px;
  }
}

@media (max-width: 640px) {
  .mfx-header-inner {
    min-height: 66px;
  }

  .mfx-primary-nav {
    inset-block-start: 66px;
  }

  .mfx-hero {
    min-height: auto;
  }

  h1 {
    font-size: clamp(3.2rem, 20vw, 4.8rem);
  }

  h2 {
    font-size: clamp(2rem, 13vw, 3rem);
  }

  .mfx-proof-cards article {
    grid-template-columns: 1fr;
  }

  .mfx-gallery-grid,
  .mfx-testimonial-grid,
  .mfx-page-content .gallery,
  .mfx-page-content .wp-block-gallery,
  .elementor-widget-gallery .elementor-gallery__container,
  .elementor-image-gallery .gallery {
    grid-template-columns: 1fr;
  }

  .mfx-gallery-tile img,
  .mfx-gallery-tile:first-child img {
    aspect-ratio: 1 / 1.05;
  }

  .mfx-gallery-tile:hover,
  .mfx-gallery-tile:focus-visible {
    transform: none;
  }

  .mfx-polaroid-stack {
    min-height: 450px;
  }

  .mfx-polaroid-stack img {
    width: 82%;
  }

  .mfx-hero-card {
    min-height: 540px;
  }

  .mfx-hero-photo {
    inset: 5% 6% 22% 0;
  }

  .mfx-hero-mini-one {
    width: 55%;
  }

  .mfx-hero-mini-two {
    width: 48%;
  }

  .mfx-lightbox-prev {
    left: 2px;
  }

  .mfx-lightbox-next {
    right: 2px;
  }
}

/* Dark cinematic direction. */
:root {
  --mfx-ink: #0b0d0c;
  --mfx-paper: #e8dfcf;
  --mfx-paper-2: #d7d0bf;
  --mfx-night: #080b0a;
  --mfx-coral: #9b4f3f;
  --mfx-lime: #9ea37b;
  --mfx-teal: #315f58;
  --mfx-gold: #b7975b;
  --mfx-blue: #667887;
  --mfx-pink: #6f4c5f;
  --mfx-muted: #a49b8c;
  --mfx-border: rgba(232, 223, 207, 0.18);
  --mfx-shadow: 0 34px 110px rgba(0, 0, 0, 0.55);
}

body.mfx-theme {
  color: var(--mfx-paper);
  background: #080b0a;
}

body.mfx-theme::before {
  opacity: 1;
  background:
    radial-gradient(circle at 20% 12%, rgba(183, 151, 91, 0.16), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(49, 95, 88, 0.28), transparent 28%),
    radial-gradient(circle at 60% 88%, rgba(111, 76, 95, 0.14), transparent 28%),
    linear-gradient(180deg, #080b0a 0%, #111411 52%, #080b0a 100%);
}

.mfx-site-header {
  background: rgba(8, 11, 10, 0.84);
  border-bottom-color: rgba(232, 223, 207, 0.16);
}

.mfx-brand {
  padding: 0.35rem 0.5rem;
  background: rgba(232, 223, 207, 0.88);
  border-radius: var(--mfx-radius);
}

.mfx-menu a {
  color: rgba(232, 223, 207, 0.8);
}

.mfx-menu a:hover,
.mfx-menu a:focus-visible {
  color: var(--mfx-gold);
}

.mfx-nav-toggle {
  border-color: rgba(232, 223, 207, 0.28);
  background: rgba(232, 223, 207, 0.08);
}

.mfx-nav-toggle span:not(.screen-reader-text) {
  background: var(--mfx-paper);
}

.mfx-hero {
  color: var(--mfx-paper);
  background:
    linear-gradient(120deg, rgba(0, 0, 0, 0.96), rgba(9, 24, 20, 0.86) 48%, rgba(35, 24, 22, 0.92)),
    url("../img/business/business-03.webp") center / cover;
}

.mfx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 11, 10, 0.96), rgba(8, 11, 10, 0.62) 50%, rgba(8, 11, 10, 0.78));
}

.mfx-hero-bg {
  opacity: 0.18;
  mix-blend-mode: screen;
  background-image:
    linear-gradient(90deg, rgba(232, 223, 207, 0.09) 1px, transparent 1px),
    linear-gradient(rgba(232, 223, 207, 0.08) 1px, transparent 1px);
}

.mfx-hero::after {
  content: "RON JACKLIN";
  color: rgba(232, 223, 207, 0.045);
}

.mfx-hero .mfx-kicker,
h1 span,
.mfx-contact .mfx-kicker {
  color: var(--mfx-gold);
}

.mfx-kicker {
  color: var(--mfx-gold);
}

.mfx-hero-lede {
  color: rgba(232, 223, 207, 0.76);
}

.mfx-button {
  border-color: rgba(232, 223, 207, 0.42);
  box-shadow: none;
}

.mfx-button:hover,
.mfx-button:focus-visible {
  box-shadow: none;
  transform: translateY(-2px);
}

.mfx-button-primary {
  color: var(--mfx-night);
  background: var(--mfx-gold);
}

.mfx-button-secondary {
  color: var(--mfx-paper);
  background: rgba(232, 223, 207, 0.08);
}

.mfx-hero-card img,
.mfx-hero-mini img {
  border-color: rgba(232, 223, 207, 0.36);
  filter: saturate(0.82) contrast(1.08) brightness(0.84);
}

.mfx-hero-card-caption {
  color: var(--mfx-paper);
  background: rgba(10, 13, 12, 0.9);
  border-color: rgba(232, 223, 207, 0.24);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.52);
}

.mfx-hero-card-caption span {
  color: var(--mfx-gold);
}

.mfx-proof,
.mfx-storieze,
.mfx-testimonials {
  color: var(--mfx-paper);
  background:
    linear-gradient(135deg, rgba(183, 151, 91, 0.12), transparent 38%),
    #101411;
}

.mfx-proof h2,
.mfx-storieze h2,
.mfx-testimonials h2 {
  color: var(--mfx-paper);
}

.mfx-proof-cards article,
.mfx-testimonial-grid blockquote,
.mfx-contact-card,
.mfx-post-card {
  color: var(--mfx-paper);
  background: rgba(232, 223, 207, 0.06);
  border-color: rgba(232, 223, 207, 0.18);
  box-shadow: none;
}

.mfx-proof-cards article:nth-child(2),
.mfx-proof-cards article:nth-child(3) {
  background: rgba(232, 223, 207, 0.08);
}

.mfx-proof-cards strong {
  color: var(--mfx-gold);
}

.mfx-ai {
  background:
    linear-gradient(135deg, rgba(49, 95, 88, 0.34), transparent 48%),
    #070808;
}

.mfx-check-list li::before {
  color: var(--mfx-gold);
}

.mfx-ai-panel {
  color: var(--mfx-paper);
  background:
    linear-gradient(145deg, rgba(183, 151, 91, 0.34), rgba(49, 95, 88, 0.48)),
    #111411;
  border-color: rgba(232, 223, 207, 0.28);
}

.mfx-ai-panel strong {
  color: var(--mfx-gold);
  text-shadow: none;
}

.mfx-freelance {
  color: var(--mfx-paper);
  background:
    linear-gradient(90deg, rgba(8, 11, 10, 0.94), rgba(22, 30, 26, 0.9)),
    url("../img/business/business-11.webp") center / cover;
  border-block-color: rgba(232, 223, 207, 0.16);
}

.mfx-work {
  color: var(--mfx-paper);
  background: #080b0a;
}

.mfx-gallery-tile {
  border-color: rgba(232, 223, 207, 0.22);
  background: #111411;
  box-shadow: none;
}

.mfx-gallery-tile img {
  filter: saturate(0.78) contrast(1.12) brightness(0.78);
}

.mfx-gallery-tile span {
  color: var(--mfx-paper);
  background: rgba(8, 11, 10, 0.78);
  border-color: rgba(232, 223, 207, 0.18);
}

.mfx-gallery-tile:hover img,
.mfx-gallery-tile:focus-visible img {
  filter: saturate(0.95) contrast(1.14) brightness(0.95);
}

.mfx-gallery-tile:hover,
.mfx-gallery-tile:focus-visible {
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.46);
}

.mfx-eco {
  color: var(--mfx-paper);
  background:
    linear-gradient(90deg, rgba(8, 11, 10, 0.95), rgba(24, 37, 30, 0.82)),
    url("../img/eco-home/ecohome51.webp") center / cover fixed;
}

.mfx-eco p {
  color: rgba(232, 223, 207, 0.78);
}

.mfx-polaroid-stack img {
  border-color: rgba(232, 223, 207, 0.86);
  filter: saturate(0.82) brightness(0.82);
}

.mfx-storieze-media > img:not(.mfx-storieze-logo) {
  border-color: rgba(232, 223, 207, 0.22);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.44);
  filter: saturate(0.85) brightness(0.88);
}

.mfx-storieze-logo {
  border-color: rgba(232, 223, 207, 0.22);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.42);
}

.mfx-book {
  background:
    linear-gradient(90deg, rgba(8, 11, 10, 0.9), rgba(8, 11, 10, 0.68)),
    url("../img/squawk-spitfire/squawk-04.webp") center / cover;
}

.mfx-book-cover img {
  border-color: rgba(232, 223, 207, 0.32);
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.5);
}

.mfx-testimonial-grid cite {
  color: var(--mfx-muted);
}

.mfx-contact {
  background:
    linear-gradient(135deg, rgba(8, 11, 10, 0.88), rgba(49, 95, 88, 0.5)),
    #101411;
}

.mfx-contact-card {
  color: var(--mfx-paper);
}

.mfx-contact-card a {
  color: var(--mfx-gold);
}

.mfx-lightbox figure {
  background: #101411;
  border-color: rgba(232, 223, 207, 0.32);
}

.mfx-lightbox figcaption {
  color: var(--mfx-paper);
}

.mfx-lightbox button {
  color: var(--mfx-paper);
  background: #101411;
  border-color: rgba(232, 223, 207, 0.38);
}

.mfx-page {
  color: var(--mfx-paper);
  background: #080b0a;
}

.mfx-page-content .gallery-item,
.mfx-page-content .wp-block-image,
.elementor-widget-gallery .e-gallery-item,
.elementor-image-gallery .gallery-item {
  background: #101411;
  border-color: rgba(232, 223, 207, 0.2);
  box-shadow: none;
}

@media (max-width: 980px) {
  .mfx-primary-nav {
    background: rgba(8, 11, 10, 0.98);
    border-bottom-color: rgba(232, 223, 207, 0.22);
  }
}

/* Approved delivery refinements. */
section[id] {
  scroll-margin-top: 78px;
}

.mfx-hero-photo img {
  object-position: center top;
}

.mfx-hero-mini-two {
  aspect-ratio: 1 / 1;
  right: 1%;
  top: 1%;
  width: 48%;
}

.mfx-hero-mini-two img {
  background: #f4f1e9;
  object-fit: contain;
  object-position: center;
}

.mfx-footer-logo {
  width: min(240px, 100%);
}

.mfx-eco-story {
  margin: 1rem 0 1.75rem;
}

.mfx-eco-story p {
  max-width: 68ch;
}

.mfx-read-more-toggle {
  display: inline-flex;
  margin: 0 2.25rem 1.75rem 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mfx-gold);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.mfx-read-more-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.mfx-eco .mfx-polaroid-stack img:first-child {
  top: 4%;
  right: 0;
  width: 92%;
  aspect-ratio: 2.25 / 1;
  object-position: center;
}

.mfx-eco .mfx-polaroid-stack img:last-child {
  bottom: 0;
  left: 1%;
  width: 56%;
}

.mfx-storieze-media {
  /* Everything inside is absolutely positioned in percentages, so giving the frame
     a ratio instead of a fixed height lets the whole collage scale as one piece -
     the app card and the fan of styles keep their arrangement on a phone. */
  aspect-ratio: 1.06 / 1;
  isolation: isolate;
}

/* The Storieze app itself: the anchor of the collage, crisp and full-colour. */
.mfx-storieze-media > .mfx-storieze-app {
  position: absolute;
  top: 0;
  left: 2%;
  width: 96%;
  aspect-ratio: 2199 / 1400;
  z-index: 5;
  object-fit: cover;
  object-position: top center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.16) inset,
    0 36px 80px rgba(0, 0, 0, 0.62),
    0 8px 24px rgba(0, 0, 0, 0.4);
  transform: rotate(-1.4deg);
  transition: transform 260ms ease;
}

.mfx-storieze-media > .mfx-storieze-app:hover {
  transform: rotate(0deg) scale(1.015);
}

.mfx-storieze-media > .mfx-storieze-art {
  position: absolute;
  z-index: 6;
  width: 25%;
  aspect-ratio: 1;
  border: clamp(3px, 0.55vw, 8px) solid #e8dfcf;
  border-bottom-width: clamp(8px, 1.5vw, 22px);
  border-radius: 3px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5);
  object-fit: cover;
  filter: none;
  transition: filter 220ms ease, transform 220ms ease, z-index 0s;
}

.mfx-storieze-media > .mfx-storieze-art:hover {
  z-index: 8;
  filter: saturate(1.04) brightness(1.04);
  transform: rotate(0deg) scale(1.06);
}

.mfx-storieze-art:nth-of-type(2) { left:  4%;   top: 58%;   z-index: 6; transform: rotate(-11deg); }
.mfx-storieze-art:nth-of-type(3) { left: 15.2%; top: 63%;   z-index: 7; transform: rotate(-7deg); }
.mfx-storieze-art:nth-of-type(4) { left: 26.3%; top: 66.5%; z-index: 8; transform: rotate(-3.5deg); }
.mfx-storieze-art:nth-of-type(5) { left: 37.5%; top: 68%;   z-index: 9; transform: rotate(0deg); }
.mfx-storieze-art:nth-of-type(6) { left: 48.7%; top: 66.5%; z-index: 8; transform: rotate(3.5deg); }
.mfx-storieze-art:nth-of-type(7) { left: 59.8%; top: 63%;   z-index: 7; transform: rotate(7deg); }
.mfx-storieze-art:nth-of-type(8) { left: 71%;   top: 58%;   z-index: 6; transform: rotate(11deg); }

@media (max-width: 980px) {
  .mfx-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mfx-hero-copy,
  .mfx-hero-card {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 720px) {
  .mfx-hero h1 {
    font-size: 3.25rem;
  }

  .mfx-hero-card {
    max-width: 100%;
  }

  .mfx-eco .mfx-polaroid-stack img:first-child {
    width: 94%;
  }

  .mfx-eco .mfx-polaroid-stack img:last-child {
    width: 62%;
  }
}