/* Mr. Radiant: small site-wide additions (footer links, family row, Case Studies / Blog tabs). */

/* plain links inside contact cards keep the card's text style */
a.mr-link { color: inherit; text-decoration: none; transition: color .2s ease; }
a.mr-link:hover, a.mr-link:focus-visible { color: rgb(0, 168, 157); }
a.mr-link[href^="mailto:"] { text-transform: none; }

/* footer: "Part of the family" row (docs/qol-and-signature.md, row 1) */
.mr-family { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-self: stretch; gap: 12px; margin: 8px 0 0; }
.mr-family-label { margin: 0; font: 400 14px/1.4 "Satoshi", "Satoshi Placeholder", sans-serif; color: var(--token-d9d01f21-7a47-443c-a8bc-56cdb453de6f); }
.mr-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px 6px 6px; border: 1px solid color-mix(in srgb, var(--token-a3567fc0-2c6f-4fa8-ac8f-89ddd158e98d) 20%, transparent); border-radius: 0; font: 400 15px/1.2 "Satoshi", "Satoshi Placeholder", sans-serif; color: var(--token-d9d01f21-7a47-443c-a8bc-56cdb453de6f); text-decoration: none; transition: border-color .14s ease, color .14s ease, background-color .14s ease; }
.mr-chip:hover, .mr-chip:focus-visible { border-color: color-mix(in srgb, var(--token-a3567fc0-2c6f-4fa8-ac8f-89ddd158e98d) 50%, transparent); color: var(--token-a3567fc0-2c6f-4fa8-ac8f-89ddd158e98d); background: color-mix(in srgb, var(--token-a3567fc0-2c6f-4fa8-ac8f-89ddd158e98d) 6%, transparent); }
.mr-chip:focus-visible { outline: 2px solid var(--token-4fdd7769-e1d0-45b2-8e3d-fe484baba321); outline-offset: 2px; }
.mr-chip-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 0; background: #fff; flex: none; }
.mr-chip-mark img { width: 20px; height: 20px; display: block; }
@media (max-width: 809px) { .mr-family-label { flex-basis: 100%; text-align: center; } }

/* footer "Follow us" heading stays on one line now that only LinkedIn is listed */
[data-radiant-name="Social Media"] { width: max-content !important; min-width: max-content !important; }
[data-radiant-name="Follow"], [data-radiant-name="Follow"] * { white-space: nowrap !important; width: max-content !important; }

/* Case Studies / Blog switch under the listing page headings */
.mr-tabs {
  position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%);
  display: inline-flex; gap: 4px; padding: 6px; white-space: nowrap;
  background: rgb(13, 13, 13); border: 1px solid rgba(255, 255, 255, .1); border-radius: 160px;
}
@media (max-width: 809px) { .mr-tabs { bottom: 24px; } .mr-tabs a { padding: 0 16px; } }
.mr-tabs a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 20px; border-radius: 30px;
  font-family: Unbounded, "Unbounded Placeholder", sans-serif; font-size: 12px; letter-spacing: -.1px;
  text-transform: uppercase; color: #fff; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.mr-tabs a:hover { background: rgba(255, 255, 255, .06); }
.mr-tabs a.active { background: rgba(255, 255, 255, .1); color: rgb(0, 168, 157); }

@media (prefers-reduced-motion: reduce) {
  a.mr-link, .mr-tabs a, .mr-chip { transition: none; }
}
/* Placeholders are the only visible field labels: keep them at 4.5:1 or more on dark and light fields. */
.radiant-formspark-input,.radiant-custom-input{--mr-placeholder:color-mix(in srgb,currentColor 72%,transparent);--radiant-formspark-placeholder-color:var(--mr-placeholder)!important;--radiant-custom-placeholder-color:var(--mr-placeholder)!important}

/* QA 2026-10-23. The "Contact US!" heading is text scaled inside an SVG whose box cut off the bottom of the letters on phones. */
[data-radiant-name="Logo And Overview"] svg { overflow: visible; }
/* Phones: form fields at 16px, because iOS Safari zooms the page in on fields under 16px. */
@media (max-width: 809px) {
  input:not([type="checkbox"]):not([type="radio"]), textarea, select { font-size: 16px !important; }
}

