/*
* KPsphere contact cards (contact-john.html, contact-christian.html): the pages a QR code on a business card, an
* email signature or the capability statement opens. Loaded after css/styles.css and css/site.css, on these two
* pages only, and built on site.css tokens: ink and ivory, Inter, one accent, no emoji. Colours written out here are
* those tokens with an alpha (ink 7 11 20 / 11 18 32 / 24 36 58, ivory 243 238 228, accent 38 201 164), the site's
* own button hover, the AI ScoutBOT wordmark's cyan, shadow black, and white under the QR code.
*
* One phone screen holds the person and every way to reach them; Save contact stays under the thumb in a fixed bar;
* "QR code" turns the phone itself into the card. The markup is written by tools/contact-cards.mjs.
*
* Hooks the phone script reads (tools/contact-cards.mjs REVEAL_SCRIPT): [data-kp-phone], button.kp-contact-show,
* [data-kp-call]. The script swaps the Call button for a plain link, so both are styled through their parent
* (.kp-contact-actions), never through a class of their own. tools/public-site.test.mjs looks for the two rules
* marked KEEP below exactly as they are written.
*/
html { scroll-padding-top: 76px; scroll-padding-bottom: 112px; } /* a focused link is never left under the nav or the action bar */
.scroll-top-btn { display: none !important; } /* it would sit on the action bar */
.kp-contact-wrap { --cc-pad: 20px; padding: 68px 0 0; background: var(--ink-900); }
.kp-contact-card { max-width: 560px; margin: 0 auto; color: var(--body); }
.kp-contact-card a { -webkit-tap-highlight-color: rgba(38, 201, 164, 0.18); }
.cc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.cc-ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* ── the person ──────────────────────────────────────────────────────────────────────────────────── */
.cc-id { position: relative; overflow: hidden; text-align: center; padding: 10px var(--cc-pad) 28px; scroll-margin-top: 68px; }
.cc-id > * { position: relative; z-index: 1; }
/* The monogram sits inside the site's sphere scene: js/motion.js (unchanged) draws it on .cc-orb. motion.js centres
a scene narrower than 900 px at 74% / 30% of its canvas, with a radius of 0.3 x height x data-kp-scale. So the box
is 560 x 480, that point is (414.4, 144), and the two offsets put it on the middle of the monogram; with
data-kp-scale 0.46 the globe is 66 px in radius around a 40 px monogram. The mask lets the globe show whole and
fades its orbit before the name. Without the script the glow, the ring and the two meridians stand in for it. */
.cc-avatar { position: relative; z-index: 0; width: 80px; height: 80px; margin: 30px auto 0; }
.cc-avatar .cc-orb {
position: absolute; width: 560px; height: 480px; left: calc(50% - 414.4px); top: calc(50% - 144px);
overflow: visible; pointer-events: none; z-index: 0;
-webkit-mask-image: radial-gradient(circle at 414.4px 144px, #000 0, #000 84px, transparent 122px), linear-gradient(180deg, #000 0, #000 196px, transparent 212px);
-webkit-mask-composite: source-in;
mask-image: radial-gradient(circle at 414.4px 144px, #000 0, #000 84px, transparent 122px), linear-gradient(180deg, #000 0, #000 196px, transparent 212px);
mask-composite: intersect;
}
.cc-avatar::before, .cc-avatar::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.cc-avatar::before { inset: -52px; background: radial-gradient(closest-side, rgba(38, 201, 164, 0.16), rgba(38, 201, 164, 0) 72%); }
.cc-avatar::after { inset: -8px; border: 1px solid rgba(38, 201, 164, 0.42); }
.cc-mono {
position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
background: radial-gradient(120% 120% at 28% 18%, var(--ink-600), var(--ink-900) 62%);
border: 1px solid var(--line-strong);
box-shadow: 0 0 0 7px rgba(7, 11, 20, 0.55), 0 20px 44px -18px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(243, 238, 228, 0.08);
}
.cc-globe { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(38, 201, 164, 0.26); stroke-width: 1; }
.cc-mono b { position: relative; font: 600 29px/1 var(--sans); letter-spacing: -0.03em; color: var(--paper); }
/* When a sharp photo of BOTH founders exists (400 px square or more), ![]()
takes the monogram's slot. */
.cc-photo { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-strong); box-shadow: 0 0 0 7px rgba(7, 11, 20, 0.55), 0 20px 44px -18px rgba(0, 0, 0, 0.9); }
.cc-eyebrow { margin: 30px 0 0; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; line-height: 1.5; text-transform: uppercase; color: var(--muted); }
.kp-contact-card h1 { margin: 6px 0 0; font-size: clamp(30px, 8.6vw, 36px); line-height: 1.08; letter-spacing: -0.03em; color: var(--paper); }
.cc-title { margin: 7px 0 0; font-size: 15.5px; font-weight: 500; line-height: 1.4; color: var(--paper-2); text-wrap: balance; }
.cc-cred { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: balance; }
.cc-lede { margin: 12px auto 0; max-width: 46ch; font-size: 15px; line-height: 1.5; color: var(--body); text-wrap: balance; }
.cc-lede strong { font-weight: 600; color: var(--paper); white-space: nowrap; }
/* ── the action bar: fixed under the thumb on a phone, part of the card on a desktop ─────────────── */
.cc-dock {
position: fixed; z-index: 90; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
max-width: 536px; margin: 0 auto; display: flex; gap: 8px; padding: 8px; border-radius: 22px;
background: rgba(11, 18, 32, 0.88); border: 1px solid var(--line-strong);
-webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
box-shadow: 0 22px 48px -14px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.25);
}
/* the page fades out under the bar instead of showing a sliver of text below it */
.cc-id::after { content: ""; position: fixed; z-index: 89; left: 0; right: 0; bottom: 0; height: calc(98px + env(safe-area-inset-bottom, 0px)); pointer-events: none; background: linear-gradient(180deg, rgba(7, 11, 20, 0), rgba(7, 11, 20, 0.94) 62%); }
.cc-save {
flex: 1 1 auto; min-width: 0; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap;
border-radius: 15px; background: var(--accent); color: var(--accent-ink) !important; text-decoration: none;
font: 600 16.5px/1 var(--sans); letter-spacing: -0.005em; transition: background .18s, transform .18s var(--ease);
}
.cc-save:hover { background: #3FD6B3; }
.cc-save:active { transform: scale(0.985); }
.cc-tool {
flex: none; width: 66px; min-height: 56px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
border-radius: 15px; background: rgba(243, 238, 228, 0.06); border: 1px solid var(--line); color: var(--paper) !important;
font: 500 11px/1 var(--sans); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; white-space: nowrap;
-webkit-appearance: none; appearance: none; transition: background .18s, border-color .18s;
}
.cc-tool:hover { background: rgba(243, 238, 228, 0.1); border-color: var(--line-strong); }
.cc-tool[hidden] { display: none; }
.cc-status {
position: fixed; z-index: 91; left: 12px; right: 12px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); max-width: 536px; margin: 0 auto;
padding: 11px 14px; border-radius: 12px; background: var(--paper); color: var(--ink-900); font-size: 14px; line-height: 1.4; font-weight: 500; text-align: center;
box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.9);
}
.cc-status:empty { display: none; }
@media (max-width: 350px) { .cc-dock { gap: 6px; } .cc-save { font-size: 15.5px; gap: 8px; } .cc-tool { width: 58px; } }
/* ── two quick actions. KEEP the next rule's selector exactly as written: the test reads it, and the phone script
replaces the button with a link that must look the same. ─────────────────────────────────────── */
.kp-contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 0; }
.kp-contact-actions a,.kp-contact-actions button{
display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 10px; margin: 0;
border: 1px solid var(--line-strong); border-radius: 14px; background: rgba(243, 238, 228, 0.035); color: var(--paper);
font: 600 14px/1.25 var(--sans); letter-spacing: 0; text-align: center; text-decoration: none; cursor: pointer;
-webkit-appearance: none; appearance: none; transition: background .18s, border-color .18s;
}
.kp-contact-actions a:hover, .kp-contact-actions button:hover { border-color: var(--accent); background: rgba(38, 201, 164, 0.07); }
@media (max-width: 374px) { .kp-contact-actions a, .kp-contact-actions button { font-size: 13px; padding-left: 6px; padding-right: 6px; } }
/* ── every way to reach them ─────────────────────────────────────────────────────────────────────── */
.cc-rows { margin: 12px 0 0; text-align: left; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(243, 238, 228, 0.045), rgba(243, 238, 228, 0.02)); }
.cc-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label act" "value act"; align-items: center; column-gap: 12px; min-height: 60px; padding: 8px 16px; }
.cc-row + .cc-row { border-top: 1px solid var(--line); }
.cc-row dt { grid-area: label; align-self: end; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
.cc-row dd { grid-area: value; align-self: start; margin: 0; font-size: 15.5px; line-height: 1.4; color: var(--paper); overflow-wrap: anywhere; }
.cc-row dd > a { color: var(--paper); text-decoration: none; font-weight: 500; }
/* a row with one link is one tap target: the link covers the row */
.cc-row-link { padding-right: 48px; }
.cc-row-link dd > a::after { content: ""; position: absolute; inset: 0; }
.cc-row-link:hover { background: rgba(243, 238, 228, 0.035); }
/* the ring goes round the whole row where the browser can do that; everywhere else it stays on the link */
.cc-row-link dd > a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
@supports selector(:has(a)) {
.cc-row-link dd > a:focus-visible { outline: none; }
.cc-row-link:has(a:focus-visible) { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 12px; }
}
.cc-go { position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--muted); }
/* the phone row: a button until someone asks, then a link the script writes. KEEP this selector as written. */
.kp-contact-show{
display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; padding: 0; border: 0; border-radius: 6px; background: none;
font: 500 15.5px/1.4 var(--sans); letter-spacing: 0; color: var(--accent); text-decoration: underline; text-decoration-color: rgba(38, 201, 164, 0.4); text-underline-offset: 4px;
cursor: pointer; text-align: left; -webkit-appearance: none; appearance: none;
}
.cc-row [data-kp-phone] > a { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.cc-row [data-kp-phone] noscript { color: var(--body); font-size: 14.5px; }
/* Teams stays, quietly: two small links and one line of fine print */
.cc-row-teams { grid-template-areas: "label act" "label act"; }
.cc-row-teams dt { align-self: center; }
.cc-row dd.cc-teams { grid-area: act; align-self: center; display: flex; gap: 8px; }
.cc-teams > a {
display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
border: 1px solid var(--line); background: transparent; color: var(--body); font: 500 13.5px/1 var(--sans); text-decoration: none;
transition: background .18s, border-color .18s;
}
.cc-teams > a:hover { border-color: var(--paper-2); background: rgba(243, 238, 228, 0.05); }
.cc-note { margin: 12px 4px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: left; }
/* ── below the first screen: compact, tappable ───────────────────────────────────────────────────── */
.cc-more { display: grid; gap: 14px; padding: 6px var(--cc-pad) 44px; }
.cc-sec { border: 1px solid var(--line); border-radius: 16px; padding: 20px 18px 8px; background: linear-gradient(180deg, rgba(243, 238, 228, 0.04), rgba(243, 238, 228, 0.015)); }
.kp-contact-card .cc-h { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; line-height: 1.5; text-transform: uppercase; color: var(--muted); }
.cc-sec-lede { margin: 10px 0 6px; font-size: 15px; line-height: 1.55; color: var(--body); }
.cc-list { list-style: none; margin: 8px 0 0; padding: 0; }
.cc-list > li + li { border-top: 1px solid var(--line); }
.cc-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; column-gap: 14px; align-items: center; min-height: 68px; padding: 12px 0; text-decoration: none; color: inherit; border-radius: 10px; }
.cc-item-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(38, 201, 164, 0.1); color: var(--accent); }
.cc-item-ic .cc-ic { width: 20px; height: 20px; }
.cc-item-t { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--paper); transition: color .18s; }
.cc-item-s { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--body); }
.cc-item > .cc-ic:last-child { width: 18px; height: 18px; color: var(--muted); transition: transform .18s var(--ease), color .18s; }
.cc-item:hover .cc-item-t { color: var(--accent); }
.cc-item:hover > .cc-ic:last-child { transform: translateX(3px); color: var(--accent); }
/* pills (podcast apps) and tiles (social profiles) */
.cc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.cc-pills-label { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
.cc-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--paper); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: background .18s, border-color .18s; }
.cc-pill:hover { border-color: var(--accent); background: rgba(38, 201, 164, 0.06); }
.cc-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; }
.cc-tile { flex: 1 1 auto; display: block; min-height: 58px; padding: 10px 10px 10px 11px; border-radius: 12px; border: 1px solid var(--line-strong); text-decoration: none; white-space: nowrap; transition: background .18s, border-color .18s; }
.cc-tile b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--paper); }
.cc-tile span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.cc-tile:hover { border-color: var(--accent); background: rgba(38, 201, 164, 0.06); }
/* KPsphere AI ScoutBOT: a separate product, so its panel reads differently. The wordmark is the site's lockup
(.scout-wm in site.css, with its own colours), sized by this panel's width so it never runs past it; the panel's
tint is that wordmark's cyan. */
.cc-scout { container-type: inline-size; padding-bottom: 14px; border-color: rgba(138, 221, 227, 0.24); background: radial-gradient(110% 80% at 100% 0%, rgba(138, 221, 227, 0.12), rgba(138, 221, 227, 0) 62%), linear-gradient(180deg, rgba(243, 238, 228, 0.04), rgba(243, 238, 228, 0.015)); }
.kp-contact-card h2.cc-wm { margin: 16px 0 0; font-size: inherit; line-height: 1; }
.cc-scout .scout-wm { gap: min(12px, 2.8cqw); }
.cc-scout .scout-wm img { width: min(44px, 10.5cqw); height: min(44px, 10.5cqw); }
.cc-scout .scout-wm .kp { font-size: min(30px, 7.2cqw); }
.cc-scout .scout-wm .sc { font-size: min(38px, 9.1cqw); margin-left: min(6px, 1.4cqw); }
.cc-scout p { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.cc-scout p.cc-h { margin: 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.cc-scout-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cc-scout-cta .btn { min-height: 48px; flex: 1 1 130px; white-space: nowrap; }
.cc-scout .cc-film { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--paper); text-decoration: none; }
.cc-scout .cc-film .cc-ic { width: 18px; height: 18px; color: #8ADDE3; }
.cc-scout .cc-film:hover { color: #8ADDE3; }
.cc-scout p.cc-fine { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.cc-scout p.cc-fine-2 { margin-top: 2px; padding-top: 0; border-top: 0; }
.cc-fine a { display: inline-block; padding: 13px 0; margin: -13px 0; color: var(--body); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.cc-fine a:hover { color: var(--paper); }
/* company identifiers for a government buyer */
.cc-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.cc-fact { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 11px; border-radius: 8px; background: rgba(243, 238, 228, 0.05); font: 500 13px/1.3 var(--mono); color: var(--paper); letter-spacing: 0.02em; }
.cc-fact b { font: 600 10.5px/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
/* the other founder */
.cc-peer { display: grid; grid-template-columns: 48px minmax(0, 1fr) 18px; column-gap: 14px; align-items: center; min-height: 72px; margin-top: 6px; padding: 12px 0; text-decoration: none; color: inherit; border-radius: 10px; }
.cc-peer-mono { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(38, 201, 164, 0.42); background: radial-gradient(120% 120% at 28% 18%, var(--ink-600), var(--ink-900) 62%); font: 600 16px/1 var(--sans); letter-spacing: -0.02em; color: var(--paper); }
.cc-peer > .cc-ic { width: 18px; height: 18px; color: var(--muted); transition: transform .18s var(--ease), color .18s; }
.cc-peer:hover .cc-item-t { color: var(--accent); }
.cc-peer:hover > .cc-ic { transform: translateX(3px); color: var(--accent); }
/* the footer clears the action bar */
@media (max-width: 899px) { .footer { padding-bottom: calc(28px + 96px + env(safe-area-inset-bottom, 0px)); } }
/* ── the QR sheet: the phone becomes the card ────────────────────────────────────────────────────── */
/* A real modal