/* ══════════════════════════════════════════════════════════════════════════
   MCCore brand surface system
   ──────────────────────────────────────────────────────────────────────────
   Shared by the marketing pages that use the ink-field design language:
     /            views/public/newhome.php
     /solutions   views/public/Solutions.php
     /solutions/view  views/solutions/view.php   (MCBuilder-rendered pages)

   Register: brand. Lane: control-room instrumentation.
   Colour strategy: committed. A deep ink field carries the surface, brand
   indigo is the signal channel, sodium amber marks live state, and a single
   paper-white section per page breaks the rhythm.

   Pair with assests/js/mccore-brand.js, which owns the motion layer.
   Load both through views/public/partials/brand_head.php / brand_foot.php.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Field. Ink, not navy: chroma pulled right down so the surface reads as
       a dark neutral rather than a blue-tinted "tech" gradient. */
    --mcb-void:      oklch(15% 0.008 264);
    --mcb-void-2:    oklch(20.5% 0.010 264);
    --mcb-void-3:    oklch(26% 0.012 264);
    --mcb-line:      oklch(35% 0.013 264);
    --mcb-line-soft: oklch(27% 0.010 264);

    /* Ink on field */
    --mcb-txt:       oklch(95% 0.004 264);
    --mcb-txt-2:     oklch(76% 0.007 264);
    --mcb-txt-3:     oklch(60% 0.008 264);

    /* ONE accent, matched to the brand's actual #3b5bdb rather than the
       brighter electric indigo this started as. There is no second hue on
       these pages: emphasis comes from weight, size and position. */
    --mcb-signal:    oklch(53% 0.170 268);
    --mcb-signal-hi: oklch(68% 0.130 268);
    --mcb-signal-dp: oklch(34% 0.120 268);

    /* Retained for genuine state only (a live indicator, a failing meter),
       never for decoration or for telling two categories apart. */
    --mcb-amber:     oklch(76% 0.110 78);
    --mcb-mint:      oklch(70% 0.100 165);
    --mcb-red:       oklch(60% 0.140 25);

    /* Module channels are a single-hue ramp, not six different colours.
       Assigning every category its own hue is the tell; six steps of one
       accent keeps each module identifiable without the rainbow. */
    --mcb-m-kb: oklch(74% 0.085 268);
    --mcb-m-tf: oklch(68% 0.110 268);
    --mcb-m-fm: oklch(62% 0.135 268);
    --mcb-m-pp: oklch(56% 0.150 268);
    --mcb-m-oc: oklch(50% 0.155 268);
    --mcb-m-rd: oklch(44% 0.145 268);

    /* Paper break */
    --mcb-paper:     oklch(96.5% 0.003 264);
    --mcb-paper-2:   oklch(93% 0.005 264);
    --mcb-paper-ink: oklch(18% 0.010 264);
    --mcb-paper-ln:  oklch(85% 0.006 264);

    --mcb-display: 'Archivo', 'Manrope', system-ui, sans-serif;
    --mcb-body:    'Manrope', system-ui, sans-serif;
    --mcb-mono:    'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --mcb-gut:  clamp(20px, 5vw, 88px);
    --mcb-maxw: 1320px;

    /* Height of the shared shell's fixed nav. Pinned sections start below it
       rather than under it, so nothing hides behind the bar. */
    --mcb-nav: 72px;

    --mcb-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ── Shell behaviour ─────────────────────────────────────────────────────
   Lenis drives scroll position on brand pages; the shell's native
   smooth-scroll has to stand down or the two fight each other. */
html.lenis, html.lenis body { height: auto; }
html.lenis-smooth { scroll-behavior: auto !important; }
html.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
html.lenis-stopped { overflow: hidden; }
html:has(body.mcb-body) { scroll-behavior: auto; }

body.mcb-body { background: var(--mcb-void); }

/* The shared nav keeps its own appearance on brand pages. Only its behaviour
   changes: it condenses off the hero, retracts going down, returns going up.
   The 72px spacer stays in flow so nothing reflows when the bar resizes. */
