/* ==========================================================================
   GEOMORPHIC AI — HOME PAGE LAYER
   Everything the approved Editorial home page needs that is NOT part of the
   brand system. Load AFTER brand.css and brand-dataviz.css.

   The split matters. brand.css is the SYSTEM — colour, type, buttons, forms,
   components, sections — and is shared with every future page. This file is
   PAGE FURNITURE: the framed 1440 shell, the falling beams, the ticker, the
   marquee, the spotlight cards. Adding a second page means reusing brand.css
   untouched and writing a sibling to this file, never editing brand.css.

   Class names are kept exactly as they appear in the signed-off mock-up
   (REFERENCE/mockup-1-approved.html) so the two stay diffable. The `mk-`
   prefix is historical — rename it in one pass if you want, but do it across
   both files at once, not piecemeal.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · THE SHELL
   A framed 1440 column with a faint 12rem × 24rem grid and three vertical
   rules. Coloured beams fall down the rules on a loop — blue, then teal, then
   gold, in logomark order. This is the device that makes the page read as
   "instrument", and it is the first thing to check when comparing against the
   reference: without it the page looks like a generic dark site.
   ----------------------------------------------------------------------- */
.mk-shell {
  position: relative; max-width: 1440px; margin-inline: auto;
  border-inline: 1px solid #8A8A8A;
}
.mk-shell__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 12rem 24rem;
}
.mk-shell__rules {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: flex; justify-content: space-between;
  padding-inline: clamp(20px, 5vw, 96px);
}
.mk-shell__rule {
  position: relative; width: 1px;
  background: rgba(255, 255, 255, 0.035); overflow: hidden;
}
.mk-shell__rule:nth-child(2) { position: absolute; left: 50%; top: 0; bottom: 0; }

@keyframes mk-beam {
  0%   { top: -160px; opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.mk-beam {
  position: absolute; left: 0; width: 1px; height: 160px;
  background: linear-gradient(to bottom, transparent, rgba(54, 156, 212, 0.8), transparent);
  animation: mk-beam 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.mk-beam--2 { animation-delay: 2.3s;
  background: linear-gradient(to bottom, transparent, rgba(78, 196, 169, 0.7), transparent); }
.mk-beam--3 { animation-delay: 4.6s;
  background: linear-gradient(to bottom, transparent, rgba(241, 202, 81, 0.55), transparent); }
@media (prefers-reduced-motion: reduce) {
  .mk-beam { animation: none; opacity: 0.25; top: 30%; }
}


/* --------------------------------------------------------------------------
   2 · REVEAL ON SCROLL
   Every element carrying .mk-rev starts 22px low and transparent, and gains
   .in when it enters the viewport. Driven by home.js.
   ----------------------------------------------------------------------- */
.mk-rev {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.7s var(--gm-ease), transform 0.7s var(--gm-ease);
}
.mk-rev.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mk-rev { opacity: 1; transform: none; } }

/* Mask reveal for figures.
   The clip goes on the CHILD, never on the observed element: Chromium applies
   clip-path when computing intersection, so an element that starts fully
   clipped never reports as intersecting and would never reveal itself. This
   cost a day to find — do not "simplify" it onto the parent. */
.mk-mask > * { clip-path: inset(0 0 100% 0); transition: clip-path 0.95s var(--gm-ease); }
.mk-mask.in > * { clip-path: inset(0 0 0% 0); }
@media (prefers-reduced-motion: reduce) { .mk-mask > * { clip-path: none; } }

/* At a glance metric cards. */
.glance-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 25px;
}
.glance-card {
  --metric-accent: var(--gm-white);
  --metric-glow: rgba(255,255,255,.1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(22px,2.4vw,34px);
  border: 1.5px solid var(--metric-accent);
  border-radius: 2px;
  background: var(--gm-basalt-950);
}
.glance-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 7%;
  right: 7%;
  bottom: -48%;
  height: 88%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 100%,
    var(--metric-glow) 0,
    transparent 70%
  );
}
.glance-card > * {
  position: relative;
  z-index: 1;
}
.glance-card--blue {
  --metric-accent: var(--gm-blue-500);
  --metric-glow: rgba(54,156,212,.14);
}
.glance-card--teal {
  --metric-accent: var(--gm-teal-500);
  --metric-glow: rgba(78,196,169,.13);
}
.glance-card--gold {
  --metric-accent: var(--gm-gold-500);
  --metric-glow: rgba(241,202,81,.13);
}
.glance-card--white {
  --metric-accent: var(--gm-white);
  --metric-glow: rgba(255,255,255,.1);
}
.glance-card__value {
  font-family: var(--gm-font-display);
  font-weight: 300;
  font-size: clamp(2.2rem,1.6rem + 1.8vw,3.4rem);
  line-height: 1;
  color: var(--metric-accent);
}


