/* ============================================================ LR SERVICES LLC, shared design system Static site. Linked from every page as /assets/site.css Palette: HCS "Option 4 (Silver + Blue)" structure with the LR brand crimson as the live accent color, sampled from the real ribbon logo in /assets/brand/. Silver/light is the default; [data-theme="dark"] on repaints to a deep-navy ground. Class prefix: .lr-* (no unprefixed generic names) No external fonts, images, scripts, or CDNs. ============================================================ */ /* ============================================================ 1. TOKENS ============================================================ */ :root { /* --- brand: enamel navy --- */ --navy-midnight: #0A1A45; --navy-deep: #0E2456; --navy: #1B3D86; --navy-mid: #2C5099; --navy-light: #4A6FB5; --powder: #B8C9E6; --mist: #DEE6F2; /* --- brand: silver / chrome --- */ --bone: #E7ECF2; --warm: #EEF1F5; --pale: #F5F7FA; --ivory: #FBFCFD; --silver-mid: #C5CBD3; --silver-edge: #818992; /* --- brand: LR crimson (the differentiator) --- These five values are sampled from the real LR Services ribbon logo (/assets/brand/lr-mark-96a.png), which is a crimson ribbon crossing a silver one. --rust is THE brand red: it is the core of the artwork's gradient, and every other stop here is a darker or brighter sample from the same ribbon. The token names still say "rust". That is deliberate and is NOT an oversight. The site previously ran an orange-leaning rust (#A33E1F) that clashed with the logo, and --rust* is referenced in several hundred places across this stylesheet and in /assets/widget.js. Renaming to --crimson* would be a very large diff with no user-visible benefit and a real chance of a missed reference, so the ramp was retuned in place and the historical naming retained. Read "rust" as "the LR accent ramp". */ --rust-shadow: #6E0014; --rust-deep: #8E0018; --rust: #C00024; /* <- the brand red */ --rust-bright: #D40026; --rust-glow: #E40027; /* --- brand: brass (secondary warm) --- */ --brass-deep: #8A6418; --brass: #C9962B; --brass-bright: #E0B83A; /* --- brand: ink --- */ --black: #060B1C; --ink: #0A1228; --ink-soft: #2A3450; --ink-mid: #4A547A; --ink-faint: #7C849F; --green: #2D6A4F; /* --- semantic: LIGHT (default) --- */ --ground: #F5F7FA; --ground-warm: #EEF1F5; --surface: #FFFFFF; --surface-alt: #E7ECF2; --surface-tint: #F3F6FB; --hairline: rgba(30, 45, 80, 0.12); --hairline-strong: rgba(30, 45, 80, 0.20); --shadow-soft: 0 1px 2px rgba(10,18,40,0.04), 0 8px 24px rgba(10,18,40,0.06); --shadow-lift: 0 2px 6px rgba(10,18,40,0.06), 0 20px 44px rgba(10,18,40,0.10); /* built from --rust-shadow (110,0,20) and --rust (192,0,36). These were rgba(111,40,16) and rgba(163,62,31) while the ramp was rust; left as the old numbers they cast an orange halo under a crimson button. */ --shadow-rust: 0 1px 2px rgba(110,0,20,0.16), 0 8px 20px rgba(192,0,36,0.26); --text: var(--ink); --text-soft: var(--ink-soft); --text-mid: var(--ink-mid); --text-faint: #5F6884; /* darkened from --ink-faint: holds 4.5:1 on --ground-warm and --surface-tint, not just on --ground */ --accent: var(--navy); --accent-strong: var(--navy-deep); --accent-tint: #EEF2FA; --rust-accent: var(--rust); --rust-strong: var(--rust-deep); --rust-tint: #FBEDF0; /* ~8% --rust over white. Was #FBEFEA, an orange-leaning tint that read peach next to crimson. --rust-accent measures 5.66:1 on it, --text-soft 10.83:1. */ --brass-accent: var(--brass-deep); --brass-tint: #FAF3E0; --btn-fg: #FFFFFF; --btn-ghost-bd: rgba(30,45,80,0.20); /* --- SVG scene tokens --- */ --scene-bg: #F3F6FB; --scene-floor: #E4EAF4; --scene-line: #C9D6EC; --scene-fill: #1B3D86; --scene-fill-2:#2C5099; --scene-glass: #DEE6F2; --scene-accent:#C00024; --scene-aura: #4A6FB5; --radius-sm: 10px; --radius: 16px; --radius-lg: 20px; color-scheme: light; } /* --- semantic: DARK (opt-in via ) --- */ :root[data-theme="dark"] { --ground: #0A1836; --ground-warm: #0C1B3E; --surface: #12244C; --surface-alt: #0E1E44; --surface-tint: #16294F; --hairline: rgba(184, 201, 230, 0.14); --hairline-strong: rgba(184, 201, 230, 0.26); --shadow-soft: 0 1px 2px rgba(0,0,0,0.40), 0 10px 30px rgba(0,0,0,0.45); --shadow-lift: 0 2px 8px rgba(0,0,0,0.50), 0 24px 50px rgba(0,0,0,0.55); --shadow-rust: 0 2px 8px rgba(0,0,0,0.45), 0 12px 28px rgba(228,0,39,0.28); --text: var(--ivory); --text-soft: #D7DEEE; --text-mid: var(--powder); --text-faint: #9AA4C2; /* Both accents are lifted past their light-theme counterparts so small text (kickers, numerals, card CTAs, badges) clears 4.5:1 on the dark surfaces. --navy-light and --rust-glow both fail here: --rust-glow (#E40027) measures 3.62 / 3.13 / 2.96 on --ground / --surface / --surface-tint. The crimson retune made this worse, not better. Crimson is darker than the rust it replaced, so the dark accent has to be lifted further. Both values below are the SAME HUE as the brand red (HSL hue 348.75, the hue of #C00024), lifted in lightness only, so they still read as LR crimson rather than as a different colour: --rust-accent #FF5C7A = hsl(348.75, 100%, 68%) worst case 4.82:1 --rust-strong #FF8097 = hsl(348.75, 100%, 75%) worst case 6.00:1 Worst case in both is --surface-tint #16294F, the lightest dark surface. Note white on #FF5C7A is only 2.97:1, so anything painting white onto a solid --rust-accent chip must flip to ink in dark (see sections 9, 23). */ --accent: #7FA8E6; --accent-strong: var(--powder); --accent-tint: #14244A; --rust-accent: #FF5C7A; --rust-strong: #FF8097; --rust-tint: #2C1017; /* crimson-leaning dark tint, was #2A1A16 (warm brown). --rust-accent measures 5.92:1 on it. */ --brass-accent: var(--brass-bright); --brass-tint: #2A2416; --btn-fg: #FFFFFF; --btn-ghost-bd: rgba(184,201,230,0.28); --scene-bg: #0B1430; --scene-floor: #0E1A3C; --scene-line: #24345E; --scene-fill: #4A6FB5; --scene-fill-2:#2C5099; --scene-glass: #16234A; --scene-accent:#FF5C7A; /* matches dark --rust-accent. Was #D85A30. 5.14:1 at worst against --scene-glass #16234A, clear of the 3:1 non-text minimum. */ --scene-aura: #4A6FB5; color-scheme: dark; } /* ============================================================ 2. RESET / BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.58; color: var(--text); background: var(--ground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; min-height: 100vh; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; } img, svg { max-width: 100%; } img { height: auto; display: block; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } table { border-collapse: collapse; width: 100%; } hr { border: 0; } :focus-visible { outline: 2.5px solid var(--rust-accent); outline-offset: 3px; border-radius: 4px; } ::selection { background: color-mix(in srgb, var(--rust-accent) 24%, transparent); color: var(--text); } /* --- utilities --- */ .lr-wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); } .lr-wrap-narrow { max-width: 840px; } .lr-mono { font-family: ui-monospace, "Cascadia Code", "Cascadia Mono", Consolas, "Courier New", monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; } .lr-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .lr-skip { position: absolute; left: 1rem; top: -100px; z-index: 200; background: var(--rust-accent); color: #FFFFFF; font-weight: 650; padding: 0.7em 1.1em; border-radius: var(--radius-sm); transition: top .18s ease; } .lr-skip:focus { top: 1rem; } .lr-rust { color: var(--rust-accent); } .lr-navy { color: var(--accent); } .lr-brass { color: var(--brass-accent); } .lr-muted { color: var(--text-mid); } .lr-divider { height: 1px; background: var(--hairline); border: 0; } .lr-rule { width: 46px; height: 3px; border-radius: 3px; background: var(--rust-accent); margin-bottom: 1.15rem; } /* ============================================================ 3. HEADER / NAV ============================================================ */ .lr-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--ground) 86%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--hairline); } .lr-header-row { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding-block: 0.8rem; } .lr-logo-lockup { display: flex; align-items: center; gap: 0.7rem; flex: none; } /* --- BRAND MARK: the real ribbon artwork ---------------------------- Replaces the hand-drawn "LR" monogram, which sat on a navy gradient tile with an inset ring and a rust corner flare. The real mark is a crimson and silver ribbon on transparency: it carries its own shape and its own colour, so it must not sit on a tile and must not have a coloured flare behind it. Tile, ring, gradient and flare are all removed here. The mark is much taller than it is wide (62x96, ratio 0.6458), so the height is pinned, the width is auto and object-fit contain guarantees it is never stretched. NOTE ON THE ASSET FILES. The site points at the "a" variants (lr-mark-96a.png, lr-logo-full-80a.png, lr-logo-full-160a.png), not at the originally installed lr-mark-96.png etc. The originals are RGBA containers but every pixel in them is alpha 255 over a solid white background, and lr-mark.png additionally carries 64% blank padding (the ribbon occupies only 208x323 of its 417x446 canvas). On the dark theme those files render as a white block on navy, and in the header the ribbon shrinks to about 19x29. The "a" variants are the same artwork trimmed to its bounding box and matted to real transparency: compositing them back over white reproduces the originals to a mean channel error of 0.003, so no colour was altered. The originals are left on disk untouched. Once alpha-correct source artwork is supplied, point these back at the plain filenames and delete the "a" files. */ .lr-logo-mark { flex: none; display: flex; align-items: center; } .lr-logo-mark img { display: block; height: 40px; width: auto; object-fit: contain; } /* --- FOOTER BRAND LOCKUP ------------------------------------------- The footer has room for the full artwork lockup: ribbon mark, the "LR Services" wordmark and the "Business Applications Partner" strapline, all baked into one raster. Light theme uses it directly. Dark theme cannot use it. The wordmark and strapline inside that raster are near black, so against the navy footer they all but vanish, and no CSS filter can lift just that text while leaving the ribbon intact: invert() swings the crimson round to cyan, and brightness(0) invert(1) flattens the whole lockup into a white silhouette and throws the brand red away. So on dark theme the footer swaps to the ribbon mark plus live text, which states the same wordmark and the same strapline in theme-aware colour. Both variants ship in the markup on every page, so the footer markup stays identical across all eight pages and CSS alone decides which one renders. display:none also removes the hidden variant from the accessibility tree, so the link resolves to exactly one accessible name in either theme, never two stacked. */ .lr-logo-full { display: block; width: 100%; max-width: 140px; height: auto; object-fit: contain; } /* dark-theme substitute, hidden while the raster lockup is showing */ .lr-logo-dark-alt { display: none; } /* the footer has more room than the nav, so the mark runs larger */ .lr-footer-lockup .lr-logo-mark img { height: 52px; } [data-theme="dark"] .lr-logo-full { display: none; } [data-theme="dark"] .lr-logo-dark-alt { display: flex; align-items: center; gap: 0.7rem; } /* narrow phones: let the footer lockup shed a little width */ @media (max-width: 480px) { .lr-logo-full { max-width: 118px; } .lr-footer-lockup .lr-logo-mark img { height: 44px; } } .lr-logo-text { display: flex; flex-direction: column; line-height: 1.05; } .lr-logo-name { font-weight: 800; font-size: 1.04rem; letter-spacing: -0.028em; color: var(--text); } .lr-logo-sub { color: var(--text-faint); margin-top: 3px; font-size: 0.62rem; } /* --- desktop nav --- */ .lr-nav { display: block; } .lr-nav-list { display: flex; align-items: center; gap: clamp(0.3rem, 1.1vw, 0.85rem); list-style: none; } .lr-nav-link { display: inline-block; position: relative; font-size: 0.9rem; font-weight: 600; letter-spacing: -0.008em; color: var(--text-soft); padding: 0.5rem 0.35rem; white-space: nowrap; transition: color .16s ease; } .lr-nav-link::after { content: ""; position: absolute; left: 0.35rem; right: 0.35rem; bottom: 0.15rem; height: 2px; border-radius: 2px; background: var(--rust-accent); transform: scaleX(0); transform-origin: left center; transition: transform .2s cubic-bezier(.3,.7,.3,1); } .lr-nav-link:hover { color: var(--text); } .lr-nav-link:hover::after { transform: scaleX(1); } .lr-nav-link.is-active { color: var(--text); font-weight: 700; } .lr-nav-link.is-active::after { transform: scaleX(1); } .lr-header-actions { display: flex; align-items: center; gap: 0.6rem; flex: none; } /* --- mobile disclosure nav (zero JS,

-based) --- */ .lr-mobile { display: none; position: relative; } .lr-mobile-summary { list-style: none; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-sm); border: 1px solid var(--btn-ghost-bd); background: var(--surface); color: var(--text-soft); cursor: pointer; transition: color .16s ease, border-color .16s ease, background .16s ease; } .lr-mobile-summary::-webkit-details-marker { display: none; } .lr-mobile-summary::marker { content: ""; } .lr-mobile-summary:hover { color: var(--rust-accent); border-color: var(--rust-accent); } .lr-mobile-summary svg { width: 20px; height: 20px; display: block; } .lr-mobile-summary .lr-icon-close { display: none; } .lr-mobile[open] .lr-mobile-summary { color: var(--rust-accent); border-color: var(--rust-accent); } .lr-mobile[open] .lr-mobile-summary .lr-icon-open { display: none; } .lr-mobile[open] .lr-mobile-summary .lr-icon-close { display: block; } .lr-mobile-panel { position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 80; min-width: min(19rem, calc(100vw - 2.3rem)); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: 0.5rem; display: flex; flex-direction: column; } .lr-mobile-link { display: block; padding: 0.72rem 0.85rem; border-radius: var(--radius-sm); font-size: 0.97rem; font-weight: 600; color: var(--text-soft); border-left: 3px solid transparent; transition: background .15s ease, color .15s ease, border-color .15s ease; } .lr-mobile-link:hover { background: var(--surface-tint); color: var(--text); } .lr-mobile-link.is-active { color: var(--rust-accent); border-left-color: var(--rust-accent); background: var(--rust-tint); } .lr-mobile-foot { margin-top: 0.4rem; padding: 0.85rem; border-top: 1px solid var(--hairline); color: var(--text-mid); font-size: 0.88rem; } .lr-mobile-foot a { color: var(--rust-accent); font-weight: 650; } /* ============================================================ 4. BUTTONS ============================================================ */ .lr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-weight: 650; font-size: 0.95rem; letter-spacing: -0.01em; padding: 0.78em 1.35em; border-radius: var(--radius-sm); border: 1px solid transparent; background: none; cursor: pointer; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease; } .lr-btn-primary { background: linear-gradient(150deg, var(--rust-bright) 0%, var(--rust-deep) 100%); color: #FFFFFF; box-shadow: var(--shadow-rust); } a.lr-btn-primary { color: #FFFFFF; } .lr-btn-primary:hover { background: linear-gradient(150deg, var(--rust-bright) 0%, var(--rust) 100%); transform: translateY(-1px); } .lr-btn-primary:active { transform: translateY(0); } .lr-btn-navy { background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%); color: #FFFFFF; box-shadow: 0 1px 2px rgba(10,18,40,0.12), 0 6px 18px rgba(27,61,134,0.28); } a.lr-btn-navy { color: #FFFFFF; } .lr-btn-navy:hover { background: linear-gradient(150deg, var(--navy-mid) 0%, var(--navy) 100%); transform: translateY(-1px); } .lr-btn-ghost { background: transparent; color: var(--text); border-color: var(--btn-ghost-bd); } .lr-btn-ghost:hover { border-color: var(--rust-accent); color: var(--rust-accent); background: var(--rust-tint); } /* Busy state (added with the /contact form accessibility pass). The contact submit button carries aria-disabled while a send is in flight rather than the disabled property, because disabling a button blurs it and strands keyboard and screen reader visitors on . The button therefore stays focusable and stays in the tab order, and this rule supplies the visual "not right now" that disabled used to give for free. The submit handler is what blocks the second send. */ .lr-btn[aria-disabled="true"] { opacity: 0.62; cursor: default; } .lr-btn[aria-disabled="true"]:hover { transform: none; } .lr-btn-sm { padding: 0.56em 1.02em; font-size: 0.87rem; border-radius: 9px; } .lr-btn-lg { padding: 0.92em 1.6em; font-size: 1.02rem; } .lr-btn-block { display: flex; width: 100%; } .lr-arrow { transition: transform .18s ease; display: inline-block; } .lr-btn:hover .lr-arrow { transform: translateX(3px); } .lr-btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; } /* text link with an arrow */ .lr-textlink { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 650; font-size: 0.94rem; color: var(--rust-accent); border-bottom: 1px solid transparent; padding-bottom: 1px; width: max-content; max-width: 100%; transition: border-color .18s ease, color .18s ease; } .lr-textlink:hover { border-bottom-color: var(--rust-accent); } .lr-textlink:hover .lr-arrow { transform: translateX(3px); } /* ============================================================ 5. HERO ============================================================ */ .lr-hero { position: relative; overflow: hidden; } .lr-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(58% 68% at 84% 10%, color-mix(in srgb, var(--rust) 13%, transparent) 0%, transparent 62%), radial-gradient(72% 82% at 4% 92%, color-mix(in srgb, var(--navy) 10%, transparent) 0%, transparent 58%); } .lr-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3.75rem); align-items: center; padding-block: clamp(2.75rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); } .lr-hero-copy { min-width: 0; } .lr-eyebrow { display: inline-flex; align-items: center; gap: 0.55em; color: var(--rust-accent); margin-bottom: 1.2rem; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; } .lr-eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--rust-accent); flex: none; } .lr-eyebrow.lr-navy { color: var(--accent); } .lr-eyebrow.lr-navy::before { background: var(--accent); } .lr-hero h1, .lr-hero-title { font-size: clamp(2.3rem, 6vw, 4.05rem); line-height: 1.02; letter-spacing: -0.038em; font-weight: 850; color: var(--text); max-width: 16ch; } /* rust gradient emphasis word inside the h1 */ .lr-spark { color: var(--rust-accent); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .lr-spark { background: linear-gradient(92deg, var(--rust-glow) 0%, var(--rust-deep) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Dark end stop moved off --rust-glow and onto --rust-accent. --rust-glow is now #E40027, which is the peak of the LIGHT ramp and measures only 3.62:1 on --ground here: it squeaks past the 3:1 large-text minimum and nothing else. --rust-accent (#FF5C7A) is 5.90:1 and is the value the rest of the dark theme already uses. Opening stop #FF8FA4 is 8.12:1. */ :root[data-theme="dark"] .lr-spark { background: linear-gradient(92deg, #FF8FA4 0%, var(--rust-accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } } .lr-hero-sub { margin-top: 1.3rem; font-size: clamp(1rem, 1.55vw, 1.16rem); color: var(--text-soft); max-width: 48ch; } .lr-hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; } .lr-hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; margin-top: 2.1rem; } .lr-chip { display: inline-flex; align-items: center; gap: 0.5em; background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-soft); color: var(--text-soft); font-weight: 600; font-size: 0.86rem; padding: 0.52em 0.9em; border-radius: 999px; } .lr-chip-num { color: var(--rust-accent); font-weight: 820; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; } .lr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); flex: none; } .lr-dot-rust { background: var(--rust-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rust-accent) 22%, transparent); } /* --- hero scene card (holds inline SVG) --- */ .lr-hero-scene { position: relative; min-width: 0; } .lr-scene-card { position: relative; border-radius: var(--radius-lg); background: var(--scene-bg); border: 1px solid var(--hairline); box-shadow: var(--shadow-lift); padding: 6px; overflow: hidden; } .lr-scene-card > svg { display: block; width: 100%; height: auto; border-radius: 15px; } .lr-scene-tag { position: absolute; left: 18px; bottom: 16px; display: inline-flex; align-items: center; gap: 0.5em; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 0.5em 0.75em; color: var(--text-soft); font-weight: 600; font-size: 0.8rem; box-shadow: var(--shadow-soft); } .lr-scene-tag svg { width: 15px; height: 15px; border-radius: 0; flex: none; } /* ============================================================ 6. INTERIOR PAGE HEAD ============================================================ */ .lr-page-head { position: relative; overflow: hidden; border-bottom: 1px solid var(--hairline); background: radial-gradient(64% 120% at 88% 0%, color-mix(in srgb, var(--rust) 11%, transparent) 0%, transparent 62%), var(--surface-tint); } .lr-page-head-inner { padding-block: clamp(2.4rem, 5vw, 3.9rem); position: relative; } .lr-page-head h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.05; letter-spacing: -0.036em; font-weight: 840; color: var(--text); max-width: 20ch; } .lr-page-head p { margin-top: 1rem; color: var(--text-mid); font-size: clamp(1rem, 1.5vw, 1.12rem); max-width: 58ch; } .lr-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; list-style: none; margin-bottom: 1.1rem; color: var(--text-faint); font-size: 0.82rem; } .lr-crumbs li { display: inline-flex; align-items: center; gap: 0.45rem; } .lr-crumbs li + li::before { content: "/"; color: var(--hairline-strong); } .lr-crumbs a { color: var(--text-mid); font-weight: 600; } .lr-crumbs a:hover { color: var(--rust-accent); } .lr-crumbs [aria-current="page"] { color: var(--text-soft); font-weight: 600; } /* in-page anchor sub-nav */ .lr-subnav { border-bottom: 1px solid var(--hairline); background: var(--surface); } .lr-subnav-list { display: flex; gap: 0.25rem; list-style: none; overflow-x: auto; scrollbar-width: thin; padding-block: 0.15rem; } .lr-subnav-link { display: inline-block; white-space: nowrap; padding: 0.85rem 0.75rem; font-size: 0.9rem; font-weight: 620; color: var(--text-mid); border-bottom: 2px solid transparent; transition: color .16s ease, border-color .16s ease; } .lr-subnav-link:hover { color: var(--text); } .lr-subnav-link.is-active { color: var(--rust-accent); border-bottom-color: var(--rust-accent); } /* ============================================================ 7. SECTION SHELL ============================================================ */ .lr-section { padding-block: clamp(3rem, 6vw, 5.25rem); } .lr-section-tight { padding-block: clamp(2.2rem, 4vw, 3.4rem); } .lr-section-alt { background: var(--surface-alt); border-block: 1px solid var(--hairline); } .lr-section-tint { background: var(--surface-tint); border-block: 1px solid var(--hairline); } .lr-section-deep { background: linear-gradient(165deg, var(--navy-deep) 0%, var(--navy-midnight) 100%); color: var(--ivory); border-block: 1px solid var(--navy-midnight); } .lr-section-deep .lr-section-head h2, .lr-section-deep h2, .lr-section-deep h3 { color: var(--ivory); } .lr-section-deep .lr-section-head p, .lr-section-deep p { color: var(--powder); } .lr-section-deep .lr-kicker { color: var(--rust-glow); } .lr-section-deep .lr-btn-ghost { color: var(--ivory); border-color: rgba(184,201,230,0.34); } .lr-section-deep .lr-btn-ghost:hover { color: var(--rust-glow); border-color: var(--rust-glow); background: rgba(228,0,39,0.12); } .lr-section-head { max-width: 64ch; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); } .lr-section-head-center { margin-inline: auto; text-align: center; } .lr-section-head-center .lr-section-head-p, .lr-section-head-center p { margin-inline: auto; } .lr-kicker { display: inline-block; margin-bottom: 0.8rem; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--rust-accent); } .lr-kicker.lr-rust { color: var(--rust-accent); } .lr-kicker.lr-navy { color: var(--accent); } .lr-kicker.lr-brass { color: var(--brass-accent); } .lr-section-head h2, .lr-h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -0.032em; line-height: 1.08; font-weight: 820; color: var(--text); } .lr-section-head p, .lr-lede { margin-top: 0.9rem; color: var(--text-mid); font-size: clamp(1rem, 1.5vw, 1.1rem); max-width: 56ch; } .lr-h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -0.022em; font-weight: 760; color: var(--text); } /* long-form copy block */ .lr-prose { max-width: 68ch; color: var(--text-soft); } .lr-prose > * + * { margin-top: 1.1rem; } .lr-prose h3 { font-size: 1.3rem; font-weight: 780; letter-spacing: -0.022em; color: var(--text); margin-top: 2.2rem; } .lr-prose h4 { font-size: 1.05rem; font-weight: 720; letter-spacing: -0.015em; color: var(--text); margin-top: 1.8rem; } .lr-prose a { color: var(--rust-accent); font-weight: 620; border-bottom: 1px solid color-mix(in srgb, var(--rust-accent) 40%, transparent); } .lr-prose a:hover { border-bottom-color: var(--rust-accent); } .lr-prose ul, .lr-prose ol { padding-left: 1.25rem; } .lr-prose li + li { margin-top: 0.5rem; } .lr-prose li::marker { color: var(--rust-accent); } /* ============================================================ 8. CARDS + TILE GRIDS ============================================================ */ .lr-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(1.4rem, 2.5vw, 1.95rem); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; min-width: 0; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .lr-card-link:hover, .lr-card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--hairline-strong); } .lr-card-flat { box-shadow: none; } .lr-card-icon { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-tint); border: 1px solid var(--hairline); margin-bottom: 1.15rem; color: var(--accent); flex: none; } .lr-card-icon svg { width: 26px; height: 26px; } .lr-card-icon-rust { background: var(--rust-tint); color: var(--rust-accent); border-color: color-mix(in srgb, var(--rust-accent) 22%, transparent); } .lr-card-icon-brass { background: var(--brass-tint); color: var(--brass-accent); border-color: color-mix(in srgb, var(--brass-accent) 24%, transparent); } .lr-card-title { font-size: 1.18rem; font-weight: 760; letter-spacing: -0.02em; color: var(--text); margin-bottom: 0.55rem; } .lr-card-body { color: var(--text-mid); font-size: 0.96rem; } .lr-card-foot { margin-top: auto; padding-top: 1.2rem; } .lr-card-cta { display: inline-flex; align-items: center; gap: 0.5em; width: 100%; color: var(--rust-accent); font-weight: 660; font-size: 0.87rem; border-top: 1px solid var(--hairline); padding-top: 1rem; } .lr-card-link:hover .lr-arrow { transform: translateX(3px); } /* tile grids */ .lr-tiles { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); } .lr-tiles-2 { grid-template-columns: repeat(2, 1fr); } .lr-tiles-3 { grid-template-columns: repeat(3, 1fr); } .lr-tiles-4 { grid-template-columns: repeat(4, 1fr); } /* two-column split (copy | aside) */ .lr-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3.25rem); align-items: center; } .lr-split-tight { gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; } /* ============================================================ 9. PRACTICE AREAS (Business Central is FEATURED) ============================================================ */ .lr-practice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .lr-practice-tile { position: relative; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(1.5rem, 2.6vw, 2rem); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; min-width: 0; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .lr-practice-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--hairline-strong); transition: background .2s ease; } .lr-practice-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--hairline-strong); } .lr-practice-tile:hover::before { background: var(--accent); } /* the anchor practice: full-width, rust top rule, rust wash, bigger type */ .lr-practice-featured { grid-column: 1 / -1; padding: clamp(1.75rem, 3.4vw, 2.75rem); background: radial-gradient(70% 130% at 92% 0%, color-mix(in srgb, var(--rust) 9%, transparent) 0%, transparent 60%), var(--surface); border-color: color-mix(in srgb, var(--rust-accent) 26%, var(--hairline)); box-shadow: var(--shadow-lift); } .lr-practice-featured::before { height: 4px; background: linear-gradient(90deg, var(--rust-deep) 0%, var(--rust-bright) 45%, var(--rust-glow) 100%); } .lr-practice-featured:hover::before { background: linear-gradient(90deg, var(--rust-deep) 0%, var(--rust-bright) 45%, var(--rust-glow) 100%); } .lr-practice-featured .lr-practice-title { font-size: clamp(1.5rem, 3vw, 2.05rem); letter-spacing: -0.032em; font-weight: 830; } .lr-practice-featured .lr-practice-body { font-size: clamp(1rem, 1.5vw, 1.1rem); max-width: 52ch; } .lr-practice-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; } .lr-practice-rank { display: inline-flex; align-items: center; gap: 0.55em; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--text-faint); margin-bottom: 0.9rem; } .lr-practice-rank .lr-rank-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--accent-tint); color: var(--accent); font-weight: 800; font-size: 0.72rem; letter-spacing: 0; } .lr-practice-featured .lr-practice-rank { color: var(--rust-accent); } .lr-practice-featured .lr-rank-num { background: var(--rust-accent); color: #FFFFFF; } /* dark lifts --rust-accent to #FF5C7A, where white drops to 2.97:1, so flip the numeral to ink (6.59:1) so the chip stays legible. Light is fine as it is: white on --rust #C00024 is 6.43:1. */ :root[data-theme="dark"] .lr-practice-featured .lr-rank-num { color: var(--black); } .lr-practice-title { font-size: 1.28rem; font-weight: 780; letter-spacing: -0.024em; color: var(--text); margin-bottom: 0.6rem; } .lr-practice-body { color: var(--text-mid); font-size: 0.97rem; } .lr-practice-points { list-style: none; display: grid; gap: 0.55rem; margin-top: 1.15rem; } .lr-practice-points li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--text-soft); font-size: 0.93rem; } .lr-practice-points li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.52em; border-radius: 2px; background: var(--rust-accent); } .lr-practice-points-2 { grid-template-columns: repeat(2, 1fr); column-gap: 1.5rem; } .lr-practice-foot { margin-top: auto; padding-top: 1.4rem; } /* ============================================================ 10. STEPS (hairline grid) ============================================================ */ .lr-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; } .lr-steps-3 { grid-template-columns: repeat(3, 1fr); } .lr-steps-2 { grid-template-columns: repeat(2, 1fr); } .lr-step { background: var(--surface); padding: clamp(1.4rem, 2.4vw, 1.9rem); display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; transition: background .2s ease; } .lr-step:hover { background: var(--surface-tint); } .lr-step-num { display: inline-flex; align-items: baseline; gap: 0.5rem; } .lr-step-num .lr-n { font-size: 2.1rem; font-weight: 850; letter-spacing: -0.04em; line-height: 1; color: var(--rust-accent); font-variant-numeric: tabular-nums; } .lr-step-num .lr-bar { width: 22px; height: 3px; border-radius: 3px; background: var(--accent); transform: translateY(-6px); } .lr-step h3, .lr-step-title { font-size: 1.06rem; font-weight: 720; letter-spacing: -0.016em; color: var(--text); } .lr-step p { color: var(--text-mid); font-size: 0.93rem; } /* ============================================================ 11. METRICS ============================================================ */ .lr-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; } .lr-metric { background: var(--surface); padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.2rem, 2.4vw, 1.8rem); display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } .lr-m-num { font-size: clamp(1.7rem, 3.4vw, 2.35rem); font-weight: 840; letter-spacing: -0.03em; line-height: 1; color: var(--rust-accent); font-variant-numeric: tabular-nums; } .lr-m-num .lr-navy { color: var(--accent); } .lr-m-num .lr-brass { color: var(--brass-accent); } .lr-m-label { color: var(--text-mid); font-size: 0.9rem; font-weight: 550; } .lr-m-note { color: var(--text-faint); font-size: 0.8rem; } /* ============================================================ 12. BADGES / PILLS ============================================================ */ .lr-badge-row { display: flex; flex-wrap: wrap; gap: 0.55rem; } .lr-badge { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.4em 0.75em; border-radius: 999px; font-size: 0.8rem; font-weight: 640; letter-spacing: -0.005em; background: var(--accent-tint); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); } .lr-badge-rust { background: var(--rust-tint); color: var(--rust-accent); border-color: color-mix(in srgb, var(--rust-accent) 26%, transparent); } .lr-badge-brass { background: var(--brass-tint); color: var(--brass-accent); border-color: color-mix(in srgb, var(--brass-accent) 30%, transparent); } .lr-badge-quiet { background: var(--surface-tint); color: var(--text-mid); border-color: var(--hairline); } /* industry pills: larger, tile-ish */ .lr-pills { display: flex; flex-wrap: wrap; gap: 0.7rem; } .lr-pill { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.62em 1.05em; border-radius: 999px; background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-soft); color: var(--text-soft); font-size: 0.93rem; font-weight: 620; transition: border-color .18s ease, color .18s ease, transform .18s ease; } .lr-pill:hover { border-color: var(--rust-accent); color: var(--rust-accent); transform: translateY(-2px); } .lr-pill svg { width: 16px; height: 16px; flex: none; } /* ============================================================ 13. LISTS / SPEC TABLES ============================================================ */ .lr-checklist { list-style: none; display: flex; flex-direction: column; } .lr-checklist li { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.88rem 0; border-top: 1px solid var(--hairline); color: var(--text-soft); font-size: 0.97rem; } .lr-checklist li:first-child { border-top: 0; } .lr-check { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: 2px; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); } .lr-check svg { width: 12px; height: 12px; } .lr-check-rust { background: color-mix(in srgb, var(--rust-accent) 15%, transparent); color: var(--rust-accent); } /* definition-style spec list */ .lr-spec { border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .lr-spec-row { display: grid; grid-template-columns: 13rem 1fr; gap: 1rem; padding: 0.95rem clamp(1rem, 2vw, 1.4rem); border-top: 1px solid var(--hairline); } .lr-spec-row:first-child { border-top: 0; } .lr-spec-k { color: var(--text-faint); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 0.28em; } .lr-spec-v { color: var(--text-soft); font-size: 0.96rem; } /* data table */ .lr-table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .lr-table { min-width: 34rem; font-size: 0.94rem; } .lr-table th, .lr-table td { text-align: left; padding: 0.85rem clamp(0.85rem, 2vw, 1.25rem); border-top: 1px solid var(--hairline); vertical-align: top; } .lr-table thead th { border-top: 0; background: var(--surface-tint); color: var(--text-faint); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; } .lr-table tbody th { color: var(--text); font-weight: 700; } .lr-table td { color: var(--text-mid); } .lr-table tbody tr:hover td, .lr-table tbody tr:hover th { background: var(--surface-tint); } /* ============================================================ 14. QUOTE / CALLOUT ============================================================ */ .lr-quote { position: relative; background: var(--surface); border: 1px solid var(--hairline); border-left: 4px solid var(--rust-accent); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.1rem); box-shadow: var(--shadow-soft); } .lr-quote p { font-size: clamp(1.02rem, 1.8vw, 1.2rem); line-height: 1.5; letter-spacing: -0.014em; color: var(--text-soft); } .lr-quote-mark { display: block; font-size: 2.4rem; line-height: 0.7; color: var(--rust-accent); opacity: 0.5; margin-bottom: 0.6rem; } /* Scoped to .lr-quote (0,2,0) so it beats `.lr-quote p` (0,1,1), which was overriding the attribution's colour, size and leading and making the caption byte-identical to the quote body. */ .lr-quote .lr-quote-attrib { margin-top: 1rem; color: var(--text-faint); font-size: 0.85rem; line-height: 1.58; font-weight: 600; } .lr-callout { background: var(--accent-tint); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: var(--radius); padding: clamp(1.15rem, 2.4vw, 1.6rem); color: var(--text-soft); font-size: 0.97rem; } .lr-callout-rust { background: var(--rust-tint); border-color: color-mix(in srgb, var(--rust-accent) 24%, transparent); } .lr-callout-title { display: block; font-weight: 740; letter-spacing: -0.018em; color: var(--text); margin-bottom: 0.4rem; font-size: 1.02rem; } /* ============================================================ 15. PEOPLE ============================================================ */ .lr-people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .lr-person { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(1.4rem, 2.5vw, 1.9rem); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; min-width: 0; } .lr-person-avatar { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%); color: var(--ivory); font-weight: 820; font-size: 1.35rem; letter-spacing: -0.03em; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); margin-bottom: 1.1rem; position: relative; overflow: hidden; } .lr-person-avatar::after { content: ""; position: absolute; right: -14px; bottom: -14px; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, var(--rust-bright) 0%, transparent 70%); opacity: 0.9; } .lr-person-name { font-size: 1.22rem; font-weight: 790; letter-spacing: -0.024em; color: var(--text); } .lr-person-role { margin-top: 0.3rem; color: var(--rust-accent); font-weight: 650; font-size: 0.87rem; } .lr-person-bio { margin-top: 0.95rem; color: var(--text-mid); font-size: 0.95rem; } .lr-person-tags { margin-top: auto; padding-top: 1.2rem; } /* ============================================================ 16. CONTACT / OFFICES / FORM ============================================================ */ .lr-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } .lr-offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .lr-office { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(1.25rem, 2.4vw, 1.6rem); box-shadow: var(--shadow-soft); border-top: 3px solid var(--rust-accent); } .lr-office-name { font-size: 1.04rem; font-weight: 760; letter-spacing: -0.02em; color: var(--text); margin-bottom: 0.4rem; } .lr-office-detail { color: var(--text-mid); font-size: 0.93rem; } .lr-contact-lines { list-style: none; display: grid; gap: 0.85rem; } .lr-contact-line { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--text-soft); font-size: 0.98rem; } .lr-contact-line svg { width: 18px; height: 18px; flex: none; margin-top: 0.22em; color: var(--rust-accent); } .lr-contact-line a { font-weight: 650; color: var(--rust-accent); } .lr-contact-line a:hover { text-decoration: underline; } .lr-form { display: grid; gap: 1rem; } .lr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .lr-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; } .lr-label { font-size: 0.78rem; font-weight: 680; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-faint); } .lr-input, .lr-textarea, .lr-select { width: 100%; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); padding: 0.72em 0.9em; font-size: 0.97rem; color: var(--text); transition: border-color .16s ease, box-shadow .16s ease; } .lr-input::placeholder, .lr-textarea::placeholder { color: var(--text-faint); } .lr-input:focus:not(:focus-visible), .lr-textarea:focus:not(:focus-visible), .lr-select:focus:not(:focus-visible) { outline: none; border-color: var(--rust-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rust-accent) 18%, transparent); } .lr-input:focus-visible, .lr-textarea:focus-visible, .lr-select:focus-visible { outline: 2.5px solid var(--rust-accent); outline-offset: 2px; } .lr-textarea { min-height: 8.5rem; resize: vertical; } .lr-form-note { color: var(--text-faint); font-size: 0.84rem; } /* ============================================================ 17. CTA STRIP ============================================================ */ .lr-cta-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px; padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--shadow-soft); position: relative; overflow: hidden; } /* The one place the accent and the brass secondary actually blend rather than merely sit near each other. Brass itself is unchanged and does not clash with crimson (red and gold is a stable pairing), but a 50/50 stop put the crimson-to-brass midpoint at roughly #CF4B29, which is almost exactly the old rust #C24A26. Half of this rule would have gone on rendering the colour the retune removed. Pushing --rust-bright out to 72% keeps the rule reading crimson and compresses the warm hand-off into a short tail before brass. No brass token was altered. */ .lr-cta-strip::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--rust-deep) 0%, var(--rust) 38%, var(--rust-bright) 72%, var(--brass) 100%); } .lr-cta-strip h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); letter-spacing: -0.03em; font-weight: 810; color: var(--text); } .lr-cta-strip p { color: var(--text-mid); margin-top: 0.5rem; max-width: 46ch; } .lr-cta-copy { min-width: min(100%, 22rem); flex: 1 1 22rem; } .lr-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* ============================================================ 18. FOOTER ============================================================ */ .lr-footer { background: var(--ground-warm); border-top: 1px solid var(--hairline); padding-block: clamp(2.5rem, 5vw, 3.5rem); } .lr-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; padding-bottom: 2rem; border-bottom: 1px solid var(--hairline); } .lr-footer-brand { max-width: 34ch; } .lr-footer-blurb { margin-top: 1rem; color: var(--text-mid); font-size: 0.94rem; } .lr-footer-col { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; } .lr-fc-title { color: var(--text-faint); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin-top: 0; margin-bottom: 0.25rem; } .lr-footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; } .lr-footer-links a { color: var(--text-soft); font-size: 0.93rem; width: fit-content; border-bottom: 1px solid transparent; transition: color .16s ease, border-color .16s ease; } .lr-footer-links a:hover { color: var(--rust-accent); border-bottom-color: var(--rust-accent); } .lr-footer-offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding-block: 1.8rem; border-bottom: 1px solid var(--hairline); } .lr-office-block { min-width: 0; } .lr-office-block .lr-ob-city { font-weight: 720; font-size: 0.95rem; color: var(--text); display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.3rem; } .lr-office-block .lr-ob-city::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--rust-accent); flex: none; } .lr-office-block p { color: var(--text-mid); font-size: 0.89rem; } .lr-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; color: var(--text-faint); font-size: 0.85rem; } .lr-mock-note { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.35em 0.7em; border-radius: 999px; background: var(--rust-tint); color: var(--rust-accent); border: 1px solid color-mix(in srgb, var(--rust-accent) 26%, transparent); font-size: 0.78rem; font-weight: 650; } /* ============================================================ 19. RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .lr-nav-list { gap: 0.15rem; } .lr-nav-link { font-size: 0.85rem; padding-inline: 0.28rem; } .lr-tiles-4 { grid-template-columns: repeat(2, 1fr); } .lr-practice-inner { grid-template-columns: 1fr; } .lr-footer-grid { grid-template-columns: 1fr 1fr; } .lr-footer-brand { grid-column: 1 / -1; max-width: 46ch; } } @media (max-width: 900px) { /* swap desktop nav for the JS-free disclosure menu */ .lr-nav { display: none; } .lr-mobile { display: block; } .lr-hero-grid { grid-template-columns: 1fr; } .lr-hero-scene { order: -1; max-width: 560px; } .lr-hero h1, .lr-hero-title { max-width: 20ch; } .lr-split, .lr-contact-grid { grid-template-columns: 1fr; } .lr-tiles, .lr-tiles-2, .lr-tiles-3, .lr-tiles-4 { grid-template-columns: repeat(2, 1fr); } .lr-steps, .lr-steps-3 { grid-template-columns: repeat(2, 1fr); } .lr-metrics { grid-template-columns: repeat(2, 1fr); } .lr-people, .lr-offices { grid-template-columns: 1fr; } .lr-practice { grid-template-columns: 1fr; } .lr-footer-offices { grid-template-columns: 1fr; gap: 1.1rem; } .lr-spec-row { grid-template-columns: 1fr; gap: 0.3rem; } } @media (max-width: 640px) { body { font-size: 15.5px; } /* header-scoped: the footer lockup has no width pressure and keeps its sub-line */ .lr-header .lr-logo-sub { display: none; } /* .lr-header-actions .lr-btn is hidden unconditionally further down (see "Header overflow guard"), so the duplicate hide once kept here was redundant. */ .lr-header-actions .lr-mobile-summary { display: inline-grid; } .lr-tiles, .lr-tiles-2, .lr-tiles-3, .lr-tiles-4 { grid-template-columns: 1fr; } .lr-steps, .lr-steps-2, .lr-steps-3 { grid-template-columns: 1fr; } .lr-metrics { grid-template-columns: 1fr; } .lr-people { grid-template-columns: 1fr; } .lr-practice-points-2 { grid-template-columns: 1fr; } .lr-form-grid { grid-template-columns: 1fr; } .lr-footer-grid { grid-template-columns: 1fr; } .lr-btn { font-size: 0.9rem; } .lr-hero-proof { gap: 0.5rem; } .lr-chip { font-size: 0.82rem; } .lr-cta-strip { flex-direction: column; align-items: flex-start; } .lr-scene-tag { left: 12px; bottom: 12px; font-size: 0.74rem; } } /* ============================================================ 20. MOTION / PRINT ============================================================ */ @media (prefers-reduced-motion: no-preference) { .lr-pulse { animation: lrPulse 2.8s ease-out infinite; transform-origin: center; } @keyframes lrPulse { 0% { opacity: 0.55; } 70% { opacity: 0; } 100% { opacity: 0; } } .lr-flow { stroke-dasharray: 5 9; animation: lrFlow 1.6s linear infinite; } @keyframes lrFlow { to { stroke-dashoffset: -28; } } .lr-blink { animation: lrBlink 2s ease-in-out infinite; } @keyframes lrBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ============================================================ 21. HEADER NAV FIT (appended, site-wide, not page-scoped) The primary nav carries 8 items. Measured at 1280px the header needs 1129px (logo lockup 260 + nav 787 + toggle 42 + gaps 40) against the 1080px content box of a 1160px .lr-wrap, so the row overflowed and pushed the document to 1409px wide. .lr-wrap is capped at 1160px, so the available width does NOT grow past that breakpoint. The overflow is present at every viewport >= 1025px, not just at one size. That is why this uses no media query: it promotes the nav treatment already defined at <=1024 to all widths. Measured after: 999px, 81px of slack. Note: a text CTA button in .lr-header-actions does not fit alongside an 8-item nav (999 + 177 + 20 = 1196 > 1080). Pages should keep the header to the theme toggle and the mobile summary, and put the CTA in the hero or the CTA strip. ============================================================ */ .lr-nav-list { gap: 0.15rem; } .lr-nav-link { font-size: 0.85rem; padding-inline: 0.28rem; } /* Between 901 and 1024 the desktop nav is still on but the wrap has lost its padding headroom: needed 999 vs 944 available at 1024. Dropping the logo sub-line recovers 122px (lockup 260 -> 138), bringing the row to 877. Below 901 the nav collapses to the

menu, so the sub-line returns; <=640 already hides it. */ @media (min-width: 901px) and (max-width: 1024px) { /* header-scoped: the footer lockup has no width pressure and keeps its sub-line */ .lr-header .lr-logo-sub { display: none; } } @media print { .lr-header, .lr-mobile, .lr-subnav, .lr-skip, .lr-cta-strip, .lr-hero-cta, .lr-btn-row { display: none !important; } body { background: #FFFFFF; color: #000000; font-size: 11pt; } .lr-hero::before, .lr-page-head { background: none; } .lr-card, .lr-practice-tile, .lr-quote, .lr-person, .lr-office, .lr-steps, .lr-metrics, .lr-spec, .lr-table-wrap { box-shadow: none !important; border: 1px solid #999999; break-inside: avoid; } .lr-section, .lr-section-alt, .lr-section-tint { padding-block: 1.2rem; background: none; } .lr-section-deep { background: none; color: #000000; } a { color: #000000; } .lr-footer { background: none; } } /* ============================================================ 23. PAGE-SCOPED: /bespoke-development The "What we build" set is 5 cards. A plain 3-up grid leaves a ragged final row, so this runs a 6-track grid: three 2-track cards on row one, two 3-track cards on row two. Used as `class="lr-tiles lr-bd-build"`, so it inherits .lr-tiles gap. Declared after §19 on purpose: equal specificity, later wins, which keeps the responsive .lr-tiles overrides from applying. ============================================================ */ /* Not page-scoped, but found while auditing this page: .lr-skip is white on var(--rust-accent), which dark lifts to #FF5C7A. White measures 2.97:1 there and fails. Ink measures 6.59:1. Same fix already applied to .lr-rank-num at §9; light theme is unaffected (white on --rust is 6.43:1). */ :root[data-theme="dark"] .lr-skip { color: var(--black); } .lr-bd-build { grid-template-columns: repeat(6, 1fr); } .lr-bd-build > * { grid-column: span 2; } .lr-bd-build > *:nth-child(4), .lr-bd-build > *:nth-child(5) { grid-column: span 3; } @media (max-width: 900px) { .lr-bd-build { grid-template-columns: repeat(6, 1fr); } .lr-bd-build > * { grid-column: span 3; } .lr-bd-build > *:nth-child(5) { grid-column: span 6; } } @media (max-width: 640px) { .lr-bd-build > *, .lr-bd-build > *:nth-child(4), .lr-bd-build > *:nth-child(5) { grid-column: span 6; } } /* ============================================================ 21. FORM FIELDSETS Added for /contact (contact.html). The base reset does not neutralise the UA fieldset border/legend, so grouped form sections need these two. Safe to reuse on any page with a .lr-form that groups its fields. ============================================================ */ .lr-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; /* keeps a fieldset from forcing its grid children wide */ } .lr-fieldset + .lr-fieldset { margin-top: 1.6rem; } .lr-legend { padding: 0; margin-bottom: 0.9rem; color: var(--text-faint); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; } /* ============================================================ 21b. KICKER SPECIFICITY FIX `.lr-kicker` (0,1,0) loses to `.lr-section-head p` and `.lr-cta-strip p` (both 0,1,1), so every

inside those wrappers rendered --text-mid at body size instead of rust at 0.72rem, and inherited margin-top/max-width besides. These 0,2,0 rules reclaim colour, size and spacing. The .lr-navy / .lr-brass lines are required: without them this new 0,2,0 rule ties `.lr-kicker.lr-navy` (0,2,0) and wins on source order, breaking the variants that already render correctly. Placed BEFORE section 22 so the deep-band contrast fix still wins. ============================================================ */ .lr-section-head .lr-kicker, .lr-cta-strip .lr-kicker { color: var(--rust-accent); font-size: 0.72rem; margin-top: 0; margin-bottom: 0.8rem; max-width: none; } .lr-section-head .lr-kicker.lr-navy, .lr-cta-strip .lr-kicker.lr-navy { color: var(--accent); } .lr-section-head .lr-kicker.lr-brass, .lr-cta-strip .lr-kicker.lr-brass { color: var(--brass-accent); } /* ============================================================ 22. CONTRAST FIX: the accent on the deep navy band Measured on /contact. --rust-glow on the .lr-section-deep gradient fails 4.5:1 for small text at both ends, so the kicker and the ghost-button hover state both need a lighter value. This was true of the old rust glow (#D85A30, 3.86:1 / 4.35:1) and is worse under the crimson retune: --rust-glow is now #E40027, which measures 3.08:1 against --navy-deep and 3.47:1 against --navy-midnight. #FF8097 is the replacement, and it is the same hue as the brand red (hsl 348.75) lifted to 75% lightness. It measures 6.25:1 / 7.05:1, which lands within 0.1 of the 6.17:1 / 6.96:1 the old #F58A5C gave, so the band's visual weight is unchanged. #FF8097 is also the dark theme's --rust-strong, but it is written as a literal here on purpose: .lr-section-deep paints the fixed brand navy tokens and stays dark in BOTH themes, so it must not follow a theme-switched variable. The gradient background is why this was missed: the band paints a linear-gradient, so an automated walk-up reads backgroundColor as transparent and scores the text against the page ground instead. Appended after section 18 so it overrides on source order. ============================================================ */ /* The .lr-section-head form is needed to beat `.lr-section-deep .lr-section-head p` (0,2,1). */ .lr-section-deep .lr-section-head .lr-kicker, .lr-section-deep .lr-kicker { color: #FF8097; } .lr-section-deep .lr-btn-ghost:hover { color: #FF8097; border-color: #FF8097; } /* Dark lifts --rust-accent to #FF5C7A, where the skip link's white label drops to 2.97:1. Flip it to ink (6.59:1), the same treatment already used on .lr-practice-featured .lr-rank-num. This is the first control a keyboard user reaches, so it should not be the weakest text on the page. */ :root[data-theme="dark"] .lr-skip { color: var(--black); } /* ============================================================ 21. THEME TOGGLE (shared header control) Added after the initial system pass. Lives in .lr-header-actions next to the mobile disclosure summary and is styled to match it, so the two controls read as a pair at every breakpoint. Deliberately NOT built on .lr-btn: .lr-header-actions .lr-btn is hidden at every width (see "Header overflow guard" below), and the toggle must survive at every breakpoint including mobile. ============================================================ */ .lr-theme-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; padding: 0; border-radius: var(--radius-sm); border: 1px solid var(--btn-ghost-bd); background: var(--surface); color: var(--text-soft); cursor: pointer; transition: color .16s ease, border-color .16s ease, background .16s ease; } .lr-theme-toggle:hover { color: var(--rust-accent); border-color: var(--rust-accent); background: var(--rust-tint); } .lr-theme-toggle svg { width: 19px; height: 19px; display: block; } /* light theme shows the moon (the state you can switch to); dark theme shows the sun */ .lr-theme-toggle .lr-icon-sun { display: none; } :root[data-theme="dark"] .lr-theme-toggle .lr-icon-moon { display: none; } :root[data-theme="dark"] .lr-theme-toggle .lr-icon-sun { display: block; } @media print { .lr-theme-toggle { display: none !important; } } /* ============================================================ 22. SMALL SHARED HELPERS Added while building /ai-solutions so the page needs no inline styles and no page-level