/* ========================================================================== MBG Ridgeline, expanded visual system Molded By Grace Business Group LLC Loaded after mbg.css. Everything below is one system. The same four ideas repeat at every scale: a drawn gold contour, an incomplete arc, a hairline grid, and a single accent that is rationed. Nothing here is decorative for its own sake. ========================================================================== */ :root { /* Editorial display scale. Larger top end than the base scale so the display-to-body contrast reads as designed rather than as a template. */ /* Display tops out at 56px. The earlier 80px cap looked impressive in isolation but pushed the hero CTAs below the fold and forced the headline onto four lines. */ --mbg-display: clamp(2.25rem, 1.45rem + 2.6vw, 3.5rem); --mbg-display-sm: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem); /* One motion language. Every transition on the site uses one of these. */ --mbg-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --mbg-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --mbg-dur-fast: 180ms; --mbg-dur: 340ms; --mbg-dur-slow: 620ms; --mbg-gutter: 24px; --mbg-content: 1160px; } /* -------------------------------------------------------------------------- 22. Motion system One reveal primitive, used everywhere. The hidden state is only applied when JavaScript has added .mbg-motion to , so if the script fails or is blocked the page renders fully visible with no hidden content. Reduced motion is handled twice: the script skips observing entirely, and the media query below neutralises the transforms regardless. -------------------------------------------------------------------------- */ .mbg-motion .mbg-reveal { opacity: 0; transform: translate3d(0, 18px, 0); will-change: opacity, transform; } .mbg-motion .mbg-reveal.is-in { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity var(--mbg-dur-slow) var(--mbg-ease-out), transform var(--mbg-dur-slow) var(--mbg-ease-out); transition-delay: var(--mbg-delay, 0ms); will-change: auto; } /* Staggered children. The parent carries the group, each child its own step. Steps are capped at six so a long list never waits a noticeable time. */ .mbg-motion .mbg-stagger > * { opacity: 0; transform: translate3d(0, 16px, 0); } .mbg-motion .mbg-stagger.is-in > * { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity var(--mbg-dur-slow) var(--mbg-ease-out), transform var(--mbg-dur-slow) var(--mbg-ease-out); } .mbg-motion .mbg-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; } .mbg-motion .mbg-stagger.is-in > *:nth-child(2) { transition-delay: 90ms; } .mbg-motion .mbg-stagger.is-in > *:nth-child(3) { transition-delay: 180ms; } .mbg-motion .mbg-stagger.is-in > *:nth-child(4) { transition-delay: 270ms; } .mbg-motion .mbg-stagger.is-in > *:nth-child(5) { transition-delay: 360ms; } .mbg-motion .mbg-stagger.is-in > *:nth-child(n + 6) { transition-delay: 450ms; } /* A gold rule that draws itself in when its section arrives. */ .mbg-motion .mbg-rule > .elementor-widget-container::before, .mbg-motion .mbg-rule::before, .mbg-motion .mbg-ruled::before { width: 0; } .mbg-motion .mbg-rule.is-in > .elementor-widget-container::before, .mbg-motion .mbg-rule.is-in::before, .mbg-motion .mbg-ruled.is-in::before { width: 40px; transition: width var(--mbg-dur-slow) var(--mbg-ease-out) 60ms; } /* The hero ridgeline draws once on entry. Staggered so the contours settle in sequence rather than arriving as one block. */ .mbg-ridge-path { stroke-dasharray: var(--len, 2400); stroke-dashoffset: var(--len, 2400); } .mbg-motion .mbg-ridge.is-in .mbg-ridge-path { animation: mbg-draw 2400ms var(--mbg-ease-out) forwards; animation-delay: var(--mbg-delay, 0ms); } /* Without the script, or with motion reduced, the contours are simply drawn. */ html:not(.mbg-motion) .mbg-ridge-path { stroke-dashoffset: 0; } @keyframes mbg-draw { to { stroke-dashoffset: 0; } } /* The incomplete arc behind the ridge. Echoes the arc in the MBG mark without reproducing it. */ .mbg-arc-path { stroke-dasharray: var(--len, 1400); stroke-dashoffset: var(--len, 1400); } .mbg-motion .mbg-ridge.is-in .mbg-arc-path { animation: mbg-draw 2800ms var(--mbg-ease-out) 200ms forwards; } html:not(.mbg-motion) .mbg-arc-path { stroke-dashoffset: 0; } /* Slow drift on decorative background layers only. Never on content. */ .mbg-motion .mbg-drift { animation: mbg-drift 34s ease-in-out infinite alternate; } @keyframes mbg-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-16px, -10px, 0); } } /* An arrow that moves on hover. Used on every secondary link on the site so the gesture is learned once. */ .mbg-arrow { display: inline-block; margin-left: 0.45em; transition: transform var(--mbg-dur) var(--mbg-ease); } a:hover .mbg-arrow, a:focus-visible .mbg-arrow, .elementor-button:hover .mbg-arrow { transform: translateX(5px); } /* Everything animated is switched off together, in one place. */ @media (prefers-reduced-motion: reduce) { .mbg-motion .mbg-reveal, .mbg-motion .mbg-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } .mbg-ridge-path, .mbg-arc-path { stroke-dashoffset: 0 !important; animation: none !important; } .mbg-motion .mbg-drift { animation: none !important; } .mbg-motion .mbg-rule > .elementor-widget-container::before, .mbg-motion .mbg-rule::before, .mbg-motion .mbg-ruled::before { width: 40px !important; transition: none !important; } .mbg-arrow { transition: none !important; } } /* -------------------------------------------------------------------------- 23. The ridgeline motif A layered contour drawing used in the hero, in section dividers, and as a quiet background texture. It is always decorative, always aria-hidden, and never carries information. -------------------------------------------------------------------------- */ .mbg-ridge { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .mbg-ridge svg { display: block; width: 100%; height: 100%; } .mbg-ridge-path, .mbg-arc-path { fill: none; vector-effect: non-scaling-stroke; } /* On light grounds the contours sit just above the background so they read as texture rather than as content. */ .mbg-ridge-light .mbg-ridge-path { stroke: var(--mbg-accent); stroke-width: 1.25; } /* The leading contour carries the drawing; the echoes fall away behind it. */ .mbg-ridge-light .mbg-ridge-path:nth-of-type(1) { opacity: 0.78; stroke-width: 1.6; } .mbg-ridge-light .mbg-ridge-path:nth-of-type(2) { opacity: 0.34; } .mbg-ridge-light .mbg-ridge-path:nth-of-type(3) { opacity: 0.22; } .mbg-ridge-light .mbg-ridge-path:nth-of-type(4) { opacity: 0.14; } .mbg-ridge-light .mbg-ridge-path:nth-of-type(5) { opacity: 0.09; } .mbg-ridge-light .mbg-arc-path { stroke: var(--mbg-accent); stroke-width: 1; opacity: 0.42; } /* On the navy bands the contours sit behind body copy, so they run much quieter than in the hero. Anchored to the bottom of the band by preserveAspectRatio, they read as a horizon rather than as diagonal noise. */ .mbg-ridge-dark .mbg-ridge-path { stroke: var(--mbg-accent-light); stroke-width: 1.25; } .mbg-ridge-dark .mbg-ridge-path:nth-of-type(1) { opacity: 0.3; } .mbg-ridge-dark .mbg-ridge-path:nth-of-type(2) { opacity: 0.2; } .mbg-ridge-dark .mbg-ridge-path:nth-of-type(3) { opacity: 0.13; } .mbg-ridge-dark .mbg-ridge-path:nth-of-type(4) { opacity: 0.09; } .mbg-ridge-dark .mbg-ridge-path:nth-of-type(5) { opacity: 0.06; } .mbg-ridge-dark .mbg-arc-path { stroke: var(--mbg-accent-light); stroke-width: 1; opacity: 0.16; } /* A hairline grid, one of the four repeating ideas. Sits under the ridge in the hero and under the manifesto panel. */ /* The hairline grid is aligned to the 1160px content column, not to the viewport. Spanning the full width put the lines at arbitrary positions that cut across the headline instead of reading as structure. */ .mbg-grid-lines { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, var(--mbg-content)); pointer-events: none; background-image: linear-gradient(to right, rgba(16, 29, 45, 0.045) 1px, transparent 1px); background-size: calc(100% / 4) 100%; } .mbg-band-dark .mbg-grid-lines { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px); } /* The grid is texture on navy, where it reads as structure. On white it competed with the headline, so it is dark-band only. */ .mbg-grid-lines { display: none; } .mbg-band-dark .mbg-grid-lines { display: block; } @media (max-width: 767px) { .mbg-band-dark .mbg-grid-lines { display: none; } } /* Fine grain. One tiny inline SVG, no image request, no library. Only on the navy bands, where flat colour would otherwise look plastic. */ .mbg-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"); } /* Section transition. A drawn contour that separates one band from the next in place of a plain border. */ .mbg-divider { position: relative; height: 96px; overflow: hidden; pointer-events: none; } .mbg-divider svg { display: block; width: 100%; height: 100%; } @media (max-width: 767px) { .mbg-divider { height: 60px; } } /* -------------------------------------------------------------------------- 24. Editorial typography -------------------------------------------------------------------------- */ .mbg-display { font-family: var(--mbg-font-heading); font-size: var(--mbg-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.018em; margin: 0; } .mbg-display-sm { font-family: var(--mbg-font-heading); font-size: var(--mbg-display-sm); font-weight: 600; line-height: 1.06; letter-spacing: -0.014em; margin: 0; } /* Emphasis inside a headline stays in the same family, as italic. Never a second typeface. */ .mbg-em { font-style: italic; } /* The one place gold is allowed to touch a letterform: a single word in a display heading, at display size, where it clears contrast comfortably. */ .mbg-gold { color: var(--mbg-accent-deep); } .mbg-band-dark .mbg-gold { color: var(--mbg-accent-light); } .mbg-lede-lg { font-size: clamp(1.1875rem, 1.06rem + 0.5vw, 1.375rem); line-height: 1.5; color: var(--mbg-ink-muted); max-width: 40ch; } .mbg-band-dark .mbg-lede-lg { color: #C8CFD9; } /* Editorial page introduction, used at the top of every page except home. */ .mbg-page-head { position: relative; overflow: clip; padding-top: clamp(64px, 4vw + 40px, 116px); padding-bottom: clamp(48px, 3vw + 30px, 88px); border-bottom: 1px solid var(--mbg-line); } .mbg-page-head .mbg-page-head-inner { position: relative; z-index: 1; } .mbg-page-head h1 { margin: 12px 0 20px; } /* Pull quote and belief statement. Used at most once per page. */ .mbg-pullquote { position: relative; margin: 0; padding-left: 28px; border-left: 2px solid var(--mbg-accent); font-family: var(--mbg-font-heading); font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); font-weight: 600; line-height: 1.28; letter-spacing: -0.01em; color: var(--mbg-ink); } .mbg-band-dark .mbg-pullquote { border-left-color: var(--mbg-accent-light); color: #FFFFFF; } .mbg-pullquote cite { display: block; margin-top: 16px; font-family: var(--mbg-font-body); font-size: 0.875rem; font-style: normal; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mbg-ink-muted); } .mbg-band-dark .mbg-pullquote cite { color: var(--mbg-accent-light); } /* -------------------------------------------------------------------------- 25. Layout primitives -------------------------------------------------------------------------- */ .mbg-wrap { width: 100%; max-width: var(--mbg-content); margin-inline: auto; padding-inline: var(--mbg-gutter); } .mbg-section { position: relative; padding-top: var(--mbg-space-xl); padding-bottom: var(--mbg-space-xl); } .mbg-section-tight { padding-top: var(--mbg-space-lg); padding-bottom: var(--mbg-space-lg); } /* The editorial split: a sticky label column beside a reading column. This is the layout that makes the long pages feel composed rather than stacked. */ .mbg-split { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(32px, 4vw, 80px); align-items: start; } /* Sticky needs a containing block taller than itself. A grid item sized to its own content is its own constraint rect, so the label pinned for a single frame and then released. The column now stretches and its child does the sticking, which gives it the whole section to travel through. */ .mbg-split-label { position: static; align-self: stretch; } .mbg-split-label > * { position: sticky; top: 112px; display: block; } .mbg-split-body > * + * { margin-top: 22px; } .mbg-split-body p { max-width: 62ch; } @media (max-width: 900px) { .mbg-split { grid-template-columns: 1fr; gap: 20px; } /* Sticky must disengage before the label and the body can collide. */ .mbg-split-label > * { position: static; top: auto; } } /* Plain column layouts for shorter passages. */ .mbg-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); } .mbg-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); } .mbg-cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); } @media (max-width: 1024px) { .mbg-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .mbg-cols-2, .mbg-cols-3, .mbg-cols-4 { grid-template-columns: 1fr; } } /* Section heading block, used at the top of most sections. */ .mbg-section-head { max-width: 52ch; margin-bottom: clamp(36px, 4vw, 64px); } .mbg-section-head .mbg-eyebrow { display: block; margin-bottom: 14px; } .mbg-section-head h2 { margin: 0 0 18px; } .mbg-section-head p { color: var(--mbg-ink-muted); max-width: 60ch; margin-bottom: 0; } .mbg-band-dark .mbg-section-head p { color: #C8CFD9; } /* A gold rule available on any element rather than only on Elementor widgets. */ .mbg-ruled::before { content: ""; display: block; width: 40px; height: 2px; background: var(--mbg-accent); margin-bottom: 20px; } .mbg-band-dark .mbg-ruled::before { background: var(--mbg-accent-light); } /* -------------------------------------------------------------------------- 26. Homepage hero Text-led. The mark is present only as a watermark behind the contours, at an opacity where it registers as texture and never competes with the H1. -------------------------------------------------------------------------- */ .mbg-hero-v2 { position: relative; overflow: clip; background: var(--mbg-bg); border-bottom: 1px solid var(--mbg-line); padding-top: clamp(56px, 5vw + 24px, 104px); padding-bottom: clamp(64px, 5vw + 28px, 112px); } .mbg-hero-v2 .mbg-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: clamp(32px, 4vw, 72px); align-items: center; } /* Width is set in rem, not ch. A ch here is measured against the body font, so a ch-based cap produced a 290px column holding a 56px headline. */ .mbg-hero-copy-v2 { max-width: 37rem; } .mbg-hero-copy-v2 .mbg-eyebrow { display: block; margin-bottom: 20px; } .mbg-hero-copy-v2 h1 { font-size: var(--mbg-display); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 26px; } .mbg-hero-copy-v2 .mbg-hero-lede { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.6; color: var(--mbg-ink-muted); max-width: 46ch; margin: 0 0 32px; } /* The visual half. A layered composition: watermark, contours, arc, grid. */ .mbg-hero-visual { position: relative; aspect-ratio: 5 / 4; min-height: 300px; } @media (max-width: 1024px) { .mbg-hero-visual { aspect-ratio: 16 / 9; min-height: 220px; } } /* The emblem is a small signature in the corner, not a centred watermark. Centred, it sat directly behind the drawn ridgeline and the two mountain drawings turned into mud. */ .mbg-hero-watermark { position: absolute; right: 0; bottom: 0; width: 58px; opacity: 0.42; z-index: 3; } .mbg-hero-watermark img { display: block; width: 100%; height: auto; } @media (max-width: 767px) { .mbg-hero-watermark { width: 56px; } } /* Scroll cue. A drawn line rather than a bouncing chevron. */ .mbg-scrollcue { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 14px; margin-top: clamp(36px, 4vw, 60px); font-family: var(--mbg-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mbg-ink-muted); text-decoration: none; min-height: 44px; } .mbg-scrollcue::after { content: ""; width: 56px; height: 1px; background: var(--mbg-accent); transform-origin: left center; } .mbg-motion .mbg-scrollcue::after { animation: mbg-cue 3.2s var(--mbg-ease) 1.4s infinite; } @keyframes mbg-cue { 0%, 62%, 100% { transform: scaleX(1); opacity: 0.85; } 30% { transform: scaleX(1.5); opacity: 1; } } .mbg-scrollcue:hover { color: var(--mbg-ink); } .mbg-scrollcue:hover::after { background: var(--mbg-ink); } @media (prefers-reduced-motion: reduce) { .mbg-motion .mbg-scrollcue::after { animation: none !important; } } @media (max-width: 1024px) { .mbg-hero-v2 .mbg-hero-inner { grid-template-columns: 1fr; gap: 32px; } .mbg-hero-copy-v2 { max-width: 44ch; } } @media (max-width: 767px) { /* aspect-ratio combined with min-height sets a minimum WIDTH too, which on a 320px phone forced the whole hero grid to 360px and pushed the copy off screen. Give the visual an explicit height instead and let it shrink. */ .mbg-hero-visual { order: 2; aspect-ratio: auto; min-height: 0; height: 190px; width: 100%; } .mbg-hero-copy-v2 { order: 1; } } /* A grid item will not shrink below its content unless told to. */ .mbg-hero-visual, .mbg-hero-copy-v2 { min-width: 0; } /* Two side-by-side buttons do not fit a small phone. Stack them rather than letting the second one hang off the edge. */ @media (max-width: 420px) { .mbg-cta-row { flex-direction: column; align-items: stretch; } .mbg-cta-row .mbg-btn, .mbg-cta-row .elementor-button { width: 100%; } } /* -------------------------------------------------------------------------- 27. Content bands -------------------------------------------------------------------------- */ .mbg-band { position: relative; overflow: clip; } .mbg-band > .mbg-wrap { position: relative; z-index: 1; } .mbg-band-dark.mbg-band { isolation: isolate; } /* Copy sits left and the motif sits right, on every band, exactly as in the hero. Masking the drawing out of the reading column stops a contour running through the letterforms, which no opacity value fixes properly. The hero's own ridge is scoped to its visual column and is not affected. */ .mbg-band .mbg-ridge, .mbg-page-head .mbg-ridge, .mbg-manifesto .mbg-ridge, .mbg-cta-band .mbg-ridge { -webkit-mask-image: linear-gradient(to right, transparent 54%, #000 84%); mask-image: linear-gradient(to right, transparent 54%, #000 84%); } @media (max-width: 900px) { .mbg-band .mbg-ridge, .mbg-page-head .mbg-ridge, .mbg-manifesto .mbg-ridge, .mbg-cta-band .mbg-ridge { -webkit-mask-image: linear-gradient(to bottom, transparent 58%, #000 100%); mask-image: linear-gradient(to bottom, transparent 58%, #000 100%); } } /* In the hero the drawing is the feature. Everywhere else it is background and runs much quieter. */ .mbg-page-head .mbg-ridge-light .mbg-ridge-path, .mbg-band .mbg-ridge-light .mbg-ridge-path { opacity: 0.2; } .mbg-page-head .mbg-ridge-light .mbg-ridge-path:nth-of-type(1), .mbg-band .mbg-ridge-light .mbg-ridge-path:nth-of-type(1) { opacity: 0.34; stroke-width: 1.25; } .mbg-page-head .mbg-ridge-light .mbg-arc-path, .mbg-band .mbg-ridge-light .mbg-arc-path { opacity: 0.2; } /* -------------------------------------------------------------------------- 28. Manifesto panel The one place on the site where type is allowed to run large over a navy ground with nothing else competing. -------------------------------------------------------------------------- */ .mbg-manifesto { position: relative; overflow: clip; padding-top: clamp(72px, 6vw, 128px); padding-bottom: clamp(72px, 6vw, 128px); } /* Width in rem, not ch: a ch is measured against the body font, so 24ch gave a 200px column holding 44px display type, three words to a line. */ .mbg-manifesto-inner { position: relative; z-index: 2; max-width: 46rem; } .mbg-manifesto p { font-family: var(--mbg-font-heading); font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.75rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.012em; color: #FFFFFF; margin: 0; } .mbg-manifesto .mbg-manifesto-foot { font-family: var(--mbg-font-body); font-size: 1.0625rem; font-weight: 400; line-height: 1.6; letter-spacing: 0; color: #C8CFD9; margin-top: 28px; max-width: 52ch; } /* -------------------------------------------------------------------------- 29. Brand cards, refined Layered hover: the border warms, the card lifts one pixel, the gold top rule brightens, and the arrow travels. Four small changes, one gesture. -------------------------------------------------------------------------- */ .mbg-brandcard { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--mbg-bg); border: 1px solid var(--mbg-line); border-top: 3px solid var(--mbg-accent); border-radius: var(--mbg-radius); overflow: hidden; transition: border-color var(--mbg-dur) var(--mbg-ease), transform var(--mbg-dur) var(--mbg-ease); } .mbg-brandcard:hover, .mbg-brandcard:focus-within { border-color: #C4C9D1; border-top-color: var(--mbg-accent-light); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .mbg-brandcard:hover, .mbg-brandcard:focus-within { transform: none; } } .mbg-brandcard .mbg-logo-slot { position: relative; overflow: hidden; } /* A contour wash inside the logo slot ties the card to the hero motif. */ .mbg-brandcard .mbg-logo-slot::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(120% 90% at 50% 130%, rgba(166, 123, 56, 0.13) 0%, rgba(166, 123, 56, 0) 62%); pointer-events: none; } .mbg-brandcard .mbg-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--mbg-space-md); } .mbg-brandcard .mbg-card-body > .mbg-card-foot { margin-top: auto; padding-top: 20px; } /* Category label. All caps, letterspaced, rationed to card headers. */ .mbg-cat { display: block; font-family: var(--mbg-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--mbg-accent-deep); margin: 0 0 10px; } .mbg-band-dark .mbg-cat { color: var(--mbg-accent-light); } /* Status, stated in words. Never colour alone. */ .mbg-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mbg-font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; color: var(--mbg-ink-muted); border: 1px solid var(--mbg-line); border-radius: var(--mbg-radius-sm); padding: 6px 12px; background: var(--mbg-surface); } .mbg-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mbg-accent); flex: 0 0 auto; } .mbg-band-dark .mbg-status { color: #C8CFD9; border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.05); } .mbg-band-dark .mbg-status::before { background: var(--mbg-accent-light); } /* -------------------------------------------------------------------------- 30. Brand profiles, Our Brands page Long editorial sections rather than three separate routes. Alternating sides give the page its rhythm. -------------------------------------------------------------------------- */ .mbg-profile { position: relative; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 80px); align-items: start; } .mbg-profile-alt .mbg-profile-visual { order: 2; } /* Same reason as the split label: the column stretches, the inner block sticks. */ .mbg-profile-visual { position: static; align-self: stretch; } .mbg-profile-sticky { position: sticky; top: 112px; } .mbg-profile-mark { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; padding: 32px; background: var(--mbg-surface); border: 1px solid var(--mbg-line); border-top: 3px solid var(--mbg-accent); border-radius: var(--mbg-radius); overflow: hidden; text-align: center; } .mbg-profile-mark img { max-height: 110px; width: auto; } .mbg-profile-mark .mbg-logo-slot-name { position: relative; z-index: 1; font-family: var(--mbg-font-heading); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 600; line-height: 1.2; color: var(--mbg-ink); margin: 0; } .mbg-profile-body > * + * { margin-top: 20px; } .mbg-profile-body p { max-width: 62ch; color: var(--mbg-ink-muted); } .mbg-profile-body h2 { margin: 0; } .mbg-profile-body h3 { font-family: var(--mbg-font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mbg-ink); margin: 0; } @media (max-width: 900px) { .mbg-profile { grid-template-columns: 1fr; gap: 26px; } .mbg-profile-alt .mbg-profile-visual { order: 0; } .mbg-profile-sticky { position: static; top: auto; } .mbg-profile-mark { min-height: 150px; padding: 24px; } } /* -------------------------------------------------------------------------- 31. Project cards, Our Work Deliberately a different object from a brand card. No gold top rule, a written ownership line, and a service tag row. Conflating the two is the most damaging error this site could make, so they must not look alike. -------------------------------------------------------------------------- */ .mbg-projectcard { display: flex; flex-direction: column; height: 100%; background: var(--mbg-bg); border: 1px solid var(--mbg-line); border-radius: var(--mbg-radius); overflow: hidden; transition: border-color var(--mbg-dur) var(--mbg-ease); } .mbg-projectcard:hover, .mbg-projectcard:focus-within { border-color: #B9BFC8; } .mbg-projectcard .mbg-card-body { padding: var(--mbg-space-md); flex: 1 1 auto; } .mbg-projectcard .mbg-ownership { display: block; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--mbg-line); } .mbg-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; } .mbg-tags li { font-family: var(--mbg-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; color: var(--mbg-ink-muted); border: 1px solid var(--mbg-line); border-radius: var(--mbg-radius-sm); padding: 5px 10px; background: var(--mbg-surface); } .mbg-band-dark .mbg-tags li { color: #C8CFD9; border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.05); } /* An empty slot that is honest about being empty rather than being filled with an invented project. */ .mbg-slot-open { display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 180px; padding: var(--mbg-space-md); border: 1px dashed var(--mbg-line); border-radius: var(--mbg-radius); background: transparent; } .mbg-slot-open p { color: var(--mbg-ink-muted); margin: 0; max-width: 34ch; } /* -------------------------------------------------------------------------- 32. Numbered structure list Used where the reference sites would put a statistics band. It carries the same visual rhythm without asserting a single number MBG cannot support. -------------------------------------------------------------------------- */ .mbg-numbered { list-style: none; margin: 0; padding: 0; counter-reset: mbg-n; } .mbg-numbered > li { position: relative; padding: 26px 0 26px 62px; border-top: 1px solid var(--mbg-line); } .mbg-numbered > li:last-child { border-bottom: 1px solid var(--mbg-line); } .mbg-numbered > li::before { content: counter(mbg-n, decimal-leading-zero); counter-increment: mbg-n; position: absolute; left: 0; top: 26px; font-family: var(--mbg-font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; color: var(--mbg-accent-deep); } .mbg-numbered h3 { margin: 0 0 8px; font-size: 1.1875rem; } .mbg-numbered p { margin: 0; color: var(--mbg-ink-muted); max-width: 62ch; } .mbg-band-dark .mbg-numbered > li { border-top-color: rgba(255, 255, 255, 0.16); } .mbg-band-dark .mbg-numbered > li:last-child { border-bottom-color: rgba(255, 255, 255, 0.16); } .mbg-band-dark .mbg-numbered > li::before { color: var(--mbg-accent-light); } .mbg-band-dark .mbg-numbered p { color: #C8CFD9; } @media (max-width: 480px) { .mbg-numbered > li { padding-left: 0; padding-top: 44px; } .mbg-numbered > li::before { top: 20px; } } /* -------------------------------------------------------------------------- 33. Header refinement on scroll The header never changes height, so nothing below it moves. Only the background, the hairline and the mark's scale respond to scroll. That keeps cumulative layout shift at zero. -------------------------------------------------------------------------- */ .mbg-header { transition: background-color var(--mbg-dur) var(--mbg-ease), border-color var(--mbg-dur) var(--mbg-ease), box-shadow var(--mbg-dur) var(--mbg-ease); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); background: rgba(255, 255, 255, 0.86); } .mbg-header.is-scrolled { background: rgba(255, 255, 255, 0.97); border-bottom-color: #CDD3DB; box-shadow: 0 1px 14px rgba(16, 29, 45, 0.07); } .mbg-header .mbg-logo-mark img { transition: transform var(--mbg-dur) var(--mbg-ease); transform-origin: left center; } .mbg-header.is-scrolled .mbg-logo-mark img { transform: scale(0.9); } /* A gold read-progress hairline along the bottom edge of the header. Decorative, never the only indication of anything. */ .mbg-header::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--mbg-progress, 0%); background: var(--mbg-accent); transition: width 120ms linear; pointer-events: none; } /* Navigation microinteraction: the underline grows from the left. The item also carries a 44px target height, which the default 30px did not meet. The header is taller than this already, so nothing moves. */ .mbg-header .elementor-nav-menu--main .elementor-item { position: relative; display: inline-flex; align-items: center; min-height: 44px; } .mbg-header .elementor-nav-menu--main .elementor-item::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px; background: var(--mbg-accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--mbg-dur) var(--mbg-ease); } .mbg-header .elementor-nav-menu--main .elementor-item:hover::after, .mbg-header .elementor-nav-menu--main .elementor-item.elementor-item-active::after { transform: scaleX(1); } /* The old inset shadow underline is replaced by the animated rule above. */ .mbg-header .elementor-nav-menu--main .elementor-item.elementor-item-active { box-shadow: none; } /* The dropdown panel has its own ground, so the rule must not bleed into it. */ .mbg-header .elementor-nav-menu--dropdown .elementor-item::after { display: none; } @media (prefers-reduced-motion: reduce) { .mbg-header, .mbg-header .mbg-logo-mark img, .mbg-header .elementor-nav-menu--main .elementor-item::after, .mbg-header::after { transition: none !important; } } /* -------------------------------------------------------------------------- 34. Footer composition -------------------------------------------------------------------------- */ .mbg-footer { position: relative; overflow: clip; } .mbg-footer > * { position: relative; z-index: 1; } /* The footer's own top padding is set on the theme-builder template so the contour gets a clear band above the columns. */ /* Standalone navigation and brand links carry a comfortable target height. Inline links inside a sentence are deliberately left alone, since resizing them would break the line box they sit in. */ .mbg-footer .elementor-nav-menu--main .elementor-item { display: inline-flex; align-items: center; min-height: 44px; } .mbg-header .mbg-logo-lockup, .mbg-footer-lockup { min-height: 44px; } .mbg-footer-lockup { display: flex; align-items: center; gap: 14px; text-decoration: none; } .mbg-footer-lockup img { width: 54px; height: auto; display: block; flex: 0 0 auto; } .mbg-footer-lockup .mbg-wordmark-name { color: #FFFFFF; font-size: 1.375rem; } .mbg-footer-lockup .mbg-wordmark-sub { color: var(--mbg-accent-light); } .mbg-footer-lockup:hover .mbg-wordmark-name { color: var(--mbg-accent-light); } /* A drawn contour along the top edge of the footer, so the footer belongs to the same drawing as the hero. */ /* A contour along the footer's top edge, faded out before it reaches the columns so it never runs behind the links. */ .mbg-footer-ridge { position: absolute; top: 0; left: 0; right: 0; height: 92px; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 60%); mask-image: linear-gradient(to bottom, #000 0%, transparent 60%); } .mbg-footer-ridge svg { display: block; width: 100%; height: 100%; } /* -------------------------------------------------------------------------- 35. Contact band and closing CTA -------------------------------------------------------------------------- */ .mbg-cta-band { position: relative; overflow: clip; padding-top: clamp(64px, 5vw, 104px); padding-bottom: clamp(64px, 5vw, 104px); } .mbg-cta-band .mbg-cta-inner { position: relative; z-index: 2; max-width: 46ch; } .mbg-cta-band h2 { margin: 0 0 18px; } .mbg-cta-band p { color: #C8CFD9; margin: 0 0 30px; max-width: 52ch; } /* -------------------------------------------------------------------------- 36. Utilities and safety -------------------------------------------------------------------------- */ /* Elementor ships `.elementor hr { margin: 0 }`, which outranks a bare class. Matching element plus class ties on specificity, and this sheet loads last. */ hr.mbg-hr { border: 0; border-top: 1px solid var(--mbg-line); margin: clamp(40px, 5vw, 72px) 0; } .mbg-band-dark .mbg-hr { border-top-color: rgba(255, 255, 255, 0.16); } .mbg-stack-sm > * + * { margin-top: 14px; } .mbg-stack > * + * { margin-top: 22px; } .mbg-stack-lg > * + * { margin-top: 36px; } /* Decorative layers are hidden from assistive technology in markup with aria-hidden, and from print here. */ @media print { .mbg-ridge, .mbg-grid-lines, .mbg-divider, .mbg-hero-watermark, .mbg-footer-ridge, .mbg-scrollcue { display: none !important; } } /* Nothing on this site scrolls sideways. Belt and braces for the absolutely positioned decorative layers above. */ .mbg-hero-v2, .mbg-band, .mbg-page-head, .mbg-manifesto, .mbg-cta-band { max-width: 100vw; } /* Anchor targets clear the sticky header. */ [id] { scroll-margin-top: 104px; } @media (max-width: 767px) { :root { --mbg-gutter: 20px; } .mbg-split-body p, .mbg-profile-body p { max-width: none; } } @media (max-width: 360px) { :root { --mbg-gutter: 16px; } } /* ========================================================================== MBG Ridgeline, batch 3: corporate refocus Added 2026-08-05 (information architecture, interaction and logo batch). Sections 37 to 45 below are additive. Nothing above this line was removed, so a rollback is a truncation at this comment plus the paired changes in mbg.js and functions.php. ========================================================================== */ /* -------------------------------------------------------------------------- 37. Progressive-enhancement contract for interactive components The rule that keeps this safe is the same one the motion system uses. A panel is only collapsed when carries .mbg-js, which is set inline before first paint and removed again by a 2,500 ms failsafe if the script never reports in. With no JavaScript, blocked JavaScript, or a script error, every panel renders open and every word on the page is readable. Markup ships in its open state: