/* Migdalor — the brand system, applied.
   Migdalor_Brand_System_v1.pdf is the spec; this sheet is its only
   implementation. Four rules it keeps:

   1. FOUR COLOURS. Navy anchors and carries all text, lime is the beam,
      lavender softens, off-white breathes. Working ratio off-white 60 /
      navy 30 / lime 7 / lavender 3 — lime earns its impact by being scarce.
      Where a lighter tone is needed it is one of these at a fixed opacity,
      never a new hue and never grey.
   2. ONE TYPEFACE. DM Sans. Hierarchy comes from weight and scale, never
      from a second family.
   3. LIME IS A SURFACE, NEVER TEXT ON LIGHT. The brand book measures it at
      1.4:1 on white. It is a bar, a fill, a rule — never a word you read.
   4. ONE SPACING SCALE, one page gutter, so edges line up down the page.

   The three graphic devices — the beam rule, the light sweep, the soft
   chips — are the only decoration. Everything else is whitespace.
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;900&display=swap');

:root {
  --navy:     #1c194b;
  --lime:     #d6df44;
  --lavender: #cbb1d5;
  --cream:    #eeeeea;

  /* the navy tint scale from the brand book — used instead of grey/black */
  --navy-80: rgba(28, 25, 75, 0.80);
  --navy-60: rgba(28, 25, 75, 0.60);   /* caption colour, per spec */
  --navy-40: rgba(28, 25, 75, 0.40);
  --navy-20: rgba(28, 25, 75, 0.20);
  --navy-12: rgba(28, 25, 75, 0.12);   /* hairlines */
  --navy-08: rgba(28, 25, 75, 0.08);

  --lav-40:  rgba(203, 177, 213, 0.40); /* the chip / soft panel surface */
  --lav-18:  rgba(203, 177, 213, 0.18);
  --lime-18: rgba(214, 223, 68, 0.18);

  /*> ONE COLOUR PER PILLAR. Three of the four brand colours are spoken for as
      identities — culture lime, innovation navy, impact lavender — leaving
      off-white as the canvas they all sit on. Nothing new was invented: the
      palette already had exactly three colours and there are exactly three
      pillars. The wash values are the same hues at the low opacity a card
      needs to tint without swallowing a partner's logo. <*/
  --pillar-culture:    #d6df44;
  --pillar-innovation: #1c194b;
  --pillar-impact:     #cbb1d5;

  --wash-culture:    rgba(214, 223, 68, 0.38);
  --wash-innovation: rgba(28, 25, 75, 0.34);
  --wash-impact:     rgba(203, 177, 213, 0.62);

  /* one spacing scale */
  --s1: 0.4rem;
  --s2: 0.8rem;
  --s3: 1.4rem;
  --s4: 2.4rem;
  --s5: 4rem;
  --s6: 6.5rem;

  --gutter: clamp(1.5rem, 6vw, 6rem);
  --measure: 62ch;            /* body max width, per spec */
  --radius: 2px;              /* nearly square — calm, not friendly */
  --radius-card: 6px;         /* portfolio cards only: enough to soften, not to round */
  --beam: 44px;               /* the beam rule's length */

  /* point the framework's own tokens at the brand so components we never
     style by hand still land on-palette */
  --z-primary: #1c194b;
  --z-primary-contrast: #d6df44;
  --z-secondary: #cbb1d5;
  --z-bg: #eeeeea;
  --z-accent: #cbb1d5;
  --color-success: #d6df44;
  --color-info: #cbb1d5;
}

/* ── canvas ───────────────────────────────────────────────────────────── */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: var(--lime); color: var(--navy); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

/* ── type scale, straight off the brand book ──────────────────────────── */

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--navy); }

.mg-hero-title,
h1 {
  font-weight: 900;
  font-size: clamp(2.25rem, 5.2vw, 3.25rem);  /* 36 → 52px */
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.mg-page-landing .mg-hero-title {
  font-size: clamp(2.5rem, 6.4vw, 4rem);       /* the one display size */
}

.mg-section-title, h2 {
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.625rem);   /* 26px */
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.mg-card-title, h3 {
  font-weight: 600;
  font-size: 1.1875rem;                        /* 19px */
  line-height: 1.35;
}

.mg-eyebrow {
  font-weight: 600;
  font-size: 0.8125rem;                        /* 13px */
  line-height: 1.3;
  letter-spacing: 0.22em;                      /* +22%, per spec */
  text-transform: uppercase;
  color: var(--navy-60);
  margin: 0;
}

.mg-lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.55;
  max-width: 54ch;
  color: var(--navy-80);
  margin: 0;
}

.mg-body {
  font-size: 1rem;
  line-height: 1.6;
  max-width: var(--measure);
  margin: 0;
}

.mg-body p { margin: 0 0 var(--s3); }
.mg-body p:last-child { margin-bottom: 0; }

.mg-note {
  font-size: 0.8125rem;
  color: var(--navy-60);
}

/* the marker-pen highlight zMD's ==syntax== emits — used on the legal
   pages to mark what is still missing, so a gap is impossible to skim past */
.mg-body mark, .mg-note mark {
  background: var(--lime);
  color: var(--navy);
  padding: 0.1em 0.35em;
  border-radius: var(--radius);
  font-weight: 600;
}

/* ── the beam rule: a 4px lime bar opening every section ──────────────── */

.mg-section-title,
.mg-section-eyebrow,
.mg-legal-heading {
  position: relative;
  padding-top: var(--s3);
}

.mg-section-title::before,
.mg-section-eyebrow::before,
.mg-legal-heading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: var(--beam);
  height: 4px;
  background: var(--lime);
}

/* ── page frame ───────────────────────────────────────────────────────── */

.mg-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--s5) var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}

/*> the page's bottom padding is gone. Every page now ends in %SiteFooter, and
    that padding used to land AFTER it — a page-column-width gap of pure
    off-white below the footer's own already-off-white background, doing
    nothing visible except adding scroll height. The footer supplies its own
    bottom padding; the page does not need to add more. <*/

/*> no top padding where a full-bleed hero opens the page — the film should
    meet the bar with nothing between them. The breathing room moves inside
    the hero instead, between the film and the first line of type. <*/
.mg-page-landing,
.mg-page-pillar { padding-top: 0; }

.mg-page-landing .mg-hero,
.mg-page-pillar .mg-hero { gap: var(--s5); }

