/* ========================================================================== RIA Advisory — HOMEPAGE ROUND 3 · "Editorial Enterprise" A premium, light, annual-report / top-consultancy aesthetic. Honours the full client review: light + calm (dial back dark & motion), numbered index motif (01–09), nav re-flow + mega menu, bigger COLOUR logo, Advisory-first, Oracle CC&B/ERP emphasis, industry case-studies, LinkedIn strip, consistent image grade, reduced-motion + touch fallbacks, diagonal-split CTA. RULES: clamp()/calc() need SPACES around +/- . Grid/flex text children get min-width:0 . `js` sits on → use `.js [data-r]` . ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } .r3 { --ink: #0B1830; --navy: #1D4179; --navy-deep:#1A2954; --sky: #4D9FD7; --sky-tint: #EAF3FB; --orange: #F7941F; --orange-600:#e07f0a; --paper: #FBFBF8; --white: #FFFFFF; --slate: #5A6472; --line: #E6E4DC; /* warm hairline, not cold grey */ --line-2: #D8D6CC; --grad: linear-gradient(100deg, #1D4179 0%, #4D9FD7 58%, #F7941F 128%); background: var(--paper); color: var(--ink); font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .r3 h1, .r3 h2, .r3 h3, .r3 h4 { font-family: var(--font-display, 'Manrope', sans-serif); color: var(--ink); line-height: 1.08; letter-spacing: -.022em; font-weight: 800; } .r3 ::selection { background: var(--navy); color: #fff; } .r3 .wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.25rem, 0.6rem + 2.4vw, 2.5rem); } .r3 .wrap--wide { max-width: 1340px; } /* Editorial kicker: number + label + hairline (the 01–09 motif) */ .r3 .kicker { display: flex; align-items: center; gap: .8rem; font-family: var(--font-mono, monospace); font-size: clamp(.82rem, .72rem + .3vw, .98rem); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); margin-bottom: 1.1rem; } .r3 .kicker__no { color: var(--orange); font-weight: 600; } .r3 .kicker__line { flex: 1; height: 1px; background: var(--line-2); max-width: 120px; } .r3 .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .r3 .graded { filter: saturate(.9) contrast(1.03); } /* one consistent grade */ .r3 .section { padding-block: clamp(3.5rem, 2.2rem + 4vw, 6.5rem); position: relative; } .r3 .section--tint { background: var(--sky-tint); } .r3 .section--paper { background: var(--white); } .r3 .lede { max-width: 30ch; } .r3 .shead { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: end; margin-bottom: clamp(2.2rem, 1.5rem + 2vw, 3.6rem); } .r3 .shead > * { min-width: 0; } .r3 .shead h2 { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem); } .r3 .shead p { color: var(--slate); font-size: 1.02rem; } /* Buttons */ .r3 .btn { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .95rem; padding: .85em 1.5em; border-radius: 30px; transition: background .25s, color .25s, transform .25s, box-shadow .25s; } .r3 .btn svg { width: 18px; height: 18px; } .r3 .btn--accent { background: var(--orange); color: #241503; } .r3 .btn--accent:hover { background: var(--orange-600); transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(247,148,31,.7); } .r3 .btn--navy { background: var(--navy); color: #fff; } .r3 .btn--navy:hover { background: var(--navy-deep); transform: translateY(-2px); } .r3 .btn--ghost { border: 1px solid var(--line-2); color: var(--navy); } .r3 .btn--ghost:hover { border-color: var(--navy); } .r3 .btn--on-dark { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); } .r3 .btn--on-dark:hover { background: rgba(255,255,255,.2); } .r3 .arrow { display: inline-flex; align-items: center; gap: .45rem; color: var(--navy); font-weight: 600; font-size: .92rem; } .r3 .arrow svg { width: 16px; height: 16px; transition: transform .3s; } .r3 .arrow:hover svg { transform: translateX(5px); } /* ---------- Calm reveal (motion dialled back) ---------------------------- */ .js .r3 [data-r] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } .js .r3 [data-r="clip"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.22,1,.36,1); } .js .r3 [data-r].in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } @media (prefers-reduced-motion: reduce) { .js .r3 [data-r] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } .r3 [data-marquee], .r3 .r3-rail__track { animation: none !important; } } /* ========================================================================== HEADER ========================================================================== */ .r3-header { position: sticky; top: 0; z-index: 100; background: rgba(251,251,248,.85); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; } .r3-header.is-scrolled { border-color: var(--line); box-shadow: 0 8px 30px -22px rgba(11,24,48,.5); } .r3-nav { display: flex; align-items: center; gap: .8rem; height: 78px; } .r3-logo img { height: 46px; width: auto; } /* bigger + colour (review) */ .r3-links { display: flex; align-items: center; gap: 0; margin-left: auto; list-style: none; padding: 0; } .r3-link { position: relative; display: inline-flex; align-items: center; gap: .3rem; padding: .55rem .62rem; font-weight: 600; font-size: .88rem; color: var(--ink); white-space: nowrap; } .r3-link::after { content: ""; position: absolute; left: .62rem; right: .62rem; bottom: .5rem; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.22,1,.36,1); } .r3-link:hover::after, .r3-item--mega:hover .r3-link::after { transform: scaleX(1); } .r3-link svg.chev { width: 13px; height: 13px; opacity: .55; transition: transform .3s; } .r3-item--mega:hover .chev { transform: rotate(180deg); } .r3-item { position: relative; } /* The Products column carries NINE items. Capping the panel and letting it scroll was NOT enough — nobody scrolls a hover menu, so it still read as "seven products". The nine links are now split into two sub-columns (.r3-mega__sub), which makes Services (7) the tallest column instead of Products (9); the whole panel fits on screen and all nine are visible at once. The max-height stays purely as a safety net for very short windows. */ .r3-item--mega .r3-mega { position: fixed; top: 79px; left: 0; right: 0; width: 100%; transform: translateY(8px); max-height: calc(100vh - 79px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 0; box-shadow: 0 40px 70px -35px rgba(11,24,48,.35); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s; } .r3-item--mega::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px; } .r3-item--mega:hover .r3-mega { opacity: 1; visibility: visible; transform: translateY(0); } .r3-mega__inner { max-width: 1340px; margin-inline: auto; padding: 2rem clamp(1.25rem, 0.6rem + 2.4vw, 2.5rem); } /* Products is the widest column because it holds two sub-columns of links. */ .r3-mega__cols { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1fr) minmax(0,1.55fr); gap: clamp(1.2rem, .9rem + 1.6vw, 2.4rem); } /* Nine products in two columns, so the panel's height comes from Services. */ .r3-mega__sub { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: clamp(.6rem, .4rem + .8vw, 1.4rem); align-content: start; } @media (max-width: 1040px) { .r3-mega__sub { grid-template-columns: minmax(0,1fr); } } .r3-mega__col h4 { font-family: var(--font-mono, monospace); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--slate); font-weight: 500; margin-bottom: .8rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); } .r3-mega__link { display: block; padding: .5rem .55rem; border-radius: 5px; min-width: 0; transition: background .2s; } .r3-mega__link:hover { background: var(--sky-tint); } .r3-mega__link b { display: block; font-size: .89rem; font-weight: 700; } .r3-mega__link span { display: block; font-size: .82rem; color: var(--slate); line-height: 1.4; } .r3-navcta { flex: none; margin-left: .5rem; padding: .7em 1.15em; font-size: .88rem; white-space: nowrap; } @media (max-width: 1150px) { .r3-link { padding: .55rem .5rem; font-size: .84rem; } .r3-nav { gap: .5rem; } } .r3-burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--navy); } .r3-burger svg { width: 22px; height: 22px; margin: auto; } .r3-drawer { position: fixed; inset: 0; z-index: 200; background: var(--paper); padding: 94px clamp(1.25rem,5vw,2rem) 2rem; display: none; flex-direction: column; overflow-y: auto; } .r3-drawer.is-open { display: flex; } .r3-drawer__g { border-bottom: 1px solid var(--line); } .r3-drawer__top { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.05rem 0; font-family: var(--font-display, sans-serif); font-weight: 700; font-size: 1.1rem; } .r3-drawer__top svg { width: 20px; height: 20px; color: var(--sky); transition: transform .3s; } .r3-drawer__g.open .r3-drawer__top svg { transform: rotate(180deg); } .r3-drawer__sub { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .r3-drawer__g.open .r3-drawer__sub { max-height: 720px; } .r3-drawer__sub a { display: block; padding: .5rem 0 .5rem .8rem; color: var(--slate); font-size: .95rem; } .r3-drawer .btn { margin-top: 1.4rem; justify-content: center; } @media (max-width: 1000px) { .r3-links, .r3-nav > .r3-navcta { display: none; } .r3-burger { display: flex; } } /* ========================================================================== SECTION PROGRESS RAIL (right side, desktop) — premium wayfinding ========================================================================== */ .r3-rail { position: fixed; top: 50%; right: 22px; transform: translateY(-50%); z-index: 80; display: flex; flex-direction: column; gap: .8rem; } .r3-rail__dot { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: .6rem; } .r3-rail__dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); transition: background .3s, transform .3s; } .r3-rail__dot b { font-family: var(--font-mono, monospace); font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s; white-space: nowrap; pointer-events: none; } .r3-rail__dot:hover b, .r3-rail__dot.is-active b { opacity: 1; transform: none; } .r3-rail__dot.is-active i { background: var(--orange); transform: scale(1.5); } @media (max-width: 1200px) { .r3-rail { display: none; } } /* ========================================================================== HERO — full-bleed background video, no overlay (video is light/white) ========================================================================== */ .r3-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--paper); color: var(--ink); } .r3-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .r3-hero__grad { display: none; } .r3-hero__in { padding-block: clamp(5rem, 3rem + 9vw, 9rem); max-width: 880px; min-width: 0; } .r3-hero .kicker { color: var(--navy); } .r3-hero .kicker__no { color: var(--orange); } .r3-hero .kicker__line { background: var(--line-2); } .r3-hero h1 { color: var(--ink); font-size: clamp(2.4rem, 1.3rem + 4.4vw, 4.6rem); margin: 1.2rem 0 1.3rem; } .r3-hero h1 em { font-style: normal; } .r3-hero h1 .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .r3-hero__lead { font-size: clamp(1.05rem, .98rem + .5vw, 1.28rem); color: var(--slate); max-width: 52ch; } .r3-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; } .r3-hero__cta .btn--ghost { background: rgba(251,251,248,.88); border-color: var(--line-2); } .r3-hero__cta .btn--ghost:hover { background: var(--white); } /* inline stat ribbon at the bottom */ .r3-hero__ribbon { display: none; } .r3-hero__ribbon .wrap { display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 3.2rem); padding-block: 1.15rem; } .r3-hero__rib { display: flex; align-items: baseline; gap: .55rem; min-width: 0; } .r3-hero__rib b { font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 1.15rem; color: var(--ink); } .r3-hero__rib span { font-size: .85rem; color: var(--slate); } /* ========================================================================== CREDENTIAL MARQUEE — light, quiet ========================================================================== */ .r3-marquee { border-block: 1px solid var(--line); overflow: hidden; padding: .95rem 0; background: var(--white); } .r3-marquee__track { display: flex; align-items: center; width: max-content; animation: r3Slide 46s linear infinite; } .r3-marquee:hover .r3-marquee__track { animation-play-state: paused; } @keyframes r3Slide { to { transform: translateX(-50%); } } .r3-marquee__item { flex: none; font-family: var(--font-mono, monospace); font-size: .8rem; letter-spacing: .05em; color: var(--slate); padding: 0 1.3rem; white-space: nowrap; display: inline-flex; align-items: center; } .r3-marquee__item::after { content: "·"; color: var(--orange); margin-left: 1.3rem; } .r3-marquee__item b { color: var(--navy); font-weight: 700; } /* ========================================================================== WHAT WE DO — numbered editorial accordion (Advisory first) ========================================================================== */ .r3-acc { border-top: 1px solid var(--line); } .r3-acc__row { border-bottom: 1px solid var(--line); } .r3-acc__head { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: clamp(1rem, 2vw, 2rem); padding: clamp(1.25rem, 1rem + 1vw, 2rem) .2rem; text-align: left; } .r3-acc__no { font-family: var(--font-mono, monospace); font-size: .82rem; color: var(--orange); } .r3-acc__title { min-width: 0; font-family: var(--font-display, sans-serif); font-weight: 800; font-size: clamp(1.3rem, 1rem + 1.3vw, 2rem); transition: color .3s; } .r3-acc__row.is-open .r3-acc__title, .r3-acc__head:hover .r3-acc__title { color: var(--navy); } .r3-acc__tag { font-family: var(--font-mono, monospace); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); white-space: nowrap; } .r3-acc__pm { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--navy); flex: none; transition: background .3s, color .3s, transform .3s; } .r3-acc__pm svg { width: 16px; height: 16px; } .r3-acc__row.is-open .r3-acc__pm { background: var(--navy); color: #fff; transform: rotate(180deg); } .r3-acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.22,1,.36,1); } .r3-acc__row.is-open .r3-acc__body { grid-template-rows: 1fr; } .r3-acc__bodyin { overflow: hidden; } .r3-acc__inner { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: clamp(1.2rem, 1rem + 2vw, 3rem); align-items: center; padding: 0 .2rem 2rem; } .r3-acc__inner > * { min-width: 0; } .r3-acc__inner p { color: var(--slate); font-size: 1.04rem; margin-bottom: 1.1rem; } .r3-acc__media { border-radius: 10px; overflow: hidden; aspect-ratio: 16/10; border: 1px solid var(--line); } .r3-acc__media img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================== WHY RIA — editorial stat band (light) ========================================================================== */ /* light editorial proof band — accent-rule stat cells (redesigned) */ .r3-why { background: var(--sky-tint); } .r3-why__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1rem, .4rem + 1.6vw, 2.2rem); margin-top: clamp(2rem, 1.4rem + 2vw, 3.2rem); } .r3-why__cell { position: relative; min-width: 0; padding-top: 1.7rem; border-top: 2px solid var(--line-2); transition: border-color .4s; } .r3-why__cell::before { content: ""; position: absolute; top: -2px; left: 0; width: 48px; height: 2px; background: var(--grad); transition: width .45s cubic-bezier(.22,1,.36,1); } .r3-why__cell:hover::before { width: 100%; } .r3-why__no { font-family: var(--font-mono, monospace); font-size: .8rem; font-weight: 500; letter-spacing: .16em; color: var(--slate); } .r3-why__stat { font-family: var(--font-display, sans-serif); font-weight: 800; line-height: 1; letter-spacing: -.02em; font-size: clamp(2.3rem, 1.4rem + 2.6vw, 3.6rem); margin: .7rem 0 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .r3-why__stat .value { font-size: inherit; } .r3-why__cell h3 { color: var(--ink); font-size: 1.06rem; margin: .95rem 0 .35rem; } .r3-why__cell p { color: var(--slate); font-size: .95rem; line-height: 1.55; } /* ========================================================================== ABOUT — milestone timeline (light) ========================================================================== */ .r3-about__top { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(2rem,1rem + 3vw,4.5rem); align-items: center; } .r3-about__top > * { min-width: 0; } .r3-about__top h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); margin: 1rem 0; } .r3-about__top p { color: var(--slate); } .r3-about__points { padding-left: 0; list-style: none; display: grid; gap: .8rem; margin: 1.4rem 0 1.8rem; } .r3-about__points li { display: flex; gap: .7rem; align-items: flex-start; font-size: .97rem; } .r3-about__points svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--sky-tint); color: var(--navy); } .r3-about__media { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 5/3.6; border: 1px solid var(--line); } .r3-about__media img { width: 100%; height: 100%; object-fit: cover; } .r3-about__badge { position: absolute; left: 1rem; bottom: 1rem; background: rgba(251,251,248,.95); border-radius: 8px; padding: .7rem 1rem; } .r3-about__badge b { display: block; font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 1.5rem; color: var(--navy); } .r3-about__badge span { font-size: .8rem; color: var(--slate); } .r3-tl { position: relative; margin-top: clamp(2.5rem, 1.6rem + 3vw, 4rem); } .r3-tl__line { position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--line); } .r3-tl__prog { position: absolute; left: 0; top: 7px; height: 2px; width: 0; background: var(--grad); transition: width 1.2s ease; } .r3-tl__grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1.2rem; position: relative; } .r3-tl__item { min-width: 0; padding-right: .8rem; } .r3-tl__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 3px solid var(--sky); margin-bottom: 1.3rem; position: relative; z-index: 1; } .r3-tl__item:first-child .r3-tl__dot, .r3-tl__item:last-child .r3-tl__dot { border-color: var(--orange); } .r3-tl__yr { font-family: var(--font-mono, monospace); font-weight: 600; font-size: .92rem; color: var(--navy); } .r3-tl__item h3 { font-size: 1rem; margin: .35rem 0 .3rem; } .r3-tl__item p { color: var(--slate); font-size: .92rem; line-height: 1.5; } /* ========================================================================== INDUSTRIES — expanding panels (light frame) + case-study strip ========================================================================== */ .r3-ind { display: flex; gap: 12px; height: min(60vh, 540px); margin-top: clamp(1.5rem,1rem + 2vw,2.6rem); } .r3-ind__p { position: relative; flex: 1 1 0; min-width: 0; border-radius: 12px; overflow: hidden; cursor: pointer; border: 1px solid var(--line); transition: flex-grow 1s cubic-bezier(.16,1,.3,1); } .r3-ind__p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.16,1,.3,1); } .r3-ind__p.is-active img { transform: scale(1.05); } .r3-ind__p::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,32,.08) 24%, rgba(9,16,30,.5) 58%, rgba(7,12,24,.92)); } .r3-ind__p.is-active { flex-grow: 3.6; } .r3-ind__vert { position: absolute; left: 16px; bottom: 18px; z-index: 2; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-mono, monospace); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; white-space: nowrap; text-shadow: 0 2px 12px rgba(0,0,0,.6); transition: opacity .35s; } .r3-ind__p.is-active .r3-ind__vert { opacity: 0; } .r3-ind__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(1.2rem,.7rem + 1.5vw,2rem); min-width: 0; opacity: 0; transform: translateY(16px); transition: opacity .5s .1s, transform .5s .1s; } .r3-ind__p.is-active .r3-ind__body { opacity: 1; transform: none; } .r3-ind__no { font-family: var(--font-mono, monospace); font-size: .8rem; font-weight: 500; color: #9fd0f4; } .r3-ind__body h3 { color: #fff; font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); margin: .3rem 0 .4rem; } .r3-ind__body p { color: #cddcf0; font-size: .92rem; line-height: 1.5; max-width: 42ch; } .r3-ind__case { margin-top: .8rem; display: flex; align-items: center; gap: .8rem; padding: .6rem .85rem; border-radius: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); } .r3-ind__case b { color: #fff; font-size: .78rem; } .r3-ind__case span { color: #bcd2ec; font-size: .8rem; } .r3-ind__case .arrow { color: #9fd0f4; font-size: .8rem; font-weight: 500; margin-left: auto; } .r3-ind__case .arrow svg { color: #9fd0f4; } /* ========================================================================== PRODUCTS — bento (light) ========================================================================== */ .r3-bento { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: .8rem; margin-top: clamp(1.5rem,1rem + 2vw,2.6rem); } .r3-tile { position: relative; grid-column: span 2; min-width: 0; min-height: 150px; border-radius: 10px; overflow: hidden; padding: 1.3rem; display: flex; flex-direction: column; justify-content: flex-end; background: var(--white); border: 1px solid var(--line); transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s, border-color .4s; } .r3-tile:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -30px rgba(11,24,48,.4); border-color: var(--sky); } .r3-tile__ico { color: var(--navy); margin-bottom: auto; } .r3-tile__ico svg { width: 24px; height: 24px; } .r3-tile b { font-size: 1rem; font-weight: 700; margin-top: 1rem; } .r3-tile span { font-size: .88rem; color: var(--slate); } .r3-tile--beside { grid-column: span 3; } /* feature tile: dark base + image must sit ABOVE the tile's own background, so use positive z-index layers (negative ones hid the photo behind #fff). */ .r3-tile--feature { grid-column: span 3; grid-row: span 2; min-height: 320px; color: #fff; border: 0; background: var(--navy-deep); } .r3-tile--feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .r3-tile--feature::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(16,27,56,.2), rgba(16,27,56,.92)); } .r3-tile--feature .r3-tile__ico, .r3-tile--feature b, .r3-tile--feature span { position: relative; z-index: 2; } .r3-tile--feature .r3-tile__ico { color: #9fd0f4; } .r3-tile--feature b { font-size: 1.5rem; } .r3-tile--feature span { color: #cddcf0; } .r3-prodstat { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; } .r3-prodstat b, .r3-prodstat .value { font-family: var(--font-display, sans-serif); font-weight: 800; font-size: clamp(2.4rem,1.6rem + 2vw,3.4rem); line-height: 1; color: var(--navy); } .r3-prodstat span { color: var(--slate); font-size: .95rem; min-width: 0; } /* ========================================================================== TESTIMONIALS — big editorial quote + clickable industry rail ========================================================================== */ /* redesigned: premium quote card (accent bar + big glyph) + refined rail */ .r3-tst { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: clamp(1.5rem, 1rem + 2vw, 2.6rem); align-items: stretch; margin-top: clamp(1.5rem, 1rem + 2vw, 2.6rem); } .r3-tst > * { min-width: 0; } .r3-tst__card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; padding: clamp(1.8rem, 1.2rem + 2vw, 3.2rem); box-shadow: 0 30px 60px -46px rgba(11,24,48,.4); } .r3-tst__card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad); } .r3-tst__mark { position: absolute; top: .2rem; right: 1.4rem; font-family: Georgia, serif; font-size: 8rem; line-height: 1; color: var(--sky-tint); pointer-events: none; z-index: 0; } .r3-tst__quote { position: relative; z-index: 1; min-height: 220px; display: flex; flex-direction: column; } .r3-tst__q { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .5s, transform .5s; display: flex; flex-direction: column; } .r3-tst__q.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; } .r3-tst__stars { color: var(--orange); letter-spacing: .12em; margin-bottom: 1rem; font-size: 1.05rem; } .r3-tst__q blockquote { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: clamp(1.35rem, 1rem + 1.5vw, 2.15rem); line-height: 1.32; letter-spacing: -.015em; color: var(--ink); } .r3-tst__by { display: flex; align-items: center; gap: .85rem; margin-top: auto; padding-top: 1.6rem; } .r3-tst__av { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-mono, monospace); font-size: .82rem; font-weight: 600; color: #fff; background: var(--navy); box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--sky); } .r3-tst__by b { display: block; font-size: .95rem; } .r3-tst__by span { color: var(--slate); font-size: .88rem; } .r3-tst__rail { display: flex; flex-direction: column; gap: .7rem; } .r3-tst__railcap { font-family: var(--font-mono, monospace); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); margin-bottom: .2rem; } .r3-tst__tab { position: relative; width: 100%; text-align: left; display: flex; align-items: center; gap: .8rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 10px; color: var(--slate); background: var(--white); transition: color .3s, border-color .3s, background .3s, transform .3s; } .r3-tst__tab:hover { border-color: var(--line-2); transform: translateX(2px); } .r3-tst__tab.is-active { color: var(--navy); border-color: var(--navy); background: var(--sky-tint); } .r3-tst__tab__d { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); flex: none; transition: background .3s, transform .3s; } .r3-tst__tab.is-active .r3-tst__tab__d { background: var(--orange); transform: scale(1.4); } .r3-tst__tab__t { min-width: 0; } .r3-tst__tab b { display: block; font-size: .96rem; font-weight: 700; } .r3-tst__tab span { display: block; font-size: .84rem; } .r3-tst__tab__go { margin-left: auto; color: var(--navy); opacity: 0; transform: translateX(-5px); transition: opacity .3s, transform .3s; flex: none; } .r3-tst__tab__go svg { width: 16px; height: 16px; display: block; } .r3-tst__tab.is-active .r3-tst__tab__go { opacity: 1; transform: none; } /* ========================================================================== CERTIFICATIONS — compliance ledger (light) ========================================================================== */ .r3-ledger { margin-top: clamp(1.5rem,1rem + 2vw,2.6rem); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--white); } .r3-ledger__head, .r3-ledger__row { display: grid; grid-template-columns: minmax(0,2.2fr) minmax(0,2fr) minmax(0,1.2fr); gap: 1rem; align-items: center; padding: .95rem clamp(1rem,2vw,1.6rem); } .r3-ledger__head { background: var(--navy-deep); color: #fff; font-family: var(--font-mono, monospace); font-size: .8rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; } .r3-ledger__row { border-top: 1px solid var(--line); transition: background .25s; } .r3-ledger__row:hover { background: var(--sky-tint); } .r3-ledger__row > * { min-width: 0; } .r3-ledger__cert { display: flex; align-items: center; gap: .7rem; } .r3-ledger__cert svg { width: 22px; height: 22px; color: var(--navy); flex: none; } .r3-ledger__cert b { font-weight: 700; font-size: .95rem; } .r3-ledger__scope { color: var(--slate); font-size: .95rem; } .r3-ledger__status { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: #1a7a4f; } .r3-ledger__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1a7a4f; } /* ========================================================================== LINKEDIN CAROUSEL ========================================================================== */ .r3led__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .r3led__scroller { margin-top: clamp(1.5rem,1rem + 2vw,2.4rem); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: .6rem; } .r3led__track { display: flex; gap: 1.1rem; width: max-content; } .r3led__card { scroll-snap-align: start; width: min(340px, 82vw); flex: none; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 1.4rem; transition: transform .35s, box-shadow .35s; min-width: 0; } .r3led__card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -30px rgba(11,24,48,.4); } .r3led__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; } .r3led__logo { width: 42px; height: 42px; border-radius: 8px; background: var(--navy); color: #fff; display: grid; place-items: center; flex: none; } .r3led__logo svg { width: 22px; height: 22px; } .r3led__meta b { display: block; font-size: .88rem; } .r3led__meta span { font-size: .82rem; color: var(--slate); } .r3led__card p { font-size: .98rem; line-height: 1.6; } .r3led__foot { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--slate); display: flex; gap: 1rem; } /* ========================================================================== CTA — diagonal split (light → navy), the review's preferred alternate ========================================================================== */ /* All copy lives on the LIGHT panel (fixes dark-text-over-dark-image); the diagonal simply reveals the city photo on the right as pure imagery. */ .r3-cta { position: relative; background: var(--navy-deep); overflow: hidden; } .r3-cta__img { position: absolute; inset: 0; z-index: 0; } .r3-cta__img img { width: 100%; height: 100%; object-fit: cover; opacity: .5; } .r3-cta::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, transparent 40%, rgba(16,27,56,.55)); } .r3-cta::before { content: ""; position: absolute; top: 0; bottom: 0; left: -10%; width: 62%; background: var(--paper); z-index: 1; transform: skewX(-8deg); transform-origin: top; box-shadow: 30px 0 60px -30px rgba(11,24,48,.4); } .r3-cta__panel { position: relative; z-index: 2; max-width: 34rem; } .r3-cta__panel .kicker { color: var(--navy); } .r3-cta__panel .kicker__line { background: var(--line-2); } .r3-cta__panel h2 { color: var(--ink); font-size: clamp(1.8rem, 1.3rem + 2.4vw, 3rem); margin-bottom: 1rem; } .r3-cta__panel p { color: var(--slate); font-size: 1.08rem; margin-bottom: 1.7rem; max-width: 40ch; } .r3-cta__mail { display: inline-block; margin-left: 1rem; font-family: var(--font-mono, monospace); font-size: .99rem; font-weight: 500; color: var(--navy); } @media (max-width: 1000px) { .r3-cta__img img { opacity: .22; } /* no wedge on mobile → uniform dark scrim so white text reads everywhere (the desktop scrim is transparent on the left, which is fine only when the light wedge sits there). */ .r3-cta::after { background: linear-gradient(180deg, rgba(16,27,56,.55), rgba(16,27,56,.82)); } .r3-cta__panel h2 { color: #fff; } .r3-cta__panel .kicker { color: #9fd0f4; } .r3-cta__panel p { color: #cddcf0; } .r3-cta__mail { color: #9fd0f4; } } /* ========================================================================== NAV DROPDOWN (Who We Are) — client feedback #6 ========================================================================== */ .r3-item--dropdown { position: relative; } .r3-item--dropdown .chev { width: 13px; height: 13px; opacity: .55; transition: transform .3s; } .r3-item--dropdown:hover .chev { transform: rotate(180deg); } .r3-dropdown { position: absolute; top: calc(100% + 12px); left: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .6rem; min-width: 190px; box-shadow: 0 40px 70px -35px rgba(11,24,48,.4); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s; z-index: 100; } .r3-item--dropdown::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px; } .r3-item--dropdown:hover .r3-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .r3-dropdown a { display: block; padding: .65rem .7rem; font-size: .8rem; font-weight: 600; color: var(--navy); border-radius: 5px; transition: background .2s; } .r3-dropdown a:hover { background: var(--sky-tint); } /* ========================================================================== CLIENT LOGO STRIP — client feedback #2 (replaces credential marquee) ========================================================================== */ .r3-clients { background: var(--white); border-block: 1px solid var(--line); padding: 2.4rem 0; overflow: hidden; } .r3-clients__head { text-align: center; margin-bottom: 1.8rem; } .r3-clients__label { font-family: var(--font-mono, monospace); font-size: .8rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); } .r3-clients__belt { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .r3-clients__track { display: flex; align-items: center; gap: clamp(2.2rem, 2vw, 3.4rem); width: max-content; padding-inline: clamp(1.25rem, 0.6rem + 2.4vw, 2.5rem); animation: r3ClientsSlide 32s linear infinite; } .r3-clients__belt:hover .r3-clients__track { animation-play-state: paused; } @keyframes r3ClientsSlide { to { transform: translateX(-50%); } } .r3-clients__logo { flex: none; display: flex; align-items: center; justify-content: center; opacity: .85; transition: opacity .3s, transform .3s; } .r3-clients__logo:hover { opacity: 1; transform: translateY(-2px); } .r3-clients__logo img { height: 40px; width: auto; } /* ========================================================================== CENTERED SECTION HEADERS — client feedback #3 & #7 (stack + centre the two-column shead so headings read as a balanced block, not left-pinned) ========================================================================== */ .r3 .shead { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .r3 .shead .kicker { justify-content: center; } .r3 .shead .kicker__line { max-width: 60px; } .r3 .shead h2 { max-width: 46ch; } .r3 .shead p { max-width: 62ch; } /* ========================================================================== FOOTER ========================================================================== */ .r3-footer { background: #06101F; color: #cfe0f4; padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem; } .r3-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0,1fr)); gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1); } .r3-footer__grid > * { min-width: 0; } .r3-footer__logo { height: 46px; width: auto; margin-bottom: 1.2rem; } .r3-footer__brand p { max-width: 30ch; font-size: .97rem; color: #9fb2cc; } .r3-footer__col h4 { font-family: var(--font-mono, monospace); font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #7f96b4; margin-bottom: .8rem; } .r3-footer__col a { display: block; padding: .3rem 0; font-size: .97rem; color: #cfe0f4; } .r3-footer__col a:hover { color: #fff; } .r3-footer__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.4rem; font-size: .87rem; color: #7f96b4; } .r3-footer__bottom .mono { font-family: var(--font-mono, monospace); } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 1000px) { .r3-shead, .shead, .r3-about__top, .r3-tst, .r3-cta__grid { grid-template-columns: minmax(0,1fr); } .r3 .shead { grid-template-columns: minmax(0,1fr); } .r3-why__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .r3-why__cell:nth-child(2) { border-right: 0; } .r3-why__cell:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.14); } .r3-tl__grid { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 2rem; } .r3-tl__line, .r3-tl__prog { display: none; } .r3-ind { flex-direction: column; height: auto; } .r3-ind__p { min-height: 110px; } .r3-ind__p.is-active { flex-grow: 1; min-height: 300px; } .r3-ind__vert { writing-mode: horizontal-tb; transform: none; left: 18px; top: 16px; bottom: auto; } .r3-ind__p.is-active .r3-ind__vert { opacity: 1; } .r3-tst__rail { border-left: 0; border-top: 1px solid var(--line); display: flex; overflow-x: auto; } .r3-tst__tab { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; } .r3-tst__tab.is-active { border-left: 0; border-bottom-color: var(--orange); } .r3-cta::before { display: none; } .r3-cta { background: var(--navy-deep); } .r3-footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .r3-acc__inner { grid-template-columns: minmax(0,1fr); } .r3-acc__head { grid-template-columns: minmax(0,1fr) auto; } .r3-acc__tag { display: none; } } @media (max-width: 640px) { .r3-bento { grid-template-columns: minmax(0,1fr); } .r3-tile, .r3-tile--beside, .r3-tile--feature { grid-column: 1 / -1; } .r3-why__grid, .r3-tl__grid { grid-template-columns: minmax(0,1fr); } .r3-why__cell { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); padding-right: 0; } .r3-ledger__head { display: none; } .r3-ledger__row { grid-template-columns: minmax(0,1fr); gap: .3rem; } .r3-footer__grid { grid-template-columns: minmax(0,1fr); } } /* 00000000000000000000000000000000 */ /* ---------- shared section shell ---------------------------------------- */ .svc-stage { background: #fff; padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0; color: var(--ria-ink); } .svc-stage--tint { background: #EAF3FB; } .svc-wrap { max-width: 1240px; margin-inline: auto; padding-inline: clamp(1.15rem, 0.6rem + 2vw, 2.25rem); } .svc-head { text-align: center; max-width: 760px; margin: 0 auto clamp(2rem, 1.4rem + 2vw, 3rem); } .svc-head .kick { font-family: var(--font-mono, monospace); font-size: .8rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ria-navy); } .svc-head h2 { font-family: var(--font-display, sans-serif); font-weight: 800; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); line-height: 1.12; letter-spacing: -.022em; margin: .9rem 0 .8rem; color: var(--ria-ink); } .svc-head h2 .g { background: linear-gradient(100deg, #1D4179, #4D9FD7 60%, #F7941F 130%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .svc-head p { color: var(--ria-slate); font-size: 1.02rem; line-height: 1.6; } .svc-arrow { display: inline-flex; align-items: center; gap: .45rem; color: var(--ria-navy); font-weight: 600; font-size: .9rem; } .svc-arrow svg { width: 16px; height: 16px; transition: transform .3s; } .svc-arrow:hover svg { transform: translateX(5px); } /* ---------- OPTION 01 · COMMAND INDEX ----------------------------------- Kept as approved: doc-outline list, left accent bar, full-bleed detail. */ .svc-tabs { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.55fr); gap: clamp(1.4rem, .9rem + 1.8vw, 3rem); align-items: start; } .svc-tabs > * { min-width: 0; } .svc-tabs__list { display: flex; flex-direction: column; border-top: 1px solid #E6E4DC; } .svc-tabs__tab { position: relative; text-align: left; display: flex; align-items: baseline; gap: .9rem; padding: 1.05rem .2rem 1.05rem 1rem; border: 0; border-bottom: 1px solid #E6E4DC; background: none; color: var(--ria-ink); cursor: pointer; transition: padding-left .3s ease; } .svc-tabs__tab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ria-navy); transform: scaleY(0); transform-origin: top; transition: transform .35s cubic-bezier(.22,1,.36,1); } .svc-tabs__tab:hover, .svc-tabs__tab.is-active { padding-left: 1.3rem; } .svc-tabs__tab.is-active::before { transform: scaleY(1); } .svc-tabs__n { font-family: var(--font-mono, monospace); font-size: .78rem; color: var(--ria-slate); flex: none; transition: color .3s; } .svc-tabs__tab.is-active .svc-tabs__n, .svc-tabs__tab:hover .svc-tabs__n { color: var(--ria-orange); } .svc-tabs__tt { min-width: 0; } .svc-tabs__tt b { display: block; font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 1.04rem; color: inherit; } .svc-tabs__tab.is-active .svc-tabs__tt b { color: var(--ria-navy); } .svc-tabs__tt span { display: block; font-family: var(--font-mono, monospace); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ria-slate); margin-top: .18rem; } .svc-tabs__panel { display: none; } .svc-tabs__panel.is-active { display: block; animation: svcFade .5s cubic-bezier(.22,1,.36,1); } @keyframes svcFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .svc-tabs__media { position: relative; aspect-ratio: 16/9; overflow: hidden; margin-bottom: 1.4rem; } .svc-tabs__media img { width: 100%; height: 100%; object-fit: cover; } .svc-tabs__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--ria-orange), transparent 65%); } .svc-tabs__copy h3 { font-family: var(--font-display, sans-serif); font-weight: 800; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin-bottom: .7rem; color: var(--ria-ink); } .svc-tabs__copy p { color: var(--ria-slate); font-size: 1.02rem; line-height: 1.6; margin-bottom: 1.1rem; } @media (max-width: 860px) { .svc-tabs { grid-template-columns: minmax(0,1fr); } .svc-tabs__list { flex-direction: row; overflow-x: auto; padding-bottom: .4rem; border-top: 0; } .svc-tabs__tab { flex: none; border-bottom: 0; padding-left: 1rem; } .svc-tabs__tab::before { top: auto; bottom: 0; left: 0; right: 0; height: 3px; width: auto; } } /* ---------- OPTION 02 · MOSAIC ------------------------------------------- A deliberately uneven 12-column collage: photo tiles, solid navy tiles and paper tiles at four different sizes, separated by hairline rules instead of gaps. Irregular by design — never a repeating card. */ .svc-mos { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; background: #E6E4DC; border: 1px solid #E6E4DC; } .svc-mos__t { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; padding: clamp(1.2rem, .9rem + 1.2vw, 1.9rem); background: #fff; overflow: hidden; } .svc-mos__t b { display: block; font-family: var(--font-display, sans-serif); font-weight: 800; font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); line-height: 1.18; letter-spacing: -.015em; color: var(--ria-ink); } .svc-mos__t p { font-size: .89rem; line-height: 1.5; color: var(--ria-slate); margin-top: .4rem; max-width: 38ch; } .svc-mos__cat { font-family: var(--font-mono, monospace); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ria-orange); margin-bottom: auto; } .svc-mos__t > * { position: relative; z-index: 2; } .svc-mos__t img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1); } .svc-mos__t:hover img { transform: scale(1.05); } /* photo tile */ .svc-mos__t--shot::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(9,17,35,.92) 12%, rgba(9,17,35,.15) 72%); } .svc-mos__t--shot b, .svc-mos__t--shot p { color: #fff; } .svc-mos__t--shot p { color: #C6D5EA; } .svc-mos__t--shot .svc-mos__cat { color: #FFD7A0; } /* solid navy tile */ .svc-mos__t--ink { background: var(--ria-navy); } .svc-mos__t--ink b { color: #fff; } .svc-mos__t--ink p { color: #BBD2EA; } .svc-mos__t--ink .svc-mos__cat { color: #FFD7A0; } /* paper tile with a huge ghost numeral */ .svc-mos__t--paper { background: #F6F4EC; } .svc-mos__ghost { position: absolute; z-index: 0; right: .6rem; bottom: -.16em; font-family: var(--font-display, sans-serif); font-weight: 800; font-size: clamp(4.5rem, 3rem + 7vw, 8rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.4px #DEDBCE; pointer-events: none; } .svc-mos__stat { font-family: var(--font-display, sans-serif); font-weight: 800; font-size: clamp(2rem, 1.5rem + 2.4vw, 3.2rem); line-height: 1; letter-spacing: -.03em; color: #fff; margin-bottom: .5rem; } .svc-mos__a { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; font-family: var(--font-mono, monospace); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ria-navy); } .svc-mos__t--shot .svc-mos__a, .svc-mos__t--ink .svc-mos__a { color: #9FD0F5; } .svc-mos__t--r1 { grid-column: span 7; min-height: clamp(240px, 180px + 8vw, 320px); } .svc-mos__t--r2 { grid-column: span 5; min-height: clamp(240px, 180px + 8vw, 320px); } .svc-mos__t--r3 { grid-column: span 5; min-height: 230px; } .svc-mos__t--r4 { grid-column: span 3; min-height: 230px; } .svc-mos__t--r5 { grid-column: span 4; min-height: 230px; } .svc-mos__t--r6 { grid-column: span 4; min-height: 210px; } .svc-mos__t--r7 { grid-column: span 8; min-height: 210px; } @media (max-width: 900px) { .svc-mos { grid-template-columns: repeat(2, 1fr); } .svc-mos__t--r1, .svc-mos__t--r2, .svc-mos__t--r3, .svc-mos__t--r4, .svc-mos__t--r5, .svc-mos__t--r6, .svc-mos__t--r7 { grid-column: span 2; min-height: 210px; } }