s removed from block.php entirely (no longer independent
grid items). The approved row composition is fixed (3 industries on row
1, the 4th wraps alone to row 2), so dots are attached via ::after to
items 1 and 2 only - deterministically never touching the row-3 item or
the wrapped last item, regardless of viewport.
-------------------------------------------------------------------------- */
.tj-industries--id2812190 .tj-industries__item {
position: relative;
}
.tj-industries--id2812190 .tj-industries__item:nth-child(1)::after,
.tj-industries--id2812190 .tj-industries__item:nth-child(2)::after {
content: '';
position: absolute;
top: 50%;
right: -1.5rem;
transform: translate(50%, -50%);
width: 0.37rem;
height: 0.37rem;
background: rgba(225, 6, 0, 1);
flex-shrink: 0;
}
/* Mobile QA correction pass 1 (2026-08-20): at <=649px the fixed
per-item rem widths no longer fit two items per row at all - the board
wraps to a clean one-industry-per-row stack (confirmed via
getBoundingClientRect: each item's own top increases monotonically,
no two items share a row). With no row-mate, the item-1/item-2 dots
read as stray orphan marks. Desktop/tablet (>649px) dot behavior is
untouched. */
@media (max-width: 649px) {
.tj-industries--id2812190 .tj-industries__item:nth-child(1)::after,
.tj-industries--id2812190 .tj-industries__item:nth-child(2)::after {
content: none;
}
}
/* --------------------------------------------------------------------------
Home — Problem section: real vertical-rhythm fix
.tj-problem-section__cards is a SIBLING of .inner (not nested inside it),
so the 4rem gap declared on .inner never applied between the paragraph
and the card row - .container had no gap of its own, so cards sat almost
flush against the paragraph. Reduced the headline-to-paragraph gap
(was 4rem, read as too large) and added a deliberate, larger gap at the
correct parent (.container) between the whole intro block and the cards.
-------------------------------------------------------------------------- */
.tj-problem-section--id2812817 .tj-problem-section__inner {
gap: 2rem 0;
}
.tj-problem-section--id2812817 .tj-problem-section__container {
gap: 3rem 0;
}
/* --------------------------------------------------------------------------
Case Study Final CTA — real clipping fix
.tj-cta__card had padding-top:4rem and padding-left:3rem but NO
padding-bottom or padding-right, plus overflow:hidden - any content
reaching the card's natural bottom/right edge (buttons, mascot) had zero
clearance and got clipped. Added symmetric bottom/right padding. Mascot
was also top-anchored with height:84.76% (guaranteed to overflow past
its own column's bottom edge) - switched to bottom-anchored, mirroring
the same proven fix already applied to the About Final CTA mascot.
-------------------------------------------------------------------------- */
.tj-cta--id2812_4061 .tj-cta__card {
padding-bottom: 4rem;
padding-right: 3rem;
}
.tj-cta--id2812_4061 .tj-cta__mascot-wrapper {
top: auto;
bottom: 0;
}
/* --------------------------------------------------------------------------
Services Final CTA — matched-width button pair
The buttons column (.tj-cta__actions) is a narrow ~33%-width sidebar
(by design, alongside the heading/description column) - too narrow to
fit two buttons side by side without cramming, so the stacked layout
itself is correct and is kept. The bug was width mismatch: the primary
button had max-width:18.25rem while the secondary had no cap and
stretched to 100% - visibly different widths. Both now share the same
full-width-of-column sizing, so they align on identical left/right
edges; height already matches via the universal button-height token.
-------------------------------------------------------------------------- */
.tj-cta--id2812963 .tj-cta__btn--primary,
.tj-cta--id2812963 .tj-cta__btn--secondary {
max-width: none;
width: 100%;
}
/* ==========================================================================
About — "The People Behind the Operation": true-square team photo frames
Isolated fix, this section only.
========================================================================== */
/* --------------------------------------------------------------------------
.tj-leadership__card-image-wrap was position:absolute with height:52.77%
of the card, while .tj-leadership__card reserved space for it via a fixed
padding-top:20.39rem - a wide/shallow frame decoupled from the card's
actual width, cropping portrait headshots heavily. Converted the frame to
a normal-flow element (position:relative, first child of .card, matching
existing DOM order) sized with aspect-ratio:1/1 off its own width, and
removed the now-unneeded reserved padding-top so the card grows to fit
the taller square frame naturally instead of clipping. The image itself
(width:100%; height:100%; object-fit:cover; object-position:top center)
was already correct and is untouched.
-------------------------------------------------------------------------- */
.tj-leadership--id2812540 .tj-leadership__card {
padding-top: 0;
}
.tj-leadership--id2812540 .tj-leadership__card-image-wrap {
position: relative;
top: auto;
left: auto;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
overflow: hidden;
}
/* --------------------------------------------------------------------------
Services "4-STEP VELOCITY FRAMEWORK" — eyebrow-to-heading gap
(isolated correction, 2026-08-19)
.tj-services-process__header (a dedicated flex-column wrapper holding
only the eyebrow-wrap + heading-wrap, same role as Services Capabilities'
own __header) used gap:0.5rem (8px rendered), reading as one merged
block. Services Capabilities' __header - identical structural role:
eyebrow-wrap + heading-wrap only, same margin-bottom:4rem to its cards
below - uses gap:1rem (16px rendered); reused that established value
here rather than inventing a new one. (Services Overview's eyebrow/
heading pair sits in a mixed-content column using gap:2rem for several
unrelated relationships at once - a looser structural match, not used
as the source value.) Applied at the wrapper-gap level, unconditionally
so it holds at every breakpoint (the block's own responsive rules all
repeated the same 0.5rem regardless of width, so this isn't a
mobile-specific compression to preserve).
-------------------------------------------------------------------------- */
.tj-services-process--id2812952 .tj-services-process__header {
gap: 1rem 0;
}
/* --------------------------------------------------------------------------
Case Study "Key Business Outcomes" / "Scaling the Partnership" — equal
column heights + even metric-row distribution (isolated correction,
2026-08-19)
Root cause: .tj-case-outcomes__inner (the two-column flex row) used
align-items:flex-start, so .tj-case-outcomes__left sized to its own
content instead of matching .tj-case-outcomes__right's taller card,
leaving the metric list short and a stray fixed padding-bottom:4.25rem
on .left as an approximate (not automatic) compensation.
Fix is purely structural, three rules:
1) align-items:stretch on the row - .left and .right now both stretch
to the row's cross size (the taller .right card), the standard flex
equal-height pattern. This only affects the row when .left/.right
are actually side-by-side; at <=1023px .inner wraps and each column
is alone on its own line, where stretch has no effect (a single-item
flex line's cross size is just that item's own size) - so mobile
needs no separate override.
2) .left's fixed padding-bottom is removed so its content box reaches
the column's true (now-stretched) bottom edge instead of stopping
4.25rem short of it.
3) .tj-case-outcomes__list (heading stays outside it, unaffected) gets
flex:1 to consume the remaining height inside .left, and
justify-content:space-between to divide that extra height evenly
into the gaps between the four rows (added on top of the existing
1.5rem row gap, not replacing it) - no per-row margin math. Same
mechanism naturally goes inert at mobile: with .left no longer
taller than its own content, .list has no extra space to give out.
-------------------------------------------------------------------------- */
.tj-case-outcomes--id2812_4042 .tj-case-outcomes__inner {
align-items: stretch;
}
.tj-case-outcomes--id2812_4042 .tj-case-outcomes__left {
padding-bottom: 0;
}
.tj-case-outcomes--id2812_4042 .tj-case-outcomes__list {
flex: 1;
justify-content: space-between;
}
/* MOBILE QA PART 2 — PASS 1 (2026-08-21): the four mascot width/max-width
pairs below were re-measured and resized per requested multiplier
targets (see report). Each block's own positioning parent width was
measured first via getBoundingClientRect at this tooling's ~520px
floor, multiplied, and re-expressed as width%/max-width so the same
ratio holds (and safely re-contains, never overflows) at any narrower
real-device width, since width% always resolves against the actual
parent at that viewport:
- Home: was 200px (container has no side padding) -> x1.5 -> 300px
- About: was 191px (parent .overlap=445px) -> x2.0 -> 382px, fits
- Services:was 200px (parent .content-wrap=492px) -> x1.5 -> 300px
- Case Study: was 169px (parent .right=403px) -> x2.5 target=422.5px
EXCEEDS the 403px parent at this viewport - capped to 380px (largest
size that stays safely inside .right with a small margin), reported
as capped rather than forcing the full 2.5x.
========================================================================== */
/* ==========================================================================
MOBILE QA — CORRECTION PASS 1 (2026-08-20)
CTA mascot mobile overlap: systemic fix across all four Final CTA
blocks (Home, About, Services, Case Study). All four share the exact
same root pattern: the mascot wrapper is position:absolute with a
top/bottom anchor + percentage height, and the block's own responsive
CSS only ever scales its WIDTH (up to 100% by the narrowest
breakpoint) - never resets position, so at mobile the mascot becomes a
full-width absolutely-positioned layer sitting directly on top of
whatever content occupies that same area (buttons, body copy). Same
defect, same mechanism, four blocks - so one reusable transformation
(position:static, height:auto, a shared constrained centered width,
a deliberate top margin as the gap) is applied to each block's own
mascot selector at <=649px, the width where each block's own CSS
already collapses content/actions to single-column. Each block also
needed a small companion fix specific to its own markup (documented
per block below) so the mascot's DOM position actually resolves to
"after the buttons" once it re-enters normal flow.
========================================================================== */
/* --- Home Final CTA: .mascot is already the last flow child of
.container (a sibling of .inner, which holds heading/subtitle/steps/
buttons) - no companion fix needed, only the mascot itself. --- */
@media (max-width: 649px) {
.tj-cta--id2812_1968 .tj-cta__mascot {
position: static;
width: 60%;
max-width: 300px;
height: auto;
margin: var(--rc-mobile-gap) auto 0;
}
}
/* --- About Final CTA: .buttons-abs is ALSO position:absolute (bottom:0
of .overlap), so making only the mascot static would drop it into flow
right after the paragraph, ABOVE the still-absolutely-positioned
buttons. Both are reset together; DOM order (text-wrap -> buttons-abs
-> mascot-wrap) then resolves correctly on its own. The image itself
used an intentional desktop bleed formula (width:181.96% of its
wrapper, margin-top:-6.82rem) tuned for the old tall absolute box;
with the wrapper now a normal, size-constrained block, that formula is
reset to a plain 100%/no-offset fit. --- */
@media (max-width: 649px) {
.tj-cta--id2812581 .tj-cta__buttons-abs {
position: static;
width: 100%;
height: auto;
}
.tj-cta--id2812581 .tj-cta__mascot-wrap {
position: static;
width: 86%;
max-width: 382px;
height: auto;
margin: var(--rc-mobile-gap) auto 0;
}
.tj-cta--id2812581 .tj-cta__mascot-img {
width: 100%;
margin-top: 0;
}
}
/* --- Services Final CTA: .mascot is FIRST in DOM order inside
.content-wrap (a flex-wrap:wrap row), ahead of .content and .actions,
which already stack to width:100% by this breakpoint. order:99 moves
it to the visual end of that wrap stack without touching markup. --- */
@media (max-width: 649px) {
.tj-cta--id2812963 .tj-cta__mascot {
position: static;
order: 99;
width: 61%;
max-width: 300px;
height: auto;
margin: var(--rc-mobile-gap) auto 0;
}
}
/* --- Case Study Final CTA: .right is display:block with .buttons then
.mascot-wrapper already in that DOM order, so resetting the mascot
alone is sufficient - it naturally stacks below the buttons. .right/
.left also carried fragile desktop-era calc() width formulas at this
breakpoint that don't reliably resolve to a clean 100%; simplified
both for safety (same defensive cleanup used for About Nearshore). --- */
@media (max-width: 649px) {
.tj-cta--id2812_4061 .tj-cta__left,
.tj-cta--id2812_4061 .tj-cta__right {
width: 100%;
max-width: 100%;
}
.tj-cta--id2812_4061 .tj-cta__mascot-wrapper {
position: static;
width: 94%;
max-width: 380px;
height: auto;
margin: var(--rc-mobile-gap) auto 0;
}
}
/* ==========================================================================
MOBILE QA PART 2 — PASS 1 (2026-08-21)
========================================================================== */
/* --------------------------------------------------------------------------
Section 1: Universal mobile Hero CTA layout (Primary + Secondary stack
full-width, equal width, centered labels).
Verified against CURRENT staging first (per instruction) before writing
any rule:
- Services Hero: buttons already stack full-width with matching widths
and centered labels (that block's markup puts the label text directly
in the
, no separate width:100% label span) - ALREADY CORRECT,
untouched.
- Industries Hero (shared component - also renders on Resources and
Contact): buttons already stack full-width with matching widths, but
the SECONDARY label was visually left-anchored inside its own
full-width box (measured/screenshotted: "REQUEST PROPOSAL" hugging
the left edge) - root cause below, label-only fix.
- Home Hero, About Hero, Case Study Hero: buttons were NOT stacking at
all at this breakpoint - still side-by-side percentage widths left
over from a tablet-era breakpoint, with mismatched primary/secondary
widths. Case Study was the worst case: measured primary button
left=-82px at a 520px viewport - partially off-screen.
Root cause of the off-center secondary labels (Home + Industries):
.btn-label spans have a base text-align:left; the PRIMARY label is
never given an explicit width, so it shrink-wraps to its own text and
the outer button's justify-content:center visually centers it anyway.
The SECONDARY/OUTLINE label, uniquely, is ALSO given width:100% - so it
fills the entire button and its own text-align:left then pins the text
to the button's left edge instead of the center. Fixed at the actual
inner element (text-align:center on the label), not with compensating
padding.
-------------------------------------------------------------------------- */
@media (max-width: 649px) {
/* Home Hero */
.tj-hero--id2812738 .tj-hero__actions {
flex-direction: column;
width: 100%;
padding-right: 0;
}
.tj-hero--id2812738 .tj-hero__btn--primary,
.tj-hero--id2812738 .tj-hero__btn--outline {
width: 100%;
}
.tj-hero--id2812738 .tj-hero__btn-label {
text-align: center;
}
/* About Hero */
.tj-about-hero--id2812464 .tj-about-hero__actions {
flex-direction: column;
width: 100%;
}
.tj-about-hero--id2812464 .tj-about-hero__btn {
width: 100%;
}
/* Industries Hero (shared: Industries / Resources / Contact) - width and
stacking already correct, only the label centering needed a fix */
.tj-industries-hero--id2812356 .tj-industries-hero__btn-label {
text-align: center;
}
/* Case Study Hero */
.tj-casehero--id2812393 .tj-casehero__actions {
flex-direction: column;
width: 100%;
}
.tj-casehero--id2812393 .tj-casehero__btn {
width: 100%;
}
}
/* --------------------------------------------------------------------------
Section 2: Mobile headline containment system.
Verified against CURRENT staging: none of these headlines' CONTAINERS
overflow (width:100%/max-width:100% is already correctly applied by
<=767px), and no nowrap/fixed-width/non-wrapping span is forcing
overflow either - words already wrap normally. The actual risk is
pure font-size: each of these large uppercase headlines stops shrinking
at the 767px breakpoint's value (Services/Industries: 3.5rem / Home
Final CTA: 2.75rem) and never steps down further for real phone widths
(649/449px only re-declare width, never font-size) - at a true ~360-390px
viewport a single long word ("OPERATIONAL", "PERFORMANCE") at that fixed
size can exceed the line box and overflow the viewport, exactly as
flagged. Measured at this tooling's ~520px floor, both sit a few pixels
inside the edge (not yet overflowing) - too close for real device
margins, so applying the same clamp() safety net used for the About
Nearshore headline rather than waiting for a wider failure: a floor
that's still a large, readable headline (2rem) up to each block's own
already-approved 767px ceiling, scaling continuously in between so
there's no fixed breakpoint gap where it can fail. No text-transform,
wrapping behavior, or color-span structure touched - only font-size.
-------------------------------------------------------------------------- */
@media (max-width: 649px) {
.tj-services-hero--id2812_2843 .tj-services-hero__heading h1,
.tj-services-hero--id2812_2843 .tj-services-hero__heading h2,
.tj-services-hero--id2812_2843 .tj-services-hero__heading h3,
.tj-services-hero--id2812_2843 .tj-services-hero__heading h4,
.tj-services-hero--id2812_2843 .tj-services-hero__heading h5,
.tj-services-hero--id2812_2843 .tj-services-hero__heading h6 {
font-size: clamp(2rem, 9vw, 3.5rem);
}
.tj-industries-hero--id2812356 .tj-industries-hero__heading {
font-size: clamp(2rem, 9vw, 3.5rem);
}
/* Home Final CTA (shared component - also renders on Industries,
Resources, and Contact as their own Final CTA) */
.tj-cta--id2812_1968 .tj-cta__heading {
font-size: clamp(1.75rem, 8vw, 2.75rem);
}
}
/* --------------------------------------------------------------------------
Section 7: Case Study Final CTA — mobile gutter symmetry.
Root cause: .tj-cta__card has padding-left (1.68rem@649px / 1.18rem@449px)
but NO matching padding-right at all - the block was only ever designed
with .left/.right as side-by-side desktop columns, where the right
column's own components (.right's padding-right, .heading-block's
padding-right) supplied the right-hand edge instead of the card itself.
Once .left/.right were stacked to width:100% (prior pass), those
right-only paddings became a second, uncoordinated inset with no
left-side counterpart - measured 48px left vs 69px right on the
headline/buttons row (a 21px asymmetry). Fixed by giving the card the
matching right padding as the single source of the mobile gutter, and
removing the now-redundant one-sided paddings on its children.
-------------------------------------------------------------------------- */
@media (max-width: 649px) {
.tj-cta--id2812_4061 .tj-cta__card {
padding-right: 1.68rem;
}
.tj-cta--id2812_4061 .tj-cta__right,
.tj-cta--id2812_4061 .tj-cta__heading-block {
padding-right: 0;
}
}
@media (max-width: 449px) {
.tj-cta--id2812_4061 .tj-cta__card {
padding-right: 1.18rem;
}
}
/* ==========================================================================
MOBILE QA PART 2 — PASS 1.1 (2026-08-21)
Final CTA mascot spacing refinement. Real-device QA at true phone width
found the buttons->mascot gap read as too large on several blocks, and
the bottom padding below the mascot as excessive on two. Measured the
actual rendered geometry (getBoundingClientRect, AOS entrance-transform
neutralized for the measurement only) rather than assuming the
--rc-mobile-gap token was the sole cause - it wasn't, on three of the
four blocks:
- Home (shared w/ Industries/Resources/Contact): .tj-cta__mascot-spacer,
a decorative empty div ABOVE the mascot image (a leftover fine-tuning
element from the old desktop absolute-positioning layout, still
31px tall), was adding dead space on top of the token's own 32px
margin - almost doubling the true gap. Zeroed the spacer.
- Services: .tj-cta__mascot is a wrapped flex item of .content-wrap
(flex-wrap:wrap), which already applies its own row-gap between
every wrapped row (content -> actions -> mascot). My own explicit
margin-top was stacking on TOP of that existing flex gap instead of
replacing it - double-spacing. Removed the redundant margin-top
entirely; the container's own existing gap alone now provides the
separation.
- About / Case Study: no extra structural top-side contributor was
found - the measured top gap was exactly the token's 32px. Real
device QA says that reads as too large regardless, so the token
usage is reduced specifically for these two (not the token's global
value, which remains 2rem for other/future major-sibling uses) to
the next smaller already-established spacing step, 1.5rem.
- About / Case Study bottom: .tj-cta__overlap (About) and
.tj-cta__right (Case Study) both still carried their own
padding-bottom - 74.88px and 100px respectively at this breakpoint -
a reserved-space allowance from the old design where the mascot was
absolutely positioned and needed room visually carved out of its
parent. Now that the mascot is normal flow, that reservation is pure
dead space after it. Zeroed both; each section's own legitimate
outer padding (already an approved value from an earlier pass) is
now the only space between the mascot and the section's true bottom
edge.
- Home's own bottom treatment was not touched (not identified as an
issue and not requested).
========================================================================== */
/* --- Home / Industries / Resources / Contact Final CTA (shared) --- */
@media (max-width: 649px) {
.tj-cta--id2812_1968 .tj-cta__mascot-spacer {
height: 0;
}
.tj-cta--id2812_1968 .tj-cta__mascot {
margin-top: 1.5rem;
}
}
/* --- About Final CTA --- */
@media (max-width: 649px) {
.tj-cta--id2812581 .tj-cta__overlap {
padding-bottom: 0;
}
.tj-cta--id2812581 .tj-cta__mascot-wrap {
margin-top: 1.5rem;
}
}
/* --- Services Final CTA: remove the redundant margin (the flex
container's own row-gap already separates it from .actions) and
resize per this pass's request. Current rendered width measured at
283px; 1.5x = 424.5px target. Re-expressed as width%/max-width scaled
from the existing Pass-1 values (61%/300px) by the same 1.5x, so it
stays safely contained at any width the way the original formula was
designed to. --- */
@media (max-width: 649px) {
.tj-cta--id2812963 .tj-cta__mascot {
margin-top: 0;
width: 92%;
max-width: 450px;
}
}
/* --- Case Study Final CTA --- */
@media (max-width: 649px) {
.tj-cta--id2812_4061 .tj-cta__right {
padding-bottom: 0;
}
.tj-cta--id2812_4061 .tj-cta__mascot-wrapper {
margin-top: 1.5rem;
}
}
/* ==========================================================================
MOBILE QA PART 2 — PASS 2 (2026-08-21)
========================================================================== */
/* --------------------------------------------------------------------------
Services Overview ("Choose...") — mobile overflow + metrics->visual gap.
Root cause of the ~73px+ overflow: .tj-services-overview__right stays
flex-direction:row / flex-wrap:nowrap at every mobile breakpoint (never
reset), while its two direct children (.sub-col, .sub-col--offset) are
both set to width:100% at <=649px. Two 100%-wide columns forced side by
side in a non-wrapping row structurally cannot fit - the row (and the
section) is pushed wider than the viewport. This is also what read as
"excessive/unclear" spacing around the metrics: the broken overflow
layout, not a literal oversized gap value (.inner's own row-gap between
.left and .right is 0 there).
Fix: stack .right's two sub-columns vertically at <=649px (matches how
.left/.right themselves already stack via .inner's flex-wrap). Adds
var(--rc-mobile-gap) between the metrics group (.left, ending in
.stats) and the following visual/card group (.right) as the one
deliberate major gap requested - reusing the same token already
established for this exact "content group -> next group" relationship,
not a new value.
-------------------------------------------------------------------------- */
@media (max-width: 649px) {
.tj-services-overview--id2812858 .tj-services-overview__inner {
gap: var(--rc-mobile-gap) 2rem;
}
.tj-services-overview--id2812858 .tj-services-overview__right {
flex-direction: column;
}
}
/* --------------------------------------------------------------------------
Services Capabilities / Industry-Specific Solutions — mobile bullet-row
layout. Real-device QA found the red square rendering ABOVE its label
instead of beside it.
Root cause (checklist items - the capability card bullets AND the dark
industry section's own checklist): both .checklist-item and
.industry-checklist-item are a correct flex row (icon flex-shrink:0 +
text) at the base rule, but the <=1023px breakpoint adds
flex-wrap:wrap to the ROW with no min-width:0 on the text span. Without
min-width:0, a flex item's automatic minimum size defaults to its own
min-content width; once the (often long) label text's min-content
exceeds the space left after the icon, flex-wrap:wrap pushes the
ENTIRE text span down to a new line rather than letting it wrap its
own words within the available width - square on its own row above
the label. Fixed by reverting the row back to nowrap (matching how it
was clearly built to work) and giving the text span min-width:0 so it
wraps internally instead.
Root cause (the four industry cards - "LOGISTICS & FREIGHT" etc, the
.vertical-card grid): these were never a checklist row to begin with -
.vertical-card is flex-direction:column by design (icon on its own
line above a bordered card's label), a genuine desktop card treatment,
not a text-wrap bug. Per this pass's explicit request these should
read as the same bullet-row pattern at mobile, so the card is
restructured to a row (icon left, flex-shrink:0, label right) at
<=649px specifically, where it's already down to one full-width card
per row.
-------------------------------------------------------------------------- */
@media (max-width: 1023px) {
.tj-services-capabilities--id2812894 .tj-services-capabilities__checklist-item,
.tj-services-capabilities--id2812894 .tj-services-capabilities__industry-checklist-item {
flex-wrap: nowrap;
}
.tj-services-capabilities--id2812894 .tj-services-capabilities__check-text,
.tj-services-capabilities--id2812894 .tj-services-capabilities__industry-check-text {
min-width: 0;
}
}
@media (max-width: 649px) {
.tj-services-capabilities--id2812894 .tj-services-capabilities__vertical-card {
flex-direction: row;
align-items: flex-start;
gap: 0.75rem;
}
.tj-services-capabilities--id2812894 .tj-services-capabilities__vertical-icon {
flex-shrink: 0;
margin-top: 0.15rem;
}
.tj-services-capabilities--id2812894 .tj-services-capabilities__vertical-label {
width: auto;
min-width: 0;
min-height: 0;
}
}
/* --------------------------------------------------------------------------
Resources — Common Inquiries: headline -> accent bar mobile gap.
Measured against the Toolkit & Guides reference (same headline->accent
relationship on the same page): Toolkit renders at 16px. Common
Inquiries measured 48px - .tj-faq__label-group's own gap (1rem) plus
.tj-faq__label's own margin-bottom (1rem) plus .tj-faq__label-bar's own
margin-top (1rem) were all three adding together, triple-stacking the
same spacing relationship that Toolkit expresses with a single
mechanism. Zeroed the label's margin-bottom and the bar's margin-top so
the label-group's existing gap is the only contributor, matching
Toolkit's rendered value exactly.
-------------------------------------------------------------------------- */
@media (max-width: 649px) {
.tj-faq--id2902_1061 .tj-faq__label {
margin-bottom: 0;
}
.tj-faq--id2902_1061 .tj-faq__label-bar {
margin-top: 0;
}
}
/* --------------------------------------------------------------------------
Contact — Contact Info mobile stacking (icon over information).
All three items (address, phone, email) share identical markup
(.contact-item > .contact-icon-wrap + .contact-text-wrap) - there is no
structural difference between them. The block's own CSS keeps
.contact-item as a row (icon beside text) at every breakpoint down to
649px, and only adds flex-wrap:wrap at <=449px with no min-width:0 on
the text - the same "whole item drops to next line" mechanism found
elsewhere in this pass. Because Address is typically the longest value,
it was the one most likely to trigger that wrap and LOOK like the
intended icon-over-text pattern, while shorter Phone/Email values
stayed inline - an accidental, content-length-dependent inconsistency,
not a deliberate difference.
Made deliberate and consistent for all three items at <=649px (this
pass's mobile boundary): icon column stacked above its text, using the
item's own already-established gap value (0.99rem, previously a
row-gap between icon/text, now the vertical gap between them) so the
"same gap used by Address" is literally the same declared value, not a
new one. overflow-wrap:break-word added defensively so a long email
address wraps instead of overflowing.
-------------------------------------------------------------------------- */
@media (max-width: 649px) {
.tj-contact-form--id2821436 .tj-contact-form__contact-item {
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
}
.tj-contact-form--id2821436 .tj-contact-form__contact-icon-wrap {
width: auto;
}
.tj-contact-form--id2821436 .tj-contact-form__contact-text {
overflow-wrap: break-word;
}
}
/* --------------------------------------------------------------------------
Contact form — mascot containment (deferred from Passes 1/1.1).
Same systemic root cause found across every other CTA mascot this
session: .tj-contact-form__mascot-wrap is position:absolute
(height:100%/min-height:100% of .overlap-group), and .overlap-group
itself carries a large reserved padding-bottom (14.28rem base,
scaling down through the breakpoints) sized to visually make room for
that absolutely-positioned mascot beneath the submit button. At mobile
the mascot's real content is taller than that reservation, so it
extends past .overlap-group (and the white .form-panel card
containing it) into the sidebar content below.
Fixed the same way: mascot-wrap back to normal flow. Width itself is
NOT touched (this task explicitly preserves current size) - only the
positioning mechanism changes, so the rendered size is unchanged.
.badge-wrap (a normal-flow, non-absolute element) was already sitting
above the mascot in visual stacking only because the mascot's own
removal from flow left it as the sole in-flow content; with both in
flow, DOM order (mascot then badge) now determines visual order
correctly. .overlap-group's oversized reserved padding-bottom is
replaced with a modest, genuine bottom breathing-room value instead of
a removal-reservation.
-------------------------------------------------------------------------- */
@media (max-width: 649px) {
.tj-contact-form--id2821436 .tj-contact-form__overlap-group {
padding-bottom: 1.5rem;
}
.tj-contact-form--id2821436 .tj-contact-form__mascot-wrap {
position: static;
height: auto;
min-height: 0;
transform: none;
}
}
/* Form card -> "What Happens Next" card major gap. .tj-contact-form__container's
row-gap drops to 1.05rem (~17px) once wrapped to a single mobile column -
too tight for two distinct stacked cards. Raised to the established
--rc-mobile-gap for this major-sibling-group relationship. */
@media (max-width: 649px) {
.tj-contact-form--id2821436 .tj-contact-form__container {
row-gap: var(--rc-mobile-gap);
}
}
/* ==========================================================================
Case Study — Results in Detail / Volume of Calls: mobile stage grouping
override REMOVED (Pass 2, data visualization upgrade)
This override targeted .tj-results__chart-area / .bars-group / .stats /
.bar-col, which no longer exist - the whole component was rebuilt in
tj_case_06_data_visualizations' own block.php/style.css with a native
mobile layout (bars + an interactive stage legend inside one flex
column, no display:contents/order interleaving needed). See that
block's style.css for the current mobile association handling.
-------------------------------------------------------------------------- */
/* ==========================================================================
Assessment Completion — typography normalization (2026-08-21)
ASSESS-02/Completion (tj_assess_02_completion) is the only Assessment
component that never received the Montserrat-headline/Poppins-body
typography pass the rest of the flow (tj_assess_01_selection_step_master,
tj_assess_03_contact) already uses. Its own generated style.css sets
every non-headline text element to either Montserrat (progress label,
card eyebrow, mission subtitle, body text/bold run, info-card
title/text, trust-bar label) or 'Plus Jakarta Sans' (button text,
inherited from the original Transjt import and never part of the
approved system) instead of Poppins. Overriding just those eleven
elements here - .tj-card__heading (the actual "Your Assessment is
Complete" headline) is deliberately left untouched, still Montserrat,
the one legitimate display heading in this component. Poppins is
already loaded site-wide via assets-css/fonts.css, so no new font
import is added. Scoped entirely to .tj-assessment-complete--id2912059
- no other Assessment page or marketing-site component is touched.
-------------------------------------------------------------------------- */
.tj-assessment-complete--id2912059 .tj-progress__step,
.tj-assessment-complete--id2912059 .tj-card__label,
.tj-assessment-complete--id2912059 .tj-card__mission-label,
.tj-assessment-complete--id2912059 .tj-card__mission-subtitle,
.tj-assessment-complete--id2912059 .tj-card__text,
.tj-assessment-complete--id2912059 .tj-card__text--bold,
.tj-assessment-complete--id2912059 .tj-card__btn-text,
.tj-assessment-complete--id2912059 .tj-info-card__title,
.tj-assessment-complete--id2912059 .tj-info-card__text,
.tj-assessment-complete--id2912059 .tj-trust-item__label {
font-family: 'Poppins', sans-serif;
}
/* ==========================================================================
Global Back-to-Top utility (2026-08-21)
Inspected the live site for an existing fixed/floating bottom-right
control first, as instructed - checked Home, Case Study, Contact, and
an Assessment step (form-06) via a temporary diagnostic that lists
every position:fixed/sticky element on each page. The only match on
every page was the sticky header itself (.tj-header--id2812679,
top:0, z-index:1000) - there is no existing floating bottom-right
widget on this staging site to stack above or avoid colliding with.
This button is therefore the only floating utility control site-wide.
Markup is rendered once in tj_global_02_footer/block.php (a global
template part present on every real page, including all Assessment
steps and Completion), so it never needs JS-side injection and cannot
be duplicated by repeated script execution. Circular shape (not the
rounded-square used by marketing CTAs elsewhere) was chosen
specifically so this reads as a restrained utility control, not a CTA.
Color reuses the exact brand red already used for primary buttons/
accent bars sitewide (rgba(225,6,0,1)), not a new invented value.
z-index:500 is deliberately below the header's own 1000 - the header
is the only other stacking context on the page, and its mobile nav
panel is a descendant of it, so anything under 1000 automatically
stays beneath that panel without needing a second explicit value.
500 is comfortably above ordinary page content (effectively z-index:
auto/0 throughout the rest of the generated CSS).
-------------------------------------------------------------------------- */
.tj-back-to-top {
position: fixed;
right: 2rem;
bottom: 2rem;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(225, 6, 0, 1);
color: rgba(255, 255, 255, 1);
cursor: pointer;
z-index: 500;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(8px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, filter 0.15s ease;
}
.tj-back-to-top--visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.tj-back-to-top:hover,
.tj-back-to-top:focus-visible {
filter: brightness(0.88);
}
.tj-back-to-top:focus-visible {
outline: 2px solid rgba(255, 255, 255, 1);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(225, 6, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.2);
}
.tj-back-to-top__icon {
width: 22px;
height: 22px;
display: block;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.tj-back-to-top {
transition: opacity 0.01ms, visibility 0.01ms;
}
}
@media (max-width: 649px) {
.tj-back-to-top {
right: 1rem;
bottom: 1rem;
bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
}
/* ==========================================================================
PASS 1 — Universal Hero CTA button system (2026-08-24)
Three canonical hero-button treatments, now selectable per-button in the
editor via a new primaryBtnStyle/secondaryBtnStyle attribute on every
hero block (Home/About/Services/Industries [shared by Industries,
Contact, Resources]/Case Study - see includes/functions_hero_cta.php).
Applied ADDITIONALLY alongside each hero's own existing button classes
(never replacing them), so every existing width/padding/height/hover
selector keeps working untouched - only typography, text alignment,
wrap behavior, color, background and border are taken over by the
shared system. Selectors are written as 2-class compounds
(.tj-hero-cta-btn.tj-hero-cta-btn--X) specifically so they match or
exceed the specificity of each hero's own 2-class per-block button
rules; combined with custom.css's cascade position (loads last), that
settles every conflict without a single !important.
Height already comes from the site-wide --rc-button-height token
(established Phase 4, untouched here). Padding/width are deliberately
NOT touched by this shared system - each hero's own box-model already
works and touching it site-wide risks new wrapping regressions;
page-specific width/padding bugs are fixed as separate, scoped
exceptions below where the brief explicitly calls one out (Services
hero, Case Study CTA).
========================================================================== */
.tj-hero-cta-btn {
font-family: 'Poppins', sans-serif;
font-size: 0.87rem;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.3;
text-transform: uppercase;
text-align: center;
text-decoration: none;
white-space: normal;
/* Shared-level fix (release-candidate audit P1): the three style
variants below only ever set border-color, on the assumption that
some border-width/style already existed. That was true only where a
page-specific rule happened to declare its own `border: 2px solid`
(e.g. About/Case Study hero) - tj_industries_01_hero's secondary
button (Industries/Resources/Contact) never got that patch, so its
outline was invisible. Declaring the width/style once here, for
every hero button, is the actual shared fix instead of three
page-specific patches. 2px matches the value already established on
About's hero buttons. box-sizing:border-box is already applied to
every one of these buttons via the --rc-button-height rule above, so
this doesn't change any button's rendered size. */
border-width: 2px;
border-style: solid;
}
/* Style 1 — Primary: solid red with the existing red glow/shadow treatment.
0px 10px 7.5px / 0.2 alpha is the value already shared by three of the
five heroes (Home, Industries, Services) before this pass - used here
as the canonical value rather than the heavier one-off Final-CTA-section
glow, and now also applied to About/Case Study hero (which previously
had no glow at all on their primary button) for real consistency. */
.tj-hero-cta-btn.tj-hero-cta-btn--primary {
background: rgba(225, 6, 0, 1);
border-color: rgba(225, 6, 0, 1);
color: rgba(255, 255, 255, 1);
filter: drop-shadow(0px 10px 7.5px rgba(225, 6, 0, 0.2));
}
.tj-hero-cta-btn.tj-hero-cta-btn--primary:hover {
background: rgba(191, 10, 25, 1);
border-color: rgba(191, 10, 25, 1);
}
/* Style 2 — Dark outline: for use on light/white hero backgrounds */
.tj-hero-cta-btn.tj-hero-cta-btn--dark-outline {
background: transparent;
border-color: rgba(10, 10, 10, 0.25);
color: rgba(10, 10, 10, 1);
filter: none;
}
.tj-hero-cta-btn.tj-hero-cta-btn--dark-outline:hover {
border-color: rgba(10, 10, 10, 0.5);
background: rgba(10, 10, 10, 0.04);
}
/* Style 3 — Light outline: for use on dark/photo hero backgrounds */
.tj-hero-cta-btn.tj-hero-cta-btn--light-outline {
background: transparent;
border-color: rgba(255, 255, 255, 0.4);
color: rgba(255, 255, 255, 1);
filter: none;
}
.tj-hero-cta-btn.tj-hero-cta-btn--light-outline:hover {
border-color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.08);
}
/* Any nested label span inside a shared-system button (Home/Industries
heroes wrap their text in their own __btn-label span) must inherit the
parent's centering rather than keep its own block-specific text-align/
white-space - the two per-hero label bugs this fixes (#4, #5) are also
corrected directly at their own selectors below for the same reason:
defense in depth, and so the fix still holds even before/without the
editor style attribute being explicitly set. */
.tj-hero-cta-btn span {
text-align: center;
white-space: normal;
}
/* --------------------------------------------------------------------------
Image grayscale — shared, editor-toggleable
Both current grayscale hero backgrounds (About, Services) previously
hardcoded filter:grayscale(1) unconditionally. Converted to a class
gated on a new backgroundImageGrayscale attribute (default true on both,
so nothing changes unless an editor explicitly turns it off) - fully
reversible in the editor, and reusable on any future image/background
element by adding this one class.
-------------------------------------------------------------------------- */
.tj-img-grayscale {
filter: grayscale(1);
}
/* --------------------------------------------------------------------------
Home hero — mobile/general CTA label centering (issue #5) + typography
consistency (Objective 1). Root cause: .tj-hero__btn-label was
text-align:left with white-space:nowrap on both buttons; the outline
button's label additionally forced width:100%, so on mobile (where the
button itself goes full-width) the text sat pinned to the button's left
edge instead of centering. Font-size also differed between the two
buttons (0.75rem primary vs 0.87rem outline) - unified to the shared
system's 0.87rem here too (Home is the one hero not yet touched by the
Phase 4 About/Case Study 0.87rem convention).
-------------------------------------------------------------------------- */
.tj-hero--id2812738 .tj-hero__btn--primary .tj-hero__btn-label,
.tj-hero--id2812738 .tj-hero__btn--outline .tj-hero__btn-label {
width: 100%;
font-size: 0.87rem;
text-align: center;
white-space: normal;
}
/* --------------------------------------------------------------------------
Industries hero (shared by Industries/Contact/Resources) — secondary
button centering (issue #4) + style normalization (Objective 1).
Root cause of the wrapping/centering bug: .tj-industries-hero__btn-label
was white-space:nowrap + text-align:left, so on narrow buttons the label
either overflowed past the button's right edge or, if it did wrap,
read left-biased instead of centered.
Separately, the secondary button's own solid light-gray fill
(rgba(232,232,232,1)) was a one-off 4th visual treatment - normalized
to the shared Style 2 (dark-outline) via the new tj-hero-cta-btn
classes added in block.php. Note this hero's own root selector is
background:rgba(255,255,255,1) (a light hero, same family as Home),
NOT a dark hero like About/Services/Case Study - confirmed by reading
its own style.css before choosing dark-outline over light-outline here
(an earlier draft of this fix wrongly assumed a dark background and
used light-outline, which rendered as invisible white-on-white; caught
and corrected during this pass's own verification screenshots).
-------------------------------------------------------------------------- */
.tj-industries-hero--id2812356 .tj-industries-hero__btn-label {
white-space: normal;
text-align: center;
}
.tj-industries-hero--id2812356 .tj-industries-hero__btn--secondary {
background: transparent;
}
.tj-industries-hero--id2812356 .tj-industries-hero__btn--secondary:hover {
background: rgba(10, 10, 10, 0.04);
}
/* --------------------------------------------------------------------------
Services hero — mobile gutter, heading/description spacing, button
typography and size parity (issues #7, #8/Objective 1)
1) Right-gutter bug: .tj-services-hero__content carries a margin-left:1rem
(fine standalone on desktop, where it's an intentional small offset) that
was never reset at any mobile breakpoint, while its own width formulas
exceed 100% (102-106%, calibrated to still fit alongside that margin at
desktop's much wider content box) - the combination pushed content past
its safe right edge at every mobile width. Both are reset ONLY inside the
existing <=1023px breakpoints (desktop's own margin/width untouched, so
this fixes the mobile-only bug the brief describes without altering
desktop), restoring an even, intentional gutter that matches
content-wrapper's own symmetric padding.
2) Heading-to-paragraph gap: .tj-services-hero__description's
padding-top was a flat 1rem at every breakpoint including mobile, reading
as cramped against the (much larger, 3.5rem+) mobile heading size -
increased at <=649px only, reusing 1.5rem (an existing step already used
elsewhere in this design system, not an invented value).
3) Button typography/size mismatch: .tj-button--outline overrode
font-family to Montserrat/900/0.16em-tracking while .tj-button--primary
(and every other hero's buttons) use Poppins/700/0.08em - along with very
different horizontal padding (3rem vs 1.5rem), this is what made the two
CTAs "look like different sizes." Outline's typography override removed
entirely (falls back to .tj-button's own Poppins base, matching primary)
and its padding normalized to match primary's.
-------------------------------------------------------------------------- */
@media (max-width: 1023px) {
.tj-services-hero--id2812_2843 .tj-services-hero__content {
margin-left: 0;
width: 100%;
}
}
@media (max-width: 767px) {
.tj-services-hero--id2812_2843 .tj-services-hero__content {
width: 100%;
}
}
@media (max-width: 649px) {
.tj-services-hero--id2812_2843 .tj-services-hero__content {
width: 100%;
}
.tj-services-hero--id2812_2843 .tj-services-hero__description {
padding-top: 1.5rem;
}
}
@media (max-width: 449px) {
.tj-services-hero--id2812_2843 .tj-services-hero__content {
width: 100%;
}
}
.tj-services-hero--id2812_2843 .tj-button--outline {
font-family: 'Poppins';
font-weight: 700;
letter-spacing: 0.08em;
padding-top: 0.75rem;
padding-right: 1.5rem;
padding-bottom: 0.75rem;
padding-left: 1.5rem;
}
@media (max-width: 449px) {
.tj-services-hero--id2812_2843 .tj-button--outline {
padding-top: 1rem;
padding-right: 1.12rem;
padding-bottom: 1rem;
padding-left: 1.12rem;
}
}
/* --------------------------------------------------------------------------
About Final CTA section — primary button label centering (issue #6)
.tj-cta__btn-inner's justify-content was already recentered in an
earlier pass (see the "recenter primary button text after icon removal"
rule above); the residual left-bias was the text itself:
.tj-cta__btn--primary .tj-cta__btn-text was text-align:left at a
91.01% reserved width (leftover space-for-an-icon-that-no-longer-exists
math). Centered and widened to the button's full available width so a
wrapped 2-line label centers on both lines, not just the first.
-------------------------------------------------------------------------- */
.tj-cta--id2812581 .tj-cta__btn--primary .tj-cta__btn-text {
width: 100%;
text-align: center;
}
/* --------------------------------------------------------------------------
Services Final CTA section — button label font-size parity (issue #8)
Primary and secondary both already use Montserrat/900 (same family and
weight, correctly left alone per the brief's "if the only difference is
weight, leave it" instruction) - only font-size differed (0.87rem vs
0.75rem). Unified to the primary's 0.87rem.
-------------------------------------------------------------------------- */
.tj-cta--id2812963 .tj-cta__btn--secondary span {
font-size: 0.87rem;
}
/* --------------------------------------------------------------------------
Case Study Final CTA — mobile layout rebuild (issue #9)
Root causes, mirroring the exact pattern already fixed on the other
three Final CTA blocks earlier this project: .tj-cta__mascot-wrapper is
position:absolute unconditionally (never reset to normal flow at any
mobile breakpoint) while .tj-cta__right reserves shrinking-but-still-
large padding-bottom "dead space" for it (8.9rem desktop tapering to
3.87rem at 449px) - and because the mascot is absolutely positioned, its
DOM order (after .buttons in the markup) never translated into "beneath
the buttons" visually or was ever guaranteed relative to them at all.
Mobile-only fix: .tj-cta__right becomes a normal flex column so the
mascot (now static, in-flow) and buttons stack in a real, predictable
relationship - `order` puts the mascot first without touching markup.
The old reserved padding-bottom is zeroed (no longer needed once the
mascot is in-flow) and replaced with one deliberate, small gap between
mascot and buttons (reduced from the old multi-rem dead space, per the
brief's "reduce excessive space" instruction) plus the requested 16px
gap between the two buttons themselves.
Card padding: .tj-cta__card only ever received padding-LEFT at mobile
(.right supplied its own, differently-based padding-right on a
differently-sized box) - equalized by giving .card matching padding-
right values at each breakpoint and zeroing .right's own now-redundant
padding-right.
Mascot 1.5x: on desktop this is a CSS transform:scale (mascot stays
position:absolute there, so the scale's lack of layout impact doesn't
matter - nothing needs to flow around it). On mobile the mascot is now
in normal flow specifically so it can sit above the buttons in a real,
predictable relationship - transform:scale does NOT reserve extra
layout space for the space it visually overflows into, so an initial
attempt combining position:static with transform:scale(1.5) here
caused the enlarged mascot to visually overlap the buttons below it
(caught during this pass's own verification screenshots, not shipped).
Fixed by sizing the mobile mascot via width alone (a real, space-
reserving property) instead of a transform, at a size clearly larger
than the old absolutely-positioned original.
-------------------------------------------------------------------------- */
.tj-cta--id2812_4061 .tj-cta__buttons {
gap: 1rem 16px;
}
@media (max-width: 649px) {
.tj-cta--id2812_4061 .tj-cta__card {
padding-right: 1.68rem;
}
.tj-cta--id2812_4061 .tj-cta__right {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
padding-right: 0;
padding-bottom: 0;
gap: 1.25rem 0;
}
.tj-cta--id2812_4061 .tj-cta__mascot-wrapper {
position: static;
order: 1;
width: 60%;
height: auto;
margin: 0 auto;
}
.tj-cta--id2812_4061 .tj-cta__buttons {
order: 2;
max-width: 100%;
gap: 16px 3%;
}
}
@media (max-width: 449px) {
.tj-cta--id2812_4061 .tj-cta__card {
padding-right: 1.18rem;
}
.tj-cta--id2812_4061 .tj-cta__right {
padding-right: 0;
}
.tj-cta--id2812_4061 .tj-cta__mascot-wrapper {
width: 70%;
}
.tj-cta--id2812_4061 .tj-cta__buttons {
max-width: 17.5rem;
margin: 0 auto;
}
}
/* --------------------------------------------------------------------------
Case Study Final CTA — desktop composition fix (Pass 1.1 closure)
Reinspected per QA request rather than assuming the old transform:scale
approach was acceptable. Measured the actual 1440px render: the block's
own style.css has .tj-cta__buttons as flex-direction:row (the two
buttons sit side by side, ~18px horizontal gap) and .tj-cta__mascot-
wrapper is position:absolute anchored top-right (top:2.18rem;
right:-10.24%), so it floats beside/below the button row rather than
above it - confirmed via screenshot, buttons render at the TOP of
.tj-cta__right with the mascot below-right of them. This is the reverse
of the approved composition (mascot above, buttons stacked vertically
beneath with exactly 16px between them) - not a false alarm.
Fix mirrors the mobile solution already proven safe in Pass 1: make
.tj-cta__right a real flex column so DOM order (buttons markup precedes
mascot markup) can be visually reversed via `order` instead of
position:absolute. Mascot is sized via width, not transform, for the
same reason transform-only sizing was rejected on mobile - it doesn't
reserve layout space, so a transform-scaled in-flow mascot would
overlap the buttons beneath it. 1.5x preserved as 35.09% * 1.5 = 52.64%,
keeping the mascot's proportion of .tj-cta__right identical to what
Pass 1 already established, just made layout-safe. Buttons switch from
row/percentage-width to column/auto-width with a real 16px gap (the
exact value requested, not the ~18px column-gap approximation the row
layout produced). padding-bottom:8.9rem on .tj-cta__right (reserved for
the old absolutely-positioned mascot's overflow) is zeroed since the
mascot is now in-flow and reserves its own space. */
@media (min-width: 650px) {
.tj-cta--id2812_4061 .tj-cta__right {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 0;
}
.tj-cta--id2812_4061 .tj-cta__mascot-wrapper {
position: static;
order: 1;
width: 52.64%;
height: auto;
margin-bottom: 1.5rem;
}
.tj-cta--id2812_4061 .tj-cta__buttons {
order: 2;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: auto;
max-width: 100%;
gap: 16px 0;
}
.tj-cta--id2812_4061 .tj-cta__btn--primary,
.tj-cta--id2812_4061 .tj-cta__btn--outline {
width: auto;
}
}
/* --------------------------------------------------------------------------
Resources Common Inquiries — FAQ collapsed by default (issue #10)
No CSS change needed here: .tj-faq__answer{max-height:0} /
.tj-faq__item--open .tj-faq__answer{max-height:500px} already implement
a correct closed/open visual state (confirmed by reading the block's own
style.css). The bug was that block.php hardcoded the --open class and
aria-expanded="true" onto every item unconditionally, and no frontend
script existed anywhere to toggle it - fixed in block.php (defaults
removed) and assets/js/custom.js (new click handler added), not here.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
Contact page — map seam (issue #11)
A prior pass (Contact — Map placeholder-ready architecture, above) already
built .tj-contact-form__map-img-wrap as a correct, self-contained
aspect-ratio:16/10 box with its own border-radius:8px + overflow:hidden -
that part needs no change. The seam comes from the OUTER wrapping card,
.tj-contact-form__map-wrap: it adds padding-top:1rem (a visible white
strip above the map box, since map-wrap's own background is white) and
its own max-width (23.95rem) is very slightly larger than map-img-wrap's
fixed max-width (23.83rem), leaving a sliver of the white card visible
down each side too. Padding zeroed and the inner box's max-width
changed to a plain 100% (of whatever map-wrap's own width resolves to,
at every breakpoint) so it fills the card exactly with no gap on any
side - the already-correct rounding/clipping on map-img-wrap itself is
untouched.
-------------------------------------------------------------------------- */
.tj-contact-form--id2821436 .tj-contact-form__map-wrap {
padding-top: 0;
}
.tj-contact-form--id2821436 .tj-contact-form__map-img-wrap {
max-width: 100%;
}
/* ==========================================================================
GLOBAL :focus-visible SYSTEM (Phase 3 accessibility pass)
A prior audit found several site-wide interactive elements (nav links,
the mobile menu, EN/ES controls, marketing buttons, footer links, FAQ
triggers, form fields) with no reliably visible keyboard-focus
indicator, and a couple of form inputs (.tj-contact-form__input,
.tj-lead-magnet__input) that unconditionally set outline:none with no
focus-specific replacement at all.
Rather than adding a one-off rule per component, this generalizes the
two-tone ring already established and approved for #tj-back-to-top
(a white outline plus a red glow) as the one sitewide default: a white
outline reads clearly against dark/red surfaces (the footer's red
background, any dark hero), while the accompanying red box-shadow ring
reads clearly against light/white surfaces where the white outline
itself would be invisible - so the same single rule is legible on
white, black, and red backgrounds without per-surface overrides.
:focus-visible (not :focus) is used throughout, so browsers that
support it only show this ring for keyboard/programmatic focus, never
for a plain mouse click - no mouse-only visual clutter. outline and
box-shadow are both non-layout-affecting properties (drawn outside the
box, reserve no space), so this introduces no layout shift anywhere it
applies. This intentionally does not remove or alter any existing
outline:none rule that already has a visible replacement (e.g. the
Assessment field/textarea's existing border-color:#E10600 on :focus) -
it layers a stronger, consistent ring on top of those via
:focus-visible instead, and it naturally restores real focus
visibility wherever :focus-visible correctly overrides an earlier,
unconditional outline:none (loading last in the cascade, as this file
already does site-wide, needs no !important here either).
Selector list covers every interactive element type named in the
audit: header/footer/mobile-menu links, the Request Proposal CTA, the
hamburger and Back-to-Top buttons, EN/ES language controls, every
.tj-hero-cta-btn marketing/Assessment/404 button, FAQ accordion
triggers, and all real form controls - by element type and the few
component classes involved, not one selector per page section. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
outline: 2px solid rgba(255, 255, 255, 1);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(225, 6, 0, 0.55);
}