/* ── hero ─────────────────────────────────────────────────────────────── */

.mg-hero {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.mg-hero-media {
  width: 100%;
  border-radius: var(--radius);
  background: var(--navy);
}

/*> FULL BLEED. `.mg-page` is a centred 1180px column with a gutter, so an
    image inside it can never reach the window edge on its own. `calc(50% -
    50vw)` measures from the container's own centre out to the viewport edge,
    which works whatever the gutter happens to be at that breakpoint — no
    magic numbers, nothing to keep in sync with the container width.

    It is the STAGE that bleeds, not the image, so the overlay can be
    positioned against the full-width frame. <*/
.mg-hero-stage {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: block;
  isolation: isolate;
}

/*> height is capped rather than left to a 16:9 ratio: at 100vw a 16:9 film is
    over 700px tall on a laptop, which pushes everything else off the screen.
    `cover` crops instead, so the frame stays cinematic. <*/
.mg-page-landing .mg-hero-media,
.mg-page-pillar .mg-hero-media {
  width: 100%;
  height: min(78vh, 760px);
  object-fit: cover;
  border-radius: 0;
  display: block;
}

/*> a scrim, not a guess. The commissioned animation is not made yet and the
    Culture film is a real video — neither has a predictable brightness where
    the words land, and lime on a pale frame fails contrast badly. A gradient
    weighted to the bottom guarantees the type always has something dark
    beneath it, while leaving the top of the image untouched. <*/
.mg-hero-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28,25,75,0.78) 0%, rgba(28,25,75,0.35) 34%, rgba(28,25,75,0) 62%);
  pointer-events: none;
  z-index: 1;
}

.mg-hero-overlay {
  position: absolute;
  left: calc(max(0px, (100vw - 1180px) / 2) + var(--gutter));
  right: var(--gutter);
  bottom: clamp(2rem, 6vw, 4.5rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  max-width: min(44rem, 62vw);
}

.mg-hero-mark {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lavender);
  margin: 0;
}

/*> lime on navy — the brand book's SIGNATURE pairing, and the reason the
    scrim above is navy rather than plain black. <*/
.mg-hero-title-over {
  color: var(--lime);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}

.mg-hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  max-width: 46rem;
}

/* ── the three pillar doors ───────────────────────────────────────────── */

/*> THE INTRO — copy left, beams right, from Yael's sketch. Two columns that
    collapse to one on a narrow screen. `align-items: center` keeps the cluster
    optically level with the paragraph rather than hanging off its first line. <*/
.mg-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

/*> THE THREE LIGHT SPOTS, now a TRIANGLE: culture above, innovation and impact
    beneath. Absolute placement inside a box sized in multiples of the disc, so
    the whole cluster scales as one thing and the overlaps never drift.
    
    The centres sit 0.79 and 0.75 of a diameter apart, which is what produces
    an overlap of roughly a fifth — enough for the multiply blend to show a
    compounded colour where two beams cross, without either disc swallowing
    its neighbour's label.
    
    `isolation: isolate` keeps the blending inside the cluster instead of
    letting it react to the page. <*/
.mg-pillars {
  --d: clamp(132px, 14vw, 196px);
  position: relative;
  width: calc(var(--d) * 1.75);
  height: calc(var(--d) * 1.7);
  margin: 0 auto;
  isolation: isolate;
}

.mg-pillars .mg-spot {
  position: absolute;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/*> culture on top, centred; the other two below, left and right. <*/
.mg-pillars .mg-spot-culture    { top: 0; left: calc(var(--d) * 0.375); }
.mg-pillars .mg-spot-innovation { top: calc(var(--d) * 0.7); left: 0; }
.mg-pillars .mg-spot-impact     { top: calc(var(--d) * 0.7); left: calc(var(--d) * 0.75); }

/*> LIGHT, not paint. The disc is held under full opacity so the canvas reads
    through it, and the radial falloff keeps the centre strongest — a beam
    thrown on a surface rather than a filled circle. <*/
.mg-pillars .mg-spot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%,
              var(--spot) 0%,
              var(--spot) 52%,
              color-mix(in srgb, var(--spot) 82%, transparent) 100%);
  opacity: 0.72;
  mix-blend-mode: multiply;
  z-index: -1;
  transition: opacity 260ms ease, filter 260ms ease;
}

.mg-pillars .mg-spot-culture    { --spot: var(--pillar-culture); }
.mg-pillars .mg-spot-innovation { --spot: var(--pillar-innovation); color: var(--lime); }
.mg-pillars .mg-spot-impact     { --spot: var(--pillar-impact); }

/*> hovering turns the lamp UP — more opacity and brightness in the disc's own
    colour. Nothing changes hue, so the palette stays the four brand colours in
    every state. The two `.zBtn-primary` overrides are load-order defence: that
    rule is declared later in this sheet and would otherwise repaint the navy
    disc lime and flip its label to navy. <*/
.mg-pillars .mg-spot:hover { transform: scale(1.04); z-index: 3; }
.mg-pillars .mg-spot:hover::before { opacity: 0.94; filter: brightness(1.1); }

.mg-pillars .mg-spot.zBtn-primary:hover,
.mg-pillars .mg-spot.zBtn-primary:focus { background: transparent; }

.mg-pillars .mg-spot-culture.zBtn-primary:hover,
.mg-pillars .mg-spot-impact.zBtn-primary:hover { color: var(--navy); }

.mg-pillars .mg-spot-innovation.zBtn-primary:hover { color: var(--lime); }

.mg-pillars .mg-spot:focus-visible { z-index: 3; }

@media (max-width: 860px) {
  .mg-intro { grid-template-columns: 1fr; gap: var(--s4); }
  .mg-pillars { margin: 0; }
}

/* ── buttons ──────────────────────────────────────────────────────────── */

/*> given more presence than a default button: the three pillar doors are the
    main act of the landing page, and at 15px in a tight box they read as form
    controls rather than as the way into the site. Caps + tracking + real
    padding makes them deliberate. <*/
