/* Generated by scripts/build-brand-css.mjs. All identity selectors are opt-in. */
/* MahjMedia / Production Frame v2. The single public identity foundation. */ @font-face {
  font-family: "Space Grotesk Variable";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/brand/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans Variable";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/brand/fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans Variable";
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/brand/fonts/dm-sans-latin-wght-italic.woff2") format("woff2");
}
html[data-visual-language="new"] {
  --color-carbon: #18222f;
  --color-vermilion: #c7432d;
  --color-vermilion-hover: #a63220;
  --color-peach: #fce5dd;
  --color-signal-light: #ff9279;
  --color-canvas: #f5f6f8;
  --color-white: #ffffff;
  --color-slate: #e9edf2;
  --color-line: #d7dde5;
  --color-text: #18222f;
  --color-muted: #566171;
  --color-caption: #5e6876;
  --color-on-dark: #dce3ec;
  --color-dark-surface: #263344;
  --paper: var(--color-canvas);
  --ink: var(--color-text);
  --muted: var(--color-muted);
  --surface: var(--color-white);
  --surface-muted: var(--color-slate);
  --line: var(--color-line);
  --action: var(--color-vermilion);
  --action-hover: var(--color-vermilion-hover);
  --accent-soft: var(--color-peach);
  --accent-on-dark: var(--color-signal-light);
  --caption: var(--color-caption);
  --on-dark: var(--color-on-dark);
  --dark-surface: var(--color-dark-surface);
  --white: var(--color-white);
  --font-display: "Space Grotesk Variable", Arial, sans-serif;
  --font-body: "DM Sans Variable", Arial, sans-serif;
  --radius: 8px;
  --radius-control: 6px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  /* Compatibility aliases used by existing content diagrams, not a second palette. */
  --green: var(--ink);
  --jade: var(--ink);
  --brass: var(--action);
  --ivory: var(--paper);
  --sage: var(--surface-muted);
  --lime: var(--surface-muted);
  --pink: var(--accent-soft);
  --orange: var(--accent-soft);
  --lavender: var(--surface-muted);
  --blue: var(--surface-muted);
} /* Production Frame overrides; the original stylesheet remains the Off path. */
html[data-visual-language="new"] body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
html[data-visual-language="new"] :focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 5px;
}
html[data-visual-language="new"] i {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.04em;
}
html[data-visual-language="new"] .button:hover {
  background: var(--ink);
  transform: translateY(-2px);
}
html[data-visual-language="new"] .button-light:hover {
  background: var(--surface-muted);
}
html[data-visual-language="new"] .audience-strip svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
}
html[data-visual-language="new"] .services-section {
  background: var(--surface-muted);
}
html[data-visual-language="new"] .service-row {
  display: grid;
  grid-template-columns: 65px 1fr 1fr 54px;
  gap: 20px;
  align-items: center;
  padding: 27px 0;
  border-top: 1px solid var(--line);
}
html[data-visual-language="new"] .service-row:last-child {
  border-bottom: 1px solid var(--line);
}
html[data-visual-language="new"] .journal-section {
  background: var(--surface-muted);
}
html[data-visual-language="new"] .cta-right p {
  color: var(--surface-muted);
  font-size: 14px;
  margin-bottom: 28px;
}
html[data-visual-language="new"] .mahj-tile {
  background: var(--paper);
  aspect-ratio: 0.72;
  border-radius: 10% 10% 11% 11%;
  box-shadow:
    0 1.2cqw 0 var(--action),
    0 1.8cqw 0 var(--ink),
    0 3.1cqw 2.4cqw rgba(31, 37, 24, 0.19);
  border: 1px solid rgba(83, 81, 62, 0.18);
  position: relative;
  flex-shrink: 0;
}
html[data-visual-language="new"] .art-product {
  background: var(--surface-muted);
  color: var(--ink);
}
html[data-visual-language="new"] .product-orbit {
  position: absolute;
  width: 112%;
  height: 82%;
  bottom: -25%;
  left: -6%;
  border-radius: 50%;
  background: var(--ink);
  transform: rotate(-12deg);
}
html[data-visual-language="new"] .product-ring {
  position: absolute;
  left: 11%;
  bottom: -30%;
  width: 105%;
  height: 98%;
  border: 1px solid var(--action);
  opacity: 0.6;
  border-radius: 50%;
  transform: rotate(-12deg);
}
html[data-visual-language="new"] .art-product .art-bottomline {
  color: var(--surface-muted);
}
html[data-visual-language="new"] .art-event {
  background: var(--accent-soft);
  color: var(--ink);
}
html[data-visual-language="new"] .event-circle {
  position: absolute;
  border-radius: 50%;
  background: var(--surface-muted);
  width: 75%;
  height: 75%;
  left: -33%;
  bottom: -21%;
}
html[data-visual-language="new"] .event-spark {
  position: absolute;
  right: 9%;
  top: 14%;
  width: 16%;
  height: 16%;
  color: var(--paper);
}
html[data-visual-language="new"] .art-lesson {
  background: var(--surface-muted);
  color: var(--ink);
}
html[data-visual-language="new"] .lesson-tiles > .mahj-tile:nth-child(2) {
  transform: translateY(-15%);
  outline: 1px solid var(--ink);
  outline-offset: 2cqw;
}
html[data-visual-language="new"] .lesson-line {
  position: absolute;
  top: 61%;
  left: -5%;
  height: 1px;
  width: 110%;
  background: var(--action);
  transform: rotate(5deg);
}
html[data-visual-language="new"] .article-art-clicks {
  background: var(--surface-muted);
  display: grid;
  place-items: center;
}
html[data-visual-language="new"] .thumbnail-shape {
  width: 75%;
  height: 68%;
  background: var(--paper);
  border: 1px solid var(--line);
  transform: rotate(-6deg);
  position: relative;
  box-shadow: 1.8cqw 1.8cqw 0 var(--line);
}
html[data-visual-language="new"] .article-art-watch {
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4%;
  padding: 11% 9%;
}
html[data-visual-language="new"] .story-frame {
  width: 29%;
  height: 100%;
  border: 1px solid var(--action);
  position: relative;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-7deg);
  box-shadow: 0.7cqw 1.2cqw 0 var(--action);
}
html[data-visual-language="new"] .story-frame .mahj-tile {
  width: 54%;
  margin-top: 10%;
  box-shadow: 0 0.8cqw 0 var(--ink);
}
html[data-visual-language="new"] .article-art-film {
  background: var(--surface-muted);
  display: grid;
  place-items: center;
}
html[data-visual-language="new"] .viewfinder {
  border: 1px solid var(--ink);
  border-radius: 2cqw;
  width: 76%;
  height: 75%;
  position: relative;
  z-index: 2;
}
html[data-visual-language="new"] .viewfinder-record {
  position: absolute;
  top: 10%;
  left: 7%;
  font-size: 2.3cqw;
  letter-spacing: 0.05em;
  font-weight: 650;
  color: var(--ink);
}
html[data-visual-language="new"] .viewfinder-cross {
  position: absolute;
  font-size: 7cqw;
  right: 9%;
  top: 34%;
  color: var(--ink);
}
html[data-visual-language="new"] .light-circle {
  position: absolute;
  background: var(--paper);
  width: 72%;
  height: 105%;
  right: -10%;
  top: -40%;
  border-radius: 50%;
  z-index: 0;
}
html[data-visual-language="new"] .soft-section {
  background: var(--surface-muted);
}
html[data-visual-language="new"] .check-list li {
  font-size: 15px;
  border-bottom: 1px solid var(--line);
  padding: 17px 0 17px 28px;
  position: relative;
}
html[data-visual-language="new"] .concept-notice {
  font-size: 12px;
  color: var(--green);
  border-left: 2px solid var(--green);
  padding: 14px 20px;
  background: var(--surface-muted);
  margin-top: 30px;
  line-height: 1.8;
}
html[data-visual-language="new"] .article-service {
  background: var(--surface-muted);
  padding: 35px;
  border-radius: var(--radius);
}
html[data-visual-language="new"] .contact-status {
  border-left: 2px solid var(--green);
  padding: 15px 20px;
  background: var(--surface-muted);
  margin-top: 30px;
}
html[data-visual-language="new"] .inquiry-builder input,
html[data-visual-language="new"] .inquiry-builder select,
html[data-visual-language="new"] .inquiry-builder textarea {
  display: block;
  margin-top: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  width: 100%;
  font-size: 12px;
  padding: 14px 15px;
  outline-offset: 3px;
  color: var(--ink);
  border-radius: 4px;
  font-weight: 400;
  line-height: 1.6;
}
html[data-visual-language="new"] .inquiry-builder input::placeholder,
html[data-visual-language="new"] .inquiry-builder textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
html[data-visual-language="new"] .draft-result {
  padding: 30px;
  background: var(--surface-muted);
  margin-top: 35px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
@media (max-width: 900px) {
  html[data-visual-language="new"] .mobile-nav {
    display: flex;
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    background: var(--paper);
    padding: 18px 5% 30px;
    box-shadow: 0 15px 20px color-mix(in srgb, var(--ink) 7.84%, transparent);
    flex-direction: column;
    border-bottom: 1px solid var(--line);
  }
}
html[data-visual-language="new"] .brand-hero {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ivory);
  border: 1px solid color-mix(in srgb, var(--ink) 7.06%, transparent);
}
html[data-visual-language="new"] .journal-search input[type="search"] {
  flex: 1;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 15px 23px;
  font: inherit;
  font-size: 14px;
  color: var(--green);
}
html[data-visual-language="new"] .offer-price strong {
  font-family: var(--font-display);
  font-size: 66px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -2px;
}
html[data-visual-language="new"] .offer-card-launch {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  padding: 40px;
}
html[data-visual-language="new"] .offer-card-launch .offer-description,
html[data-visual-language="new"] .offer-card-launch .offer-effective,
html[data-visual-language="new"] .offer-card-launch .offer-timing,
html[data-visual-language="new"] .offer-card-launch .offer-eligibility,
html[data-visual-language="new"] .offer-card-launch .offer-guarantee p {
  color: var(--surface-muted);
}
html[data-visual-language="new"] .offer-card-launch .offer-counts {
  color: var(--accent-on-dark);
}
html[data-visual-language="new"] .offer-card-launch .offer-eligibility {
  border-color: var(--on-dark);
}
html[data-visual-language="new"] .offer-card-launch > .button {
  background: var(--paper);
  color: var(--ink);
}
html[data-visual-language="new"] .offer-card-launch .offer-includes li::before {
  color: var(--accent-on-dark);
}
html[data-visual-language="new"] .offer-guarantee {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.7;
}
html[data-visual-language="new"] .inquiry-error {
  padding: 15px;
  border-left: 3px solid var(--action);
  font-size: 13px;
  line-height: 1.6;
} /* Production Frame overrides; the original stylesheet remains the Off path. */
html[data-visual-language="new"] .home-format-sample {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
html[data-visual-language="new"] .format-finder {
  max-width: 860px;
  margin-inline: auto;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 16px 50px color-mix(in srgb, var(--ink) 2.35%, transparent);
}
html[data-visual-language="new"] .finder-options label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
  min-height: 59px;
  background: var(--surface);
}
html[data-visual-language="new"] .finder-platforms article:first-child p,
html[data-visual-language="new"] .finder-platforms article:first-child small,
html[data-visual-language="new"] .finder-platforms article:first-child .finder-result-label {
  color: var(--surface-muted);
}
html[data-visual-language="new"] .format-tabs a {
  padding: 9px 16px;
  border: 1px solid var(--line);
  background: var(--surface-muted);
  border-radius: 30px;
  font-size: 13px;
}
html[data-visual-language="new"] .format-tabs a:not([aria-current]):hover {
  background: var(--surface-muted);
}
html[data-visual-language="new"] .format-search input,
html[data-visual-language="new"] .format-search select {
  width: 100%;
  min-width: 0;
  padding: 13px 14px;
  font-size: 13px;
  height: 51px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
}
html[data-visual-language="new"] .format-family-heading h3 span {
  font-family: var(--font-display);
  font-style: italic;
  margin-left: 14px;
  color: var(--muted);
}
html[data-visual-language="new"] .format-card,
html[data-visual-language="new"] .format-related-grid article {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 5px;
  padding: 25px;
  scroll-margin-top: 110px;
  overflow-wrap: anywhere;
}
html[data-visual-language="new"] .format-preview {
  width: calc(100% + 50px);
  margin: -25px -25px 23px;
  aspect-ratio: 20 / 13;
  overflow: hidden;
  background: var(--surface-muted);
  border-radius: 5px 5px 0 0;
}
html[data-visual-language="new"] .format-preview-sage {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 35%, var(--surface-muted), var(--surface-muted));
  opacity: 0;
  transition: opacity 300ms var(--preview-ease);
}
html[data-visual-language="new"] .format-preview-phone {
  position: absolute;
  left: calc(var(--preview-screen-left) - 3px);
  top: calc(var(--preview-screen-top) - 3px);
  width: calc(var(--preview-screen-width) + 6px);
  height: calc(var(--preview-screen-height) + 6px);
  border: 3px solid #c4cbca;
  border-radius: 19px;
  box-shadow:
    0 0 0 1px #788b84,
    0 5px 10px color-mix(in srgb, var(--ink) 14.90%, transparent),
    inset 0 0 0 1px #faffff,
    1px 0 0 1px #faffff80;
}
html[data-visual-language="new"] .format-preview-camera {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  transform: translateX(-50%);
}
html[data-visual-language="new"] .format-preview-cue {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 76%;
  min-height: 15px;
  padding: 4px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 92.16%, transparent);
  color: var(--surface);
  transform: translate(-50%, -50%);
}
html[data-visual-language="new"] .format-preview-cue[data-kind="progress"] {
  min-height: 4px;
  padding: 0;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 50.20%, transparent);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 14.90%, transparent);
}
html[data-visual-language="new"] .format-preview-cue[data-kind="title"] {
  background: color-mix(in srgb, var(--surface) 92.94%, transparent);
  color: var(--ink);
}
html[data-visual-language="new"] .format-preview-cue[data-kind="live"]::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-soft);
}
html[data-visual-language="new"] .format-preview-leaders polyline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
html[data-visual-language="new"] .format-preview-leaders circle {
  fill: var(--ink);
  stroke: var(--paper);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
html[data-visual-language="new"] .format-preview-switch {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  margin: 0;
  min-width: 0;
  gap: 2px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--ink) 18.82%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 96.08%, transparent);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--ink) 3.14%, transparent);
}
html[data-visual-language="new"] .format-preview-switch button:hover {
  background: var(--surface-muted);
}
html[data-visual-language="new"] .format-preview-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surface);
}
html[data-visual-language="new"] .format-preview[data-view="breakdown"] .format-preview-viewport {
  left: var(--preview-screen-left);
  top: calc(var(--preview-diagram-top) + var(--preview-screen-top));
  width: var(--preview-screen-width);
  height: var(--preview-screen-height);
  background: var(--surface-muted);
  border-radius: 16px;
}
html[data-visual-language="new"]
  .format-preview[data-device="laptop"]
  .format-preview-phone::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: -6%;
  width: 112%;
  height: 10px;
  border-radius: 1px 1px 9px 9px;
  background: linear-gradient(#f5f7f6 0%, #c9d0cf 28%, #e5e9e8 55%, #929e9b 100%);
  box-shadow: 0 3px 5px color-mix(in srgb, var(--ink) 14.90%, transparent);
  clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}
html[data-visual-language="new"] .format-preview-devices {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 2px;
  min-width: 0;
  padding: 3px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 18.82%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 96.08%, transparent);
}
html[data-visual-language="new"] .format-preview-devices button:hover {
  background: var(--surface-muted);
}
html[data-visual-language="new"] .format-preview-devices button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surface);
} /* Production Frame overrides; the original stylesheet remains the Off path. */
html[data-visual-language="new"] .mm-social-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 25.10%, transparent);
  border-radius: 100px;
  color: var(--green);
  background: var(--paper);
  transition:
    background 160ms,
    color 160ms,
    border-color 160ms;
}
html[data-visual-language="new"] .mm-social-cards .mm-social-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 6.27%, transparent);
}
html[data-visual-language="new"] .mm-social-cards a:hover .mm-social-icon {
  background: color-mix(in srgb, var(--paper) 10.20%, transparent);
}
html[data-visual-language="new"] .mm-social-presence {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 26px 30px;
  margin-bottom: 40px;
  border: 1px solid color-mix(in srgb, var(--ink) 18.82%, transparent);
  border-radius: 22px;
  background: var(--surface-muted);
}
html[data-visual-language="new"] .mm-whatsapp-action {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 52px;
  max-width: 100%;
  padding: 12px 20px;
  border: 1px solid var(--green);
  border-radius: 100px;
  background: var(--surface-muted);
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  transition:
    background 160ms,
    color 160ms;
}
html[data-visual-language="new"] .cta-section .mm-whatsapp-action,
html[data-visual-language="new"] .cta-section .mm-social-links a {
  background: transparent;
  color: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 50.20%, transparent);
}
html[data-visual-language="new"] .mm-cta-follow {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 25.10%, transparent);
}
html[data-visual-language="new"] .mm-finder-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  margin-top: 36px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-muted);
}
@media (max-width: 1200px) {
  html[data-visual-language="new"] .mobile-nav {
    display: flex;
    position: absolute;
    top: 98px;
    left: 0;
    right: 0;
    flex-direction: column;
    max-height: calc(100dvh - 98px);
    overflow-y: auto;
    padding: 18px 5% 30px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    box-shadow: 0 15px 20px color-mix(in srgb, var(--ink) 7.84%, transparent);
  }
}
@media (max-width: 900px) {
  html[data-visual-language="new"] .mobile-nav .mm-social-links a {
    justify-content: flex-start;
    gap: 10px;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--ink) 25.10%, transparent);
  }
}
html[data-visual-language="new"] .spotlight-home,
html[data-visual-language="new"] .spotlight-directory {
  --surface: var(--color-white);
  --surface-muted: var(--color-slate);
  --dark-surface: var(--color-dark-surface);
  --accent-soft: var(--color-peach);
  --font-display: "Space Grotesk Variable", Arial, sans-serif;
  --action: var(--color-vermilion);
} /* Production Frame overrides; the original stylesheet remains the Off path. */
html[data-visual-language="new"] .collage-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  flex: none;
  border: 1px solid #ffffff80;
  border-radius: 20px;
  background: var(--lime);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--ink) 12.55%, transparent);
}
html[data-visual-language="new"] .collage-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background: color-mix(in srgb, var(--ink) 21.96%, transparent);
}
html[data-visual-language="new"] .collage-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      var(--paper) 0%,
      color-mix(in srgb, var(--paper) 98.82%, transparent) 28%,
      color-mix(in srgb, var(--paper) 93.33%, transparent) 42%,
      color-mix(in srgb, var(--paper) 53.33%, transparent) 63%,
      color-mix(in srgb, var(--paper) 20.00%, transparent) 100%
    ),
    linear-gradient(
      0deg,
      var(--paper) 0%,
      color-mix(in srgb, var(--paper) 0.00%, transparent) 24%,
      color-mix(in srgb, var(--paper) 0.00%, transparent) 82%,
      color-mix(in srgb, var(--paper) 25.10%, transparent) 100%
    );
}
html[data-visual-language="new"] .motion-toggle {
  position: absolute;
  z-index: 2;
  right: max(5%, calc((100% - 1280px) / 2));
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid color-mix(in srgb, var(--ink) 18.82%, transparent);
  border-radius: 100px;
  background: color-mix(in srgb, var(--paper) 90.98%, transparent);
  color: var(--green);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.02em;
  pointer-events: auto;
  backdrop-filter: blur(12px);
}
html[data-visual-language="new"] .motion-collage--dark .collage-veil {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ink) 98.82%, transparent) 0%,
    color-mix(in srgb, var(--ink) 92.94%, transparent) 42%,
    color-mix(in srgb, var(--ink) 65.88%, transparent) 100%
  );
}
html[data-visual-language="new"] .motion-collage--dark .motion-toggle {
  bottom: 12px;
  min-height: 36px;
  border-color: color-mix(in srgb, var(--paper) 23.14%, transparent);
  background: color-mix(in srgb, var(--ink) 85.10%, transparent);
  color: var(--paper);
}
@media (max-width: 900px) {
  html[data-visual-language="new"] .collage-veil {
    background:
      linear-gradient(
        90deg,
        var(--paper) 0%,
        color-mix(in srgb, var(--paper) 94.90%, transparent) 34%,
        color-mix(in srgb, var(--paper) 25.10%, transparent) 100%
      ),
      linear-gradient(
        0deg,
        var(--paper) 0%,
        color-mix(in srgb, var(--paper) 0.00%, transparent) 25%
      );
  }
}
@media (max-width: 650px) {
  html[data-visual-language="new"] .collage-veil {
    background: linear-gradient(
      180deg,
      var(--paper) 0%,
      color-mix(in srgb, var(--paper) 98.82%, transparent) 48%,
      color-mix(in srgb, var(--paper) 43.92%, transparent) 74%,
      color-mix(in srgb, var(--paper) 20.00%, transparent) 100%
    );
  }
}
@media (max-width: 650px) {
  html[data-visual-language="new"] .motion-collage--dark .collage-veil {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--ink) 98.82%, transparent) 0%,
      color-mix(in srgb, var(--ink) 92.94%, transparent) 42%,
      color-mix(in srgb, var(--ink) 72.16%, transparent) 100%
    );
  }
} /* Production Frame overrides; the original stylesheet remains the Off path. */
html[data-visual-language="new"] .homepage-hero {
  position: relative;
  overflow-x: clip;
  background:
    radial-gradient(
      ellipse at 78% 52%,
      color-mix(in srgb, var(--surface-muted) 36.86%, transparent),
      transparent 60%
    ),
    var(--paper);
  border-bottom: 1px solid var(--line);
}
html[data-visual-language="new"] .hero-story-hardware {
  position: absolute;
  inset: -8px -8px -13px;
  border: 1px solid #686f6c;
  border-radius: 13px 13px 6px 6px;
  background: linear-gradient(125deg, #f4f5f3, #959c99 28%, #f5f6f5 46%, #7d8582 74%, #dfe2df);
  box-shadow:
    0 20px 24px -18px color-mix(in srgb, var(--ink) 43.92%, transparent),
    inset 0 0 0 3px #d9dcd9,
    inset 0 0 0 8px #161c19;
}
html[data-visual-language="new"] .hero-story-hardware:after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  height: 10px;
  left: -8%;
  width: 116%;
  background: linear-gradient(#edf0ee, #bac0bc 35%, #7c8580 80%, #cbd0cb);
  border-radius: 1px 1px 50% 50% / 1px 1px 90% 90%;
  box-shadow: 0 12px 12px -5px color-mix(in srgb, var(--ink) 16.86%, transparent);
  border: 1px solid #929b95;
}
html[data-visual-language="new"] .hero-story-source img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--ink) 6.27%, transparent);
}
html[data-visual-language="new"] .hero-story-title {
  position: absolute;
  left: 5%;
  bottom: 18%;
  max-width: 78%;
  text-shadow: 0 1px 10px color-mix(in srgb, var(--ink) 18.82%, transparent);
}
html[data-visual-language="new"] .hero-story-detail {
  position: absolute;
  top: 5%;
  right: 4%;
  width: 27%;
  aspect-ratio: 1.3;
  overflow: hidden;
  border: 2px solid var(--paper);
  border-radius: 8px;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--ink) 25.10%, transparent);
}
html[data-visual-language="new"] .hero-story-scrub {
  height: 2px;
  flex: 1;
  background: color-mix(in srgb, var(--paper) 36.08%, transparent);
  position: relative;
}
html[data-visual-language="new"] .hero-story-steps li > span {
  display: block;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 16.86%, transparent);
}
html[data-visual-language="new"] .hero-story-choices button:hover,
html[data-visual-language="new"] .hero-story-pause:hover {
  border-color: color-mix(in srgb, var(--ink) 25.10%, transparent);
}
html[data-visual-language="new"] .hero-story-scene[data-device="phone"] .hero-story-hardware {
  inset: -7px;
  border-radius: 29px;
  box-shadow:
    0 16px 20px color-mix(in srgb, var(--ink) 18.82%, transparent),
    inset 0 0 0 2px #d9dcd9,
    inset 0 0 0 5px #161c19;
}
html[data-visual-language="new"] .hero-story-scene[data-device="desktop"] .hero-story-hardware {
  bottom: -22px;
  box-shadow:
    0 10px 25px color-mix(in srgb, var(--ink) 18.82%, transparent),
    inset 0 0 0 3px #d9dcd9,
    inset 0 0 0 8px #161c19;
}
html[data-visual-language="new"] .hero-story-scene[data-device="desktop"] .hero-story-foot {
  display: block;
  position: absolute;
  top: 112%;
  left: 30%;
  width: 40%;
  height: 4%;
  border-radius: 50%;
  background: linear-gradient(#dce1da, #9da69f);
  box-shadow: 0 7px 9px color-mix(in srgb, var(--ink) 18.82%, transparent);
}
html[data-visual-language="new"] .agency-audience-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
html[data-visual-language="new"] .agency-audience-links a {
  display: grid;
  grid-template-columns: minmax(90px, 30%) minmax(0, 1fr) 18px;
  align-items: center;
  gap: 20px;
  padding: 18px;
  min-height: 154px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
html[data-visual-language="new"] .agency-audience-art {
  display: block;
  aspect-ratio: 3 / 2;
}
html[data-visual-language="new"] .agency-audience-art svg {
  display: block;
  width: 100%;
  height: auto;
}
html[data-visual-language="new"] .agency-audience-copy {
  display: grid;
  gap: 9px;
  min-width: 0;
  line-height: 1.35;
}
html[data-visual-language="new"] .agency-audience-copy > span {
  font-family: var(--font-body);
  font-weight: 650;
  font-size: 17px;
}
html[data-visual-language="new"] .agency-audience-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
html[data-visual-language="new"] .homepage-hero h1 {
  font-size: clamp(52px, 5.15vw, 74px);
}
html[data-visual-language="new"] .homepage-hero h1 i {
  font-size: 0.84em;
  font-style: normal;
  color: var(--action);
}
@media (max-width: 700px) {
  html[data-visual-language="new"] .agency-audience-links {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-visual-language="new"] .agency-audience-links a {
    gap: 14px;
    padding: 16px 14px;
    min-height: 128px;
  }
  html[data-visual-language="new"] .agency-audience-copy > span {
    font-size: 15px;
  }
  html[data-visual-language="new"] .homepage-hero h1 {
    font-size: clamp(43px, 11.6vw, 58px);
  }
}
html[data-visual-language="new"] .studio-scene {
  margin: 0;
  min-width: 0;
}
html[data-visual-language="new"] .studio-scene-mat {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: linear-gradient(135deg, var(--surface), var(--surface-muted));
  box-shadow: 0 18px 38px -32px color-mix(in srgb, var(--ink) 40.00%, transparent);
}
html[data-visual-language="new"] .studio-scene img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 2px;
}
html[data-visual-language="new"] .studio-scene figcaption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.7;
}
html[data-visual-language="new"] .studio-page-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
  padding-block: 64px;
}
html[data-visual-language="new"] .studio-page-intro h1 {
  font-size: clamp(44px, 4.7vw, 66px);
  margin-bottom: 25px;
}
html[data-visual-language="new"] .studio-page-intro .intro-bottom {
  display: block;
}
html[data-visual-language="new"] .studio-page-intro .intro-bottom > .lead {
  font-size: 15px;
  line-height: 1.85;
}
html[data-visual-language="new"] .studio-page-intro .intro-actions {
  justify-content: flex-start;
  margin-top: 26px;
  gap: 12px;
}
html[data-visual-language="new"] .studio-page-intro .button {
  font-size: 12px;
  min-height: 48px;
  padding: 14px 19px;
}
html[data-visual-language="new"] .studio-scene-compact {
  margin-top: 30px;
}
html[data-visual-language="new"] .studio-scene-compact figcaption {
  display: block;
}
html[data-visual-language="new"] .studio-scene-compact figcaption > span {
  display: block;
}
html[data-visual-language="new"] .studio-finder-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 55px;
}
html[data-visual-language="new"] .studio-finder-intro h1 {
  font-size: clamp(42px, 4.7vw, 66px);
}
html[data-visual-language="new"] .studio-finder-intro > .studio-scene {
  max-width: 520px;
}
html[data-visual-language="new"] .about-feature > .studio-scene {
  align-self: center;
}
html[data-visual-language="new"] .site-header .desktop-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
html[data-visual-language="new"] .cta-section {
  background: var(--color-carbon);
  border-top: 1px solid var(--dark-surface);
}
html[data-visual-language="new"] .cta-right > svg {
  display: none;
}
@media (max-width: 1100px) {
  html[data-visual-language="new"] .studio-page-intro {
    gap: 36px;
  }
  html[data-visual-language="new"] .studio-page-intro h1 {
    font-size: 51px;
  }
}
@media (max-width: 900px) {
  html[data-visual-language="new"] .studio-page-intro,
  html[data-visual-language="new"] .studio-finder-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 35px;
  }
  html[data-visual-language="new"] .studio-page-intro {
    padding-block: 44px 55px;
  }
  html[data-visual-language="new"] .studio-page-intro h1 {
    max-width: 650px;
    font-size: clamp(42px, 7.4vw, 64px);
  }
  html[data-visual-language="new"] .studio-page-intro > .studio-scene,
  html[data-visual-language="new"] .studio-finder-intro > .studio-scene {
    max-width: 700px;
    width: 100%;
  }
}
@media (max-width: 700px) {
  html[data-visual-language="new"] .studio-page-intro h1 {
    font-size: clamp(39px, 10vw, 52px);
  }
  html[data-visual-language="new"] .studio-page-intro .intro-bottom > .lead {
    font-size: 14px;
  }
  html[data-visual-language="new"] .studio-page-intro .button {
    font-size: 11px;
  }
  html[data-visual-language="new"] .studio-page-intro,
  html[data-visual-language="new"] .studio-finder-intro {
    gap: 28px;
  }
  html[data-visual-language="new"] .studio-scene-mat {
    padding: 6px;
  }
}
@media print {
  html[data-visual-language="new"] .studio-scene {
    display: none;
  }
  html[data-visual-language="new"] .studio-page-intro,
  html[data-visual-language="new"] .studio-finder-intro {
    display: block;
  }
}
html[data-visual-language="new"] body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
}
html[data-visual-language="new"] h1,
html[data-visual-language="new"] h2 {
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 1.06;
}
html[data-visual-language="new"] h3,
html[data-visual-language="new"] h4 {
  font-family: var(--font-body);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.25;
}
html[data-visual-language="new"] i {
  font-family: var(--font-body);
  letter-spacing: inherit;
}
html[data-visual-language="new"] h1 i,
html[data-visual-language="new"] h2 i,
html[data-visual-language="new"] h3 i,
html[data-visual-language="new"] .page-intro h1 i,
html[data-visual-language="new"] .agency-hero h1 i {
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
}
html[data-visual-language="new"] .agency-hero h1 i,
html[data-visual-language="new"] .page-intro h1 i {
  color: var(--action);
}
html[data-visual-language="new"] .agency-hero h1 {
  font-size: clamp(52px, 5.15vw, 74px);
  line-height: 1.02;
  font-weight: 650;
}
html[data-visual-language="new"] .agency-hero-grid {
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  padding-block: 76px 64px;
}
html[data-visual-language="new"] .agency-hero h1 i {
  font-size: 0.84em;
  text-wrap: balance;
  margin-top: 8px;
}
html[data-visual-language="new"] .agency-hero-copy > p {
  font-size: 16px;
  max-width: 470px;
  line-height: 1.75;
}
html[data-visual-language="new"] .agency-home .section-heading h2,
html[data-visual-language="new"] .agency-demo-copy h2 {
  font-size: clamp(36px, 3.7vw, 52px);
}
html[data-visual-language="new"] .eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.1em;
}
html[data-visual-language="new"] .eyebrow > span {
  width: 16px;
  height: 3px;
  border-radius: 0;
  background: var(--action);
}
html[data-visual-language="new"] .button {
  border-radius: var(--radius-control);
  background: var(--action);
  border-color: var(--action);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 650;
  min-height: 48px;
  padding: 14px 22px;
  gap: 22px;
  box-shadow: 0 4px 12px -8px var(--ink);
}
html[data-visual-language="new"] .button:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
  transform: translateY(-1px);
}
html[data-visual-language="new"] .button-outline {
  color: var(--ink);
  border-color: var(--line);
  background: transparent;
  box-shadow: none;
}
html[data-visual-language="new"] .button-outline:hover {
  color: var(--white);
  background: var(--ink);
  border-color: var(--ink);
}
html[data-visual-language="new"] .button-light {
  color: var(--ink);
  background: var(--white);
  border-color: var(--white);
}
html[data-visual-language="new"] .button-light:hover {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--ink);
}
html[data-visual-language="new"] :focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 4px;
}
html[data-visual-language="new"] ::selection {
  background: var(--accent-soft);
  color: var(--ink);
}
html[data-visual-language="new"] .text-link {
  font-weight: 650;
  border-bottom-color: var(--line);
}
html[data-visual-language="new"] .text-link:hover {
  color: var(--action);
  border-bottom-color: var(--action);
}
html[data-visual-language="new"] .site-header {
  background: var(--surface);
  border-bottom-color: var(--line);
}
html[data-visual-language="new"] .nav-inner {
  height: 88px;
}
html[data-visual-language="new"] .brand-logo {
  width: 208px;
  height: auto;
}
html[data-visual-language="new"] .desktop-nav {
  gap: 22px;
}
html[data-visual-language="new"] .desktop-nav a {
  font-size: 13px;
  font-weight: 550;
}
html[data-visual-language="new"] .desktop-nav a[aria-current] {
  color: var(--action);
  border-color: var(--action);
}
html[data-visual-language="new"] .site-header .nav-cta {
  min-height: 44px;
  font-size: 12px;
}
html[data-visual-language="new"] .mm-social-links a,
html[data-visual-language="new"] .mm-whatsapp-action,
html[data-visual-language="new"] .spotlight-carousel-controls button,
html[data-visual-language="new"] .spotlight-focus li,
html[data-visual-language="new"] .offer-badge,
html[data-visual-language="new"] .format-preview-switch,
html[data-visual-language="new"] .format-preview-switch button,
html[data-visual-language="new"] .format-creator-choice,
html[data-visual-language="new"] .format-filter,
html[data-visual-language="new"] .journal-filter,
html[data-visual-language="new"] .journal-pagination a,
html[data-visual-language="new"] .round-arrow,
html[data-visual-language="new"] .service-arrow {
  border-radius: var(--radius-control);
}
html[data-visual-language="new"] .mm-social-cards a,
html[data-visual-language="new"] .mm-social-presence,
html[data-visual-language="new"] .mm-finder-help,
html[data-visual-language="new"] .mm-social-cards .mm-social-icon {
  border-radius: var(--radius);
}
html[data-visual-language="new"] .mm-social-links a {
  border-color: var(--line);
  background: var(--surface);
}
html[data-visual-language="new"] .mm-social-links a:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}
html[data-visual-language="new"] .mm-whatsapp-action {
  border-color: var(--line);
}
html[data-visual-language="new"] .offer-card,
html[data-visual-language="new"] .spotlight-card,
html[data-visual-language="new"] .home-format-sample,
html[data-visual-language="new"] .creator-card,
html[data-visual-language="new"] .format-card,
html[data-visual-language="new"] .selected-offer,
html[data-visual-language="new"] .contact-option,
html[data-visual-language="new"] .studio-scene-mat,
html[data-visual-language="new"] .agency-image-mat,
html[data-visual-language="new"] .agency-demo-screen {
  border-radius: var(--radius);
}
html[data-visual-language="new"] .studio-scene-mat,
html[data-visual-language="new"] .agency-image-mat {
  background: var(--surface);
  border-color: var(--line);
  padding: 7px;
  box-shadow: 0 18px 38px -28px color-mix(in srgb, var(--ink) 25%, transparent);
}
html[data-visual-language="new"] .agency-image-mat img,
html[data-visual-language="new"] .studio-scene img {
  border: 0;
  border-radius: 3px;
}
html[data-visual-language="new"] .studio-scene figcaption,
html[data-visual-language="new"] .agency-hero-art figcaption {
  color: var(--caption);
  font-size: 11px;
}
html[data-visual-language="new"] .agency-benefits h2 {
  font-family: var(--font-body);
  font-weight: 650;
  font-size: 19px;
  letter-spacing: -0.025em;
}
html[data-visual-language="new"] .agency-benefits p {
  font-size: 13px;
}
html[data-visual-language="new"] .agency-index,
html[data-visual-language="new"] .step-number,
html[data-visual-language="new"] .service-number {
  color: var(--action);
  font-weight: 650;
}
html[data-visual-language="new"] .agency-home .section,
html[data-visual-language="new"] .section {
  padding-block: 96px;
}
html[data-visual-language="new"] .agency-audience-links a {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding-inline: 20px;
  min-height: 66px;
  font-weight: 550;
}
html[data-visual-language="new"] .agency-audience-links {
  gap: 12px;
}
html[data-visual-language="new"] .agency-audience-links a:hover {
  color: var(--action);
  border-color: var(--action);
}
html[data-visual-language="new"] .offer-card {
  padding: 32px;
}
html[data-visual-language="new"] .offer-price strong,
html[data-visual-language="new"] .selected-offer-price {
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: -0.06em;
}
html[data-visual-language="new"] .offer-card-launch .offer-price strong {
  font-size: clamp(60px, 6vw, 80px);
}
html[data-visual-language="new"] .offer-card-launch {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
html[data-visual-language="new"] .offer-card-launch > .button {
  background: var(--action);
  border-color: var(--action);
  color: var(--white);
}
html[data-visual-language="new"] .offer-card-launch > .button:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
}
html[data-visual-language="new"] .spotlight-video-invitation {
  background: var(--ink);
}
html[data-visual-language="new"] .spotlight-video-invitation > p {
  font-family: var(--font-body);
  font-weight: 550;
}
html[data-visual-language="new"] .spotlight-video-invitation button {
  border-radius: var(--radius-control);
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}
html[data-visual-language="new"] .spotlight-video-invitation button:hover {
  background: var(--accent-soft);
}
html[data-visual-language="new"] .spotlight-affiliation {
  border-left-color: var(--action);
  background: var(--accent-soft);
}
html[data-visual-language="new"] .spotlight-home-grid .spotlight-card,
html[data-visual-language="new"] .spotlight-home {
  border-color: var(--line);
}
html[data-visual-language="new"] .spotlight-focus li {
  border-radius: 4px;
}
html[data-visual-language="new"] input,
html[data-visual-language="new"] select,
html[data-visual-language="new"] textarea,
html[data-visual-language="new"] .inquiry-builder input,
html[data-visual-language="new"] .inquiry-builder select,
html[data-visual-language="new"] .inquiry-builder textarea {
  border-color: #7e8b9b;
  border-radius: var(--radius-control);
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
}
html[data-visual-language="new"] .inquiry-builder input,
html[data-visual-language="new"] .inquiry-builder select,
html[data-visual-language="new"] .inquiry-builder textarea {
  font-size: 14px;
}
html[data-visual-language="new"] .inquiry-builder label {
  font-size: 13px;
}
html[data-visual-language="new"] .inquiry-builder input::placeholder,
html[data-visual-language="new"] .inquiry-builder textarea::placeholder {
  font-size: inherit;
}
html[data-visual-language="new"] .cta-section,
html[data-visual-language="new"] .agency-home .cta-section {
  background: var(--color-carbon);
  border-top-color: var(--color-dark-surface);
}
html[data-visual-language="new"] .cta-section .eyebrow,
html[data-visual-language="new"] .cta-inner h2,
html[data-visual-language="new"] .cta-inner h2 i {
  color: var(--white);
}
html[data-visual-language="new"] .cta-right p {
  color: var(--on-dark);
}
html[data-visual-language="new"] .cta-section .button-light {
  background: var(--action);
  border-color: var(--action);
  color: var(--white);
}
html[data-visual-language="new"] .site-footer {
  background: var(--color-carbon);
  color: var(--white);
  border-top: 1px solid var(--dark-surface);
  --muted: var(--on-dark);
}
html[data-visual-language="new"] .site-footer p,
html[data-visual-language="new"] .site-footer .footer-links > div > span,
html[data-visual-language="new"] .site-footer .footer-bottom {
  color: var(--on-dark);
}
html[data-visual-language="new"] .site-footer .mm-social-links a {
  background: var(--dark-surface);
  border-color: #48576b;
  color: var(--white);
}
html[data-visual-language="new"] .site-footer .mm-social-links a:hover {
  background: #35465c;
  border-color: var(--accent-on-dark);
}
html[data-visual-language="new"] .site-footer .footer-links a:hover {
  color: var(--accent-on-dark);
}
html[data-visual-language="new"] .footer-logo .brand-logo {
  width: 230px;
}
html[data-visual-language="new"] .site-footer .footer-top,
html[data-visual-language="new"] .site-footer .footer-bottom,
html[data-visual-language="new"] .site-footer .mm-footer-connect {
  border-color: #48576b;
}
@media (max-width: 1200px) {
  html[data-visual-language="new"] .mobile-nav {
    top: 88px;
    max-height: calc(100dvh - 88px);
  }
}
@media (max-width: 1100px) {
  html[data-visual-language="new"] .desktop-nav {
    gap: 14px;
  }
  html[data-visual-language="new"] .brand-logo {
    width: 185px;
  }
}
@media (max-width: 900px) {
  html[data-visual-language="new"] .agency-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-block: 48px;
  }
  html[data-visual-language="new"] .agency-hero h1 {
    font-size: clamp(52px, 8.4vw, 72px);
    max-width: 700px;
  }
  html[data-visual-language="new"] .agency-home .section,
  html[data-visual-language="new"] .section {
    padding-block: 64px;
  }
}
@media (max-width: 700px) {
  html[data-visual-language="new"] .mobile-nav {
    top: 76px;
    max-height: calc(100dvh - 76px);
  }
  html[data-visual-language="new"] .inquiry-builder input,
  html[data-visual-language="new"] .inquiry-builder select,
  html[data-visual-language="new"] .inquiry-builder textarea {
    font-size: 16px;
  }
  html[data-visual-language="new"] .inquiry-builder .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-visual-language="new"] .nav-inner {
    height: 76px;
  }
  html[data-visual-language="new"] .brand-logo {
    width: 163px;
  }
  html[data-visual-language="new"] .agency-hero h1 {
    font-size: clamp(43px, 11.6vw, 58px);
    letter-spacing: -0.055em;
  }
  html[data-visual-language="new"] .agency-hero-grid {
    padding-block: 40px;
    gap: 32px;
  }
  html[data-visual-language="new"] .agency-hero-copy > p {
    font-size: 15px;
  }
  html[data-visual-language="new"] .agency-hero h1 i {
    margin-top: 6px;
  }
  html[data-visual-language="new"] .agency-home .section-heading h2 {
    font-size: 38px;
  }
  html[data-visual-language="new"] .agency-home .section,
  html[data-visual-language="new"] .section {
    padding-block: 56px;
  }
  html[data-visual-language="new"] .offer-card {
    padding: 26px;
  }
  html[data-visual-language="new"] .agency-audience-links a {
    padding-inline: 16px;
  }
}
@media (max-width: 370px) {
  html[data-visual-language="new"] .brand-logo {
    width: 134px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-visual-language="new"] .button {
    transition: none;
  }
  html[data-visual-language="new"] .button:hover {
    transform: none;
  }
}