/* ============================================================
SIGNATURE LAYER
The craft on top of core.css: atmosphere, the portrait
treatment, and the four home-page moments carried over from
Adonica's assessment flyer.
RULE FOR THIS FILE: nothing in here may be the only way to
reach content. Every effect below is decoration over markup
that already reads correctly with no CSS animation, no
pointer, and no JavaScript. See the Insights accordion in
pages.css for why that rule exists.
============================================================ */
/* ---------- Reveal safety net ----------
core.css starts every [data-rv] element at opacity 0 and waits for
site.js to add .rv-in. If that module fails to load, every page is
blank below the hero. site.js puts .rv-armed on the moment it
runs; until then this animation is scheduled to paint everything in
regardless. JavaScript alive -> the class lands within a frame or two
and this never fires. JavaScript dead -> the content still arrives. */
[data-rv] { animation: rvSafety 0s linear 4s forwards; }
html.rv-armed [data-rv] { animation: none; }
@keyframes rvSafety { to { opacity: 1; transform: none; } }
/* ---------- Scroll progress rail ----------
Sits on the header's bottom edge. Width is driven by a custom
property set in site.js; with no JS it simply stays at 0. */
.rail {
position: fixed; top: 0; left: 0; z-index: 95;
height: 2px; width: 100%;
transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
background: linear-gradient(90deg, var(--gold), var(--teal) 70%, var(--teal));
box-shadow: 0 0 14px rgba(59, 224, 206, .55);
pointer-events: none;
}
/* ---------- Film grain ----------
A single inline SVG turbulence tile. Costs one paint, no
network request, and stops the large flat navy fields from
banding on cheap panels. */
.grain {
position: fixed; inset: 0; z-index: 1; pointer-events: none;
opacity: .035; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .grain { opacity: .02; } }
/* ---------- Aurora field ----------
Slow gold/teal drift behind a section. Purely atmospheric. */
/* overflow:hidden is load-bearing, not tidiness. The glow below is inset
past the section's edges, and without the clip it widens the document
and hands every visitor a horizontal scrollbar. */
.aur { position: relative; isolation: isolate; overflow: hidden; }
.aur::before {
content: ""; position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none;
background:
radial-gradient(38% 44% at 18% 26%, rgba(59, 224, 206, .13), transparent 62%),
radial-gradient(34% 40% at 84% 68%, rgba(227, 184, 92, .12), transparent 64%);
filter: blur(24px);
animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
to { transform: translate3d(2.5%, 2%, 0) scale(1.07); }
}
/* ---------- Pointer spotlight ----------
--mx/--my are written by site.js on pointer move. Before any
pointer event they are unset, so the fallback keeps the
highlight off-card and nothing renders. Touch never triggers. */
.spot { position: relative; overflow: hidden; }
.spot::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
border-radius: inherit;
background: radial-gradient(220px circle at var(--mx, -999px) var(--my, -999px),
rgba(59, 224, 206, .13), transparent 62%);
opacity: 0; transition: opacity .4s var(--ease);
}
.spot:hover::after { opacity: 1; }
@media (hover: none) { .spot::after { display: none; } }
/* ============================================================
PORTRAIT
============================================================ */
/* The placeholder is a sibling that paints ON TOP of the ![]()
.
That is correct while the slot is empty and wrong the moment a
real photograph exists, so presence of the image removes it.
The img keeps its onerror="this.remove()" so a missing or
broken file falls back to the placeholder automatically. */
.profile__frame:has(img) .profile__ph { display: none; }
.profile__frame:has(img) { border-color: rgba(227, 184, 92, .30); }
/* Gold arc behind the frame — the ribbon from the flyer.
The arc rotates, and a rotated box reports the bounding box of its
DIAGONAL. Left loose on the About page, where no ancestor clips, that
swept box widened the document and produced a horizontal scrollbar.
The hero only escaped it because .hero already has overflow:hidden.
So the arc lives inside a fixed-inset clip box: it can never extend
more than 14px past the portrait, at any viewport width. */
.profile { isolation: isolate; }
.profile__arcbox {
position: absolute; inset: -18px -14px; z-index: -1;
overflow: hidden; pointer-events: none; border-radius: 28px;
}
.profile__arc {
position: absolute; z-index: -1; pointer-events: none;
inset: -14%;
border-radius: 50% 50% 44% 44% / 40% 40% 60% 60%;
background: conic-gradient(from 190deg,
rgba(227, 184, 92, 0) 0deg,
rgba(227, 184, 92, .55) 62deg,
rgba(243, 220, 168, .85) 96deg,
rgba(59, 224, 206, .40) 150deg,
rgba(59, 224, 206, 0) 210deg);
filter: blur(16px); opacity: .55;
animation: arcTurn 22s linear infinite;
}
@keyframes arcTurn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .profile__arc { animation: none; } }
/* Credential rail under the portrait. Four facts, no adjectives. */
.profile__creds {
list-style: none; margin: 14px 0 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.profile__creds li {
display: flex; align-items: center; gap: 9px;
padding: 10px 12px; border-radius: 10px;
border: 1px solid var(--line-2); background: rgba(255, 255, 255, .022);
font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute);
line-height: 1.35;
}
.profile__creds svg { width: 13px; height: 13px; flex: none; color: var(--gold); }
@media (max-width: 980px) { .profile__creds { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .profile__creds { grid-template-columns: 1fr; } }
/* ============================================================
OUTCOMES STRIP — the five icons along the foot of the flyer
============================================================ */
.outc {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
border: 1px solid var(--line); border-radius: var(--r);
background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
overflow: hidden;
}
@media (max-width: 900px) { .outc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .outc { grid-template-columns: 1fr; } }
.outc__i {
padding: 26px 20px; text-align: center;
border-left: 1px solid var(--line-2);
transition: background .4s var(--ease);
}
.outc__i:first-child { border-left: 0; }
@media (max-width: 900px) { .outc__i:nth-child(odd) { border-left: 0; } }
.outc__i:hover { background: rgba(59, 224, 206, .05); }
.outc__i svg { width: 30px; height: 30px; margin: 0 auto 14px; color: var(--teal); display: block; }
.outc__i:hover svg { color: var(--gold); }
/* "Streamline operations" wraps to two lines where the others fit on one.
Reserving two lines' worth keeps every caption on the same baseline
instead of stepping down under the one long label. */
.outc__t {
font-size: 11px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
line-height: 1.4; min-height: 2.8em; display: grid; align-content: center;
}
.outc__s { font-size: 12.5px; color: var(--mute-2); margin-top: 7px; line-height: 1.5; }
/* ============================================================
AUDIENCE LENS
Twelve organization types. Every panel is written into the
HTML, so with JavaScript off the visitor gets all twelve
stacked and readable rather than an empty box. site.js then
collapses it into a tablist.
============================================================ */
.lens { display: grid; grid-template-columns: 306px 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 940px) { .lens { grid-template-columns: 1fr; } }
/* The picker is empty until audience.js fills it. Without JavaScript that
would leave a 306px hole beside the panels, so the column only exists
once there is something in it. */
.lens:not(.is-live) { grid-template-columns: 1fr; }
.lens__pick { display: grid; gap: 6px; }
@media (max-width: 940px) { .lens__pick { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); } }
.lens__b {
display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
padding: 13px 15px; border-radius: 10px; cursor: pointer;
border: 1px solid transparent; background: transparent;
font-size: 13.5px; color: var(--mute); line-height: 1.3;
transition: color .3s, background .3s, border-color .3s, transform .35s var(--ease);
}
.lens__b::before {
content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none;
background: var(--mute-2); transition: background .3s, box-shadow .3s, transform .3s;
}
.lens__b:hover { color: var(--white); background: rgba(255, 255, 255, .03); }
.lens__b:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.lens__b[aria-selected="true"] {
color: var(--white); background: rgba(227, 184, 92, .10);
border-color: rgba(227, 184, 92, .34); transform: translateX(3px);
}
.lens__b[aria-selected="true"]::before {
background: var(--gold); box-shadow: 0 0 0 4px rgba(227, 184, 92, .16); transform: scale(1.1);
}
.lens__panels { display: grid; gap: 18px; }
.lens__p { padding: clamp(24px, 3vw, 34px); }
/* Only animates once JS has taken over the switching. */
.lens.is-live .lens__p { animation: lensIn .45s var(--ease); }
@keyframes lensIn { from { opacity: 0; transform: translateY(9px); } }
.lens__k { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); margin: 0 0 12px; }
.lens__p h3 { font-family: var(--display); font-size: clamp(23px, 2.6vw, 31px); font-weight: 400; letter-spacing: -.01em; }
.lens__p > p { color: var(--mute); margin: 14px 0 0; font-size: 15.5px; line-height: 1.68; max-width: 62ch; }
.lens__wl {
margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--line-2);
font-size: 10.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--mute-2);
}
.lens__work { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.lens__work li { display: flex; gap: 11px; align-items: baseline; font-size: 14.5px; color: var(--white); }
.lens__work li::before {
content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none;
background: var(--teal); opacity: .8; transform: translateY(-2px);
}
.lens__foot { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
/* Decorative ticker of the same twelve names. aria-hidden — the
real list is the tablist above it. */
.tick { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.tick__t { display: flex; gap: 44px; width: max-content; animation: tickRun 46s linear infinite; }
.tick span { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--mute-2); white-space: nowrap; display: flex; align-items: center; gap: 44px; }
.tick span::after { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); opacity: .55; }
@keyframes tickRun { to { transform: translateX(-50%); } }
.tick:hover .tick__t { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .tick__t { animation: none; } }
/* ============================================================
THE SHIFT — the flyer's FROM / TO quotation pair
============================================================ */
.shift { display: grid; grid-template-columns: 1fr 92px 1fr; gap: clamp(14px, 2vw, 26px); align-items: stretch; }
@media (max-width: 860px) { .shift { grid-template-columns: 1fr; } }
.shift__c { padding: clamp(28px, 3.4vw, 44px); border-radius: var(--r); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.shift__c--f { background: linear-gradient(168deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008)); }
.shift__c--t { background: linear-gradient(168deg, rgba(227, 184, 92, .13), rgba(59, 224, 206, .06)); border-color: rgba(227, 184, 92, .34); }
.shift__k { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; margin: 0 0 20px; }
.shift__c--f .shift__k { color: var(--mute-2); }
.shift__c--t .shift__k { color: var(--gold); }
.shift__q { font-family: var(--display); font-size: clamp(22px, 2.7vw, 33px); line-height: 1.26; letter-spacing: -.01em; margin: 0; font-style: italic; }
.shift__c--f .shift__q { color: var(--mute); }
.shift__n { font-size: 12.5px; color: var(--mute-2); margin: 20px 0 0; line-height: 1.6; }
/* Three chevrons pointing along the direction of the layout: rightward
between the two columns on desktop, downward once they stack. */
.shift__a { display: grid; grid-auto-flow: column; place-content: center; gap: 6px; color: var(--gold); }
.shift__a i {
display: block; width: 11px; height: 11px;
border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
transform: rotate(-45deg); opacity: .25;
animation: chev 1.9s var(--ease) infinite;
}
@media (max-width: 860px) {
.shift__a { grid-auto-flow: row; gap: 4px; margin-block: 10px; }
.shift__a i { transform: rotate(45deg); }
}
.shift__a i:nth-child(2) { animation-delay: .22s; }
.shift__a i:nth-child(3) { animation-delay: .44s; }
@keyframes chev { 0%, 100% { opacity: .22; } 45% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .shift__a i { animation: none; opacity: .7; } }
/* ============================================================
THE FIVE QUESTIONS
============================================================ */
.qs { list-style: none; margin: 0; padding: 0; counter-reset: q; }
.qs li {
counter-increment: q;
display: grid; grid-template-columns: 74px 1fr; gap: clamp(14px, 2vw, 30px); align-items: baseline;
padding-block: clamp(22px, 2.6vw, 34px); border-top: 1px solid var(--line-2);
transition: border-color .4s;
}
.qs li:hover { border-top-color: rgba(227, 184, 92, .4); }
@media (max-width: 560px) { .qs li { grid-template-columns: 46px 1fr; } }
.qs li::before {
content: "0" counter(q);
font-family: var(--display); font-size: clamp(24px, 2.6vw, 34px);
color: var(--gold); opacity: .5; line-height: 1; transition: opacity .35s;
}
.qs li:hover::before { opacity: 1; }
.qs__q { font-family: var(--display); font-size: clamp(24px, 3.4vw, 42px); line-height: 1.16; letter-spacing: -.015em; }
.qs__a { font-size: 14.5px; color: var(--mute); margin: 12px 0 0; line-height: 1.65; max-width: 58ch; }
.qs li:last-child { border-bottom: 1px solid var(--line-2); }
.qs li:last-child .qs__q { color: var(--gold); }
/* ---------- Footer contact line ---------- */
.ftr__ct { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px; }
.ftr__ct a {
font-size: 13.5px; color: var(--mute); position: relative; padding-bottom: 2px;
transition: color .25s;
}
.ftr__ct a::after {
content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
background: var(--gold); transition: width .3s var(--ease);
}
.ftr__ct a:hover { color: var(--gold); }
.ftr__ct a:hover::after { width: 100%; }
/* ============================================================
CONTACT DETAIL BLOCK — used on the contact page and the
assessment result. Real numbers, one place to change them.
============================================================ */
.det { display: grid; gap: 2px; }
.det__r {
display: flex; align-items: center; gap: 16px;
padding: 17px 0; border-top: 1px solid var(--line-2);
transition: padding-left .35s var(--ease);
}
.det__r:hover { padding-left: 6px; }
.det__ic {
width: 38px; height: 38px; flex: none; border-radius: 10px;
display: grid; place-content: center;
border: 1px solid rgba(59, 224, 206, .3); background: rgba(59, 224, 206, .07); color: var(--teal);
}
.det__ic svg { width: 16px; height: 16px; }
/* Both are : without display:block the label and the value run
together on one line instead of stacking. Same trap as .brand__nm. */
.det__k { display: block; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute-2); }
.det__v { display: block; font-size: 16px; margin-top: 3px; word-break: break-word; transition: color .3s; }
a.det__r:hover .det__v { color: var(--teal); }