.zBtn {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: var(--radius);
  border: 1px solid var(--navy);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

/* navy on lime — the brand book's STRONG pairing, for calls to action */
.zBtn-primary {
  background: var(--navy);
  color: var(--lime);
}
.zBtn-primary:hover { background: var(--lime); color: var(--navy); }

.zBtn-secondary {
  background: transparent;
  color: var(--navy);
}
.zBtn-secondary:hover { background: var(--lav-40); }

/* ── navbar ───────────────────────────────────────────────────────────── */

/*> the bar is LIME with navy on it — the brand book's "STRONG" pairing, and
    the one Yael asked for. It is also the single biggest lime surface on the
    site, which is a deliberate departure from the book's 7% guidance: a
    header is the one place the signature colour earns being unmissable.
    Everything below it stays disciplined so this reads as the accent rather
    than as the theme.

    No light sweep here — that device is a lime glow FOR navy surfaces. On
    lime it would be invisible at best and muddy at worst. <*/
/*> the bar's padding has to reproduce where `.mg-page` actually starts, or
    the wordmark sits left of the headline beneath it and the whole page looks
    off its axis. `.mg-page` is a centred 1180px column PLUS a gutter, so the
    content edge is (viewport − 1180)/2 + gutter once the window is wider than
    the column, and just the gutter below that. The max() expresses exactly
    that, with no breakpoint to keep in sync. <*/
.zNavbar {
  background: var(--lime);
  padding: 0 calc(max(0px, (100vw - 1180px) / 2) + var(--gutter));
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--s4);
  position: sticky;
  top: 0;
  z-index: 100;
}

/*> the framework paints the bar with a `zNavbar-light` theme class, whose own
    rules out-specify a bare `.zNav-link`. That is what left the navigation
    navy-on-navy and effectively invisible in the first screenshot pass. These
    selectors carry the container class so they win on specificity rather than
    on !important. <*/
/*> caps with wide tracking, matching the live bar. It is the eyebrow style
    from the brand book used at navigation size — the same voice, so the bar
    belongs to the same system as the section headings below it. <*/
.zNavbar .zNavbar-nav .zNav-item,
.zNavbar .zNavbar-nav .zNav-link,
.zNavbar a {
  color: var(--navy);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;          /* the book: navy on lime stays SemiBold+ */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;            /* one baseline for every item */
  padding: 0;
}

/*> the wordmark replaces the word. `zBrand: Migdalor` still supplies the text
    — it is what a screen reader announces and what the zCLI menu prints —
    so the text is pushed out of view rather than deleted. <*/
.zNavbar .zNavbar-brand {
  display: block;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  /*> absolute, not relative. This sheet is served from /styles/, so
      `../img/…` resolved to /img/… and 404'd — the mark simply never
      appeared. Static assets are mounted at /static/. <*/
  background: url('/static/img/logo-navy.png') left center / contain no-repeat;
  text-indent: -200vw;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
}

/*> nowrap is the fix for "Contact hanging low". It was never a vertical
    alignment problem — the bar ran out of room, Contact wrapped to a second
    flex line, and a centred bar dropped that line below the first. <*/
/*> `zNavBar .zNavbar .zNavbar-nav` is included alongside the plain class
    selector because zbase.css carries its OWN mobile breakpoint at 768px —
    `zNavBar .zNavbar .zNavbar-nav { gap: 0 }`, tag-qualified so it outranks a
    bare two-class selector on specificity. That rule fires in exactly the
    641–768px gap between this sheet's own 640px and 860px breakpoints, which
    is tablet width — the nav items collapsed onto one baseline with the gap
    silently zeroed, reading as "HOMECULTUREINNOVATION…". Matching the
    tag-qualified selector here wins the tie (later in source, equal
    specificity) without touching the phone behaviour below 640px, which
    already wins outright on a further, higher-specificity rule. <*/
zNavBar .zNavbar .zNavbar-nav,
.zNavbar .zNavbar-nav {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

/*> THE "CONTACT HANGS LOW" BUG, and it was not Contact's fault. zbase.css
    gives every list item a 6.4px bottom margin and then resets it on
    :last-child. In a vertical list that is invisible. In a horizontal flex
    row with align-items:center, an item is centred INCLUDING its margin box,
    so the four items carrying a bottom margin float ~3.2px high and Contact,
    with none, sits where all five actually belong. Zeroing the margin puts
    every item on one baseline. <*/
.zNavbar .zNavbar-nav .zNav-item {
  display: flex;
  align-items: center;
  margin: 0;
}

/*> the underline grows from the left on hover rather than appearing at full
    width — the same gesture as the beam rule opening a section. <*/
.zNavbar .zNavbar-nav .zNav-link {
  position: relative;
  padding-bottom: 3px;
}

.zNavbar .zNavbar-nav .zNav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--navy);
  transition: width 180ms ease;
}

.zNavbar .zNavbar-nav .zNav-link:hover::after { width: 100%; }

/*> the current page is underlined outright, as on the live bar — a persistent
    marker, not a hover state, so you always know where you are. <*/
.zNavbar .zNavbar-nav .zNav-link.active::after,
.zNavbar .zNavbar-nav .zNav-link[aria-current]::after,
.zNavbar .zNavbar-nav .zNav-item.active .zNav-link::after { width: 100%; }