/* Form status message (see mrSay in fullnav.js and static.js) */
#mr-form-status { position: fixed; left: 50%; bottom: 24px; z-index: 10000; max-width: min(92vw, 520px); margin: 0; padding: 14px 18px; border-radius: 14px; background: #121212; color: #fff; border: 1px solid rgb(0, 168, 157); font: 500 15px/1.4 system-ui, sans-serif; text-align: center; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
#mr-form-status.is-on { opacity: 1; transform: translate(-50%, 0); }
#mr-form-status.is-bad { border-color: #e5484d; }
@media (prefers-reduced-motion: reduce) { #mr-form-status { transition: none; } }

/* Phone menu open (class set by fullnav.js): page behind stays still, panel fills the screen */
html.mr-menu-open, html.mr-menu-open body { overflow: hidden; }
nav[data-radiant-name="Phone Open"] { min-height: 100vh; min-height: 100dvh; }

/* Speed (QA 2026-10-23): the scrolling ticker is pre-rendered at opacity 0 and only shown once the page
   code has measured it, which made it the last thing painted (mobile LCP 16 s). Show it from the first
   paint; it starts moving when the page code is ready. */
section:has(> ul[style*="translateX"]) { opacity: 1 !important; }

/* Speed (QA 2026-10-23): the first screen of every runtime page (hero heading, hero image, page heading)
   was pre-rendered at opacity 0 and only faded in after about 1 MB of page code had run, so phones showed
   an empty screen for many seconds (mobile LCP 16 s). These blocks now show from the first paint; the
   entrance animations further down the page are unchanged. */
.radiant-j4z2v,
.radiant-1sk6zfr,
.radiant-1416yys,
.radiant-p3oj1o,
.radiant-1ktvb5o,
.radiant-7xy6ap,
.radiant-1p82ngi,
.radiant-1ahbqj6,
.radiant-1uj58kk,
.radiant-f78lk3,
.radiant-mil5e4,
.radiant-12w5yjs,
.radiant-1kgah45,
.radiant-1pbeop7,
.radiant-1lkmq25,
.radiant-1e8sw6m,
.radiant-jeii75,
.radiant-ieed5h,
.radiant-nlcfzn,
.radiant-vnzfsv { opacity: 1 !important; transform: none !important; }

/* FAQ (QA 2026-10-23): on touch screens a tap leaves the item in its hover state, which adds 20px of left
   padding, so long questions wrapped onto a third line after closing and the list jumped. */
@media (hover: none) { .radiant-7FnwO.hover { padding-left: 20px !important; } }

/* Touch screens (QA 2026-10-23): the LinkedIn icon on posts (23px) and the "Connect on LinkedIn" link (20px)
   get a 44px tap area through an invisible extension, so nothing on the page moves. */
@media (pointer: coarse) {
  a.radiant-ClZI0[href*="linkedin.com"], a.mr-link { position: relative; }
  a.radiant-ClZI0[href*="linkedin.com"]::after { content: ""; position: absolute; inset: -11px; }
  a.mr-link::after { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
}

/* Footer: "Follow Us:", the LinkedIn icon and the newsletter form on one line (owner's request). */
.radiant-181brm7 { flex-direction: row !important; align-items: center !important; gap: 12px !important; }
.radiant-181brm7 > .radiant-1uclght { justify-content: center !important; }
@media (min-width: 810px) {
  .radiant-w2s6bw { display: grid !important; grid-template-columns: auto auto; justify-content: center !important; align-items: center; gap: 12px 32px !important; }
  .radiant-w2s6bw::after { grid-column: 1 / -1; }
}

/* Flat surfaces (owner's request, 2026-10-24): no decorative gradients or frosted glass.
   The glows, vignettes, fades and the ringed backdrop become the plain page colour; translucent
   cards stay as they were, minus the blur; the nav pill turns opaque so text never shows through. */
.radiant-1bsjpkg, .radiant-1jghupm, .radiant-gkxyv, .radiant-u9dpcd, .radiant-dcxhx7, .radiant-1lvg27k, .radiant-occhde, .radiant-pspgro, .radiant-1ghqqfr, .radiant-11gnep7, .radiant-1sj9wq5, .radiant-1jrkwvp, .radiant-1urq87d, .radiant-1gmvp9f, .radiant-se0ayk, .radiant-dt0c77, .radiant-rrjhgk, .radiant-1r2t7x7, .radiant-eq8exj, .radiant-1i5u0s4, [style*="gradient("] { background-image: none !important; }
.radiant-skvjh4 { background: rgb(0, 0, 0) !important; }
* { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.radiant-v6ZIe, .radiant-1ux5m6q { background-color: rgb(10, 10, 10) !important; }
/* Cards over the team photo were readable only through the blur: give them a solid tint instead. */
.radiant-5diXN { background-color: rgba(10, 10, 10, .8) !important; }
/* Body text at 90% white (was 80%), lightness 0.85 or more on the dark page. */
body { --token-d9d01f21-7a47-443c-a8bc-56cdb453de6f: rgba(255, 255, 255, .9) !important; }
[style*="--radiant-text-color"][style*="token-8296390c"] { --radiant-text-color: rgba(255, 255, 255, .88) !important; }
/* Photo headings keep a flat tint behind the words where a gradient fade used to be. */
.radiant-eq8exj { background-color: rgba(10, 10, 10, .55) !important; }

/* Light theme when the visitor's system asks for it (owner's request, 2026-10-24). The page
   runtime colours everything through the tokens on body, so swapping them flips the site;
   the few fixed dark colours in this file follow below. Dark text on teal stays as it is. */
@media (prefers-color-scheme: light) {
  :root { color-scheme: light; }
  body {
    --token-2f560859-5998-4075-847c-9f666c5cfc0b: rgb(246, 246, 243) !important;
    --token-eea41e84-741c-4ad1-8fa4-d13594d15041: rgb(246, 246, 243) !important;
    --token-affa1b72-7c43-4531-b217-6ad9a97be289: rgba(0, 0, 0, .04) !important;
    --token-16cecdcd-c5a5-4884-abaa-e0abd93e3514: rgba(0, 0, 0, .1) !important;
    --token-31d2d8ec-6073-495b-98cd-5e142f56bc63: rgba(0, 0, 0, .14) !important;
    --token-8c47652b-dea5-4767-a9f2-5d952dcce49a: rgba(0, 0, 0, .3) !important;
    --token-8296390c-3e4f-4c48-afd6-ee4e9808dfbe: rgba(0, 0, 0, .6) !important;
    --token-d9d01f21-7a47-443c-a8bc-56cdb453de6f: rgba(0, 0, 0, .8) !important;
    --token-a3567fc0-2c6f-4fa8-ac8f-89ddd158e98d: rgb(17, 17, 17) !important;
    --token-2c77483b-74d5-40f8-b894-5fb4dc69010e: rgb(232, 232, 228) !important;
    --token-4fdd7769-e1d0-45b2-8e3d-fe484baba321: rgb(0, 128, 120) !important;
    background-color: rgb(246, 246, 243) !important;
  }
  [style*="--radiant-text-color"][style*="token-8296390c"] { --radiant-text-color: rgba(0, 0, 0, .78) !important; }
  .radiant-v6ZIe, .radiant-1ux5m6q { background-color: rgb(246, 246, 243) !important; }
  .radiant-skvjh4 { background: rgb(246, 246, 243) !important; }
  .radiant-eq8exj { background-color: transparent !important; }
  .radiant-5diXN { background-color: rgba(246, 246, 243, .92) !important; }
  /* Words printed over a photo stay white. */
  .radiant-q7to44 h1, .radiant-q7to44 p { --radiant-text-color: rgb(255, 255, 255) !important; }
  /* The logo's white AGENCY line would vanish on a light page: invert it, keeping the hues. */
  a[href="./"] img, a[href="/"] img { filter: invert(1) hue-rotate(180deg); }
}

/* Quality of life (2026-10-24, docs/qol-and-signature.md): skip link and back to top, both added to <body>
   by fullnav.js / static.js, outside the page runtime's tree. */
.mr-skip { position: fixed; left: 16px; top: -80px; z-index: 10001; padding: 10px 16px; border-radius: 12px; background: rgb(0, 168, 157); color: #0d0d0d; font: 600 15px/1.2 "Satoshi", "Satoshi Placeholder", sans-serif; text-decoration: none; }
.mr-skip:focus { top: 16px; }
.mr-top { position: fixed; right: 16px; bottom: 16px; z-index: 9000; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .15); background: rgb(22, 22, 22); color: #fff; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, visibility 0s .25s; }
.mr-top.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mr-top:hover { border-color: rgb(0, 168, 157); }
.mr-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .mr-top { transition: none; } }

/* Shared with MonsiTools and MonsiTrade (docs/qol-and-signature.md): a copyright line with the gold star
   of the MonsiTools logo at the end of the footer, and the same gold text selection. The page code has no
   copyright line, so it is drawn here and the runtime's tree stays untouched. */
.radiant-w2s6bw::after { content: "\00A9  2026 Mr. Radiant"; order: 99; margin-top: 4px; padding-right: 1.15em; justify-self: center; align-self: center; width: max-content; max-width: 100%; font: 400 13px/1.4 "Satoshi", "Satoshi Placeholder", sans-serif; color: rgba(255, 255, 255, .7); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e6a832' d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") no-repeat right center / .85em .85em; }
::selection { background: rgba(230, 168, 50, .35); color: inherit; }
@media (prefers-color-scheme: light) {
  .mr-top { background: rgb(246, 246, 243); color: #111; border-color: rgba(0, 0, 0, .15); }
  .radiant-w2s6bw::after { color: rgba(0, 0, 0, .65); }
}

/* Quality of life, round 2 (2026-10-24, docs/qol-and-signature.md). CSS only: the page runtime's tree is untouched. */
html { scroll-padding-top: 96px; scrollbar-gutter: stable; }  /* linked headings land below the fixed nav; no sideways jump when the menu locks scrolling */
nav[data-radiant-name="Phone Open"], .mr-menu { overscroll-behavior: contain; }  /* scrolling the phone menu never scrolls the page behind it */
a, button, input[type=submit], [data-radiant-name="Hamburger"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }  /* taps respond at once, no grey flash */
input, textarea { caret-color: rgb(0, 168, 157); accent-color: rgb(0, 168, 157); }  /* teal text cursor and checkboxes in forms */
.radiant-p6xs6g :is(p, li) { text-wrap: pretty; } .radiant-p6xs6g :is(h2, h3) { text-wrap: balance; }  /* articles: no single word left alone on the last line */