/* --------------------------------------------------------------------------
   3 · TICKER — what the platform reads
   Two identical sets scrolling -50% gives a seamless loop with no JS.
   ----------------------------------------------------------------------- */
@keyframes mk-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mk-ticker {
  overflow: hidden; border-block: 1px solid var(--gm-line-hairline);
  background: var(--gm-basalt-600); padding-block: 20px;
}
.mk-ticker__row { display: flex; width: max-content; animation: mk-scroll 42s linear infinite; }
.mk-ticker__set { display: flex; align-items: center; gap: 64px; padding-inline: 32px; }
.mk-ticker__item {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gm-white); white-space: nowrap;
}
.mk-ticker__item::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--gm-teal-500);
}
.mk-ticker__item svg { display: none; }
@media (prefers-reduced-motion: reduce) { .mk-ticker__row { animation: none; } }


/* --------------------------------------------------------------------------
   4 · MARQUEE — client logo rail
   Same two-set loop as the ticker, masked at both ends so marks fade rather
   than clip.
   ----------------------------------------------------------------------- */
@keyframes mk-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--gm-basalt-950);
}
.logo-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .46;
  background-image:
    radial-gradient(ellipse at center, rgba(255,255,255,.2) 0 .8px, transparent 1.15px),
    radial-gradient(ellipse at center, rgba(255,255,255,.13) 0 .65px, transparent 1px),
    radial-gradient(ellipse at center, rgba(255,255,255,.09) 0 .9px, transparent 1.3px),
    repeating-linear-gradient(117deg, transparent 0 7px, rgba(255,255,255,.025) 7px 8px);
  background-size: 7px 6px, 11px 9px, 17px 14px, 23px 23px;
  background-position: 0 0, 4px 3px, 9px 7px, 0 0;
  mix-blend-mode: screen;
}
.logo-strip__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(64px,7vw,112px);
}
.logo-strip__head {
  margin: 0 auto calc(clamp(32px,3.5vw,48px) + 30px);
  text-align: center;
}
.logo-strip__head .gm-eyebrow {
  margin-bottom: 12px;
}
.logo-strip__title {
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--gm-font-display);
  font-weight: 300;
  font-size: clamp(1.9rem,3.4vw,3rem);
  line-height: 1.05;
}
.logo-strip__title span {
  display: block;
}
.mk-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.mk-marquee__row { display: flex; width: max-content; animation: mk-marq 34s linear infinite; }
.mk-marquee__set { display: flex; align-items: center; gap: 104px; padding-inline: 52px; }
.mk-marquee img { height: 88px; width: auto; opacity: 0.62; }
@media (prefers-reduced-motion: reduce) { .mk-marquee__row { animation: none; } }

/* Optical width cap. The 2026 Daura mark is a single wide word (~3.9:1), so at
   a shared HEIGHT it out-measures every other logo in the row. Capping width
   with object-fit:contain lets it letterbox down to a matching optical size
   instead of being squashed — the standard fix for mixed-aspect logo rows.
   Any new client mark added to this row inherits the same treatment. */
.mk-marquee img, .gm-tslider__logo { object-fit: contain; }
.mk-marquee img { max-width: 270px; }
.mk-tw .gm-tslider__logo { max-width: 290px; }

@media (max-width: 900px) {
  .mk-marquee img { height: 64px; max-width: 200px; }
  .mk-marquee__set { gap: 64px; padding-inline: 32px; }
  .mk-tw .gm-tslider__logo { max-width: 210px; }
}
@media (max-width: 560px) { .mk-marquee img { height: 52px; } }


/* --------------------------------------------------------------------------
   5 · SPOTLIGHT CARD — cursor-tracked hairline
   A radial gradient follows the pointer through --mx / --my, set by home.js,
   and is masked to the 1px border only. The ::after is the resting hairline
   so a card never looks unborded before first hover.
   ----------------------------------------------------------------------- */
.mk-spot {
  position: relative; border-radius: 2px;
  background: rgba(255, 255, 255, 0.02); overflow: hidden;
}
.mk-spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(600px circle at var(--mx, -100px) var(--my, -100px),
              rgba(54, 156, 212, 0.55), transparent 40%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 500ms var(--gm-ease); pointer-events: none; z-index: 2;
}
.mk-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(225deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1;
}
.mk-spot:hover::before { opacity: 1; }
.mk-spot > * { position: relative; z-index: 3; }
.mk-business-card::before { padding: 1.5px; }
.mk-platform-heading { max-width: none; }
.mk-platform-heading h2 span { display: block; }
.mk-platform-heading h2 .mk-italic { white-space: nowrap; }

/* Targeting explorer — supplied tabbed section. */
#platform { background: #050505; border-bottom: 1px solid #8A8A8A; }
.platform-inner { padding-top: 70px; padding-bottom: clamp(56px,6.5vw,104px); }
.pr-h2 {
  font-family: var(--gm-font-display); font-weight: 300; margin: .4rem 0 0;
  font-size: clamp(1.9rem,3.4vw,3rem); line-height: 1.05; max-width: 20ch;
}
.pr-intro { margin: 0; max-width: 66ch; }
.pr-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,72px);
  align-items: end; margin-bottom: clamp(34px,4vw,52px);
}
.pr-title {
  font-family: var(--gm-font-display); font-weight: 300;
  font-size: clamp(1.5rem,1.1rem + 1vw,2.1rem); letter-spacing: .01em; margin: 0;
}
.pr-body { margin: 0; max-width: 54ch; }
.ex { --c:#369CD4; --c10:rgba(54,156,212,.12); --c22:rgba(54,156,212,.28); }
.ex-tile { width: 48px; height: 48px; color: var(--c); border-color: var(--c22); }
.ex-tag { font-family: var(--gm-font-mono); font-size: 11.5px; letter-spacing: .16em; color: var(--c); }
.ex-top { display: flex; align-items: center; gap: 16px; }
.ex-top .ex-tag { margin-left: auto; }
.pr-metric { display: flex; align-items: baseline; gap: 13px; }
.pr-val {
  font-family: var(--gm-font-mono); font-weight: 500;
  font-size: clamp(1.4rem,1.8vw,1.9rem); color: var(--c); line-height: 1;
}
.pr-lab {
  font-family: var(--gm-font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gm-basalt-500,#8A8A8A);
}
.ex-link { color: var(--c); align-self: flex-start; }
.ex-link:hover { color: var(--c); border-bottom-color: currentColor; }
.ex-media {
  position: relative; border: 1px solid var(--c22); border-radius: 6px;
  overflow: hidden; background: #050505; transition: border-color .3s;
}
.ex-media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .18s ease;
}
.ex-panel { display: none; flex-direction: column; gap: 18px; }
.ex-panel.is-active { display: flex; }
.h-tabs {
  display: flex; border: 1px solid var(--gm-border); border-radius: 999px;
  padding: 5px; margin-bottom: 28px; width: fit-content; max-width: 100%;
}
.h-tab {
  display: flex; align-items: center; gap: 10px; padding: 10px 22px;
  border: 0; background: transparent; color: var(--gm-basalt-400,#9a9a9a);
  font-family: var(--gm-font-body); font-size: 15px; border-radius: 999px;
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.h-tab__no { font-family: var(--gm-font-mono); font-size: 12px; opacity: .7; }
.h-tab:hover { color: #fff; }
.h-tab.is-active { background: var(--c10); color: #fff; box-shadow: inset 0 0 0 1px var(--c22); }
.h-tab.is-active .h-tab__no { color: var(--c); opacity: 1; }
.h-tab:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.h-stage {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(28px,3.5vw,64px); align-items: center;
}
.h-media { aspect-ratio: 16/10; }
@media (max-width:900px) {
  .pr-head { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .h-stage { grid-template-columns: 1fr; gap: 24px; }
  .h-tabs { width: 100%; }
  .h-tab { padding: 10px 12px; flex: 1; justify-content: center; }
}

/* Why this model — supplied split layout. */
#projects {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid #8A8A8A;
  background-color: var(--gm-basalt-950);
}
#projects::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .46;
  background-image:
    radial-gradient(ellipse at center, rgba(255,255,255,.2) 0 .8px, transparent 1.15px),
    radial-gradient(ellipse at center, rgba(255,255,255,.13) 0 .65px, transparent 1px),
    radial-gradient(ellipse at center, rgba(255,255,255,.09) 0 .9px, transparent 1.3px),
    repeating-linear-gradient(117deg, transparent 0 7px, rgba(255,255,255,.025) 7px 8px);
  background-size: 7px 6px, 11px 9px, 17px 14px, 23px 23px;
  background-position: 0 0, 4px 3px, 9px 7px, 0 0;
  mix-blend-mode: screen;
}
#projects > .gm-container {
  position: relative;
  z-index: 1;
}
.wm-inner { padding-block: clamp(56px,6.5vw,104px); }
.wm-h2 {
  font-family: var(--gm-font-display); font-weight: 300; margin: .4rem 0 0;
  font-size: clamp(2rem,3.6vw,3.1rem); line-height: 1.06; max-width: 19ch;
}
.wm-title {
  font-family: var(--gm-font-display); font-weight: 300;
  font-size: clamp(1.3rem,1.1rem + .7vw,1.7rem); letter-spacing: .005em; margin: 0;
}
.wm-body { margin: 0; max-width: 52ch; }
.wm-tile { width: 46px; height: 46px; color: var(--gm-accent); }
.wm-cta { margin-top: clamp(34px,4vw,52px); }
.tx-topo {
  background-image: none;
}
.wm-card {
  position: relative; border: 1px solid #B4B4B4; border-radius: 6px;
  overflow: hidden; background: #0A0A0A;
}
.wm-card__bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 120% at 100% 0,#000,transparent 70%);
  mask-image: radial-gradient(120% 120% at 100% 0,#000,transparent 70%);
  opacity: .7; pointer-events: none;
}
.wm-card__in {
  position: relative; padding: clamp(22px,2vw,32px);
  display: flex; flex-direction: column; gap: 13px;
}
.wm-card__top { display: flex; align-items: center; gap: 14px; }
.v3-grid {
  display: grid; grid-template-columns: .92fr 1.08fr;
  gap: 20px; align-items: stretch;
}
.v3-left {
  position: relative; border: 1px solid #8A8A8A; border-radius: 6px;
  overflow: hidden; background-color: #090909;
}
.v3-left__unicorn {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.v3-left__unicorn > [data-us-project] {
  position: absolute;
  inset: -4%;
  width: 100%;
  height: 100%;
  transform: scale(1.08);
  transform-origin: center;
}
.v3-left::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg,rgba(9,9,9,.78),rgba(9,9,9,.32) 58%,rgba(9,9,9,.66)),
    radial-gradient(95% 85% at 22% 18%,transparent,rgba(9,9,9,.8) 80%);
  pointer-events: none;
}
.v3-left__in {
  position: relative; z-index: 2; padding: clamp(30px,3vw,52px);
  display: flex; flex-direction: column; height: 100%; justify-content: center; gap: 6px;
}
.v3-left .wm-h2 { max-width: 15ch; font-size: clamp(1.8rem,2.7vw,2.6rem); }
.v3-sub { margin: 18px 0 0; max-width: 34ch; }
.v3-right { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width:900px) {
  .v3-grid { grid-template-columns: 1fr; }
  .v3-right { grid-template-columns: 1fr; }
}

/* Client services — supplied field-verification and accordion layout. */
#services {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--gm-border-subtle);
  border-bottom: 1px solid #8A8A8A;
  background: var(--gm-basalt-900);
}
.services-aura {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(ellipse at 75% 50%,rgba(78,196,169,.14),transparent 60%);
}
.services-inner {
  position: relative;
  padding-block: clamp(64px,7vw,120px);
}
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px,4vw,64px);
  align-items: center;
}
.mk4-plate {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  margin: 0;
  border: 1px solid var(--gm-border-subtle);
  border-radius: 4px;
  background: var(--gm-basalt-850);
}
.mk4-plate > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 500ms var(--gm-ease), transform 500ms var(--gm-ease);
}
.mk4-plate:hover > img {
  filter: grayscale(0);
  transform: scale(1.03);
}
.services-copy h2 { margin-top: 14px; font-weight: 300; }
.services-intro { margin-top: 22px; max-width: 50ch; }
.mk4-acc {
  margin-top: 34px;
  border-top: 1px solid var(--gm-border);
}
.mk4-acc__item { border-bottom: 1px solid var(--gm-border); }
.mk4-acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 64px;
  padding: 18px 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--gm-font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.mk4-acc__btn:hover { color: var(--gm-blue-300); }
.mk4-acc__btn:focus-visible { outline: 2px solid var(--gm-blue-500); outline-offset: 3px; }
.mk4-acc__btn svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--gm-blue-500);
  transition: transform 220ms var(--gm-ease);
}
.mk4-acc__item[data-open="true"] .mk4-acc__btn svg { transform: rotate(45deg); }
.mk4-acc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms var(--gm-ease);
}
.mk4-acc__body > div { overflow: hidden; }
.mk4-acc__body p { max-width: 52ch; margin: 0; padding-bottom: 20px; }
.mk4-acc__item[data-open="true"] .mk4-acc__body { grid-template-rows: 1fr; }
@media (max-width: 760px) {
  .services-grid { grid-template-columns: 1fr; align-items: start; }
  .mk4-plate { aspect-ratio: 4 / 3; }
  .services-aura { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mk4-plate > img,
  .mk4-acc__body { transition: none; }
}

/* Two lines of business — attached Option C. */
#company {
  position: relative;
  isolation: isolate;
  background-color: var(--gm-basalt-950);
}
#company::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .46;
  background-image:
    radial-gradient(ellipse at center, rgba(255,255,255,.2) 0 .8px, transparent 1.15px),
    radial-gradient(ellipse at center, rgba(255,255,255,.13) 0 .65px, transparent 1px),
    radial-gradient(ellipse at center, rgba(255,255,255,.09) 0 .9px, transparent 1.3px),
    repeating-linear-gradient(117deg, transparent 0 7px, rgba(255,255,255,.025) 7px 8px);
  background-size: 7px 6px, 11px 9px, 17px 14px, 23px 23px;
  background-position: 0 0, 4px 3px, 9px 7px, 0 0;
  mix-blend-mode: screen;
}
#company::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  pointer-events: none;
  background: #8A8A8A;
}
#company > .gm-container {
  position: relative;
  z-index: 1;
}
.lb-inner { padding-block: clamp(56px, 6.5vw, 104px); }
.lb-head {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 72px); align-items: end;
  margin-bottom: clamp(34px, 4vw, 56px);
}
.lb-h2 {
  font-family: var(--gm-font-display); font-weight: 300;
  margin: 0; max-width: 18ch;
  font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.05;
}
.lb-h2 span { display: block; }
.lb-intro { margin: 0; max-width: 56ch; }
.lb-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lb-card {
  display: flex; flex-direction: column;
  border: 1px solid #8A8A8A; border-radius: 4px;
  overflow: hidden; background: var(--gm-basalt-900);
}
.lb-card__media {
  position: relative; aspect-ratio: 16 / 9;
  border-bottom: 1px solid #8A8A8A;
}
.lb-card__media picture,
.lb-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lb-card__media img { object-fit: cover; }
.lb-card__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.52));
}
.lb-card__idx {
  position: absolute; top: 18px; right: 20px; z-index: 2;
  font-family: var(--gm-font-mono); font-size: 33px; line-height: 1;
  color: var(--gm-blue-300);
}
.lb-card__tile {
  position: absolute; left: 24px; bottom: -26px; z-index: 3;
  width: 52px; height: 52px; border-color: #8A8A8A;
}
.lb-card__body {
  padding: clamp(30px, 2.4vw, 42px); padding-top: 46px;
  display: flex; flex: 1; flex-direction: column; gap: 18px;
}
.lb-card__body .gm-secondary { color: var(--gm-white); }
.lb-card__body .gm-link { align-self: flex-start; }
.lb-title {
  font-family: var(--gm-font-display); font-weight: 300;
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem);
  letter-spacing: .01em; margin: 0 0 4px;
}
.lb-card--teal .gm-icon-tile,
.lb-card--teal .gm-link,
.lb-card--teal .lb-card__idx { color: var(--gm-teal-500); }
.lb-card--teal .gm-link:hover { color: var(--gm-teal-500); border-bottom-color: currentColor; }
@media (max-width: 860px) {
  .lb-head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .lb-cards { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   6 · SMALL PARTS
   ----------------------------------------------------------------------- */

/* Category tag — news cards. The brand's .gm-chip is an interactive filter
   control; these are static labels, so they get their own square, quieter
   treatment rather than borrowing a control's appearance. */
.mk-tag {
  display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 2px;
  font-family: var(--gm-font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; border: 1px solid var(--gm-border);
  color: var(--gm-basalt-300); background: rgba(255, 255, 255, 0.03);
}
.mk-tag--blue { border-color: rgba(54, 156, 212, 0.4); color: var(--gm-blue-300); background: rgba(54, 156, 212, 0.10); }
.mk-tag--teal { border-color: rgba(78, 196, 169, 0.4); color: var(--gm-teal-500); background: rgba(78, 196, 169, 0.10); }
.mk-tag--gold { border-color: rgba(241, 202, 81, 0.4); color: var(--gm-gold-300); background: rgba(241, 202, 81, 0.10); }

/* Latest news — subtle diagonal strata pattern. */
#news {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #030708;
}
#news::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,10,13,.28), transparent 42%, rgba(0,10,13,.22)),
    repeating-linear-gradient(
      135deg,
      rgba(54,156,212,.055) 0,
      rgba(54,156,212,.055) 1px,
      transparent 1px,
      transparent 15px
    );
}
#news > .gm-container {
  position: relative;
  z-index: 1;
}
#news .mk-bento__cell {
  border: .5px solid #8A8A8A;
  background:
    radial-gradient(ellipse 76% 34% at 50% 100%, rgba(241,202,81,.24), rgba(241,202,81,.08) 42%, transparent 74%),
    #000;
}
#news .mk-bento__cell::before,
#news .mk-bento__cell::after {
  display: none;
}
#news .mk-bento__tag {
  color: #8A8A8A;
}
.news-card__read {
  align-self: flex-start;
  margin-top: auto;
  min-height: 30px;
  padding: 5px 15px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: .5px solid #8A8A8A;
  border-radius: 999px;
  background: transparent;
  color: var(--gm-white);
  font-family: var(--gm-font-body);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--gm-dur-base) var(--gm-ease),
    color var(--gm-dur-base) var(--gm-ease),
    box-shadow var(--gm-dur-base) var(--gm-ease),
    transform var(--gm-dur-micro) var(--gm-ease);
}
.news-card__read svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--gm-dur-micro) var(--gm-ease);
}
.news-card__read:hover svg {
  transform: translateX(2px);
}
.news-card__read:hover {
  background: var(--gm-lime-500);
  color: var(--gm-lime-ink);
  border-color: var(--gm-lime-500);
  box-shadow: 0 0 0 8px var(--gm-lime-halo);
}
.news-card__read:focus-visible {
  outline: 2px solid var(--gm-lime-500);
  outline-offset: 4px;
}
.news-card__read:active {
  transform: translateY(1px);
}

/* Display italic — the editorial register. The hero's second line, the
   closing CTA and the newsletter heading all use it. It is what separates
   this direction from the other three; do not flatten it to roman. */
.mk-italic { font-style: italic; }
.mk-dim { color: var(--gm-basalt-400); }
.gm-engagement-btn {
  box-shadow: inset 0 0 0 1px var(--gm-basalt-300);
}
.gm-engagement-btn:hover {
  box-shadow: 0 0 0 8px var(--gm-lime-halo);
}

/* Card shell + monospace micro-label */
.mk-bento__cell {
  background: rgba(255, 255, 255, 0.02); border-radius: 2px;
  position: relative; overflow: hidden;
}
.mk-bento__tag {
  font-family: var(--gm-font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gm-basalt-500);
}

/* Cinematic image treatment — desaturated at rest, resolving on hover */
.mk-cine {
  filter: grayscale(28%) contrast(1.04);
  transition: filter 0.35s var(--gm-ease), transform 0.6s var(--gm-ease);
}
a:hover .mk-cine, .mk-figure:hover .mk-cine { filter: grayscale(0) contrast(1.04); transform: scale(1.03); }
.mk-figure { overflow: hidden; }

/* Footer bar legal links. brand.css styles the column links but not these, so
   without this they fall back to the browser's default blue underline. */
.gm-footer__bar a {
  color: inherit; text-decoration: none;
  transition: color 140ms var(--gm-ease);
}
.gm-footer__bar a:hover { color: #fff; text-decoration: underline; }

/* Testimonial slider at full content width. It sits on the same column as
   every other section, not inset from it. The intro copy keeps its own 46ch
   measure from brand.css, so widening the band does not produce an
   unreadable line length. */
.mk-tw { max-width: none; margin-inline: 0; }
.mk-tw .gm-tslider {
  border: 1px solid #8A8A8A;
  border-radius: 4px;
  padding: clamp(2rem, 1rem + 4vw, 4rem);
}
.mk-tw .gm-tslider__grid { gap: clamp(2rem, 1rem + 5vw, 5.5rem); }
.mk-tw .gm-tslider__logo { height: 92px; }
.mk-tw .gm-tslider__attr { flex-wrap: wrap; row-gap: 12px; }
@media (max-width: 900px) { .mk-tw .gm-tslider__logo { height: 68px; } }
@media (max-width: 560px) { .mk-tw .gm-tslider__logo { height: 56px; } }


/* --------------------------------------------------------------------------
   7 · WORDMARK SCALE
   brand.css ships the nav wordmark at 26px, which is the documented spec.
   The approved design runs it at 68px. Keeping the override here rather than
   editing brand.css means the guide and the build do not fall out of step —
   if 68px is formally adopted, move these three rules into brand.css and
   update the guide's Sections page in the same commit.
   ----------------------------------------------------------------------- */
.gm-nav { height: 112px; }
.gm-nav__logo img { height: 68px; width: auto; }
.gm-footer img[alt="Geomorphic AI"] { height: 62px; }
.gm-nav__links { border-color: var(--gm-basalt-300); }
.gm-home-hero { --gm-home-nav-overlap: 112px; }

/* The home nav starts open to the hero scene, then becomes the brand's
   existing glass rail once content begins moving underneath it. */
.gm-home-nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition:
    background-color var(--gm-dur-base) var(--gm-ease),
    border-color var(--gm-dur-base) var(--gm-ease),
    backdrop-filter var(--gm-dur-base) var(--gm-ease);
}
.gm-home-nav.is-scrolled {
  background: rgba(0,0,0,0.30);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom-color: rgba(255,255,255,0.05);
}

/* Desktop dropdowns follow the sitemap and reuse the nav's existing surfaces. */
.gm-nav__item { position: relative; }
.gm-nav__submenu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 50;
  min-width: 210px;
  padding: 8px;
  border: 1px solid var(--gm-border-subtle);
  border-radius: var(--gm-radius-sm);
  background: var(--gm-basalt-800);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity var(--gm-dur-micro) var(--gm-ease),
              transform var(--gm-dur-micro) var(--gm-ease),
              visibility var(--gm-dur-micro) var(--gm-ease);
}
.gm-nav__submenu::before {
  content: "";
  position: absolute;
  inset: -13px 0 auto;
  height: 13px;
}
.gm-nav__submenu a {
  display: block;
  padding: 11px 14px;
  border-radius: var(--gm-radius-xs);
  color: var(--gm-text-secondary);
  font-size: var(--gm-fs-body-sm);
  text-decoration: none;
  white-space: nowrap;
}
.gm-nav__submenu a:hover,
.gm-nav__submenu a:focus-visible {
  color: var(--gm-white);
  background: var(--gm-basalt-600);
}
.gm-nav__item:hover .gm-nav__submenu,
.gm-nav__item:focus-within .gm-nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* brand.css drops the inline links at 980px, which was tuned for a 26px
   wordmark. At 68px the logo is ~240px wide, so five links plus the CTA stop
   fitting around 1100. */