.zNavbar .zNavbar-collapse {
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

/*> five short words fit on two lines at 390px, so the bar never collapses.
    The framework's toggler rendered as an invisible smudge on the navy and
    left the whole site unnavigable on a phone — and a hamburger that needs
    JS to open is a worse bet than simply not needing one. <*/
/*> `.zNavbar .zNavbar-toggler` was NOT enough — the framework's own rule
    carries the theme class (`.zNavbar-light .zNavbar-toggler`), ties on
    specificity, and wins on load order, so the hamburger kept rendering
    above an already-open nav. Matching the theme class puts this at three
    classes, which wins outright without reaching for !important. <*/
.zNavbar.zNavbar-light .zNavbar-toggler,
.zNavbar.zNavbar-dark .zNavbar-toggler,
.zNavbar .zNavbar-toggler { display: none; }


/*> the framework stacks the nav into a column once it is uncollapsed, which
    turned a five-item bar into a 250px-tall wall above the fold on a phone.
    Five short words wrap onto two rows instead. <*/
.zNavbar .zNavbar-collapse .zNavbar-nav {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/*> tablet-width fix, second half. Restoring the gap above let all six items
    fit their own text again, but the rule directly above allows wrapping
    UNCONDITIONALLY, and at 641–768px six items plus a full var(--s4) gap
    (38.4px × 5 = 192px) genuinely do not fit the available width — "Contact"
    wrapped onto its own line, reintroducing the exact "hangs low" look this
    file already has one write-up for, just from a new cause.

    Forcing nowrap back needs to beat the SAME unconditional rule, which is
    also 3 classes — so this one adds the `zNavBar` tag qualifier zbase.css
    itself uses to win specificity fights, same trick as the gap fix above.
    Tightening the gap to `--s3` in this one band is what makes one row
    actually fit: six items + 5×22.4px = 531px against roughly 574px
    available at 768px, where the full `--s4` gap needed 611px. <*/
@media (min-width: 641px) and (max-width: 860px) {
  zNavBar .zNavbar .zNavbar-collapse .zNavbar-nav,
  .zNavbar .zNavbar-collapse .zNavbar-nav {
    flex-wrap: nowrap;
  }
  zNavBar .zNavbar .zNavbar-nav,
  .zNavbar .zNavbar-nav {
    gap: var(--s3);
  }
}

/*> below 640px five items cannot hold one line, so here — and only here —
    wrapping is allowed, and the bar stops being sticky so it does not eat a
    phone screen. <*/
@media (max-width: 640px) {
  .zNavbar {
    position: static;
    min-height: 0;
    padding: var(--s3) var(--gutter);
    flex-wrap: wrap;
    gap: var(--s2);
  }
  /*> the mark was clipping against the top of the bar: at 38px in a bar with
      only s2 of padding there was nothing left for it to sit in. <*/
  .zNavbar .zNavbar-brand { width: 44px; height: 44px; }
  .zNavbar .zNavbar-collapse { flex: 1 1 100%; justify-content: flex-start; }
  .zNavbar .zNavbar-collapse .zNavbar-nav { flex-wrap: wrap; gap: var(--s2) var(--s3); }
}

/* ── portfolio: the landing logo grid ─────────────────────────────────── */

/*> every section is a flex column with its own internal rhythm. Without this
    the beam-ruled heading sat flush against its first line of body copy —
    the rule reads as decoration attached to the paragraph rather than as the
    opening of a section. <*/
.mg-approach, .mg-board, .mg-people {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.mg-portfolio { display: flex; flex-direction: column; gap: var(--s4); }

/*> the hairline grid is drawn by each TILE's own outline, not by a coloured
    grid background showing through 1px gaps. Five ventures in a two-column
    mobile grid leave a sixth cell empty, and with the background trick that
    empty cell rendered as a solid grey block — a phantom sixth venture. <*/
/*> ONE SCROLLING ROW, from Yael's sketch: square cards running left to right
    across the whole screen, pillars interleaved rather than grouped, and more
    of them arriving off the right edge as the portfolio grows.
    
    It bleeds the full viewport width but its padding reproduces where the page
    column starts, so the first card lines up with "PORTFOLIO" above it while
    the row itself runs to the edges. That is what makes it read as a strip
    that continues rather than a grid that ended.

    Native horizontal scrolling — trackpad, touch, shift-wheel. The sketch's
    arrows would need a click handler, which means a plugin; the edge fade
    below is the CSS-only way to say "there is more this way". <*/
/*> EDGE TO EDGE, both sides. The row used to open with the same left inset as
    the page column, so the first card lined up under "PORTFOLIO" — but that
    meant a strip meant to feel boundless started behind a wall of margin
    identical to a normal paragraph's. Yael's sketch marks exactly that gap and
    asks for the row to claim it.
    
    "PORTFOLIO" keeps its normal column indent above — only the row of squares
    breaks out to the true edges, which is what makes it read as a gallery
    escaping the page rather than the whole section shifting. <*/
.mg-logo-grid {
  display: flex;
  gap: var(--s3);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: var(--s1) 0 var(--s3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--navy-20) transparent;
  -webkit-overflow-scrolling: touch;
}

/*> the first square still needs SOME clearance from the true edge — flush
    against it reads as a mis-crop, not a deliberate bleed. A spacer the width
    of the ordinary CARD gap (not the page gutter) keeps that clearance
    minimal, so the row reads as genuinely edge-to-edge rather than as the
    same inset in a smaller size. <*/
.mg-logo-grid::before {
  content: '';
  flex: 0 0 var(--s3);
}

.mg-logo-grid::-webkit-scrollbar { height: 6px; }
.mg-logo-grid::-webkit-scrollbar-thumb { background: var(--navy-20); border-radius: 3px; }
.mg-logo-grid::-webkit-scrollbar-track { background: transparent; }

/*> SQUARE, per the sketch — and a square is the right shape for a logo wall
    anyway: it treats a wordmark and a monogram even-handedly. <*/
/*> the FLEX ITEM is zShuttle's per-row wrapper, not the tile inside it — which
    is why sizing the tile left the cards staggered at different heights. The
    wrapper carries the width and the snap point; the tile fills it. <*/
.mg-logo-grid > * {
  flex: 0 0 clamp(210px, 23vw, 290px);
  scroll-snap-align: start;
}

/*> the card now uses the SAME mechanism as the three light spots — the pillar
    colour at 72% under `mix-blend-mode: multiply` — rather than a hand-picked
    tint. Matching the technique rather than copying a hex means the two can
    never drift apart: change a disc and the squares follow. <*/
.mg-logo-tile {
  position: relative;
  isolation: isolate;
  background: transparent;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s4) var(--s3) var(--s3);
  transition: transform 200ms ease;
}

.mg-logo-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--spot);
  opacity: 0.72;
  mix-blend-mode: multiply;
  z-index: -1;
  transition: opacity 200ms ease;
}

.mg-logo-tile:hover::before { opacity: 0.9; }

.mg-logo-tile:hover { transform: translateY(-2px); }

/*> THE PILLAR WASH, restored — my rewrite of the grid above deleted it along
    with the layout it was sitting next to. Each card is tinted with its
    pillar's colour, so the row doubles as a legend: you learn the code from
    the three spots and read it along the strip.
    
    Pushed well past the first attempt's opacity. At 16% none of them read as
    a brand colour — lime looked like paper and navy looked like grey. Lime
    and lavender are light enough to take a strong tint; navy needs the most
    before the purple in it shows at all, and it is still the quietest of the
    three. <*/
/*> each pillar just names its colour; the ::before above does the mixing, so
    these are the very same values the discs use. <*/
.mg-pillar-culture    { --spot: var(--pillar-culture); }
.mg-pillar-innovation { --spot: var(--pillar-innovation); }
.mg-pillar-impact     { --spot: var(--pillar-impact); }

