#mcrm-home-experience{--navy:#071525;--gold:#b89a5e;--ink:#f5f5f2;--sub:#a7afbb;--p:0;--reveal:0;--copy:0} #mcrm-home-experience *{box-sizing:border-box} #mcrm-home-experience a{color:inherit;text-decoration:none} #mcrm-home-experience button{font:inherit;color:inherit;cursor:pointer;border:0;background:none} #mcrm-home-experience button,#mcrm-home-experience a{-webkit-tap-highlight-color:transparent} #mcrm-home-experience button:focus-visible,#mcrm-home-experience a:focus-visible{outline:2px solid var(--gold);outline-offset:6px} #mcrm-home-experience{height:420svh} #mcrm-home-experience .mh-stage{overflow:hidden;isolation:isolate;background:var(--navy)} #mcrm-home-experience .mh-wordmark{position:absolute;left:0;top:0;margin:0;height:200px;font-size:200px;line-height:1;font-weight:200;letter-spacing:-.035em;transform-origin:0 0;white-space:nowrap;z-index:1;will-change:transform} #mcrm-home-experience .mh-letter{position:absolute;left:0;top:0;display:block;transform-origin:0 0;will-change:transform,clip-path} #mcrm-home-experience .mh-letter-gold{z-index:4;color:var(--gold);background:linear-gradient(110deg,#b38e48 0%,#dec282 32%,#eee0b3 48%,#c6a260 70%,#dcc28b 100%);background-size:170% 100%;background-position:calc(var(--p)*100%) center;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent} #mcrm-home-experience .mh-letter-white{visibility:hidden;color:var(--ink)} #mcrm-home-experience .mh-letter:nth-child(2){z-index:3} #mcrm-home-experience .mh-letter:nth-child(3){z-index:2} #mcrm-home-experience .mh-letter:nth-child(4){z-index:1} #mcrm-home-experience [data-reveal]{opacity:var(--reveal);visibility:hidden} #mcrm-home-experience .mh-is-revealed{visibility:visible} #mcrm-home-experience .mh-header{display:flex;align-items:center;justify-content:space-between;z-index:5;transform:translateY(calc((1 - var(--reveal))*-12px))} #mcrm-home-experience .mh-logo{font-size:29px;font-weight:300;letter-spacing:-2px;line-height:1;padding:10px 0} #mcrm-home-experience .mh-logo>span{color:var(--gold)} #mcrm-home-experience nav{display:flex;gap:36px;align-items:center} #mcrm-home-experience nav button,#mcrm-home-experience nav>a{font-size:11px;letter-spacing:1.2px;padding:15px 0;opacity:.75;position:relative} #mcrm-home-experience nav button:hover,#mcrm-home-experience nav>a:hover,#mcrm-home-experience nav .mh-active{opacity:1} #mcrm-home-experience .mh-active:after{content:'';width:20px;height:1px;position:absolute;bottom:7px;left:0;background:var(--gold)} #mcrm-home-experience .mh-chevron{margin-left:8px} #mcrm-home-experience .mh-menu-toggle{display:none} #mcrm-home-experience .mh-eyebrow{font-size:10px;letter-spacing:2.2px;color:var(--sub);display:flex;align-items:center;justify-content:center;gap:12px} #mcrm-home-experience .mh-eyebrow>span{width:24px;height:1px;background:var(--gold)} #mcrm-home-experience .mh-sector-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px;transform:translateY(calc((1 - var(--reveal))*15px))} #mcrm-home-experience .mh-sector{font-size:10px;font-weight:400;letter-spacing:1.8px;color:var(--sub);border-top:1px solid #b89a5e38;padding:16px 0 0;position:relative;display:flex;justify-content:space-between;align-items:center;min-height:32px} #mcrm-home-experience .mh-sector:before{content:'';height:1px;width:23px;background:var(--gold);position:absolute;left:0;top:-1px} #mcrm-home-experience .mh-sector>span{font-size:17px;line-height:1;color:var(--gold)} #mcrm-home-experience a.mh-sector:hover{color:var(--ink)} #mcrm-home-experience .mh-hero-bottom{display:grid;grid-template-columns:1.15fr 1fr;gap:12%;align-items:start;opacity:var(--copy);transform:translateY(calc((1 - var(--copy))*24px))} #mcrm-home-experience h2{font-size:clamp(40px,4.25vw,78px);font-weight:300;letter-spacing:-.065em;line-height:1.04;margin:0} #mcrm-home-experience h2>span{color:var(--sub)} #mcrm-home-experience .mh-intro{max-width:470px;padding-top:2px} #mcrm-home-experience .mh-lead{font-size:18px;letter-spacing:-.35px;line-height:1.5;margin:0} #mcrm-home-experience .mh-detail{font-size:14px;line-height:1.6;color:var(--sub);margin:14px 0 0} #mcrm-home-experience .mh-actions{display:flex;gap:28px;align-items:center;margin-top:22px} #mcrm-home-experience .mh-actions button{white-space:nowrap;display:flex;align-items:center;gap:30px;font-size:10px;font-weight:400;letter-spacing:1px;min-height:42px} #mcrm-home-experience .mh-primary{background:var(--ink);color:var(--navy);padding:13px 18px;transition:background .2s,transform .2s} #mcrm-home-experience .mh-primary:hover{background:var(--gold);transform:translateY(-2px)} #mcrm-home-experience .mh-actions span{font-size:19px;line-height:1} #mcrm-home-experience .mh-contact{padding:10px 0} #mcrm-home-experience .mh-contact:hover{color:var(--gold)} #mcrm-home-experience .mh-hero-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:9px;letter-spacing:1.2px;color:var(--sub)} #mcrm-home-experience .mh-hero-footer button{font-size:9px;letter-spacing:1.2px;display:flex;align-items:center;gap:17px;padding:10px 0} #mcrm-home-experience .mh-intro-cue{position:absolute;z-index:6;left:50%;bottom:30px;transform:translateX(-50%);display:flex;align-items:center;gap:19px;font-size:10px;letter-spacing:1.8px;color:var(--sub);padding:15px;white-space:nowrap} #mcrm-home-experience .mh-intro-cue>span{width:1px;height:25px;background:linear-gradient(var(--gold),#b89a5e25)} #mcrm-home-experience .mh-intro-cue:hover{color:var(--ink)} #mcrm-home-experience .mh-progress{position:absolute;bottom:0;left:0;right:0;height:1px} #mcrm-home-experience .mh-progress i{height:100%;display:block;width:calc(var(--p)*100%);background:var(--gold)} #mcrm-home-experience dialog{background:#f6f7f9;color:var(--navy);border:0;border-radius:16px;padding:48px;max-width:min(460px,90vw);box-shadow:0 25px 100px #0005} #mcrm-home-experience dialog::backdrop{background:#02071199;backdrop-filter:blur(12px)} #mcrm-home-experience dialog h2{font-size:25px;letter-spacing:1px} #mcrm-home-experience dialog p{line-height:1.6;color:#606b79} #mcrm-home-experience .dialog-brand{font-size:38px;letter-spacing:-3px;margin:0 0 28px} #mcrm-home-experience .dialog-brand>span{color:var(--gold)} #mcrm-home-experience .close{position:absolute;right:20px;top:12px;font-size:32px} @media(min-width:1800px){#mcrm-home-experience .mh-lead{font-size:22px} #mcrm-home-experience .mh-detail{font-size:16px} #mcrm-home-experience .mh-intro{max-width:560px} #mcrm-home-experience .mh-eyebrow,#mcrm-home-experience .mh-sector{font-size:12px} #mcrm-home-experience .mh-sector{padding-top:20px} #mcrm-home-experience nav button,#mcrm-home-experience nav>a{font-size:13px} #mcrm-home-experience .mh-hero-footer,#mcrm-home-experience .mh-hero-footer button{font-size:11px} #mcrm-home-experience .mh-actions button{font-size:12px} } @media(min-width:701px) and (max-height:820px){#mcrm-home-experience .mh-stage{} #mcrm-home-experience .mh-eyebrow{} #mcrm-home-experience .mh-sector-grid{} #mcrm-home-experience .mh-hero-bottom{gap:10%} #mcrm-home-experience h2{font-size:50px} #mcrm-home-experience .mh-lead{font-size:16px} #mcrm-home-experience .mh-detail{font-size:13px;margin-top:10px} #mcrm-home-experience .mh-actions{margin-top:16px} } @media(min-width:701px) and (max-width:1050px){#mcrm-home-experience .mh-hero-bottom{gap:7%;grid-template-columns:1fr 1fr} #mcrm-home-experience .mh-hero-bottom h2{font-size:44px} #mcrm-home-experience .mh-actions{gap:18px} #mcrm-home-experience .mh-actions button{gap:17px} #mcrm-home-experience .mh-lead{font-size:16px} #mcrm-home-experience .mh-detail{font-size:13px} #mcrm-home-experience nav{gap:24px} } @media(max-width:700px){#mcrm-home-experience{height:400svh} #mcrm-home-experience .mh-stage{} #mcrm-home-experience .mh-header{} #mcrm-home-experience .mh-logo{font-size:27px} #mcrm-home-experience .mh-menu-toggle{display:flex;gap:14px;align-items:center;font-size:10px;letter-spacing:1px;padding:12px 0} #mcrm-home-experience .mh-menu-toggle span{font-size:21px} #mcrm-home-experience nav{display:none;position:absolute;right:0;top:55px;padding:20px 25px;min-width:210px;flex-direction:column;gap:5px;align-items:flex-start;background:#111d2d;color:#fff;border:1px solid #ffffff20;border-radius:12px} #mcrm-home-experience nav.mh-open{display:flex} #mcrm-home-experience .mh-eyebrow{font-size:8px;letter-spacing:1.4px;gap:10px} #mcrm-home-experience .mh-eyebrow>span{width:17px} #mcrm-home-experience .mh-sector-grid{gap:10px} #mcrm-home-experience .mh-sector{font-size:7px;letter-spacing:.65px;padding-top:10px;min-height:24px;white-space:nowrap} #mcrm-home-experience .mh-sector>span{font-size:12px} #mcrm-home-experience .mh-sector:before{width:14px} #mcrm-home-experience .mh-hero-bottom{display:block} #mcrm-home-experience .mh-hero-bottom h2{font-size:43px;letter-spacing:-2.6px} #mcrm-home-experience .mh-intro{margin-top:23px;max-width:440px} #mcrm-home-experience .mh-lead{font-size:16px;line-height:1.45} #mcrm-home-experience .mh-detail{font-size:13px;line-height:1.6;margin-top:11px} #mcrm-home-experience .mh-actions{gap:26px;margin-top:19px} #mcrm-home-experience .mh-actions button{font-size:9px;gap:21px} #mcrm-home-experience .mh-hero-footer{font-size:8px;letter-spacing:.6px} #mcrm-home-experience .mh-hero-footer>span{line-height:1.8} #mcrm-home-experience .mh-hero-footer button{font-size:8px;letter-spacing:.5px;gap:10px} #mcrm-home-experience .mh-intro-cue{font-size:8px;letter-spacing:1.4px;bottom:24px} } @media(max-width:360px){#mcrm-home-experience .mh-hero-bottom h2{font-size:39px} #mcrm-home-experience .mh-hero-bottom{} #mcrm-home-experience .mh-actions{gap:20px} #mcrm-home-experience .mh-actions button{gap:15px} #mcrm-home-experience .mh-sector{letter-spacing:.2px} } @media(prefers-reduced-motion:reduce){#mcrm-home-experience{height:auto} #mcrm-home-experience .mh-stage{} #mcrm-home-experience *{transition:none!important} #mcrm-home-experience .mh-wordmark,#mcrm-home-experience .mh-letter{will-change:auto} } @media(prefers-reduced-motion:reduce){ } #mcrm-home-experience{margin:0;background:var(--navy);font-family:'Helvetica Neue',Arial,sans-serif;font-weight:300;line-height:normal;color:var(--ink)} #mcrm-home-experience h1,#mcrm-home-experience h2{text-wrap:initial} #mcrm-home-experience .mh-wordmark{font-size:200px;letter-spacing:-.035em;line-height:1;font-weight:200} #mcrm-home-experience .mh-actions a{white-space:nowrap;display:flex;align-items:center;gap:30px;font-size:10px;font-weight:400;letter-spacing:1px;min-height:44px} #mcrm-home-experience .mh-primary:hover{background:var(--gold);transform:translateY(-2px)} #mcrm-home-experience .mh-contact:hover{color:var(--gold)} #mcrm-home-experience .mh-sector{min-height:44px} #mcrm-home-experience .mh-nav-business{position:relative} #mcrm-home-experience .mh-submenu{position:absolute;right:0;top:100%;min-width:210px;background:#0d2032;border:1px solid #b89a5e44;padding:12px 20px;display:grid;z-index:10} #mcrm-home-experience .mh-submenu[hidden]{display:none} #mcrm-home-experience .mh-submenu a{font-size:13px;letter-spacing:0;padding:12px 0;min-height:44px} body.mcrm-home-intro-active>.site-header{visibility:hidden;pointer-events:none} @media(min-width:1800px){#mcrm-home-experience .mh-actions a{font-size:12px}} @media(max-width:700px){ #mcrm-home-experience .mh-stage{} #mcrm-home-experience .mh-actions a{font-size:9px;gap:21px} #mcrm-home-experience .mh-submenu{position:static;min-width:0;border:0;padding:0 0 0 12px} #mcrm-home-experience nav{max-height:70svh;overflow:auto} } @media(max-width:700px) and (max-height:740px){ #mcrm-home-experience .mh-eyebrow{} #mcrm-home-experience .mh-sector-grid{} #mcrm-home-experience .mh-hero-bottom{} #mcrm-home-experience .mh-hero-bottom h2{font-size:36px} #mcrm-home-experience .mh-intro{margin-top:16px} #mcrm-home-experience .mh-lead{font-size:14px} #mcrm-home-experience .mh-detail{font-size:12px;margin-top:9px} #mcrm-home-experience .mh-actions{margin-top:12px;gap:20px} #mcrm-home-experience .mh-hero-footer{} } /* Each luminous floor projection uses its own letter silhouette. */ #mcrm-home-experience .mh-letter-shadow{position:absolute;left:0;top:0;height:200px;display:block;pointer-events:none;z-index:0;opacity:0;will-change:transform,opacity;--reflection:#d8e1ee} #mcrm-home-experience .mh-letter-shadow:after{content:attr(data-letter);position:absolute;inset:0;height:200px;font:inherit;letter-spacing:inherit;color:var(--reflection);-webkit-text-stroke:0;transform-origin:50% 176px;transform:translateY(4px) scale(1,-.38);opacity:.24;filter:blur(8px);mask-image:linear-gradient(to top,rgba(0,0,0,.58) 12%,rgba(0,0,0,.34) 36%,rgba(0,0,0,.12) 62%,transparent 87%);-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.58) 12%,rgba(0,0,0,.34) 36%,rgba(0,0,0,.12) 62%,transparent 87%)} #mcrm-home-experience .mh-letter-shadow-gold{--reflection:#e8ce91} #mcrm-home-experience .mh-sector-grid{z-index:2} @media(prefers-reduced-motion:reduce){#mcrm-home-experience .mh-letter-shadow{will-change:auto}} /* Keep room for the full-height reflections above the content. */ #mcrm-home-experience .mh-eyebrow{top:14%}#mcrm-home-experience .mh-sector-grid{} @media(min-width:701px) and (max-height:820px){#mcrm-home-experience .mh-eyebrow{}#mcrm-home-experience .mh-sector-grid{}} @media(max-width:700px){#mcrm-home-experience .mh-eyebrow{}#mcrm-home-experience .mh-sector-grid{}#mcrm-home-experience .mh-hero-bottom{}} /* The opening M appears alone, then its reflection softly resolves. */ #mcrm-home-experience .mh-letter-shadow-gold:after{animation:mh-opening-reflection 1.2s cubic-bezier(.2,.65,.3,1) .7s both} @keyframes mh-opening-reflection{from{opacity:0;filter:blur(12px)}to{opacity:.24;filter:blur(8px)}} @media(prefers-reduced-motion:reduce){#mcrm-home-experience .mh-letter-shadow-gold:after{animation:none}} @media(max-width:700px) and (max-height:740px){#mcrm-home-experience .mh-sector-grid{}} /* Let reflected silhouettes blur past their bounds without vertical seams. */ #mcrm-home-experience .mh-letter-shadow{clip-path:none!important} #mcrm-home-experience .mh-letter-shadow:after{ left:-24px;right:-24px;padding-inline:24px; -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.58) 12%,rgba(0,0,0,.34) 36%,rgba(0,0,0,.12) 62%,transparent 87%),linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent); mask-image:linear-gradient(to top,rgba(0,0,0,.58) 12%,rgba(0,0,0,.34) 36%,rgba(0,0,0,.12) 62%,transparent 87%),linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent); -webkit-mask-composite:source-in;mask-composite:intersect; } /* Reserve the art area, then let links, copy and footer occupy real rows. */ #mcrm-home-experience{height:calc(var(--stage-height,100svh) + 240svh)} #mcrm-home-experience .mh-stage{position:sticky;top:0;height:auto;min-height:100svh;padding:28px 6% 20px;display:flex;flex-direction:column} #mcrm-home-experience .mh-header{position:relative;flex:none;min-height:49px;left:auto;right:auto;top:auto} #mcrm-home-experience .mh-eyebrow{position:relative;flex:none;margin:26px 0 16px;min-height:14px;top:auto;left:auto;right:auto} #mcrm-home-experience .mh-art-slot{height:clamp(200px,26vw,390px);flex:none} #mcrm-home-experience .mh-reading-layout{position:relative;display:flex;flex-direction:column;gap:clamp(28px,3.5vh,42px);flex:1;z-index:2} #mcrm-home-experience .mh-sector-grid,#mcrm-home-experience .mh-hero-bottom,#mcrm-home-experience .mh-hero-footer{position:relative;inset:auto;flex:none} #mcrm-home-experience .mh-hero-bottom{gap:8%;grid-template-columns:1.15fr 1fr} #mcrm-home-experience .mh-hero-footer{margin-top:auto;flex-wrap:wrap;min-height:44px} #mcrm-home-experience .mh-hero-footer>span{max-width:none;line-height:1.8} #mcrm-home-experience .mh-hero-footer .mcrm-business-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px} #mcrm-home-experience .mh-icon{display:block;width:22px;height:22px;flex:none;overflow:visible} #mcrm-home-experience .mh-chevron{display:inline-block;vertical-align:middle} #mcrm-home-experience .mh-chevron .mh-icon{width:12px;height:12px} #mcrm-home-experience .mh-sector>span{display:block;flex:none;margin-left:6px} #mcrm-home-experience .mh-actions{flex-wrap:wrap;gap:12px 28px} #mcrm-home-experience a.mh-primary{color:var(--navy)} #mcrm-home-experience .mh-intro-cue{top:calc(100svh - 80px);bottom:auto} @media(min-width:701px) and (max-height:820px){ #mcrm-home-experience .mh-stage{padding-top:18px} #mcrm-home-experience .mh-eyebrow{margin-top:12px;margin-bottom:12px} #mcrm-home-experience .mh-art-slot{height:clamp(180px,29svh,280px)} } @media(max-width:700px){ #mcrm-home-experience .mh-stage{padding:20px 7% 18px} #mcrm-home-experience .mh-eyebrow{margin:25px 0 18px} #mcrm-home-experience .mh-art-slot{height:clamp(160px,46vw,260px)} #mcrm-home-experience .mh-reading-layout{gap:28px} #mcrm-home-experience .mh-sector-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px} #mcrm-home-experience .mh-sector{font-size:9px;letter-spacing:1px;padding-top:8px} #mcrm-home-experience .mh-sector .mh-icon{width:17px;height:17px} #mcrm-home-experience .mh-hero-bottom{display:block} #mcrm-home-experience .mh-hero-bottom h2{font-size:clamp(34px,9.5vw,58px);letter-spacing:-.055em} #mcrm-home-experience .mh-intro{margin-top:24px} #mcrm-home-experience .mh-lead{font-size:16px;line-height:1.5} #mcrm-home-experience .mh-detail{font-size:13px;line-height:1.65;margin-top:14px} #mcrm-home-experience .mh-actions{margin-top:22px;gap:12px 22px} #mcrm-home-experience .mh-actions a{gap:15px;font-size:9px} #mcrm-home-experience .mh-hero-footer{gap:4px 18px} #mcrm-home-experience .mh-hero-footer .mcrm-business-links{font-size:8px;letter-spacing:.25px} } @media(prefers-reduced-motion:reduce){#mcrm-home-experience{height:auto}#mcrm-home-experience .mh-stage{position:relative}} /* Give the introduction a more open editorial rhythm. */ #mcrm-home-experience .mh-reading-layout{gap:clamp(80px,8vh,112px)} #mcrm-home-experience .mh-hero-bottom h2{line-height:1.24;letter-spacing:normal;word-spacing:normal} #mcrm-home-experience .mh-lead{line-height:1.8;letter-spacing:normal;word-spacing:normal} #mcrm-home-experience .mh-detail{line-height:1.85;letter-spacing:normal;word-spacing:normal;margin-top:24px} #mcrm-home-experience .mh-actions{margin-top:32px} @media(max-width:700px){ #mcrm-home-experience .mh-reading-layout{gap:56px} #mcrm-home-experience .mh-hero-bottom h2{letter-spacing:normal;word-spacing:normal} #mcrm-home-experience .mh-intro{margin-top:32px} #mcrm-home-experience .mh-detail{margin-top:20px} #mcrm-home-experience .mh-actions{margin-top:28px} } /* SVG paths are rerendered at viewport resolution; no scaled compositor text layer. */ #mcrm-home-experience .mh-vector-wordmark{width:100%;height:100%;transform:none;will-change:auto;pointer-events:none} #mcrm-home-experience .mh-vector-art{display:block;overflow:visible;shape-rendering:geometricPrecision} /* All logo letters return to ivory between passes of the gold light. */ #mcrm-home-experience .mh-logo>.logo-letter{color:var(--ink);--gold-soft:var(--gold);--logo-rest:var(--ink)} .effects-active #mcrm-home-experience .mh-logo>.logo-letter{animation:mh-slow-logo-gold 10s ease-in-out infinite;animation-fill-mode:both} @media(prefers-reduced-motion:reduce){#mcrm-home-experience .mh-logo>.logo-letter{animation:none!important}} @keyframes mh-slow-logo-gold{ 0%,8%,58%,100%{color:var(--ink);text-shadow:none} 24%,38%{color:var(--gold);text-shadow:0 0 13px rgba(184,154,94,.12)} }