/* QoboWEB migrated pages. Scoped to .migration-page. Always visible, no entrance JS. */
.migration-page {
  --mp-fg: var(--color-title-1, #181818);
  --mp-body: var(--color-content-base, #222);
  --mp-muted: var(--color-content-1, #6b6a66);
  --mp-line: var(--color-line-1, rgba(24, 24, 24, .12));
  --mp-card: var(--color-card-1, #efede8);
  --mp-bg: var(--color-section-1, #ffffff);
  --mp-accent: #2b3cf0;
  --mp-x: clamp(20px, 4vw, 48px);
  display: block;
  color: var(--mp-body);
  background: var(--mp-bg);
  font-family: "General Sans", ui-sans-serif, system-ui, sans-serif;
  opacity: 1 !important;
  visibility: visible !important;
  overflow-wrap: anywhere;
}
.dark .migration-page, .migration-page:where(.dark) {
  --mp-fg: #f4f2ee; --mp-body: #e3e1dc; --mp-muted: #a3a19b;
  --mp-line: rgba(255, 255, 255, .14); --mp-card: #222220; --mp-bg: #181818; --mp-accent: #9aa6ff;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) .migration-page:not(.light) { color-scheme: dark; }
}
.migration-page *, .migration-page *::before, .migration-page *::after { box-sizing: border-box; }
.migration-page .mp-container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--mp-x); }

.migration-page .mp-dot { display: inline-block; width: 6px; height: 6px; border-radius: 99px; background: currentColor; flex: none; }
.migration-page .mp-eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--mp-muted); margin-bottom: clamp(20px, 3vw, 44px); }
.migration-page .mp-pill { display: inline-flex; padding: 5px 10px; border: 1px solid currentColor; border-radius: 99px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; line-height: 1; }

/* Hero */
.migration-page .mp-hero { padding: clamp(120px, 18vw, 240px) 0 clamp(40px, 6vw, 90px); position: relative; }
.migration-page .mp-hero::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1600px, 100%); aspect-ratio: 1; transform: translate(-50%, -55%); background: radial-gradient(circle, rgba(0,0,0,.08) 0%, transparent 62%); pointer-events: none; }
.dark .migration-page .mp-hero::before { background: radial-gradient(circle, rgba(255,255,255,.07) 0%, transparent 62%); }
.migration-page .mp-hero__grid { display: grid; gap: 24px; position: relative; }
.migration-page .mp-hero__meta { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--mp-fg); }
.migration-page .mp-title { color: var(--mp-fg); font-weight: 500; font-size: clamp(40px, 8.4vw, 132px); line-height: .92; letter-spacing: -.045em; max-width: 15ch; margin: 0; text-wrap: balance; }
.migration-page.mp-type-post .mp-title { font-size: clamp(36px, 6vw, 88px); max-width: 17ch; line-height: .98; }
.migration-page .mp-lede { margin: clamp(24px, 3vw, 48px) 0 0; max-width: 44ch; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; color: var(--mp-body); }
@media (min-width: 64rem) {
  .migration-page .mp-hero__grid { grid-template-columns: 3fr 9fr; gap: 24px; }
  .migration-page .mp-hero__meta { padding-top: 10px; }
}

/* Archived vacancy notice */
.migration-page .mp-notice { display: grid; gap: 14px; margin: 0 0 clamp(32px, 4vw, 56px); padding: clamp(20px, 3vw, 32px); border: 1px solid var(--mp-line); border-left: 3px solid var(--mp-fg); border-radius: 20px; background: var(--mp-card); max-width: 860px; }
.migration-page .mp-notice__tag { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--mp-fg); }
.migration-page .mp-notice p { margin: 0; line-height: 1.55; }
.migration-page .mp-notice a { color: var(--mp-fg); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 64rem) { .migration-page .mp-notice { margin-left: 25%; } }

