/* ============================================
   Modern agency layer: page-level additions for About, Contact and the blog index.
   Loaded after css/modern.css; scoped to <body class="modern"> (blog index also has
   .modern-blog). Nothing here touches the homepage.
   ============================================ */

/* ---------- Page hero ---------- */
.modern .page-hero.oz-banner-hero { border-bottom: 1px solid var(--mx-line); }
.modern .page-hero > .container { position: relative; z-index: 1; }
.modern .page-hero .mx-ambient { z-index: 0; opacity: 0.75; }
.modern .page-hero .eyebrow {
  position: relative; color: #fff; font: 700 0.7rem var(--font-head); letter-spacing: 0.18em; padding: 9px 20px 9px 34px;
  background: rgba(203, 31, 44, 0.16); border: 1px solid rgba(203, 31, 44, 0.55);
}
.modern .page-hero .eyebrow::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 8px; height: 8px; transform: translateY(-50%); border-radius: 50%;
  background: var(--mx-red-hot); animation: mxPing 2.2s ease-out infinite;
}
.modern .page-hero h1 { font-size: var(--hero-h1); font-weight: 700; letter-spacing: -0.045em; line-height: 1.04; text-wrap: balance; }
.mx-hl { font-weight: 800; background: var(--mx-red-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.modern .page-hero .lede { color: #d4d4d4; font-size: var(--hero-lede); line-height: 1.5; }

/* ---------- Information strip (new) ---------- */
.mx-strip { background: #000; border-bottom: 1px solid var(--mx-line); padding: 0; }
.mx-strip ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; margin: 0 auto; padding: 0 24px; list-style: none; }
.mx-strip li {
  display: flex; align-items: center; justify-content: center; gap: 14px; padding: 22px 12px; text-align: center;
  font: 700 0.78rem var(--font-head); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; border-left: 1px solid var(--mx-line);
}
.mx-strip li:first-child { border-left: 0; }
.mx-strip li::before {
  content: ""; width: 16px; height: 16px; flex: none; background: var(--mx-red-hot);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

/* ---------- About ---------- */
.modern .two-col > .card {
  position: relative; border: 1px solid transparent; border-radius: 24px; padding: 34px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.modern .two-col > .card::after, .modern .contact-info-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--mx-a), rgba(255, 255, 255, 0.12) 0 55%, rgba(255, 90, 102, 1) 76%, rgba(255, 255, 255, 0.12) 92% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: mxSpin 8s linear infinite;
}
.modern .two-col > .card h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.modern .check-list li svg { color: var(--mx-red-soft); }
.modern .two-col h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.035em; color: #fff; text-wrap: balance; }
.modern .two-col h2 em {
  --mx-mark: rgba(203, 31, 44, 0.95); font-style: normal; font-weight: 800; color: #fff; padding: 0 0.1em; margin: 0 -0.02em;
  background: linear-gradient(var(--mx-mark), var(--mx-mark)) 0 74% / 100% 0.34em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.modern .two-col .eyebrow { display: inline-flex; padding: 8px 16px 8px 14px; font: 700 0.7rem var(--font-head); letter-spacing: 0.2em; color: #FFB4BA; background: rgba(203, 31, 44, 0.13); border: 1px solid rgba(203, 31, 44, 0.5); border-radius: 999px; }
.modern .two-col .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mx-red-hot); animation: mxPing 2.2s ease-out infinite; }
.modern .img-frame, .modern .founder-photo { border-radius: 24px; }
.modern .img-frame { box-shadow: 16px 16px 0 -2px rgba(203, 31, 44, 0.32), 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.modern .about-photo-band { border-top: 1px solid var(--mx-line); border-bottom: 1px solid var(--mx-line); }
.modern .about-photo-band-caption { font-weight: 600; }
.modern .founder-grid h3 { font-weight: 700; letter-spacing: -0.02em; }

/* numbered case-study cards */
.modern .section-head + .grid-2 { counter-reset: mxc; gap: 26px; }
.modern .section-head + .grid-2 > .card {
  counter-increment: mxc; position: relative; overflow: hidden; border-radius: 22px; padding: 46px 32px 32px; border-color: var(--mx-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
}
.modern .section-head + .grid-2 > .card::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: linear-gradient(90deg, #FF3B47, #CB1F2C); transition: width 0.5s var(--ease-out); }
.modern .section-head + .grid-2 > .card:hover::before { width: 100%; }
.modern .section-head + .grid-2 > .card::after {
  content: "0" counter(mxc); position: absolute; right: 24px; top: 14px; font-weight: 800; font-size: 4rem; line-height: 1; letter-spacing: -0.05em; color: rgba(203, 31, 44, 0.24); pointer-events: none; transition: color 0.3s ease;
}
.modern .section-head + .grid-2 > .card:hover::after { color: rgba(255, 59, 71, 0.6); }
.modern .section-head + .grid-2 > .card h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }

/* ---------- Contact ---------- */
.modern .contact-info-card {
  position: relative; border: 1px solid transparent; border-radius: 26px; padding: 38px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.modern .contact-info-card h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.modern .contact-info-card .row { align-items: center; gap: 16px; margin-bottom: 20px; }
.modern .contact-info-card .row svg { box-sizing: content-box; width: 20px; height: 20px; padding: 11px; margin-top: 0; border-radius: 14px; color: #fff; background: rgba(203, 31, 44, 0.16); border: 1px solid rgba(203, 31, 44, 0.55); }
.modern .contact-info-card a:hover { color: var(--mx-red-soft); }
.modern .social-links a { border-color: var(--mx-line-strong); }
.modern .contact-grid > div:last-child { padding: 38px; border-radius: 26px; border: 1px solid var(--mx-line); background: rgba(255, 255, 255, 0.03); }
.modern .contact-grid > div:last-child > h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.modern input, .modern textarea, .modern select { background: rgba(255, 255, 255, 0.05); border-color: var(--mx-line-strong); border-radius: 12px; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.modern input:hover, .modern textarea:hover, .modern select:hover { border-color: rgba(255, 90, 102, 0.55); }
.modern input:focus, .modern textarea:focus, .modern select:focus { outline: none; border-color: var(--mx-red-hot); box-shadow: 0 0 0 4px rgba(203, 31, 44, 0.28); background: rgba(255, 255, 255, 0.07); }
.modern #lead-submit:not(.is-disabled) { background: var(--accent); box-shadow: 0 16px 46px -14px rgba(203, 31, 44, 0.95); }

/* ---------- Blog index ---------- */
.modern .blog-card { border-radius: 22px; overflow: hidden; border-color: var(--mx-line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); }
.modern .blog-card .meta { color: #FF8A92; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.72rem; font-weight: 700; }
.modern .blog-card h3 { font-weight: 700; letter-spacing: -0.015em; }
.modern-blog .grid-3 { gap: 26px; }
.modern-blog .grid-3 > .blog-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.modern-blog .grid-3 > .blog-card:first-child .thumb { height: 100%; min-height: 320px; position: relative; }
.modern-blog .grid-3 > .blog-card:first-child .thumb a { position: absolute; inset: 0; display: block; }
.modern-blog .grid-3 > .blog-card:first-child .thumb img { width: 100%; height: 100%; object-fit: cover; }
.modern-blog .grid-3 > .blog-card:first-child .body { padding: 44px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.modern-blog .grid-3 > .blog-card:first-child .body::before {
  content: "Latest article"; display: inline-block; margin-bottom: 18px; padding: 6px 14px; border-radius: 999px; background: rgba(203, 31, 44, 0.14); border: 1px solid rgba(203, 31, 44, 0.55);
  color: #FFB4BA; font: 700 0.68rem var(--font-head); letter-spacing: 0.18em; text-transform: uppercase;
}
.modern-blog .grid-3 > .blog-card:first-child h3 { font-size: clamp(1.5rem, 2.5vw, 2.15rem); line-height: 1.15; letter-spacing: -0.03em; }
.modern-blog .grid-3 > .blog-card:first-child p { font-size: 1rem; line-height: 1.7; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .modern-blog .grid-3 > .blog-card:first-child { grid-template-columns: minmax(0, 1fr); }
  .modern-blog .grid-3 > .blog-card:first-child .thumb { min-height: 220px; }
  .modern-blog .grid-3 > .blog-card:first-child .body { padding: 30px 26px; }
}
@media (max-width: 640px) {
  .mx-strip ul { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
  .mx-strip li { border-left: 0; border-top: 1px solid var(--mx-line); padding: 16px 8px; justify-content: flex-start; }
  .mx-strip li:first-child { border-top: 0; }
  .modern .contact-info-card, .modern .contact-grid > div:last-child { padding: 26px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .modern .two-col > .card::after, .modern .contact-info-card::after, .modern .page-hero .eyebrow::before, .modern .two-col .eyebrow::before { animation: none; }
}