/*> EVERY logo and caption in white, on every card. The partner marks arrive
    in their own colours — black, blue — and side by side that reads as five
    unrelated brands rather than one portfolio.
    
    `brightness(0) invert(1)` is what forces a mark of ANY colour to flat
    white: brightness(0) crushes it to black first, whatever hue it started
    as, and invert flips that to white. A bare invert() would only have turned
    FRAMED's blue into its opposite. <*/
.mg-logo-tile .mg-logo-mark { filter: brightness(0) invert(1); }
.mg-logo-tile .mg-logo-link { color: rgba(255, 255, 255, 0.82); }
.mg-logo-tile:hover .mg-logo-link { color: #ffffff; }

/*> a FIXED logo box, not a max-height. The marks differ wildly in proportion,
    so sizing each to its own content left every caption at a different height
    down the row. Giving every logo the same box puts all five captions on one
    line — the misalignment Yael spotted. <*/
.mg-logo-mark {
  width: 78%;
  height: 84px;
  object-fit: contain;
  margin: 0;
}

.mg-logo-link {
  order: 2;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy-40);
  text-align: center;
  margin: 0;
  transition: color 200ms ease;
}

/*> the "stretched link" trick: the visible caption stays exactly where it
    was — small, centred, below the mark — while an invisible ::after
    covers the WHOLE tile (`.mg-logo-tile` is already `position: relative`
    for the colour-wash ::before) and carries the actual click target. That
    makes the logo mark clickable too, without the caption needing to grow
    or the mark needing its own separate link. <*/
.mg-logo-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

/*> HOVER, per pillar. A single navy rule used to sit here — a leftover from
    when the captions were navy on a pale card — and being later in this sheet
    it beat the white rule above on every card. On lime that read fine; on the
    navy card it turned the caption navy-on-navy and it vanished.
    
    So the hover colour now follows the card: navy on the light ones, lime on
    the dark one. That is the book's signature pairing, and it means the label
    brightens on hover everywhere instead of disappearing on a third of the
    row. <*/
/*> WHITE ON EVERY CARD, AT REST AND ON HOVER. An earlier pass flipped the
    light cards to navy on hover so the caption would meet contrast — but that
    made the row change character under the cursor, which is what Yael saw as
    "the text becomes black". Uniform white is the call: the marks and captions
    now read as one set in every state.
    
    The trade is real and worth naming: white on lime measures about 1.5:1, so
    on the lime cards the caption is decorative rather than comfortably
    legible. The venture NAME is also the link text right beside it, so nothing
    is only available in that low-contrast form. <*/
.mg-logo-tile:hover .mg-logo-link { color: #ffffff; }
.mg-logo-tile:hover .mg-logo-mark { filter: brightness(0) invert(1); }

/* ── cards: ventures and people ───────────────────────────────────────── */

/*> auto-FILL, not auto-fit. With auto-fit the Impact board's two cards
    stretched to half the page each and their portraits became 700px tall
    columns of lavender. auto-fill keeps the track count set by the page
    width, so two cards and five cards are the same size. <*/
.mg-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--s4);
}

.mg-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid var(--navy-12);
}

.mg-card-logo {
  width: auto;
  max-width: 70%;
  max-height: 52px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: var(--s1);
}

.mg-card-portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--lav-40);
  margin-bottom: var(--s1);
}

/*> the advisory board's photos only — `PersonCard` is shared with the Team
    page, so this is scoped to `.mg-board` rather than to the portrait class
    itself, which would have desaturated Yael, Itai and Jan too. A quieter
    treatment for two placeholder photos on a page that names them as advisors
    rather than staff. <*/
.mg-board .mg-card-portrait {
  filter: grayscale(1);
}

.mg-card-role {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-60);
  margin: 0;
}

.mg-card-blurb, .mg-card-bio {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--navy-80);
  margin: 0;
}

.mg-card-link {
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--navy-40);
  align-self: flex-start;
  padding-bottom: 1px;
}
.mg-card-link:hover { border-bottom-color: var(--navy); }

/*> no venture URLs have been supplied yet, and a zURL with an empty href
    still renders — as a live-looking "Visit Altneuland Press" that goes
    nowhere. A dead link is worse than no link, so the card hides its own
    when there is nothing to point at. Fill the `url` column and the link
    appears on its own. <*/
.mg-card-link:not([href]),
.mg-card-link[href=''],
.mg-card-link[href='#'] { display: none; }

/* ── team: story beside the group photo ───────────────────────────────── */

/*> `align-items: start` pinned the group photo to the very top of the row,
    level with the eyebrow — which left it floating above the headline while a
    long story ran on beneath it. Centring it against the column of text sets
    it lower and makes the two read as a pair. <*/
.mg-story-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--s5);
  align-items: center;
}

.mg-story-copy { display: flex; flex-direction: column; gap: var(--s3); }

.mg-story-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--lav-40);
}

.mg-story { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }

/* ── forms ────────────────────────────────────────────────────────────── */

.mg-form { max-width: 34rem; }

.mg-form .zDialog-container,
.mg-form .zDialog-form { display: flex; flex-direction: column; gap: var(--s3); }

.mg-form .zDialog-title,
.mg-form .zH {
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.25;
}

.zForm-label, .mg-form label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-60);
  margin-bottom: var(--s1);
}

.zForm-control,
.mg-form input, .mg-form textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1rem;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--navy-40);
  border-radius: 0;
  padding: 0.6rem 0;
  transition: border-color 140ms ease;
}

.mg-form input:focus, .mg-form textarea:focus {
  outline: none;
  border-bottom-color: var(--navy);
}

/*> the default placeholder sat at near-white on the cream canvas — legible
    on a monitor at full brightness and nowhere else. navy-40 is the lightest
    tint the brand scale allows for something a person has to read. <*/
.mg-form ::placeholder { color: var(--navy-40); opacity: 1; }

/*> the framework marks required fields with a red asterisk. Red is not in the
    palette — the brand book allows four colours and this is not one of them. <*/
.mg-form .zForm-label span,
.mg-form label span,
.mg-form abbr,
.mg-form [class*='required'] {
  color: var(--navy-40);
  text-decoration: none;
}

.mg-form textarea { min-height: 7rem; resize: vertical; }

/*> the rule sits UNDER the newsletter, not over it: the newsletter now comes
    first on the page (the zDialog gate below it would otherwise swallow it),
    so the divider's job is to separate it from the form that follows. <*/
