/* ==========================================================================
   MCOGL — Layout: containers, sections, the Counterflow geometry
   ========================================================================== */

.mc-container      { width: var(--container); margin-inline: auto; }
.mc-container--wide{ width: var(--container-wide); margin-inline: auto; }

.mc-section        { padding-block: var(--section-y); position: relative; }
.mc-section--tight { padding-block: calc(var(--section-y) * .62); }
.mc-section--bone  { background: var(--mc-bone); }
.mc-section--flush-top { padding-top: 0; }

/* Space above a heading is greater than below it. */
.mc-section-head { margin-bottom: var(--space-7); max-width: 52ch; }
.mc-section-head h2 { margin-bottom: var(--space-4); }
.mc-section-head p  { color: var(--mc-slate); max-width: 50ch; margin: 0; }
.mc-section-head--wide { max-width: 68ch; }

/* --------------------------------------------------------------------------
   Split field — the site's primary composition. Never 6/6.
   -------------------------------------------------------------------------- */
.mc-split {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 1024px) {
  .mc-split            { grid-template-columns: 7fr 5fr; gap: var(--space-9); }
  .mc-split--reverse   { grid-template-columns: 5fr 7fr; }
  .mc-split--reverse > :first-child { order: 2; }
  .mc-split--reverse > :last-child  { order: 1; }
  .mc-split--even      { grid-template-columns: 1fr 1fr; }
  .mc-split--center    { align-items: center; }
}

/* --------------------------------------------------------------------------
   Grids
   -------------------------------------------------------------------------- */
.mc-grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px)  { .mc-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .mc-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .mc-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mc-grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px)  { .mc-grid--4 { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------------------
   COUNTERFLOW — the signature geometry.
   Two opposing planes derived from the logo's droplet/swoosh counter-curve.
   Meeting point is always off-centre (38% or 62%), never 50%.
   -------------------------------------------------------------------------- */
.mc-counterflow {
  position: relative;
  background: var(--mc-ink-900);
  color: var(--mc-on-dark-2);
  overflow: hidden;
  isolation: isolate;
}
.mc-counterflow::before,
.mc-counterflow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Blue plane enters from the left */
.mc-counterflow::before {
  background: linear-gradient(165deg, var(--mc-blue-600) 0%, var(--mc-blue-700) 100%);
  opacity: .28;
  clip-path: polygon(0 0, 38% 0, 22% 100%, 0 100%);
}
/* Red wedge answers from the right — deliberately much smaller */
.mc-counterflow::after {
  background: linear-gradient(200deg, var(--mc-red-500), transparent 80%);
  opacity: .22;
  clip-path: polygon(78% 0, 100% 0, 100% 100%, 92% 100%);
}
.mc-counterflow--right::before {
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 78% 100%);
  opacity: .24;
}
.mc-counterflow--right::after {
  clip-path: polygon(0 0, 14% 0, 8% 100%, 0 100%);
  opacity: .18;
}

/* --------------------------------------------------------------------------
   Media well — arc on exactly one corner, echoing the swoosh
   -------------------------------------------------------------------------- */
.mc-well {
  position: relative;
  overflow: hidden;
  background: var(--mc-ink-850);
  border-radius: var(--radius) var(--radius) var(--radius) var(--radius-arc);
}
.mc-well--tr { border-radius: var(--radius) var(--radius-arc) var(--radius) var(--radius); }
.mc-well--br { border-radius: var(--radius) var(--radius) var(--radius-arc) var(--radius); }
.mc-well img { width: 100%; height: 100%; object-fit: cover; }
.mc-well--4x3 { aspect-ratio: 4 / 3; }
.mc-well--3x2 { aspect-ratio: 3 / 2; }
.mc-well--1x1 { aspect-ratio: 1 / 1; }
.mc-well--tall{ aspect-ratio: 4 / 5; }
.mc-well__scrim { position: absolute; inset: 0; background: var(--scrim-well); }
.mc-well__cap {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--mc-muted);
}
@media (max-width: 640px) { .mc-well { border-radius: var(--radius) var(--radius) var(--radius) 48px; } }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.mc-hero {
  position: relative;
  min-height: 92dvh;
  display: flex;
  align-items: flex-end;
  background: var(--mc-ink-900);
  overflow: hidden;
  isolation: isolate;
}
.mc-hero__media { position: absolute; inset: 0; z-index: -2; }
.mc-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.mc-hero__scrim { position: absolute; inset: 0; z-index: -1; background: var(--scrim-hero); }

/* Counterflow planes over the photograph */
.mc-hero__flow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.mc-hero__flow::before,
.mc-hero__flow::after { content: ''; position: absolute; inset: 0; }
.mc-hero__flow::before {
  background: linear-gradient(150deg, var(--mc-blue-600), transparent 70%);
  opacity: .30;
  clip-path: polygon(0 0, 46% 0, 26% 100%, 0 100%);
}
.mc-hero__flow::after {
  background: var(--mc-red-500);
  opacity: .16;
  clip-path: polygon(46% 0, 51% 0, 31% 100%, 26% 100%);
}

.mc-hero__inner {
  width: var(--container);
  margin-inline: auto;
  padding-block: clamp(3rem, 9vh, var(--space-9)) clamp(3.5rem, 11vh, 7rem);
  position: relative;
}
.mc-hero__content { max-width: 58ch; }
.mc-hero h1 {
  color: #fff;
  font-size: var(--fs-display);
  font-variation-settings: 'wdth' var(--wd-expanded), 'wght' 700;
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin-bottom: var(--space-5);
  max-width: 17ch;
}
.mc-hero__lede {
  font-size: var(--fs-lede);
  color: var(--mc-on-dark);
  max-width: 46ch;
  margin-bottom: var(--space-7);
  line-height: 1.55;
}
.mc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Interior page hero — shorter, same language */
.mc-phero {
  position: relative;
  background: var(--mc-ink-900);
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(7rem, 15vh, 10rem) clamp(3rem, 7vh, 4.5rem);
}
.mc-phero__media { position: absolute; inset: 0; z-index: -2; opacity: .5; }
.mc-phero__media img { width: 100%; height: 100%; object-fit: cover; }
.mc-phero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(8,12,17,.96) 0%, rgba(17,24,32,.80) 58%, rgba(17,24,32,.55) 100%);
}
.mc-phero__flow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(160deg, var(--mc-blue-600), transparent 62%);
  opacity: .26;
  clip-path: polygon(0 0, 40% 0, 20% 100%, 0 100%);
}
.mc-phero h1 { color: #fff; max-width: 20ch; margin-bottom: var(--space-4); }
.mc-phero__lede { color: var(--mc-on-dark); font-size: var(--fs-lede); max-width: 54ch; }

/* --------------------------------------------------------------------------
   Positioning strip — sits under the hero, never inside it
   -------------------------------------------------------------------------- */
.mc-strip {
  background: var(--mc-ink-950);
  border-top: 1px solid var(--mc-ink-700);
  padding-block: var(--space-5);
}
.mc-strip__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-4) var(--space-6);
}
.mc-strip__regions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.mc-strip__regions span {
  font-family: var(--ff-mono); font-size: var(--fs-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--mc-on-dark-2);
}
.mc-strip__regions i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--mc-red-500); display: inline-block; flex: none;
}
.mc-strip__reg {
  font-family: var(--ff-mono); font-size: var(--fs-mono);
  color: var(--mc-muted); letter-spacing: .04em;
}

@media (max-width: 900px) {
  .mc-hero { min-height: 88dvh; }
  .mc-hero__flow::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: .2; }
  .mc-hero__flow::after  { display: none; }
}