/* Cover */
.migration-page .mp-cover { padding: 0 8px; margin-bottom: clamp(48px, 7vw, 110px); }
.migration-page .mp-cover__frame { margin: 0; overflow: clip; border-radius: clamp(20px, 2.4vw, 32px); aspect-ratio: 4/3; background: var(--mp-card); }
.migration-page .mp-cover__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.migration-page .mp-service-cover { position:relative; }
.mp-service-background { position:absolute; inset:0; }
.migration-page .mp-service-cover .mp-service-logo {
  position:absolute; z-index:2; left:50%; top:50%;
  width:clamp(64px,12vw,180px); height:auto; object-fit:contain;
  transform:translate(-50%,-50%); pointer-events:none;
}
@media(prefers-reduced-motion:reduce) {
  .mp-service-background > img { transform:none !important; will-change:auto; }
}
@media (min-width: 48rem) { .migration-page .mp-cover__frame { aspect-ratio: 16/9; } }
@media (min-width: 64rem) { .migration-page .mp-cover__frame { aspect-ratio: 2/1; } }
.migration-page .mp-attachment { margin: 0 0 48px; }
.migration-page .mp-attachment img { max-width: 100%; height: auto; border-radius: 20px; display: block; margin-inline: auto; }

/* Prose */
.migration-page .mp-body { padding-bottom: clamp(56px, 8vw, 120px); }
.migration-page .mp-prose { max-width: 760px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.68; color: var(--mp-body); }
@media (min-width: 64rem) { .migration-page .mp-prose { margin-left: 25%; } }
.migration-page .mp-prose > :first-child { margin-top: 0; }
.migration-page .mp-prose p { margin: 0 0 1.15em; }
.migration-page .mp-prose h1, .migration-page .mp-prose h2, .migration-page .mp-prose h3,
.migration-page .mp-prose h4, .migration-page .mp-prose h5, .migration-page .mp-prose h6 { color: var(--mp-fg); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; margin: 1.9em 0 .6em; text-wrap: balance; }
.migration-page .mp-prose h1, .migration-page .mp-prose h2 { font-size: clamp(30px, 3.6vw, 52px); }
.migration-page .mp-prose h3 { font-size: clamp(24px, 2.4vw, 34px); }
.migration-page .mp-prose h4 { font-size: clamp(20px, 1.8vw, 26px); }
.migration-page .mp-prose h5, .migration-page .mp-prose h6 { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.migration-page .mp-prose a { color: var(--mp-fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-color .3s; }
.migration-page .mp-prose a:hover { text-decoration-color: transparent; }
.migration-page .mp-prose strong, .migration-page .mp-prose b { color: var(--mp-fg); font-weight: 600; }
.migration-page .mp-prose ul, .migration-page .mp-prose ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.migration-page .mp-prose ul { list-style: disc; }
.migration-page .mp-prose ol { list-style: decimal; }
.migration-page .mp-prose li { margin: .4em 0; padding-left: .2em; }
.migration-page .mp-prose li::marker { color: var(--mp-muted); }
.migration-page .mp-prose blockquote { margin: 1.8em 0; padding: 0 0 0 clamp(18px, 2vw, 32px); border-left: 2px solid var(--mp-fg); font-size: 1.2em; line-height: 1.4; color: var(--mp-fg); letter-spacing: -.01em; }
.migration-page .mp-prose hr { border: 0; height: 1px; background: var(--mp-line); margin: 2.5em 0; }
.migration-page .mp-prose img, .migration-page .mp-prose video, .migration-page .mp-prose iframe { max-width: 100%; height: auto; border-radius: 16px; display: block; }
.migration-page .mp-prose iframe { width: 100%; aspect-ratio: 16/9; border: 0; }
.migration-page .mp-prose figure { margin: 2em 0; }
.migration-page .mp-prose figcaption { font-size: 13px; color: var(--mp-muted); margin-top: 10px; line-height: 1.5; }
.migration-page .mp-prose table { width: 100%; border-collapse: collapse; font-size: .85em; margin: 1.6em 0; display: block; overflow-x: auto; }
.migration-page .mp-prose th, .migration-page .mp-prose td { border-bottom: 1px solid var(--mp-line); padding: 12px 14px 12px 0; text-align: left; vertical-align: top; }
.migration-page .mp-prose th { color: var(--mp-fg); font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.migration-page .mp-prose code { font-size: .88em; padding: .1em .35em; border-radius: 6px; background: var(--mp-card); }
.migration-page .mp-prose pre { overflow-x: auto; padding: 18px; border-radius: 16px; background: var(--mp-card); font-size: 14px; }

/* Policies: tighter, document-like */
.migration-page .mp-prose--policy { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; }
.migration-page .mp-prose--policy h2, .migration-page .mp-prose--policy h3 { font-size: clamp(22px, 2vw, 30px); padding-top: 1em; border-top: 1px solid var(--mp-line); }

/* Clients: logo figures become a wall */
.migration-page .mp-prose--clients { max-width: none; margin-left: 0; }
.migration-page .mp-prose--clients .migration-client-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; background: #ffffff; border: 1px solid rgba(24,24,24,.2); border-radius: 24px; overflow: clip; margin-top: 32px; }
.migration-page .mp-prose--clients figure { margin: 0; min-width: 0; background: #ffffff; box-shadow: inset -1px -1px 0 rgba(24,24,24,.2); display: grid; place-items: center; aspect-ratio: 3/2; padding: clamp(12px, 1.6vw, 20px); }
.migration-page .mp-prose--clients figure img { display: block; margin: 0; height: 110px; max-height: 100%; width: 100%; max-width: 220px; object-fit: contain; border-radius: 0; }
.migration-page .mp-prose--clients figcaption { text-align: center; color: #6b6a66; }
@media (max-width: 39.999rem) {
  .migration-page .mp-prose--clients figure { aspect-ratio: 2/1; min-height: 88px; padding: 12px; }
  .migration-page .mp-prose--clients figure img { width: 78%; max-width: 120px; height: 60px; }
}
@media (min-width: 40rem) { .migration-page .mp-prose--clients .migration-client-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .migration-page .mp-prose--clients .migration-client-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Project / service: wider media */
.migration-page .mp-prose--project img, .migration-page .mp-prose--service img { border-radius: 24px; margin: 1.6em 0; }

/* Cards */
.migration-page .mp-list { padding-bottom: clamp(48px, 6vw, 96px); }
.migration-page .mp-list__head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 16px; margin-bottom: clamp(24px, 3vw, 48px); border-bottom: 1px solid var(--mp-line); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--mp-muted); }
.migration-page .mp-list__head span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--mp-fg); }
.migration-page .mp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 72px) 24px; }
.migration-page .mp-card, .migration-page .mp-card__link, .migration-page .mp-card__media { min-width: 0; }
@media (min-width: 48rem) { .migration-page .mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .migration-page .mp-grid > .mp-card:nth-child(even) { margin-top: clamp(0px, 8vw, 120px); } }
.migration-page .mp-card__link { display: grid; gap: 14px; color: inherit; text-decoration: none; }
.migration-page .mp-card__media { display: block; overflow: clip; border-radius: clamp(16px, 2vw, 28px); aspect-ratio: 4/3; background: var(--mp-card); position: relative; }
.migration-page .mp-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
/* Keep blog preview corners stable on hover. */
.migration-page:not(:where([data-migrated-path^="/blog/"], [data-migrated-path^="/category/"], [data-migrated-path^="/tag/"], [data-migrated-path^="/author/"])) .mp-card__link:hover .mp-card__media img { transform: scale(1.04); }
/* Blog previews fill consistent widescreen frames. */
.migration-page:is([data-migrated-path^="/blog/"], [data-migrated-path^="/category/"], [data-migrated-path^="/tag/"], [data-migrated-path^="/author/"]) .mp-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16/9;
}
.migration-page[data-migrated-path^="/blog/"] .mp-card__media img,
.migration-page[data-migrated-path^="/category/"] .mp-card__media img,
.migration-page[data-migrated-path^="/tag/"] .mp-card__media img,
.migration-page[data-migrated-path^="/author/"] .mp-card__media img {
  object-fit: cover;
  object-position: center;
  transform: none;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: clamp(16px, 2vw, 28px);
}
.migration-page.mp-type-post .mp-cover__frame img { object-fit: cover; object-position: center; }
.migration-page .mp-card--plain .mp-card__media { aspect-ratio: 16/9; display: grid; place-items: center; background: linear-gradient(135deg, var(--mp-card), color-mix(in srgb, var(--mp-card) 70%, var(--mp-accent) 8%)); }
.migration-page .mp-card__mono { font-size: clamp(56px, 9vw, 140px); font-weight: 500; letter-spacing: -.06em; color: var(--mp-fg); opacity: .14; transition: opacity .5s, transform .8s cubic-bezier(.16,1,.3,1); }
.migration-page .mp-card__link:hover .mp-card__mono { opacity: .3; transform: translateY(-4px); }
.migration-page .mp-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--mp-muted); }
.migration-page .mp-card__title { font-size: clamp(22px, 2.3vw, 34px); line-height: 1.08; letter-spacing: -.03em; font-weight: 500; color: var(--mp-fg); max-width: 22ch; }
.migration-page .mp-card__desc { font-size: 16px; line-height: 1.55; max-width: 48ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.migration-page .mp-card__link:focus-visible { outline: 2px solid var(--mp-fg); outline-offset: 6px; border-radius: 16px; }

.migration-page .mp-empty { padding: clamp(48px, 8vw, 120px) 24px; text-align: center; border: 1px dashed var(--mp-line); border-radius: 24px; margin-bottom: 64px; }
.migration-page .mp-empty a { color: var(--mp-fg); text-decoration: underline; }

/* Pagination */
.migration-page .mp-pager { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: clamp(56px, 7vw, 110px); }
.migration-page .mp-pager__item { min-width: 48px; height: 48px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mp-line); border-radius: 99px; font-weight: 500; font-size: 15px; color: var(--mp-fg); text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
.migration-page a.mp-pager__item:hover { border-color: var(--mp-fg); }
.migration-page .mp-pager__item.is-current { background: var(--mp-fg); color: var(--mp-bg); border-color: var(--mp-fg); }

/* Outro */
.migration-page .mp-outro { padding-bottom: clamp(64px, 9vw, 140px); }
.migration-page .mp-outro__rule { height: 1px; background: var(--mp-line); margin-bottom: clamp(40px, 6vw, 80px); }
.migration-page .mp-outro__grid { display: grid; gap: 32px; align-items: end; }
.migration-page .mp-outro__line { margin: 0; font-size: clamp(32px, 5.4vw, 80px); line-height: .98; letter-spacing: -.04em; font-weight: 500; color: var(--mp-fg); max-width: 14ch; }
.migration-page .mp-outro__line span { color: var(--mp-muted); }
.migration-page .mp-outro__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 64rem) { .migration-page .mp-outro__grid { grid-template-columns: 1fr auto; } }
.migration-page .mp-btn { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 26px; border: 1px solid var(--mp-fg); border-radius: 99px; color: var(--mp-fg); font-weight: 500; text-decoration: none; transition: background .3s, color .3s; }
.migration-page .mp-btn:hover, .migration-page .mp-btn--solid { background: var(--mp-fg); color: var(--mp-bg); }
.migration-page .mp-btn--solid:hover { background: transparent; color: var(--mp-fg); }
@media (max-width: 39.99rem) { .migration-page .mp-btn { width: 100%; justify-content: center; } }

@media (prefers-reduced-motion: reduce) {
  .migration-page * { transition: none !important; }
}