.mg-form-newsletter {
  border-bottom: 1px solid var(--navy-12);
  padding-bottom: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  align-items: flex-start;
}
.mg-form-newsletter .zBtn { margin-top: var(--s2); }

/* ── signals ──────────────────────────────────────────────────────────── */

.zSignal, .zAlert, .zToast {
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  font-size: 0.9375rem;
  border: 1px solid var(--navy-12);
}
.zSignal-success, .zAlert-success, .zToast-success { background: var(--lime-18); color: var(--navy); }
.zSignal-error, .zAlert-error, .zToast-error { background: var(--lav-40); color: var(--navy); }

/* ── legal pages ──────────────────────────────────────────────────────── */

.mg-page-legal { gap: var(--s4); }
.mg-page-legal .mg-body { max-width: var(--measure); }
.mg-legal-heading { font-size: 1.1875rem; font-weight: 600; margin-top: var(--s3); }

/* ── responsive ───────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .mg-story-split { grid-template-columns: 1fr; gap: var(--s4); }
  .mg-story-photo { aspect-ratio: 3 / 2; }
  .mg-page { gap: var(--s5); padding-top: var(--s4); }
}

@media (max-width: 560px) {
  /*> at 116px a disc is barely wider than the word "INNOVATION" set at
      desktop size, so the three labels ran into each other across the
      overlaps. Less tracking and a smaller size keeps each word inside its
      own beam. <*/
  /*> the desktop discs do not fit a phone: three at their 150px floor,
      overlapping by 22px, need 406px against 342px of usable width and the
      row would run off the screen. Sized to the space instead — 3×118 less
      two 26px overlaps is 302px, which fits inside the gutter. <*/
  .mg-pillars .mg-spot {
    width: 118px;
    height: 118px;
    font-size: 0.625rem;
    letter-spacing: 0.03em;
  }
  .mg-pillars .mg-spot + .mg-spot { margin-left: -26px; }

  .mg-card-grid { gap: var(--s3); }
}

/* ── values ───────────────────────────────────────────────────────────── */

/*> a full-bleed lavender band, as on the live site. This is the one place the
    brand book's "lavender only as a small accent" guidance is set aside, and
    deliberately: it is the existing design, and navy on full lavender measures
    about 8:1, so the caution is aesthetic rather than a legibility problem.

    Bleeding it edge to edge is what makes it work — as a boxed panel the same
    colour would read as a callout stuck onto the page instead of a change of
    register between two off-white sections. <*/
.mg-values {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--lavender);
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.mg-values-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

/*> the beam rule is BACK on this heading. It was dropped when the heading was
    a small eyebrow — a lime bar felt like a third colour on the lavender. As a
    full section title it reads as the same gesture that opens "Our story",
    which is exactly the match Yael asked for. <*/
.mg-values-title { color: var(--navy); }

.mg-value-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 6vw, 6rem);
}

.mg-value {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

/*> caps with wide tracking, matching the live site — and it keeps the four
    headings distinct from the H3s used on venture and people cards, which are
    sentence case. Same size, different voice, different job. <*/
.mg-value-title {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.2;
}

.mg-value-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--navy);
  max-width: 42ch;
  margin: 0;
}

@media (max-width: 760px) {
  .mg-value-grid { grid-template-columns: 1fr; }
}

/* ── pillar hero: full bleed, same as the landing film ────────────────── */

/*> the landing page bleeds via `.mg-hero-stage`, which wraps the film so an
    overlay can be positioned against it. The pillar pages carry no overlay
    and so have no stage, which left their video boxed inside the 1180px
    column while the landing film ran edge to edge. Same measurement, applied
    to the media itself. <*/
.mg-page-pillar .mg-hero-media {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ── pillar portfolio: full-width venture bands ───────────────────────── */

/*> REBUILT from the live site's treatment. A card grid was making two or
    three ventures look like a thin directory; each one now gets the full
    width of the page.

    The band is one layer: the photograph covers it entirely, and the colour
    panel sits over it clipped on a diagonal, so the two meet on an angle
    rather than a straight seam. Alternate bands mirror — panel left, then
    panel right — which is what stops a page of three reading as a repeated
    template. <*/
.mg-venture-rows {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  flex-direction: column;
}

.mg-venture-row {
  position: relative;
  min-height: clamp(380px, 46vw, 580px);
  display: block;
  isolation: isolate;
  background: var(--navy);
}

.mg-venture-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/*> panels alternate lime and lavender down the page rather than following the
    pillar's own colour. That is what the live site does, and it is the right
    call here too: navy is doing the work behind the photograph, and a navy
    panel would need cream type, breaking the one rule the brand book is
    absolute about — navy carries the text. Pillar identity is already carried
    by the three spots and the card washes on the landing page. <*/
/*> every panel came out lime on the first pass. zShuttle wraps each repeat in
    its own element, so `.mg-venture-row:nth-child(even)` never matched — each
    row is an only child and therefore always :nth-child(1). Counting is done
    on the ROW LIST's children instead, and both shapes are written out so the
    alternation holds whether or not the wrapper is there. <*/
.mg-venture-rows > :nth-child(odd) .mg-venture-panel,
.mg-venture-rows > .mg-venture-row:nth-child(odd) .mg-venture-panel {
  background: var(--lime);
}

.mg-venture-rows > :nth-child(even) .mg-venture-panel,
.mg-venture-rows > .mg-venture-row:nth-child(even) .mg-venture-panel {
  background: var(--lavender);
}

/*> ONE CONTINUOUS LINE, not a zigzag. The previous version alternated the
    slant — 54%→46% down one band, then 46%→54% back down the next — so the
    edge reversed direction at every seam. The seams met, but the result read
    as a stack of opposed wedges rather than as a single idea, which is what
    Yael saw as messy.

    Now the line never turns. It starts a little right of centre, leans left
    by three points per band, and crosses exactly 50% in the middle of the
    stack; the COLOUR flips from one side of it to the other, but the line
    itself carries straight on down the page. That is what the live site does
    and why its meeting points sit in the middle of the screen.

    To make that expressible, the panel is now full-width and absolutely
    placed, with the clip cutting it to the left or right of the line. The
    edge positions are therefore plain percentages OF THE ROW — the same
    number means the same place on every band, whichever side its colour is
    on — instead of percentages of a half-width panel that had to be
    converted each time. <*/
.mg-venture-panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  clip-path: polygon(0 0, var(--edge-top) 0, var(--edge-bot) 100%, 0 100%);
}

