/* ============================================================
Static-build extras — image placeholders + small fixes
============================================================ */
/* Image placeholders — used until real photos/logos are added.
Use
or wrap an ![]()
inside. */
.img-slot {
display: flex;
align-items: center;
justify-content: center;
background: rgba(7, 46, 69, 0.05);
border: 1px dashed var(--border-1);
color: var(--fg-5);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
text-align: center;
line-height: 1.2;
padding: 6px;
overflow: hidden;
}
.img-slot::after {
content: attr(data-label);
}
.img-slot img,
.img-slot svg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.img-slot:has(img)::after,
.img-slot:has(svg)::after { content: ''; }
/* When a real image is present, drop the dashed-placeholder treatment
(but keep the framed white tile for logos in the Team + Blocker sections). */
.img-slot:has(img),
.img-slot:has(svg) {
border: none;
padding: 0;
}
.signal-card .img-slot:has(img),
.shift-portrait .img-slot:has(img),
.team-founder > .img-slot:has(img) {
background: transparent;
}
.img-slot--circle {
border-radius: 50%;
aspect-ratio: 1 / 1;
}
.img-slot--rounded { border-radius: 14px; }
.img-slot--rounded-sm { border-radius: 6px; }
.section--dark .img-slot {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.4);
}
/* Replace the inline-styles the JSX would have set on signal-card image slots */
.signal-card .img-slot--circle {
width: 220px;
height: 220px;
margin-bottom: 28px;
background: transparent;
}
.shift-portrait .img-slot--circle {
width: 96px;
height: 96px;
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.5);
}
.team-founder .img-slot--circle {
width: 96px;
height: 96px;
}
.team-founder__logos .img-slot {
width: 100%;
height: 40px;
background: #fff;
border: 1px solid var(--border-1);
border-radius: 6px;
}
.blocker-tool .img-slot {
width: 190px;
height: 96px;
}
/* Nav CTA arrow */
.nav__cta::after {
content: '→';
font-weight: 600;
margin-left: 2px;
}
/* Buttons shouldn't carry the default anchor underline */
.tw-btn,
.cta-booking-card,
.packages-summary__cta,
.nav__brand { text-decoration: none; }
/* Dark-nav hover — use a soft white scrim instead of cream */
.nav--on-dark .nav__link:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
/* ============================================================
Mobile fixes
============================================================ */
/* Signal chart: at narrow widths the 210px label column overflows.
Stack label above bars and shrink the value-label/axis tick sizing. */
@media (max-width: 720px) {
.signal-chart__row {
grid-template-columns: 1fr;
gap: 4px;
}
.signal-chart__label {
text-align: left;
font-size: 12px;
}
.signal-chart__row[data-highlight] {
margin: 0;
padding: 8px 10px;
}
.signal-chart__axis {
grid-template-columns: 1fr;
gap: 0;
}
.signal-chart__axis-ticks {
font-size: 10px;
}
/* Hide the absolute-positioned bar value labels on mobile —
they collide with neighbouring bars at narrow widths. */
.signal-chart__val { display: none; }
.signal-chart__bar { height: 10px; }
.signal-chart__head {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
/* Safety belt — clip horizontal overflow without creating a scroll
container. `overflow-x: clip` is critical here: `hidden` would make
the scroll container and break position: sticky on the Signal
section's pinned-scroll behaviour. */
html, body { overflow-x: clip; }
/* Value section: with the ValueCurve removed from the static build,
the right column was empty-spaced under the stats grid. Centre the
stats vertically so they balance against the taller calc card. */
.value-output { justify-content: center; }
/* Mobile nav: site.css hides .nav__links entirely below 880px, which
also hides the "Book a call" CTA. Keep just the CTA visible so users
on phones have a one-tap path to the booking section. */
@media (max-width: 880px) {
.nav__links { display: flex; }
.nav__links .nav__link { display: none; }
.nav__cta {
padding: 8px 14px;
font-size: 12px;
}
}
/* Keep the footer-tagline last cell aligned right at large widths */
.footer__row > div:last-child { text-align: right; }
@media (max-width: 720px) {
.footer__row > div:last-child { text-align: left; }
}
/* Signal quotes — anonymised headshots rendered in greyscale */
.signal-headshot img {
filter: grayscale(100%);
object-fit: cover;
width: 100%;
height: 100%;
}
/* Blocker — beat 03 conclusion sits in a bordered card so it lands
with the weight of an answer, not a stray line. */
.blocker-conclusion-text {
display: inline-block;
padding: 20px 28px;
border: 1px solid var(--tw-ember);
border-radius: 4px;
background: rgba(217, 119, 87, 0.04);
}
/* Signal quotes — discovery-call source attribution.
Matches .signal-chart__source so the two states feel like one figure. */
.signal-quotes-source {
margin: 22px 0 0;
font-size: 11.5px;
font-style: italic;
color: var(--fg-4);
}