body.mcb-body #site-nav {
    transform: translate3d(0, 0, 0);
    transition: transform .5s var(--mcb-ease);
    will-change: transform;
}
body.mcb-body #site-nav > div > div,
body.mcb-body #site-nav img { transition: height .35s var(--mcb-ease); }
body.mcb-body #site-nav.mcb-nav-condensed > div > div { height: 58px !important; }
body.mcb-body #site-nav.mcb-nav-condensed img { height: 26px; }
body.mcb-body #site-nav.mcb-nav-retracted { transform: translate3d(0, -100%, 0); }

#mcb-progress {
    position: absolute; left: 0; bottom: -1px;
    height: 2px; width: 100%;
    background: var(--mcb-signal);
    transform: scaleX(0); transform-origin: 0 50%;
    will-change: transform; pointer-events: none;
}

/* ── Field ───────────────────────────────────────────────────────────────── */
.mcb {
    font-family: var(--mcb-body);
    background: var(--mcb-void);
    color: var(--mcb-txt);
    position: relative;
    isolation: isolate;
}
/* Both halves wrapped in :where() so the whole selector scores (0,0,0).
   As `.mcb p` it scored (0,1,1) and silently beat every single-class paragraph
   rule a page defined; as `.mcb :where(p)` it scored (0,1,0), which still tied
   with page rules and won on source order whenever the page's inline <style>
   came first. Zero is the only value that reliably loses. */
:where(.mcb) :where(p) { margin: 0; }
.mcb-dim { color: var(--mcb-txt-3); }
.mcb-sig { color: var(--mcb-signal-hi); }

/* ── Type ────────────────────────────────────────────────────────────────── */
.mcb h1, .mcb h2, .mcb h3,
.mcb-h1, .mcb-h2, .mcb-h3 {
    font-family: var(--mcb-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-wrap: balance;
    margin: 0;
}
.mcb-h1 {
    font-size: clamp(2.35rem, 5.2vw, 5.3rem);
    line-height: 0.96;
    font-variation-settings: 'wdth' 102, 'wght' 780;
    letter-spacing: -0.035em;
}
.mcb-h1 strong, .mcb-h1 em { font-weight: inherit; font-style: normal; color: var(--mcb-signal-hi); }
.mcb-h2 {
    font-size: clamp(2.1rem, 4.9vw, 4.2rem);
    line-height: 0.94;
    font-variation-settings: 'wdth' 104, 'wght' 750;
}
.mcb-h3 {
    font-size: clamp(1.45rem, 2.5vw, 2.15rem);
    line-height: 1.04;
    font-variation-settings: 'wdth' 100, 'wght' 700;
    letter-spacing: -0.02em;
}
.mcb-lede {
    font-size: clamp(1.02rem, 1.25vw, 1.2rem);
    line-height: 1.68;
    color: var(--mcb-txt-2);
    max-width: 62ch;
    margin: 0;
}
.mcb-eyebrow {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--mcb-signal-hi);
    margin-bottom: clamp(16px, 2vw, 24px);
}
.mcb-mono {
    font-family: var(--mcb-mono);
    font-variation-settings: 'wdth' 87.5, 'wght' 400;
    letter-spacing: 0.06em;
    font-size: 0.68rem;
}
.mcb-note { font-size: 0.82rem; line-height: 1.5; color: var(--mcb-txt-3); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.mcb-wrap { max-width: var(--mcb-maxw); margin: 0 auto; padding-inline: var(--mcb-gut); }
.mcb-rule { height: 1px; background: var(--mcb-line-soft); border: 0; margin: 0; }
.mcb-section { padding: clamp(90px, 14vh, 180px) 0; border-top: 1px solid var(--mcb-line-soft); }
.mcb-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: clamp(28px, 5vw, 80px);
    align-items: end;
}

/* Hairline grid. Borders live on the cells so unfilled auto-fit tracks stay
   empty instead of painting a stray block of the gap colour. */
.mcb-grid {
    display: grid;
    border-top: 1px solid var(--mcb-line-soft);
    border-left: 1px solid var(--mcb-line-soft);
}
.mcb-grid > * {
    border-right: 1px solid var(--mcb-line-soft);
    border-bottom: 1px solid var(--mcb-line-soft);
    min-width: 0;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.mcb-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 26px;
    font-family: var(--mcb-body);
    font-size: 0.875rem; font-weight: 700; letter-spacing: -0.005em;
    border-radius: 2px; text-decoration: none; border: 1px solid transparent;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.mcb-btn svg { flex: none; transition: transform .3s var(--mcb-ease); }
.mcb-btn:hover svg { transform: translateX(4px); }
.mcb-btn-pri { background: var(--mcb-signal); color: oklch(98% 0.004 264); }
.mcb-btn-pri:hover { background: var(--mcb-signal-hi); color: var(--mcb-void); }
.mcb-btn-sec { border-color: var(--mcb-line); color: var(--mcb-txt-2); }
.mcb-btn-sec:hover { border-color: var(--mcb-txt-3); color: var(--mcb-txt); background: oklch(100% 0 0 / .03); }
.mcb-btn:focus-visible { outline: 2px solid var(--mcb-signal-hi); outline-offset: 3px; }

.mcb-link {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 0.9rem; font-weight: 700; color: var(--mcb-signal-hi);
    text-decoration: none; border-bottom: 1px solid transparent;
    transition: border-color .25s ease;
}
.mcb-link:hover { border-bottom-color: var(--mcb-signal-hi); }
.mcb-link svg { transition: transform .3s var(--mcb-ease); }
.mcb-link:hover svg { transform: translateX(4px); }

/* ── Surfaces ────────────────────────────────────────────────────────────── */
.mcb-panel {
    border: 1px solid var(--mcb-line);
    border-radius: 3px;
    background: var(--mcb-void-2);
    overflow: hidden;
}
.mcb-panel-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--mcb-line-soft);
    background: var(--mcb-void-3);
}
.mcb-panel-bar span {
    font-family: var(--mcb-mono); font-size: 0.53rem; letter-spacing: .17em;
    font-variation-settings: 'wdth' 87.5, 'wght' 500;
    text-transform: uppercase; color: var(--mcb-txt-3);
}

.mcb-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.58rem; font-weight: 700;
    padding: 4px 9px; border-radius: 2px;
    background: oklch(100% 0 0 / .06); color: var(--mcb-txt-2);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mcb-chip.sig  { background: oklch(62% 0.200 264 / .20); color: var(--mcb-signal-hi); }
.mcb-chip.ok   { background: oklch(76% 0.140 165 / .16); color: var(--mcb-mint); }
.mcb-chip.warn { background: oklch(80% 0.145 78 / .16);  color: var(--mcb-amber); }
.mcb-chip.bad  { background: oklch(64% 0.160 25 / .15);  color: var(--mcb-red); }

.mcb-live::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%; flex: none;
    background: currentColor;
    animation: mcb-blip 2.4s var(--mcb-ease) infinite;
}
@keyframes mcb-blip { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.mcb-av {
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    font-size: 0.62rem; font-weight: 800;
    background: var(--mcb-signal); color: oklch(98% 0.004 264);
}

/* Vendor and tenant marks arrive as opaque light-background rasters, so they
   get a nameplate rather than a filter that would wreck their colours. */
.mcb-mark {
    width: 38px; height: 38px; flex: none;
    border-radius: 2px;
    background: var(--mcb-paper);
    display: grid; place-items: center;
    overflow: hidden;
}
.mcb-mark img { width: 26px; height: 26px; object-fit: contain; }
.mcb-mark span {
    font-family: var(--mcb-display);
    font-variation-settings: 'wdth' 100, 'wght' 700;
    font-size: 0.95rem; color: var(--mcb-paper-ink);
}

/* ── Paper break section ─────────────────────────────────────────────────── */
.mcb-paper-sec {
    background: var(--mcb-paper);
    color: var(--mcb-paper-ink);
    padding: clamp(100px, 15vh, 180px) 0;
}
.mcb-paper-sec .mcb-h2, .mcb-paper-sec .mcb-h3 { color: var(--mcb-paper-ink); }
.mcb-paper-sec .mcb-lede { color: oklch(38% 0.014 264); }
.mcb-paper-sec .mcb-eyebrow { color: oklch(40% 0.10 264); }

/* ── Drenched close ──────────────────────────────────────────────────────── */
.mcb-close {
    background: var(--mcb-signal-dp);
    padding: clamp(96px, 15vh, 180px) 0;
    position: relative; overflow: hidden;
}
/* Flat, not a bloom. The radial glow behind a dark hero is the single most
   recognisable signature of a generated marketing page; every one of them is
   gone from this system. A committed field of the accent does the same job. */
.mcb-close-wash {
    position: absolute; inset: 0;
    background: linear-gradient(100deg, oklch(34% 0.120 268), oklch(29% 0.100 268) 62%);
    pointer-events: none; z-index: 0;
}
.mcb-close-inner { position: relative; z-index: 2; }
.mcb-close .mcb-h2 { color: oklch(98% 0.006 264); max-width: 17ch; }
.mcb-close p { color: oklch(88% 0.030 264); }
.mcb-close .mcb-btn-pri { background: oklch(98% 0.006 264); color: oklch(24% 0.12 264); }
.mcb-close .mcb-btn-pri:hover { background: var(--mcb-amber); color: oklch(24% 0.10 78); }
.mcb-close .mcb-btn-sec { border-color: oklch(100% 0 0 / .32); color: oklch(94% 0.02 264); }
.mcb-close .mcb-btn-sec:hover { background: oklch(100% 0 0 / .10); border-color: oklch(100% 0 0 / .55); }


/* ── Scroll cue ──────────────────────────────────────────────────────────
   These heroes fill the first screen, so without an affordance the page can
   read as if it ends there. A rail with a travelling dot, retired as soon as
   the visitor has actually scrolled. */
.mcb-cue {
    display: inline-flex; align-items: center; gap: 12px;
    margin-top: clamp(30px, 4vh, 52px);
    font-size: 0.78rem; letter-spacing: 0.01em;
    color: var(--mcb-txt-3);
    transition: opacity .45s var(--mcb-ease), transform .45s var(--mcb-ease);
    pointer-events: none;
}
.mcb-cue-rail {
    position: relative; flex: none;
    width: 1px; height: 34px;
    background: linear-gradient(to bottom, var(--mcb-line), transparent);
    overflow: hidden;
}
.mcb-cue-rail::after {
    content: ''; position: absolute; left: -1px; top: 0;
    width: 3px; height: 9px; border-radius: 2px;
    background: var(--mcb-signal-hi);
    animation: mcb-cue-travel 2.1s cubic-bezier(.5, 0, .35, 1) infinite;
}
@keyframes mcb-cue-travel {
    0%       { transform: translateY(-10px); opacity: 0; }
    28%      { opacity: 1; }
    72%      { opacity: 1; }
    100%     { transform: translateY(34px); opacity: 0; }
}
/* Set once the visitor has scrolled at all; there is nothing left to hint. */
.mcb-cue.mcb-cue-off { opacity: 0; transform: translateY(8px); }

@media (prefers-reduced-motion: reduce) {
    .mcb-cue-rail::after { animation: none; top: 4px; opacity: 1; }
    .mcb-cue { transition: none; }
}

/* ── Motion: JS-enhanced initial states ──────────────────────────────────
   Only applied once the enhancement layer is confirmed live, so the page is
   fully readable if the CDN never answers or JS is off. mccore-brand.js drops
   the class on a watchdog. */
html.mcb-js [data-rev] { opacity: 0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .mcb-split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    html.mcb-js [data-rev] { opacity: 1 !important; }
    .mcb-live::before { animation: none; }
    body.mcb-body #site-nav { transition: none; }
}