.mg-venture-rows > :nth-child(even) .mg-venture-panel,
.mg-venture-rows > .mg-venture-row:nth-child(even) .mg-venture-panel {
  clip-path: polygon(var(--edge-top) 0, 100% 0, 100% 100%, var(--edge-bot) 100%);
}

/*> A WIDE ARROW. Every seam now lands on exactly 50% — dead centre of the
    screen — and the edge leans back the other way through each band, so two
    neighbouring bands form one shallow chevron pointing at the middle.
    That is the live site's shape.
    
    It is worth being precise about why this is not the zigzag from two
    revisions ago. That one alternated between 46% and 54% AT THE SEAMS, so
    the meeting points swung from side to side and never settled. Here the
    meeting point is fixed at the centre and it is the band MIDDLES that
    alternate — the eye locks onto the constant point instead of chasing it.

    Because every band runs 54%→50% or 50%→54%, this needs no per-position
    values and works for a portfolio of two, three or ten. <*/
.mg-venture-rows > :nth-child(odd),
.mg-venture-rows > .mg-venture-row:nth-child(odd) { --edge-top: 54%; --edge-bot: 50%; }

.mg-venture-rows > :nth-child(even),
.mg-venture-rows > .mg-venture-row:nth-child(even) { --edge-top: 50%; --edge-bot: 54%; }

/*> the text column sits inside whichever side its colour occupies, held off
    the diagonal so a line of type never runs into the angle. <*/
.mg-venture-panel-inner {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  width: 50%;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  padding-right: clamp(3rem, 6vw, 5rem);
  margin: 0;
}

.mg-venture-rows > :nth-child(even) .mg-venture-panel-inner,
.mg-venture-rows > .mg-venture-row:nth-child(even) .mg-venture-panel-inner {
  margin-left: auto;
  padding-right: clamp(2.5rem, 5vw, 4.5rem);
  padding-left: clamp(3rem, 6vw, 5rem);
}

.mg-venture-name {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--navy-80);
  margin: 0;
}

/*> THE LOGO IS THE LINK. There used to be a big underlined venture name here
    directly under the plain one — the same words twice, which read as a bug.
    The mark now carries the outbound link: this box is the positioning
    context, and `.mg-venture-link` stretches an invisible anchor across it. <*/
.mg-venture-mark {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  margin-top: var(--s2);
  line-height: 0;
  transition: opacity 200ms ease, transform 200ms ease;
}

/*> the anchor covers the mark and its label is pushed out of view rather than
    deleted — a bare linked image would leave screen readers reading the file,
    so the accessible name stays "Visit <venture>". text-indent (not
    display:none, not width:0) is what keeps it both reachable and unseen.

    CHILD selector, deliberately. Written flat as `.mg-venture-link` this rule
    caught the anchor even when the mark wrapper had not rendered — and then
    `inset: 0` resolved against `.mg-venture-panel` instead, quietly turning
    the ENTIRE 1280x580 band into one click target that still looked correct.
    Scoping it to the wrapper means a missing wrapper degrades to a plain
    visible link rather than an invisible page-wide one. <*/
.mg-venture-mark > .mg-venture-link {
  position: absolute;
  inset: 0;
  text-indent: -200vw;
  overflow: hidden;
  white-space: nowrap;
}

.mg-venture-mark:hover { opacity: 0.72; transform: translateY(-2px); }

/* a venture with no URL yet keeps its logo, minus the pretence of a link */
.mg-venture-link:not([href]),
.mg-venture-link[href=''],
.mg-venture-link[href='#'] { pointer-events: none; }

.mg-venture-mark:has(.mg-venture-link:not([href])):hover,
.mg-venture-mark:has(.mg-venture-link[href='']):hover,
.mg-venture-mark:has(.mg-venture-link[href='#']):hover {
  opacity: 1;
  transform: none;
}

.mg-venture-blurb {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--navy);
  max-width: 44ch;
  margin: 0;
}

/*> the band logos are forced to brand NAVY, not left in each partner's own
    ink. Five marks in five different colours — black, blue — read as five
    unrelated brands stacked down the page; in navy they match the venture
    name directly above them and the panel becomes one object.
    
    `brightness(0)` crushes any hue to black first, then the sepia→saturate→
    hue-rotate chain tints that black to #1c194b. A plain `invert` or a colour
    overlay could not do this: only this chain works on an arbitrary source
    colour without knowing what it started as. <*/
.mg-venture-logo {
  width: auto;
  max-width: 190px;
  max-height: 84px;
  object-fit: contain;
  object-position: left center;
  margin-top: 0;
  display: block;
  filter: brightness(0) saturate(100%) invert(11%) sepia(29%) saturate(3684%) hue-rotate(230deg) brightness(94%) contrast(101%);
}

/*> below 860px the diagonal stops working: at that width the angle eats most
    of the panel and the text column collapses. The band becomes a stack —
    photograph, then panel, square edges. <*/
@media (max-width: 860px) {
  .mg-venture-row {
    display: block;
    min-height: 0;
    justify-content: flex-start;
  }
  .mg-venture-photo {
    position: relative;
    height: clamp(220px, 52vw, 340px);
  }
  /*> the panel is absolutely placed over the photo on desktop; stacked, it
      has to come back into flow or it would sit on top of the image with no
      height of its own. <*/
  .mg-venture-rows .mg-venture-panel,
  .mg-venture-rows > :nth-child(even) .mg-venture-panel {
    position: static;
    width: 100%;
    clip-path: none;
  }
  .mg-venture-rows .mg-venture-panel-inner,
  .mg-venture-rows > :nth-child(even) .mg-venture-panel-inner {
    width: 100%;
    padding: clamp(2rem, 7vw, 3rem) var(--gutter);
    margin: 0;
  }
}


/* ── pillar hero overlay + ambient film ───────────────────────────────── */

/*> the eyebrow on a pillar hero sits on the scrim, not on off-white, so it
    takes the lavender the landing page's MIGDALOR mark uses rather than the
    navy-60 it has on a light background. <*/
.mg-hero-overlay .mg-hero-mark-eyebrow { color: var(--lavender); }

/*> the Culture film is set dressing, not a thing to operate: it autoplays,
    loops and is muted, so a scrubber and a pause button are controls for a
    decision nobody is being asked to make — and they sit directly on top of
    the headline. zVideo has no `controls` knob, so they are removed here,
    for every engine that draws its own.

    `pointer-events: none` matters as much as hiding them: without it the
    film still swallows clicks and right-drags as though it were a player. <*/
.mg-page-pillar .mg-hero-media[autoplay] {
  pointer-events: none;
}

.mg-page-pillar .mg-hero-media::-webkit-media-controls,
.mg-page-pillar .mg-hero-media::-webkit-media-controls-enclosure,
.mg-page-pillar .mg-hero-media::-webkit-media-controls-panel,
.mg-page-pillar .mg-hero-media::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/* ── footer ───────────────────────────────────────────────────────────── */

/*> laid out from the live site's footer: wordmark alone at the top, three
    labelled columns on ONE baseline, then socials and copyright closing it.
    
    The gap above it was crossed out in review and it was genuinely too big —
    the page already ends with a full-bleed band, so it was carrying both the
    section gap AND the footer's own top margin. The margin goes. <*/
.mg-footer {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /*> no margin-top. The footer is the last flex child of `.mg-page`, so
      `.mg-page`'s own `gap: var(--s6)` (104px) already opens a normal
      section-sized space above it — the SAME gap every other pair of
      sections gets. Adding a further margin-top here was stacking a SECOND
      gap on top of that one, which is what produced the oversized blank
      band between the values section and the footer that Yael flagged. <*/
  background: var(--cream);
  color: var(--navy);
  border-top: 1px solid var(--navy-12);
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(2rem, 3vw, 3rem);
}

.mg-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4vw, 3.5rem);
}

.mg-footer-mark { width: 92px; height: 92px; object-fit: contain; }

/*> equal columns, all starting at the same height. `align-items: start` is
    what actually holds the three headings on one line — without it a taller
    column stretches its neighbours and the baselines drift. <*/
.mg-footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  align-items: start;
}

.mg-footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
}

/*> the short rule under each heading is the live footer's own device, and it
    is the same gesture as the beam rule opening a section — just navy here,
    because three lime bars in a quiet footer would shout. <*/
.mg-footer-heading {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 var(--s2);
  padding-bottom: var(--s2);
  position: relative;
  width: 100%;
}

.mg-footer-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 1px;
  background: var(--navy-40);
}

.mg-footer-link {
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}

.mg-footer-link:hover { border-bottom-color: var(--navy); }

.mg-footer-address {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--navy-80);
  margin: 0;
  max-width: 34ch;
}

.mg-footer-address strong {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  color: var(--navy);
}

.mg-footer-address a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--navy-40); }
.mg-footer-address a:hover { border-bottom-color: var(--navy); }

.mg-footer-blurb {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--navy-80);
  max-width: 32ch;
  margin: 0;
}

/*> kept exactly as it was — navy ground, lime type. Yael asked for this one
    not to change. <*/
.mg-footer-subscribe { margin-top: var(--s2); }

/* ── closing row ── */

.mg-footer-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--navy-12);
}

/*> real glyphs, not words. zMD renders `<bi-instagram>` as a Bootstrap icon
    and the surrounding markdown link makes it clickable — so these are icons
    that are genuinely links, with no image asset and no external request. <*/
.mg-footer-social {
  display: flex;
  gap: var(--s3);
  font-size: 1.375rem;
  line-height: 1;
  margin: 0;
}

/*> the glyph replaces the label. The text is pushed out of the box rather
    than deleted, so "Instagram" is still the anchor's accessible name while
    the eye gets the mark. Codepoints read straight out of bootstrap-icons
    1.11.3 rather than guessed — the font is already loaded by the framework,
    so this costs no asset and no extra request. <*/
.mg-social-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--navy);
  text-decoration: none;
  overflow: hidden;
  text-indent: -100vw;
  transition: color 160ms ease, transform 160ms ease;
}

.mg-social-link::before {
  font-family: 'bootstrap-icons';
  font-style: normal;
  font-weight: normal;
  font-size: 1.375rem;
  line-height: 1;
  text-indent: 0;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mg-social-instagram::before { content: "\f437"; }
.mg-social-linkedin::before  { content: "\f472"; }

.mg-social-link:hover { color: var(--navy-60); transform: translateY(-1px); }

.mg-footer-copy {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-60);
  margin: 0;
}

@media (max-width: 860px) {
  .mg-footer-cols { grid-template-columns: 1fr; gap: var(--s4); }
  .mg-footer-base { flex-direction: column; align-items: flex-start; gap: var(--s3); }
}




/* ── contact rows ─────────────────────────────────────────────────────── */

/*> replaces the enquiry form: one row per destination, label beside address.
    A grid rather than a paragraph of links, so the labels form a column you
    can scan for the one you want. <*/
.mg-contact-rows {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  border-top: 1px solid var(--navy-12);
  padding-top: var(--s4);
  max-width: 34rem;
}

.mg-contact-row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--s3);
  align-items: baseline;
}

.mg-contact-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-60);
  margin: 0;
}

.mg-contact-address {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  margin: 0;
}

.mg-contact-address a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--navy-40);
  transition: border-color 160ms ease;
}

.mg-contact-address a:hover { border-bottom-color: var(--navy); }

@media (max-width: 560px) {
  .mg-contact-row { grid-template-columns: 1fr; gap: var(--s1); }
}

/* ── the empty band above the footer ──────────────────────────────────── */

/*> THE EMPTY BAND ABOVE THE FOOTER. A full-bleed section already ends on its
    own hard colour edge, so `.mg-page`'s section gap after it rendered as a
    slab of blank off-white between that edge and the footer's hairline —
    visible on nearly every page.

    A negative margin equal to the gap is what cancels it: flex `gap` cannot
    be overridden per-child, so the child pulls itself back up by exactly the
    distance the gap pushed it down. Only where the footer FOLLOWS a bled
    section — elsewhere the normal gap is still wanted.

    `.mg-venture-rows + .mg-footer` never actually matched anything — on
    Culture/Innovation the venture bands are nested INSIDE `.mg-portfolio`
    (Heading, then Rows), so `.mg-portfolio`, not `.mg-venture-rows`, is the
    element that is actually adjacent to `.mg-footer` in the flex column.
    The selector was targeting a grandchild instead of the real sibling —
    still true, still zero effect, exactly the gap Yael kept seeing. <*/
.mg-values + .mg-footer,
.mg-portfolio:has(.mg-venture-rows) + .mg-footer {
  margin-top: calc(var(--s6) * -1);
}