@media (max-width: 1100px) {
  .gm-nav .gm-nav__links { display: none; }
  .gm-nav .gm-nav__burger { display: inline-flex; }
}
@media (max-width: 900px) {
  .gm-nav { height: 96px; }
  .gm-nav__logo img { height: 57px; }
  .gm-home-hero { --gm-home-nav-overlap: 96px; }
}
@media (max-width: 620px) {
  .gm-nav { height: 84px; }
  .gm-nav__logo img { height: 49px; }
  .gm-home-hero { --gm-home-nav-overlap: 84px; }

  /* A 49px wordmark is ~173px wide — over half a 360px viewport. The row is
     logo | (empty links slot) | right-cluster with a gap on both sides, so it
     pays two gaps for one visible divide. Halve them, and drop the CTA to its
     icon: the label is redundant next to a hero that repeats it. Removing
     this block reintroduces a 6–7px horizontal overflow on a 360px phone. */
  .gm-nav__inner { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .gm-nav__right { gap: 6px; }
  .gm-nav__cta > span { min-width: 0; padding: 11px; font-size: 0; letter-spacing: 0; }
  .gm-nav__cta svg { display: block; width: 18px; height: 18px; }
  .gm-nav__burger { width: 40px; height: 40px; }
}


/* --------------------------------------------------------------------------
   8 · RESPONSIVE COLLAPSE
   Grid templates are authored inline in index.html so each section reads as
   one self-contained block. This is the SINGLE place they are overridden,
   which is why the !important is deliberate rather than a smell. Tag any new
   inline grid with .mk-g and it collapses here for free.
   ----------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .mk-g { grid-template-columns: 1fr !important; }
  .mk-g.mk-g--keep2 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .mk-g.mk-g--keep2 { grid-template-columns: 1fr !important; }
  .mk-platform-heading h2 .mk-italic { white-space: normal; }
}

/* Very narrow phones (320px). Two long button labels — "Discuss a client
   engagement", "View available projects" — are wider than the column at this
   size, so let them wrap instead of pushing the page sideways. */
@media (max-width: 400px) {
  .gm-btn { white-space: normal; text-align: center; max-width: 100%; }
  .gm-btn--lg { font-size: 13px; padding-inline: 18px; }
}


/* --------------------------------------------------------------------------
   9 · MOBILE NAVIGATION SHEET
   Not in the approved comp — the mock-up's burger was inert because it was a
   static comparison piece. A shipping page needs it, so this is the one
   component added beyond the design. It borrows the brand's existing tokens
   and the display face at its documented weight, so nothing new is invented.
   ----------------------------------------------------------------------- */
.gm-navsheet {
  position: fixed; inset: 0; z-index: 300;
  background: var(--gm-basalt-900, #0A0A0A);
  padding: 20px clamp(16px, 4vw, 28px) 40px;
  overflow-y: auto;
}
.gm-navsheet[hidden] { display: none; }
.gm-navsheet__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 28px;
}
.gm-navsheet__top img { height: 49px; width: auto; }
.gm-navsheet__close {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--gm-border); border-radius: var(--gm-btn-radius, 999px);
  color: var(--gm-basalt-200); cursor: pointer;
  transition: color 140ms var(--gm-ease), border-color 140ms var(--gm-ease);
}
.gm-navsheet__close:hover { color: #fff; border-color: var(--gm-line-strong); }
.gm-navsheet__close svg { width: 20px; height: 20px; }
.gm-navsheet nav { display: flex; flex-direction: column; }
.gm-navsheet nav a {
  display: flex; align-items: center; min-height: 64px;
  border-bottom: 1px solid var(--gm-border-subtle);
  font-family: var(--gm-font-display); font-weight: 300; font-size: 1.6rem;
  letter-spacing: -0.02em; color: #fff; text-decoration: none;
  transition: color 140ms var(--gm-ease);
}
.gm-navsheet nav a:hover { color: var(--gm-blue-300); }
.gm-navsheet nav .gm-navsheet__sub {
  min-height: 44px;
  padding-left: 24px;
  font-family: var(--gm-font-body);
  font-size: var(--gm-fs-body-sm);
  color: var(--gm-text-secondary);
}

/* Above the breakpoint the sheet can never be reachable, burger or not. */
@media (min-width: 1101px) { .gm-navsheet { display: none !important; } }