(the wrap scrolls
horizontally on small screens so columns never crush). NEVER fake a table by
splitting a sentence or key-value data across mis-sized grid/flex columns.
========================================================================== */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0 24px;border:1px solid var(--border);border-radius:var(--radius-md)}
.data-table,.compare-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:440px}
.data-table th,.data-table td,.compare-table th,.compare-table td{padding:13px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
.data-table thead th,.compare-table thead th{background:var(--surface);color:var(--text);font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.data-table tbody tr:last-child td,.compare-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:nth-child(even),.compare-table tbody tr:nth-child(even){background:var(--surface)}
.data-table td:first-child,.compare-table td:first-child{font-weight:700;color:var(--text)}
.data-table .td-yes{color:var(--accent-dark);font-weight:700}
.data-table .td-no{color:var(--text-muted)}
/* On a dark band the table inherits .on-dark light text; tint the header/zebra for contrast. */
.on-dark .table-wrap{border-color:rgba(255,255,255,.16)}
.on-dark .data-table th,.on-dark .data-table td,.on-dark .compare-table th,.on-dark .compare-table td{border-bottom-color:rgba(255,255,255,.14)}
.on-dark .data-table thead th,.on-dark .compare-table thead th{background:rgba(255,255,255,.08);color:#fff}
.on-dark .data-table tbody tr:nth-child(even),.on-dark .compare-table tbody tr:nth-child(even){background:rgba(255,255,255,.05)}
/* ==========================================================================
Trust / "backed by" bar — keep it from rendering as a jumbled plain-text list.
Items are spaced pills; an EMPTY item must not leave a ghost gap.
========================================================================== */
.trust-pills{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px}
.trust-pills :empty{display:none}
.trust-label{display:block;text-align:center}
/* ============================================================================
SIGNATURE / DESIGN-PACK LAYER — opt-in, VETTED, responsive + contrast-safe.
This is the toolkit for making a build DISTINCTIVE and design-heavy (see SKILL
"Design ceiling"). It EXTENDS the baseline; it never replaces it. Using these
classes is NOT "improvising CSS" — they are part of the shipped baseline, so you
reach for them instead of hand-rolling a section's internals. Each is
self-contained, mobile-safe, and degrades gracefully. Decorative glow/mesh/grid
layers sit BEHIND content (z-index) and are pointer-events:none. Pair every
dark/over-media band with .on-dark so text + icons stay light (contrast rule).
Push these on fitting clients (tech, premium, modern, creative); keep the
restrained baseline for trust-forward/industrial ones. Never at the cost of
contrast or responsiveness.
============================================================================ */
/* --- Decorative DARK-BAND backgrounds: futuristic glow / mesh / grid / scanlines.
Add to a `.section.dark` / `.hero-dark` / `.on-dark` band; content sits above. --- */
.bg-aurora{position:relative;overflow:hidden;isolation:isolate}
.bg-aurora::before{content:"";position:absolute;inset:-40% -15% auto -15%;height:95%;z-index:-1;pointer-events:none;
background:radial-gradient(55% 55% at 18% 20%,color-mix(in srgb,var(--accent) 42%,transparent),transparent 70%),
radial-gradient(50% 50% at 82% 12%,color-mix(in srgb,var(--primary) 60%,transparent),transparent 72%);
filter:blur(64px);opacity:.65}
.bg-grid{position:relative;overflow:hidden;isolation:isolate}
.bg-grid::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.45;
background-image:linear-gradient(color-mix(in srgb,var(--accent) 14%,transparent) 1px,transparent 1px),
linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,transparent) 1px,transparent 1px);
background-size:46px 46px;
-webkit-mask-image:radial-gradient(72% 60% at 50% 28%,#000,transparent 76%);
mask-image:radial-gradient(72% 60% at 50% 28%,#000,transparent 76%)}
.bg-glow{position:relative;overflow:hidden;isolation:isolate}
.bg-glow::before{content:"";position:absolute;left:50%;top:-20%;width:70vw;height:70vw;max-width:760px;max-height:760px;
transform:translateX(-50%);z-index:-1;pointer-events:none;border-radius:50%;opacity:.5;filter:blur(90px);
background:radial-gradient(circle,color-mix(in srgb,var(--accent) 55%,transparent),transparent 65%)}
/* --- BENTO grid: an asymmetric feature grid (a wide/tall lead tile + smaller tiles)
instead of a flat row of identical cards. Children are normal .cat-card/.img-card/.glass. --- */
.bento{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:768px){
.bento{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(150px,auto)}
.bento .bento-lg{grid-column:span 2;grid-row:span 2}
.bento .bento-wide{grid-column:span 2}
.bento .bento-tall{grid-row:span 2}
}
/* --- GLASS card (glassmorphism) — only on dark / over-media bands (carry .on-dark). --- */
.glass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);
-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
box-shadow:0 10px 44px rgba(0,0,0,.28);padding:28px 24px}
/* --- Editorial DISPLAY type, gradient + outline headline words. --- */
.display-xl{font-size:clamp(2.6rem,8vw,5.8rem);font-weight:700;letter-spacing:-.03em;line-height:1.02}
.display-lg{font-size:clamp(2.1rem,5.5vw,3.8rem);font-weight:700;letter-spacing:-.025em;line-height:1.06}
.text-gradient{background:linear-gradient(100deg,var(--accent),var(--primary));-webkit-background-clip:text;background-clip:text;color:transparent}
.text-stroke{-webkit-text-stroke:1.4px currentColor;color:transparent} /* outline word for editorial heroes */
.eyebrow-line{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.eyebrow-line::before{content:"";width:34px;height:2px;background:var(--primary)} /* minimalist line-label alt to the pill chip */
/* --- SPLIT-SCREEN hero: media on one side, content on the other (alt to the full-bleed hero). --- */
.hero-split{display:grid;grid-template-columns:1fr;min-height:auto}
.hero-split .hs-media{position:relative;overflow:hidden;min-height:44vh}
.hero-split .hs-media>img,.hero-split .hs-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-split .hs-body{display:flex;flex-direction:column;justify-content:center;padding:120px 0 64px}
@media(min-width:900px){
.hero-split{grid-template-columns:1.04fr .96fr;min-height:92vh}
.hero-split .hs-media{min-height:0}
.hero-split .hs-body{padding:96px 64px 96px 0}
}
/* --- ANGLED / soft-curve section divider — breaks the flat band-on-band stack.
Use sparingly (one or two per page) and only on a band with ample vertical padding. --- */
.section-angled{clip-path:polygon(0 0,100% 2.6vw,100% 100%,0 calc(100% - 2.6vw))}
.section-curve{border-top-left-radius:48px 26px;border-top-right-radius:48px 26px;overflow:hidden}
/* --- MARQUEE strip: a moving row of CAPSULE chips (duplicate the track once for a seamless loop).
⛔ HARD CONSTRAINT: every phrase is its own `.hm-pill` — a padded, bordered capsule with real
spacing between items. The old giant bare-text marquee shipped as an unreadable run-on word blur
and is BANNED. Never put bare text directly in `.hm-track`. Pauses on hover. --- */
.headline-marquee{overflow:hidden;white-space:nowrap;width:100%;padding:6px 0}
.headline-marquee .hm-track{display:inline-flex;gap:16px;align-items:center;width:max-content;
padding-right:16px;animation:hm-scroll 36s linear infinite}
.headline-marquee .hm-pill{display:inline-flex;align-items:center;gap:10px;padding:11px 24px;
border-radius:999px;border:1px solid var(--border);background:var(--surface);
font-weight:700;font-size:1.02rem;letter-spacing:.01em;line-height:1;color:var(--text)}
/* Icons on a LIGHT pill must never be raw --accent — a light client accent (cyan/yellow)
on near-white --surface drops below 2:1 and the QA probe blocks it as an invisible band.
Blend the accent toward --text so it stays brand-tinted but always readable; the dark
override below restores light icons on dark sections. */
.headline-marquee .hm-pill svg,.headline-marquee .hm-pill .icon{width:1.05em;height:1.05em;color:color-mix(in srgb,var(--accent) 55%,var(--text))}
:is(.on-dark,.section.dark,.hero-dark) .headline-marquee .hm-pill{
background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
:is(.on-dark,.section.dark,.hero-dark) .headline-marquee .hm-pill svg,
:is(.on-dark,.section.dark,.hero-dark) .headline-marquee .hm-pill .icon{color:#fff}
.headline-marquee .hm-dot{color:var(--graphite);font-weight:700}
:is(.on-dark,.section.dark,.hero-dark) .headline-marquee .hm-dot{color:rgba(255,255,255,.6)}
.headline-marquee:hover .hm-track{animation-play-state:paused}
@keyframes hm-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* --- Accent KICKER rule under a stat / feature, and a hairline "tech" border. --- */
.kicker-rule{width:46px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--primary));margin:14px 0 0}
.edge-glow{border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent),0 14px 50px rgba(0,0,0,.18)}
@media(prefers-reduced-motion:reduce){
.headline-marquee .hm-track{animation:none}
}
/* Mobile: kill the angled clip (it eats content at small sizes) and calm big type. */
@media(max-width:639px){
.section-angled{clip-path:none}
.hero-split .hs-body{padding:104px 0 56px}
}
/* AUTO-REPAIR: any explicit multi-column grid — INCLUDING a hand-written inline
`style="display:grid;grid-template-columns:repeat(3,1fr)"` — collapses to a single
column on phones. A stylesheet `!important` beats a non-important inline declaration,
so this neutralises the #1 cause of mobile horizontal scroll (responsive_hscroll)
regardless of how the section was authored. */
@media(max-width:600px){
[style*="grid-template-columns"]{grid-template-columns:1fr !important}
}
/* AUTO-REPAIR: a .cta-form is always a WHITE card. When it sits inside an on-dark band
(.cta-band / .cta-dark / .on-dark …), the band's white-text cascade turned the form's
labels, helper text and input text white-on-white — an invisible form. This higher-
specificity rule restores dark text inside the white card. (Same dark-cascade-into-a-
light-child defect that hit .process; .cta-form is the reliably-white one we can target.) */
:is(.on-dark,.section.dark,.hero-dark,.process,.cta-dark,.cta-band,.sidebar-cta,.quick-response,.trust-bar,.stat-bar) .cta-form
:where(h1,h2,h3,h4,h5,h6,p,label,span,small,strong,b,li,dd,dt,.form-label,.form-note,input,textarea,select){color:var(--text)}
/* AUTO-REPAIR: buttons inside the white .cta-form must use on-LIGHT styling. A .btn-outline
defaults to white text + faint-white border (built for dark bands) — invisible on the
white card. Force dark ink + a visible border so the form's buttons are always visible. */
.cta-form .btn-outline{color:var(--text);border-color:var(--border)}
/* …EXCEPT .btn-primary, which is a solid RED fill, not a white surface — dark ink on red
is the wrong repair. Aug 19 revision: every AVAS request button is red background,
white text, and this is the one rule that was breaking that inside the form card. */
.cta-form .btn-primary{color:#fff}
.cta-form :where(.btn,.btn-primary,.btn-outline) span{color:inherit}
/* AUTO-REPAIR: tolerate the FAQ class-name variants the builder sometimes emits
(.faq-q / .faq-a / .faq-icon) instead of the canonical .faq-question / .faq-answer /
.faq-ico, so the accordion still styles + collapses. Paired with a JS selector that
binds both spellings. */
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:20px 22px;font-weight:700;font-size:1.02rem;text-align:left;color:var(--text);cursor:pointer}
.faq-q .faq-icon{width:30px;height:30px;border-radius:50%;background:var(--secondary);color:var(--primary);
display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .25s,background .2s,color .2s}
.faq-q .faq-icon svg{width:16px;height:16px}
.faq-item.active .faq-icon{background:var(--accent);color:var(--text);transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--text-secondary);
font-size:.97rem;padding:0 22px}
.faq-a > :last-child{margin-bottom:22px}
/* AUTO-REPAIR: tolerate the process-section variant the builder sometimes emits (.ps-num for
the number circle, and a bare .process with steps not wrapped in .process-grid) so a
hand-rolled "How It Works" still styles instead of shipping as an unstyled stack. */
.process .ps-num,.ps-num{width:54px;height:54px;border-radius:50%;border:2px solid var(--accent);
color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;margin-bottom:18px}
.process > .container > .process-step{display:inline-block}
@media(min-width:768px){.process .process-step + .process-step{margin-top:0}}
/* ABOUT page (/about/) — Jason Vargas bio headshot is a square 800x800 source. Override the
default 4/3 .split-media crop so the real photo renders square and uncropped, not distorted. */
.split-media img.about-founder-photo{aspect-ratio:1/1;object-position:center center}
/* ---- HOME (index.html): FAQ 2-column layout ----
v2 asks for ONE unified question list split visually into two columns (half left,
half right), collapsing to a single column on mobile. Implemented as a grid on the
single .faq-list so every .faq-item / .faq-question / .faq-answer hook is preserved
for the existing accordion JS. grid-auto-flow:column + 6 explicit rows puts Q1-6 in
the left column and Q7-12 in the right, matching the client's document order.
align-items:start keeps each card at its natural height so an open answer doesn't
stretch its neighbour. */
.faq-list.faq-2col{
display:grid;
grid-auto-flow:column;
grid-template-columns:1fr 1fr;
grid-template-rows:repeat(6,auto);
align-items:start;
column-gap:24px;
row-gap:14px;
max-width:1040px;
}
@media(max-width:767px){
.faq-list.faq-2col{grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:none}
}
/* --- Page: /how-you-gain-proof/ --- */
/* Base `p` carries no margin, so the two stacked lede paragraphs in the
Roadmap section header need explicit separation. */
.hygp-lede p + p{margin-top:14px}
/* "What Changes As a Result" closer: constrain the bullet list to a readable
measure and centre it, matching .faq-list / .cta-content. */
.hygp-outcomes{max-width:820px;margin:0 auto}
/* AVAS page (/avas/) — "The Findings" statistics block.
Reuses Home's .section.dark + .stat-grid pattern for the four-across number row.
These rules only style the definitions BELOW that row: the client specified a single
vertical stack (explicitly NOT four columns), each definition using the full width. */
.avas-findings-defs{max-width:820px;margin:44px auto 0;display:grid;grid-template-columns:1fr;gap:24px}
.avas-findings-defs .affd-item{padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.avas-findings-defs .affd-item:first-child{padding-top:0;border-top:0}
.avas-findings-defs dt{font-family:var(--font-display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;margin-bottom:6px}
.avas-findings-defs dd{margin:0;font-size:.98rem;line-height:1.65}
@media(max-width:767px){
.avas-findings-defs{margin-top:32px;gap:20px}
.avas-findings-defs .affd-item{padding-top:20px}
.avas-findings-defs dt{font-size:.96rem}
}
/* Proof — Gore-Tex page (/proof-gore-tex/) — the one case study.
The narrative + Jason's two supplied rain-room photos. Scoped to .gt-* only.
Deliberately NO aspect-ratio on these images: one photo is landscape (2030x1248),
one is portrait (946x1264). The global `img{max-width:100%;height:auto}` reset plus
width:100% keeps each at its true ratio — unlike .split-media img, whose 4/3 crop
would cut the portrait demo shot in half. */
.gt-case{max-width:820px;margin:0 auto}
.gt-narrative{border-left:4px solid var(--accent);padding-left:28px}
.gt-narrative p{font-size:1.1rem;line-height:1.7;margin-bottom:14px}
.gt-narrative p:last-child{margin-bottom:0}
.gt-lede{font-family:var(--font-display);font-size:1.5rem;font-weight:700;line-height:1.4;color:#fff;margin-bottom:22px}
.gt-figure{margin:34px 0 0}
.gt-figure img{width:100%;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.1)}
.gt-figure-portrait{margin:0;max-width:300px;margin-inline:auto}
.gt-closing{font-family:var(--font-display);font-size:1.24rem;font-weight:700;line-height:1.45;color:#fff;margin:0}
@media(min-width:768px){
.gt-figure-portrait{margin-inline:0}
}
@media(max-width:767px){
.gt-narrative{padding-left:20px}
.gt-lede{font-size:1.28rem}
.gt-narrative p{font-size:1.02rem}
.gt-figure{margin-top:26px}
.gt-closing{font-size:1.1rem}
}
/* These two sections lost their .split-media (they held stock images that
misrepresented this case study). .split goes 1fr 1fr at >=1024px, which would leave
a single remaining child stranded in a half-width column beside dead space — so pin
the prose to one centred, readable column (the 820px measure used site-wide).
.split.gt-prose (0,2,0) outranks the .split media-query rule regardless of order. */
.split.gt-prose{grid-template-columns:1fr;max-width:820px;margin:0 auto;gap:0}
/* --- Page: /how-you-gain-proof/ (contrast fix) ---
The Roadmap steps are now a
inside the dark
.section.process.on-dark (previously .process-step divs, whose picked up
#fff from the .on-dark heading rule). `.data-table td:first-child` is the only
rule that sets a td colour and it hard-codes var(--text) (#0A0A18) — near-black
ink on the near-black --dark (#07071A) panel, i.e. an invisible Step column.
The sibling .on-dark overrides cover thead/borders/striping but miss this one.
(0,3,1) beats the (0,2,1) base rule, so order is not load-bearing. */
:is(.on-dark,.section.dark,.process,.cta-dark) :is(.data-table,.compare-table):not(.roadmap-table) td:first-child{color:#fff}
/* ...except the Roadmap table, which the final revision moves onto a white field inside the
same black section, so its Step column goes back to black ink. */
/* --- Page: /how-you-gain-proof/ --- Roadmap section closing paragraph.
The client's copy places this paragraph AFTER the step table, closing the
Roadmap section and leading into "What Gets Built". It sits on the .process
dark band, so colour is inherited from the .on-dark rules above; these rules
only give it the same centred 680px measure and 1.08rem size as .section-header p. */
.hygp-roadmap-close{max-width:680px;margin:44px auto 0;text-align:center;font-size:1.08rem}
/* ---------- /the-proof-gap/ — copy strip (client v2) ----------
The client supplied no hero subhead and no sidebar copy for this page, so both were removed.
These rules restore the spacing those elements used to provide; no other page uses them.
The hero dropped .hero-fullscreen (its 88vh min-height left a near-empty band once the
invented subhead went), so .pg-hero must supply its own top padding to clear the
position:fixed header (--header-total 108px) — .hero-pad-sm's 96px alone let the H1
slide under it on mobile. */
.pg-hero{padding:168px 0 92px}
@media(max-width:767px){
.pg-hero{padding:142px 0 64px}
}
.pg-hero .hero-content h1{margin-bottom:30px}
.pg-lede{max-width:820px;margin:0 auto}
.pg-lede p{font-size:1.12rem}
/* ---------- /about/ — copy strip (client v2) ----------
v2 supplies no hero subhead, no section subheads and no card CTA labels for About,
so those were removed. These rules re-tidy the spacing the removed elements used to
provide. Scoped to body.page-about; no other page is affected. */
.page-about .section-header h2:only-child{margin-bottom:0}
.page-about .cat-card p:last-child{margin-bottom:0}
/* --- Page: /proof-gore-tex/ (strip to the client's v2 copy) ---
v2 supplies no eyebrow and no hero subhead for this page, so the invented ones
were removed and the H1 now carries the hero band on its own. The .hero-sub that
used to sit under the headline contributed the 30px of air before .hero-actions;
with it gone the CTA crowds the H1 at .hero-dark h1's 18px. Restore that rhythm
and hold the headline to a display measure so it breaks across two lines rather
than running as one thin line across the 760px .hero-content. Scoped to .gt-hero,
which exists only on this page. */
.gt-hero h1{margin-bottom:34px;max-width:15ch}
@media(max-width:767px){
.gt-hero h1{margin-bottom:26px;max-width:none}
}
/* This page now carries exactly two photos, and the hero backdrop is the same
rain-room shot that appears as a full figure in the body a screen below. At the
base brightness(.62) the truck and its "KNOW WHAT'S INSIDE" wrap stay legible
through the ::before scrim's thin right edge (.55 alpha), so the identical photo
reads twice. Sink it to a texture: the body figure stays the only place the
photo is actually presented. Scoped to .gt-hero-band; this page only. */
.gt-hero-band .hero-dark-bg{filter:saturate(.32) brightness(.34)}
/* ============================================================
AVAS page (/avas/) — copy-strip tidy.
The page now publishes only the client's v2 copy, so several
sections lost invented scaffolding. These rules keep the
remaining markup composed. Scoped to /avas/ only.
============================================================ */
/* Hero: the client supplied no subhead and no eyebrow for this page, so the
hero is now just the H1 + the client's two CTA labels. .hero-fullscreen's
88vh would leave a near-empty screen, so the hero drops to .hero-pad-sm.
But the header is fixed and overlays the hero (--header-total:108px), and
.hero-pad-sm's 120px top left the H1 with 11px of clearance — it read as if
it were colliding with the nav. Supply our own top padding to clear the
header properly, matching /the-proof-gap/'s .pg-hero rhythm, and give the
lone H1 breathing room above the CTAs. */
.avas-hero{padding:168px 0 92px}
.avas-hero h1{margin-bottom:30px}
@media(max-width:767px){
.avas-hero{padding:142px 0 64px}
}
/* "Why SEO Alone Isn't Enough" is a heading + one paragraph — all the copy the
client wrote for it. Rendered as a centred statement band; it is the last
thing in its section, so drop .section-header's 48px bottom margin. */
.section-header.avas-statement{margin-bottom:0}
/* "How AVAS Works": the client supplies five UNLABELLED paragraphs, so the
invented step titles are gone and .process-step is now number + text.
Pull the paragraph up under the numeral to close the gap the h3 left. */
.process-grid.cols-5 .process-step .process-num{margin-bottom:14px}
/* The Findings definitions: the client asked for a single vertical stack in
which "each definition should use the full available width" — so the stack
spans the container instead of the earlier 820px measure. */
.avas-findings-defs{max-width:none}
/* "What Makes AVAS Different" + "What You Get" are two equal-weight content
cards, not the main+sidebar pairing .detail-grid's 2fr/1fr was built for —
and the client's "What You Get" is the longer of the two. Even the columns,
and drop the trailing margin now that each column holds a single card. */
@media(min-width:1024px){
.detail-grid.avas-two-col{grid-template-columns:1fr 1fr}
}
.detail-grid.avas-two-col .detail-card{margin-bottom:0;height:100%}
/* footer form band — the pre-footer lead-capture band injected by renderFooterForm().
The band publishes only the client's sanctioned "Request an AVAS™ Report" label, so there is
no editorial column to sit beside the form: the old .cta-form-grid two-column split would
strand a lone heading next to a tall form. Single centered column instead — heading titles
the band, form directly below, both capped to the form's comfortable reading measure. */
.footer-cta-band .ffb-inner{max-width:660px;margin:0 auto}
.footer-cta-band .ffb-title{color:var(--text);text-align:center;margin-bottom:28px}
/* ============================================================
Research & Resources page (/research-resources/) — hero fit.
The hero holds only the H1 (the client's v2 copy for this page
supplies no eyebrow, subhead or hero CTA), so .hero-fullscreen's
min-height:88vh left a near-empty band before the downloads.
Dropped it; the hero now sizes to its content. The header is
position:fixed and overlays the hero (body gets
.has-transparent-header, --header-total:108px), so this hero must
supply its own top padding to clear it — .hero-pad-sm's 120px/96px
alone leaves the H1 grazing the nav. Matches the .pg-hero /
.avas-hero rhythm. Scoped to .rr-hero; this page only.
============================================================ */
.rr-hero{padding:168px 0 92px}
@media(max-width:767px){
.rr-hero{padding:142px 0 64px}
}
/* ============================================================
/how-you-gain-proof/ — hero sizing.
The client's v2 copy for this page supplies no eyebrow and no hero
subhead, so the invented ones were removed and the hero is now just
the H1 plus the client's two CTA labels. .hero-fullscreen's 88vh
min-height left a near-empty band around that content, so the hero
drops to .hero-pad-sm and sizes to what it holds. The header is
position:fixed and overlays the hero (--header-total:108px), so
supply our own top padding to clear it — .hero-pad-sm's 120px/96px
alone leaves the H1 grazing the nav. Matches the .pg-hero /
.avas-hero / .rr-hero rhythm. Scoped to .hygp-hero; this page only. */
.hygp-hero{padding:168px 0 92px}
.hygp-hero h1{margin-bottom:30px}
@media(max-width:767px){
.hygp-hero{padding:142px 0 64px}
}
/* ---------- /proof-gore-tex/ — hero band (client v2 copy strip) ----------
v2 gives this page a headline and six narrative beats: no eyebrow, no hero
subhead. The hero is therefore just the H1 + the client's own CTA label, and
.hero-fullscreen's 88vh min-height stretched that to a 792px near-empty band
at >=768px. The hero drops to .hero-pad-sm, matching /the-proof-gap/'s
.pg-hero and /avas/'s .avas-hero. Those pages then supply their own top
padding because the header is position:fixed and overlays the hero
(--header-total 108px) — .hero-fullscreen's mobile 110px left this H1 exactly
1px below the header, reading as a collision. Same 168/142 rhythm as the two
sibling stripped heroes. Scoped to .gt-hero-band; this page only. */
.gt-hero-band{padding:168px 0 92px}
@media(max-width:767px){
.gt-hero-band{padding:142px 0 64px}
}
/* ============================================================
Page: /about/ — header clearance + founder photo aspect
============================================================ */
/* Hero: the client supplies no eyebrow and no hero subhead for About, so the hero
is just the H1 ("About", the page name) plus the client's two CTA labels. The
header is position:fixed and overlays the hero (--header-total:108px), and
.hero-pad-sm's 120px/96px top padding alone leaves the H1 grazing the nav —
at 390px its 96px sits ABOVE the 108px header bottom, so "About" renders behind
the header. About was the last page still on bare .hero-pad-sm; give it the same
clearance and rhythm as .pg-hero / .avas-hero / .rr-hero / .hygp-hero.
Scoped to .ab-hero; this page only. */
.ab-hero{padding:168px 0 92px}
.ab-hero h1{margin-bottom:30px}
@media(max-width:767px){
.ab-hero{padding:142px 0 64px}
}
/* Founder photo: images/jason-vargas.jpg is the client's real 800x800 bio photo, so
it must render square and uncropped. The rule above (.split-media img.about-founder-photo)
already beats .split-media img's 4/3 crop, but the sitewide guard
`main img:not(…){max-height:560px;object-fit:cover}` still applies — at (0,6,2) no
practical page-scoped selector out-specifies it. Between 768px and 1023px .split is
still one column, so the photo is 720px wide; aspect-ratio:1/1 asks for 720px of
height, the 560px guard clamps it, and object-fit:cover crops Jason's face to a
720x560 landscape. Rather than fight the guard, cap the photo's WIDTH at that same
560px: the square then always fits inside the clamp and stays uncropped at every
breakpoint, centred in its column. */
.split-media img.about-founder-photo{display:block;max-width:560px;margin-inline:auto}
/* AVAS page (/avas/) — "The Findings": keep the four statistics on ONE horizontal row.
copy_v2: "Display the four statistics in one horizontal row." The shared .stat-grid is
`flex-wrap:wrap` with `flex:0 1 160px` and a 40px column gap, so four items need
4x160+3x40 = 760px. The container is only 720px at 768px wide, so the row silently broke
into 2+2 from 768px up to ~1180px. Scoped to .avas-findings so Home's own reuse of this
same block ("Built from the Operator's Seat") is untouched.
`flex-wrap:nowrap` alone fixes it: the items shrink below the 160px basis only in the
narrow band where they must, and Home's 30px/40px gap is left untouched so the block keeps
the client's "Keep the same dark background, white type, dimensions, spacing" at desktop.
NOT applied below 768px: measured at 390px, four columns are 73px wide and the client's
own numbers overflow them ("1,500+" needs 95px). Since the type scale must stay identical
to Home's, the numbers cannot be shrunk to compensate — so the phone keeps the 2x2 wrap,
which renders every number intact. */
@media(min-width:768px){
.avas-findings .stat-grid{flex-wrap:nowrap}
.avas-findings .stat-grid .stat-item{min-width:0}
}
/* Downloads band: the client's v2 button labels for this page are long
("Download New Front Door to the Internet (PDF)"). .btn is white-space:nowrap
above 479px, so that label sets each card's min-content width (~410px). Grid
items default to min-width:auto, and .grid-2 goes 2-up at 640px — so between
640px and ~1000px the two cards cannot shrink into their 1fr tracks and the
whole page scrolled sideways (measured: doc 862px vs 768px viewport).
Let the tracks shrink, and let the label wrap — the same treatment .btn
already gets at <=479px. Above ~1024px the label still fits on one line, so
the desktop rendering is unchanged. Scoped to .rr-downloads; this page only. */
.rr-downloads > .cat-card{min-width:0}
.rr-downloads .btn{white-space:normal;text-align:center}
/* Below 768px the four items fall back to a 2x2 grid rather than the shared .stat-grid's
flex wrap. Reason: the 160px flex basis + gap needs 334px, so at 360px (a common phone)
the shared rule fits only ONE item per row and the block degrades into a 4-row vertical
list. A fixed 2x2 keeps the statistics reading as a row-based unit at every phone width
and leaves every number intact. Scoped to .avas-findings; Home's copy of the block is
unaffected. */
@media(max-width:767px){
.avas-findings .stat-grid{display:grid;grid-template-columns:1fr 1fr;justify-content:stretch}
.avas-findings .stat-grid .stat-item{flex:none;min-width:0}
}
/* ---- Post-v2 deploy-gate fixes (footer legibility, FAB/footer overlap, mobile topbar) ---- */
/* Footer
was inheriting the dark --text-secondary via the global p{} rule → dark-on-dark. */
.site-footer p,.site-footer .footer-about{color:rgba(255,255,255,.72)}
/* FAB tucks away while the footer is in view so it never sits over the legal links. */
.quote-fab{transition:transform .2s,box-shadow .2s,opacity .25s ease,visibility .25s ease}
.quote-fab.fab-tucked{opacity:0;visibility:hidden;transform:translateY(24px);pointer-events:none;animation:none}
/* Utility topbar: keep the phone on one line and shed the long email before it clips (<480px). */
.topbar a{white-space:nowrap}
@media(max-width:479px){.topbar-right a[href^="mailto"]{display:none}}
/* ==========================================================================
V3 DESIGN SYSTEM LAYER — "Evidence Communications — Website Content & Build Guide"
Everything below implements the sitewide rules from that document:
left-justified editorial layout, two weights, black/silver/graphite with red as
single-point emphasis, minimal white header, print-style square corners.
========================================================================== */
/* ---- All copy left-justified (build guide: "All copy left-justified") ---- */
.section-header,
.section-header.label-below{max-width:760px;margin:0 0 48px;text-align:left;align-items:flex-start}
.cta-content{text-align:left;margin:0;max-width:760px}
.stat-grid>*,.stat-item{text-align:left}
.brand-marquee .bm-label{text-align:left}
.hygp-roadmap-close{margin-left:0;text-align:left}
.footer-cta-band .ffb-inner{margin:0}
.footer-cta-band .ffb-title{text-align:left}
.hero-content.center{margin:0;text-align:left}
/* Thin editorial rule under section headings — black on light, white on dark. Never red:
red is reserved for one point of emphasis per section, not repeated furniture. */
.section-header h2::after{left:0;transform:none;width:44px;height:2px;border-radius:0;background:var(--primary);opacity:1}
.section.dark .section-header h2::after,.process .section-header h2::after,
.on-dark .section-header h2::after,.cta-dark .section-header h2::after{background:#fff}
/* ---- Type: heavy + tight-tracked, two weights only ---- */
h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:-.028em}
h1{letter-spacing:-.035em}
strong,b{font-weight:700}
em,i{font-style:italic} /* italic is the sanctioned secondary emphasis tool */
.stat-num,.ht-num,.bf-num,.display-xl,.display-lg{letter-spacing:-.035em}
/* ---- Inline prose links: black with an underline. Never blue, never red. ---- */
.split-body p a,.pg-lede p a,.detail-card p a,.section-header p a,
.rr-body p a,.gt-body p a,.prose a,.faq-answer-inner a{
color:var(--primary);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.split-body p a:hover,.prose a:hover,.faq-answer-inner a:hover{text-decoration-thickness:2px}
/* ---- Statistics: large, bold, black. Weight comes from scale, not colour. ---- */
.stat-num .text-accent,.hero-ticker .ht-num .text-accent{color:inherit}
.on-dark .stat-num,.section.dark .stat-num{color:#fff}
/* ---- Hero photo rotation (Ken Burns) ---------------------------------------
Six stills, slow pan/zoom, crossfaded. Desaturated and darkened so the hero
copy stays legible over every frame. Replaces the old montage video. --- */
.hero-kb{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--dark)}
.hero-kb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
filter:saturate(.3) brightness(.62) contrast(1.06);
animation:kb-cycle 42s linear infinite both;animation-delay:calc(var(--i) * 7s);will-change:transform,opacity}
@keyframes kb-cycle{
0% {opacity:0;transform:scale(1.04) translate3d(0,0,0)}
1.8% {opacity:1}
15% {opacity:1}
16.7% {opacity:0;transform:scale(1.13) translate3d(-1.1%,-.9%,0)}
100% {opacity:0;transform:scale(1.13) translate3d(-1.1%,-.9%,0)}
}
.hero-kb img:nth-child(even){animation-name:kb-cycle-alt}
@keyframes kb-cycle-alt{
0% {opacity:0;transform:scale(1.13) translate3d(1%,.8%,0)}
1.8% {opacity:1}
15% {opacity:1}
16.7% {opacity:0;transform:scale(1.04) translate3d(0,0,0)}
100% {opacity:0;transform:scale(1.04) translate3d(0,0,0)}
}
@media(prefers-reduced-motion:reduce){
.hero-kb img{animation:none;opacity:0;transform:none}
.hero-kb img:first-child{opacity:1}
}
/* ---- Client logo strip: ONE continuous loop, all logos at a consistent scale ----
Single track carrying the 12 logos twice. The trailing gap makes the -50% wrap land
exactly on the duplicate of item 1, so there is no seam and no pair of logos
colliding at the join (the Lego / General Motors overlap). --- */
.brand-marquee{padding:34px 0;background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.brand-marquee .bm-label{color:var(--graphite);margin-bottom:20px}
.brand-strip{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.brand-track{--bm-gap:64px;gap:var(--bm-gap);padding-right:var(--bm-gap);animation-duration:56s}
.brand-item{height:auto;min-width:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;
width:120px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* One optical box for every mark: 120 x 44. object-fit:contain does the rest, so a wide
wordmark and a square roundel carry the same visual weight instead of the square
logos rendering twice the size of the wordmarks. */
.brand-item img{height:44px;width:120px;max-width:120px;object-fit:contain;object-position:center;
filter:grayscale(1);opacity:.62;transition:opacity .25s,filter .25s;transform:none}
.brand-item:hover img{opacity:1;filter:grayscale(1);transform:none}
/* Square/roundel marks read heavier than wordmarks at the same box height — trim them so the
whole strip sits on one optical baseline. */
.brand-item img[src*="lego"],.brand-item img[src*="general-motors"],
.brand-item img[src*="gore-tex"],.brand-item img[src*="playstation"]{height:36px}
/* ---- Buttons: red = the one primary action per section; black = secondary ---- */
.btn{border-radius:0;letter-spacing:.01em}
.btn-dark{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-dark:hover{background:#000;border-color:#000;color:#fff}
.btn-outline-dark{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-outline-dark:hover{background:var(--primary);color:#fff}
.btn-outline{border-color:rgba(255,255,255,.6)}
/* ---- Header: minimal, white, no utility bar (applies to every page) ---- */
.site-header{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--border)}
.site-header .topbar{display:none}
.header-inner{height:var(--header-h)}
.nav-link{border-radius:0;font-weight:400}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--primary);background:none}
.nav-link[aria-current="page"]{font-weight:700}
.nav-link[aria-current="page"]::after{transform:scaleX(1)}
.header-phone{display:none} /* the phone number lives in the footer; the header keeps one action */
/* ---- Footer (build guide): black background, no CTA button, no tagline line,
social icons in graphite. ---- */
.site-footer .footer-cta{display:none}
.site-footer .footer-about{display:none}
.footer-social a{border-radius:0;background:none;color:var(--silver)}
.footer-social a:hover{background:none;color:#fff}
.footer-social a svg{color:var(--graphite)}
.footer-social a:hover svg{color:#fff}
.footer-bottom-inner{align-items:flex-start;text-align:left}
@media(min-width:768px){.footer-bottom-inner{flex-direction:row;justify-content:space-between;align-items:center}}
/* ---- Cards: flat, square, silver-ruled. No lavender tint, no coloured squares. ---- */
.cat-card{background:var(--bg);border:1px solid var(--border);border-radius:0}
.card:hover,.cat-card:hover,.img-card:hover,.retention-card:hover,.catalog-card:hover{
box-shadow:none;border-color:var(--primary)}
.cat-card h3{font-weight:700;color:var(--text)}
.cat-card .cc-foot{color:var(--primary);font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.cat-card .cc-foot:hover{text-decoration-thickness:2px}
.cat-card .cc-foot svg{color:var(--graphite)}
/* .cards-plain — short cards with no icon and no rule, per the AVAS "What AVAS Is" note. */
.cards-plain .cat-card{border:0;padding-left:0;padding-right:0;background:none}
.cards-plain .cat-card .cc-icon{display:none}
.cards-plain .cat-card:hover{border-color:transparent}
/* ---- Plain black round bullets (How You Gain Proof: "plain black round bullet,
not a checkmark or dash") ---- */
.bullet-list{display:flex;flex-direction:column;gap:14px;list-style:none;margin:20px 0 26px}
.bullet-list li{position:relative;padding-left:24px;color:var(--text-secondary)}
.bullet-list li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--primary)}
.bullet-list li::after{content:none}
.on-dark .bullet-list li::before,.section.dark .bullet-list li::before{background:#fff}
.bullet-list li strong,.bullet-list li b{color:var(--text);font-weight:700}
/* ---- Editorial multi-column text grid (build guide: "editorial multi-column text
grids (two or three columns), closer to a print layout") ---- */
.col-grid{display:grid;gap:40px}
.col-grid-2{grid-template-columns:1fr}
.col-grid-3{grid-template-columns:1fr}
@media(min-width:760px){.col-grid-2{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.col-grid-3{grid-template-columns:repeat(3,1fr)}}
.col-grid > * > h3{font-size:1.06rem;font-weight:700;margin-bottom:6px}
.col-grid p{margin-bottom:12px}
/* ---- Plain track-record columns (About): column header bold black, stat headline
bold black, body paragraph regular. No card, no icon tile, no colour. ---- */
.track-cols{border-top:2px solid var(--primary);padding-top:0}
.track-cols .tc-col{padding-top:26px;border-top:1px solid var(--border)}
@media(min-width:900px){
.track-cols .tc-col{border-top:0;padding-top:26px;padding-right:32px}
.track-cols .tc-col + .tc-col{border-left:1px solid var(--border);padding-left:32px}
}
.track-cols .tc-org{font-size:1.18rem;font-weight:700;color:var(--text);letter-spacing:-.02em;margin-bottom:14px}
.track-cols .tc-stat{font-size:1.9rem;font-weight:700;color:var(--text);letter-spacing:-.035em;line-height:1.05;margin-bottom:12px}
.track-cols .tc-body{font-size:.98rem;font-weight:400;color:var(--text-secondary);line-height:1.7;margin:0}
.track-lead{font-size:1.9rem;font-weight:700;letter-spacing:-.035em;color:var(--text);margin-bottom:6px}
.track-lead-label{font-size:.95rem;color:var(--text-secondary);margin-bottom:40px}
/* ---- Surfaces: silver, never lavender ---- */
.section.surface,.footer-cta-band{background:var(--surface)}
.data-table tbody tr:nth-child(even),.compare-table tbody tr:nth-child(even){background:var(--surface)}
.data-table thead th,.compare-table thead th{background:var(--surface-2)}
.data-table .td-yes{color:var(--text)}
.detail-card,.form-success,.form-check,.modal-card{border-radius:0}
.form-control{border-radius:0}
.form-success{background:var(--surface);border-left:4px solid var(--primary)}
/* ---- The 3.4x badge: the one red figure in its section ---- */
.split-media .badge-float{border-radius:0;border:1px solid var(--border);box-shadow:none}
/* ---- Cited statistics are never hyperlinked (build guide, sitewide). Source is
attributed by name in the copy instead. ---- */
.stat-source{display:block;font-size:.8rem;color:var(--text-muted);margin-top:6px}
.on-dark .stat-source,.hero-dark .stat-source{color:rgba(255,255,255,.6)}
/* ---- What Proof Looks Like (Gore-Tex) hero ---------------------------------
The tour-truck photo was being cover-cropped down its vertical centre, so only the
roof and the mountain wrap showed. The truck body sits at roughly 40–96% of the
frame height, so the crop is biased low and the band is given enough height for the
whole vehicle graphic to read. Tint is the sitewide neutral black — no olive. */
.gt-hero-band{min-height:62vh;display:flex;align-items:center}
.gt-hero-band .hero-dark-bg{object-position:50% 72%;filter:saturate(.28) brightness(.44)}
@media(max-width:767px){.gt-hero-band{min-height:52vh}}
/* Three short stacked lines: "What Does" / "Proof" / "Look Like?" */
.gt-h1{display:flex;flex-direction:column;line-height:1.02}
.gt-h1 span{display:block}
/* ---- How You Gain Proof: STEP / WHAT HAPPENS roadmap table ----
Black background, white text, red accent line — the one point of red in the section. */
.roadmap-table{border-top:3px solid var(--accent)}
.roadmap-table thead th{background:transparent;border-bottom:1px solid rgba(255,255,255,.28)}
/* ---- Warm-to-cool colour pass for photography shot under warm light, so it sits in the
black / silver / graphite system instead of fighting it. ---- */
.img-cool{filter:saturate(.34) contrast(1.06) brightness(.97)}
/* ==========================================================================
V3 — polish pass after visual review
========================================================================== */
/* Hero scrim was crushing the lower half of the photo into flat black. Keep the copy
legible but let the photograph read as a photograph across the whole band. */
.hero-dark::before{background:linear-gradient(100deg,rgba(13,13,13,.86) 0%,rgba(13,13,13,.62) 46%,rgba(13,13,13,.34) 100%)}
.hero-kb img{filter:saturate(.3) brightness(.72) contrast(1.06)}
/* A short bottom fade keeps the hero statistics readable over a bright frame. */
.hero-fullscreen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;
pointer-events:none;background:linear-gradient(to top,rgba(13,13,13,.72),transparent)}
.hero-dark .container{z-index:2}
/* Square/roundel marks need a touch more height than a diamond-tight 36px to match the
optical weight of the wordmarks beside them. */
.brand-item img[src*="lego"],.brand-item img[src*="general-motors"],
.brand-item img[src*="gore-tex"],.brand-item img[src*="playstation"]{height:40px}
/* The 3.4x callout was wrapping to four cramped lines inside a 130px label. */
.split-media .badge-float{padding:18px 24px;gap:18px;background:#fff}
.split-media .badge-float .bf-label{max-width:190px;line-height:1.45}
/* Gore-Tex narrative rule: silver, not red. The red on this page is the word "Proof" in
the hero — a vertical accent bar would be red doing a second, decorative job. */
.gt-narrative{border-left:3px solid var(--silver)}
.gt-figure img{border-radius:0;border:1px solid rgba(255,255,255,.14)}
/* Let the tour-truck hero read at a normal exposure — it is the evidence on this page. */
.gt-hero-band .hero-dark-bg{filter:saturate(.3) brightness(.58)}
/* Footer wordmark: no baked-in tagline lockup, so it needs no chip padding. */
.footer-logo{max-width:260px;margin-bottom:22px}
/* The pre-footer lead form band is left-aligned like the rest of the page. */
.footer-cta-band .cfg-form{max-width:660px}
/* Left-justify the editorial lede blocks that were still centre-constrained. */
.pg-lede,.hygp-outcomes,.gt-case{margin-left:0;margin-right:0}
/* Push the warm pipe-inspection frame fully into the black / silver / graphite system. */
.img-cool{filter:grayscale(.84) contrast(1.06) brightness(.98)}
/* Download cards: buttons align on a common baseline instead of floating mid-card. */
.rr-downloads > .cat-card{display:flex;flex-direction:column}
.rr-downloads > .cat-card .btn{margin-top:auto}
/* A wrapped two-line eyebrow should not render as a stadium lozenge on narrow screens. */
@media(max-width:520px){.hero-label{border-radius:2px}}
/* Every hero photograph gets the same treatment as the home rotation: desaturated toward
cool and darkened, so no single frame (e.g. the teal glass on the Contact skyline)
introduces a colour outside the black / silver / graphite system. */
.hero-dark-bg{filter:saturate(.32) brightness(.6) contrast(1.04)}
/* ==========================================================================
FINAL REVISION — Website Revision Instructions + Addendum 1
Every rule below implements a numbered instruction from the client's revision
documents. Section headings quote the instruction being satisfied.
========================================================================== */
/* ---- SITEWIDE: header logo "modestly" larger, proportions untouched --------
The lockup is 861x56 — a 15.4:1 wordmark — so its displayed size is governed by WIDTH.
The old rule capped it at 200px wide inside a 42px-tall box, which just letterboxed it:
raising `height` changed nothing on screen. These caps grow the mark ~20% and let
`height:auto` hold the proportions exactly. Values stay inside the header fit-guard's
budget at every width, so the desktop nav never collapses to a hamburger. */
.site-header .logo-img{height:auto;width:auto;max-width:250px;max-height:46px}
.site-header.header-tight .logo-img{max-width:232px}
@media(min-width:1024px) and (max-width:1279px){.site-header .logo-img,
.site-header.header-tight .logo-img{max-width:196px}}
@media(max-width:767px){.site-header .logo-img{max-width:216px}}
/* ---- SITEWIDE: footer — the complete supplied lockup WITH the tagline, then the
telephone icon + number directly beneath it on one conventional tel: link. --- */
.footer-logo.footer-logo-tagline{max-width:290px;margin-bottom:16px}
.footer-phone-line{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;
font-size:1rem;font-weight:700;color:#fff;letter-spacing:.01em}
.footer-phone-line svg{width:17px;height:17px;color:var(--silver);flex-shrink:0}
.footer-phone-line:hover{color:var(--accent)}
.footer-phone-line:hover svg{color:var(--accent)}
/* ---- SITEWIDE: the approved paragraph under the final AVAS CTA -------------- */
.ffb-note{margin:18px 0 0;font-size:.86rem;line-height:1.65;color:var(--text-secondary);
border-top:1px solid var(--border);padding-top:16px}
/* ---- HOME: Statistics band moves from black to white. Black numbers, black copy,
red only as the hairline rule above each figure. --------------------- */
.stat-band{background:#fff;padding:64px 0;border-bottom:1px solid var(--border)}
.stat-band .sb-grid{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:760px){.stat-band .sb-grid{grid-template-columns:1fr 1fr;gap:64px}}
.stat-band .sb-item{border-top:3px solid var(--accent);padding-top:22px}
.stat-band .sb-num{font-family:var(--font-display);font-size:clamp(3rem,7vw,4.6rem);font-weight:700;
line-height:1;letter-spacing:-.04em;color:var(--text);margin-bottom:14px}
.stat-band .sb-label{font-size:1.02rem;line-height:1.6;color:var(--text);max-width:46ch;margin:0}
.stat-band .sb-source{font-size:.82rem;color:var(--text-muted);margin:10px 0 0}
@media(max-width:767px){.stat-band{padding:46px 0}}
/* ---- HOME: "Experience Includes" — all nine marks resized to one optical scale.
Aug 19 revision. The previous pass tuned heights by eye and drifted badly: with a
120px-wide box and object-fit:contain, the wide wordmarks were WIDTH-constrained and
collapsed (Bridgestone rendered ~15px tall) while the two square marks stayed at their
full set height (Gore-Tex 62px) — a 4x spread that read as random sizing.
Fixed here by normalising on optical AREA rather than height: each mark's height is
set to k / ratio^0.42 (k≈54, ratio = the source artwork's width:height), which lands
every logo on roughly the same amount of ink inside one uniform 200x56 cell. --------- */
.brand-item{width:200px;height:64px}
.brand-item img{width:auto;max-width:100%;max-height:100%;object-fit:contain}
/* square marks (1:1) — set slightly under the area target, since a solid roundel reads
heavier than a wordmark that fills the same bounding box. */
.brand-item img[src*="gore-tex"],
.brand-item img[src*="general-motors"]{height:56px}
/* oval (2.8:1) */
.brand-item img[src*="ford"]{height:35px}
/* wordmarks, narrow → wide (4.2:1 … 8.8:1) */
.brand-item img[src*="jaguar"],
.brand-item img[src*="sac-wireless"]{height:28px}
.brand-item img[src*="kolcraft"]{height:25px}
.brand-item img[src*="kimberly-clark"]{height:21px}
.brand-item img[src*="bridgestone"],
.brand-item img[src*="fabtech-igm"]{height:20px}
@media(max-width:767px){
.brand-item{width:170px;height:54px}
.brand-item img[src*="gore-tex"],
.brand-item img[src*="general-motors"]{height:46px}
.brand-item img[src*="ford"]{height:29px}
.brand-item img[src*="jaguar"],
.brand-item img[src*="sac-wireless"]{height:23px}
.brand-item img[src*="kolcraft"]{height:21px}
.brand-item img[src*="kimberly-clark"]{height:18px}
.brand-item img[src*="bridgestone"],
.brand-item img[src*="fabtech-igm"]{height:17px}
}
/* ---- HOME: "How Evidence Communications Works" — gray becomes black, white
headings and body copy, and the three cards stay white with black text. --- */
.how-ec-works{background:var(--dark)}
.how-ec-works .cat-card{background:#fff;border-color:#fff}
.how-ec-works .cat-card h3{color:var(--text)}
.how-ec-works .cat-card p{color:var(--text-secondary)}
.how-ec-works .cat-card .cc-icon svg{color:var(--graphite)}
.how-ec-works .cat-card .cc-foot{color:var(--text)}
.how-ec-works .cat-card:hover{border-color:var(--accent)}
/* ---- HOME + THE PROOF GAP: publication feature — the supplied cover shown whole,
uncropped, in its own proportions, beside the description and button. --- */
.pub-feature-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
@media(min-width:820px){.pub-feature-grid{grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:56px}}
.pub-cover img{display:block;width:100%;height:auto;max-width:280px;max-height:none;
object-fit:contain;border:1px solid rgba(255,255,255,.22);background:#fff}
.pub-body .eyebrow{margin-bottom:14px}
.pub-body h2{margin-bottom:14px}
@media(max-width:819px){.pub-cover img{max-width:210px}}
/* ---- RESEARCH & RESOURCES: two-tier hierarchy kept. The two featured publications
show real cover art at a readable, proportional size (addendum items 4 + 6);
the three supporting citations stay a smaller secondary row. ---------- */
.pub-cards{display:grid;grid-template-columns:1fr;gap:34px}
@media(min-width:900px){.pub-cards{grid-template-columns:1fr 1fr;gap:40px}}
.pub-card{display:grid;grid-template-columns:1fr;gap:24px;align-items:start;
border:1px solid var(--border);background:#fff;padding:28px}
@media(min-width:560px){.pub-card{grid-template-columns:minmax(0,168px) minmax(0,1fr);gap:26px}}
.pub-card-cover{display:block}
.pub-card-cover img{display:block;width:100%;height:auto;max-width:168px;max-height:none;
object-fit:contain;border:1px solid var(--border)}
.pub-card-cover:hover img{border-color:var(--accent)}
@media(max-width:559px){.pub-card-cover img{max-width:150px}}
.pub-card-body h3,.pub-card-body h2{font-size:1.16rem;line-height:1.28;margin-bottom:8px}
.pub-card-body .pub-subtitle{font-size:.95rem;font-weight:700;color:var(--text);
line-height:1.45;margin-bottom:8px}
.pub-card-body .pub-attrib{font-size:.8rem;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--text-muted);margin-bottom:14px}
.pub-card-body p{font-size:.93rem;margin-bottom:16px}
.pub-card-body .btn{margin-top:4px}
/* Supporting research: a clearly smaller secondary row, not a third featured card. */
.rr-supporting .section-header h2{font-size:1.5rem}
.rr-supporting .cat-card{padding:24px 22px}
.rr-supporting .cat-card h3{font-size:1.02rem;line-height:1.35}
.rr-supporting .cat-card p{font-size:.88rem}
/* ---- AVAS: the page's first appearance carries the full name --------------- */
.avas-h1{display:flex;flex-direction:column;gap:8px}
.avas-h1 .avas-h1-expand{font-size:clamp(1.05rem,2.4vw,1.5rem);font-weight:400;
letter-spacing:-.01em;color:rgba(255,255,255,.82)}
/* ---- AVAS: "What Is AVAS?" cards are not clickable, so they must not lift,
slide or tilt. A border change on hover is the whole interaction. ----- */
.cards-plain .cat-card,
.cat-card:not(:has(a)):not(:has(button)){transform:none!important;transition:border-color .2s ease}
.cards-plain .cat-card:hover,
.cat-card:not(:has(a)):not(:has(button)):hover{transform:none!important;box-shadow:none}
/* ---- AVAS: "What You Get" — approved paragraph above the three items, with
breathing room after the third. --------------------------------------- */
.wyg-lede{margin-bottom:22px}
.check-list.wyg-list{margin-bottom:34px}
.check-list.wyg-list li{margin-bottom:4px}
/* ---- HOW YOU GAIN PROOF: the roadmap table sits on a white field inside the black
section — black body text, black header row with white labels, thin rules,
more vertical space, narrow Step column, wide What Happens column. ----- */
.roadmap-wrap{background:#fff;border:1px solid var(--border);margin-top:8px}
/* Every rule here is doubled up on .on-dark, because the surrounding black section's own
table overrides (.on-dark .data-table thead th, …) are more specific than a bare
.roadmap-table selector and would otherwise repaint this white table for a dark band. */
.roadmap-table,.on-dark .roadmap-table{border-top:0;width:100%;border-collapse:collapse;background:#fff}
.roadmap-table thead th,.on-dark .roadmap-table thead th{background:var(--primary);color:#fff;
border-bottom:0;border-bottom-color:transparent;
font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
padding:16px 22px;text-align:left;white-space:nowrap}
.roadmap-table tbody tr,.on-dark .roadmap-table tbody tr,
.roadmap-table tbody tr:nth-child(even),.on-dark .roadmap-table tbody tr:nth-child(even){background:#fff}
.roadmap-table tbody tr + tr td,.on-dark .roadmap-table tbody tr + tr td{border-top:1px solid var(--border)}
.roadmap-table tbody td,.on-dark .roadmap-table tbody td{padding:24px 22px;color:var(--text);
vertical-align:top;font-size:.98rem;line-height:1.7;border-bottom:0;border-bottom-color:transparent}
.roadmap-table .rt-step,.on-dark .roadmap-table td.rt-step{width:26%;font-weight:700;
letter-spacing:-.01em;color:var(--text)}
.roadmap-table .rt-what,.on-dark .roadmap-table td.rt-what{width:74%;color:var(--text-secondary)}
/* Mobile: stacked step cards, which read better than a squeezed two-column table. */
@media(max-width:719px){
.roadmap-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.roadmap-table,.roadmap-table tbody,.roadmap-table tr,.roadmap-table td{display:block;width:auto;min-width:0}
.roadmap-table tbody tr,.on-dark .roadmap-table tbody tr{padding:20px 18px}
.roadmap-table tbody tr + tr{border-top:1px solid var(--border)}
.roadmap-table tbody tr + tr td,.on-dark .roadmap-table tbody tr + tr td{border-top:0}
.roadmap-table tbody td,.on-dark .roadmap-table tbody td{padding:0;width:auto}
.roadmap-table .rt-step,.on-dark .roadmap-table td.rt-step{font-size:1.02rem;margin-bottom:8px;width:auto}
.roadmap-table .rt-what,.on-dark .roadmap-table td.rt-what{width:auto}
.roadmap-table .rt-what::before{content:attr(data-label);display:block;font-size:.7rem;
font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px}
}
/* ---- WHAT PROOF LOOKS LIKE: the client's conclusion line becomes an oversized pull
quote. (The "truck runs smaller" rules that lived here are gone with the second
truck photograph itself — removed in the Aug 19 revision.) ------------- */
.gt-pullquote-band{background:var(--dark);padding:104px 0}
@media(max-width:767px){.gt-pullquote-band{padding:64px 0}}
.gt-pullquote{margin:0;border:0;padding:0}
/* The measure must be set on the element that carries the display size — a ch limit on the
blockquote would be computed against the 16px body size and break to one word per line. */
.gt-pullquote p{font-family:var(--font-display);font-weight:700;color:#fff;
font-size:clamp(1.9rem,5.2vw,3.6rem);line-height:1.14;letter-spacing:-.03em;margin:0;
max-width:17em;text-wrap:balance}
.gt-pullquote p .hl{color:var(--accent)}
/* ---- ABOUT: track-record columns now carry a role line under the company ---- */
.track-cols .tc-role{font-size:1.05rem;font-weight:700;color:var(--text);
letter-spacing:-.01em;line-height:1.35;margin-bottom:12px}
/* ---- CONTACT: the Chicago skyline is removed. No replacement photography has been
approved, so the hero is the sanctioned fallback — solid black, oversized
white Helvetica, one restrained red accent. --------------------------- */
.contact-hero-solid{background:var(--dark);padding:150px 0 110px}
.contact-hero-solid::before,.contact-hero-solid::after{content:none}
.contact-hero-solid h1{font-size:clamp(3.2rem,9vw,6.4rem);letter-spacing:-.045em;line-height:1.02}
.contact-hero-solid h1 .hl{color:var(--accent)}
/* Measured so the closing word never lands on a line of its own. */
.contact-hero-solid .hero-sub{max-width:56ch;text-wrap:pretty}
.contact-hero-solid .hero-loc{margin:0;font-size:.95rem;color:rgba(255,255,255,.7)}
@media(max-width:767px){.contact-hero-solid{padding:110px 0 72px}}
/* ==========================================================================
FINAL REVISION — image crops, checked on desktop, tablet and mobile
Instruction: "Check image crops on desktop, tablet, and mobile" / "no heads cut off".
========================================================================== */
/* ---- HOME, scrolling photography ------------------------------------------
Two changes, both asked for by name ("reposition or reduce scale"):
1. The Ken Burns move was a 1.04 -> 1.13 zoom about the centre, so it ate 6% off
every edge — that is what sliced the tops of heads. It is now a much smaller
1.00 -> 1.06 zoom pinned to the TOP of the frame, so the top edge never crops.
2. Each photograph carries its own framing (--ox/--oy) per breakpoint, because the
band goes from 1.8:1 on desktop to 0.56:1 on a phone and the subjects move.
--tox pins the zoom's horizontal anchor to whichever edge the people stand near. */
/* The sitewide `main img { max-height:560px }` guard was also catching the rotating hero
stills, so on any hero taller than 560px the photograph stopped short and the rest of
the band fell back to flat black. The hero rotation is a background layer, not content
imagery — it must fill its band. The guard's selector carries six :not() classes, so
!important is the only way to beat it without weakening the guard for real content. */
.hero-kb img{max-height:none!important;height:100%!important;
object-position:var(--ox,50%) var(--oy,50%);transform-origin:var(--tox,50%) 0%}
@keyframes kb-cycle{
0% {opacity:0;transform:scale(1.00)}
1.8% {opacity:1}
15% {opacity:1}
16.7% {opacity:0;transform:scale(1.06)}
100% {opacity:0;transform:scale(1.06)}
}
@keyframes kb-cycle-alt{
0% {opacity:0;transform:scale(1.06)}
1.8% {opacity:1}
15% {opacity:1}
16.7% {opacity:0;transform:scale(1.00)}
100% {opacity:0;transform:scale(1.00)}
}
/* Desktop framing. --oy keeps every head clear of the top edge. */
.hero-kb img[src*="welder-mid-arc"] {--ox:50%;--oy:0%; --tox:50%}
.hero-kb img[src*="cnc-control-panel"] {--ox:47%;--oy:4%; --tox:50%} /* man + woman at the lathe */
.hero-kb img[src*="robotics-programming"]{--ox:70%;--oy:6%; --tox:80%}
.hero-kb img[src*="welder-mask"] {--ox:50%;--oy:0%; --tox:50%} /* second welding photograph */
.hero-kb img[src*="roll-forming-line"] {--ox:48%;--oy:36%;--tox:50%} /* two women with the executive */
.hero-kb img[src*="machine-pair"] {--ox:92%;--oy:6%; --tox:96%} /* two men bending pipe */
/* No per-photo mobile re-framing: below 1024px the hero stacks into a 3/2 band (the
stills' native ratio), so the desktop anchors above already frame the two 16:9
frames and the rest crop nothing. */
/* Below 1024px the homepage hero STACKS, matching the interior pages (client flag,
Aug 26: stills competing with the copy — and the flat-scrim overlay tried first read
as text-on-black with the photography lost). The slideshow becomes its own vivid
in-flow band under the fixed header — 3/2, the stills' native ratio, so four of the
six frames crop nothing — with the interior bands' filter and no scrim; the copy sits
on solid black beneath it. Desktop keeps the approved overlay + pan/zoom. The rotation
stays an opacity-only crossfade on small screens: the 6% zoom judders on phone GPUs
(sub-pixel scale steps read as shake). */
@media(max-width:1023px){
.hero-dark.hero-fullscreen{min-height:0;display:block;padding:0 0 48px;background:var(--dark)}
.hero-dark.hero-fullscreen::before{content:none}
.hero-dark.hero-fullscreen > .hero-kb{position:relative;inset:auto;width:100%;height:auto;
aspect-ratio:3/2;margin-top:var(--header-total)}
.hero-kb img,.hero-kb img:nth-child(even){animation-name:kb-fade;transform:none;
filter:saturate(.88) brightness(.96) contrast(1.02)}
.hero-dark.hero-fullscreen > .container{padding-top:40px}
}
@keyframes kb-fade{
0% {opacity:0}
1.8% {opacity:1}
15% {opacity:1}
16.7% {opacity:0}
100% {opacity:0}
}
/* ---- Page heroes (static background photographs) --------------------------
These bands are wide and short (about 3.5:1 on desktop), so barely 40% of the
frame height survives. Each is anchored on the head/hands/activity instead of
the geometric centre, then re-anchored horizontally on a phone. */
.pg-hero .hero-dark-bg {object-position:50% 0%} /* head at the top edge, hands just below */
.avas-hero .hero-dark-bg {object-position:50% 8%}
.hygp-hero .hero-dark-bg {object-position:50% 10%}
.ab-hero .hero-dark-bg {object-position:50% 34%}
.rr-hero .hero-dark-bg {object-position:50% 40%}
.gt-hero-band{min-height:70vh}
/* The tour truck occupies y 40-98% of the frame; a bottom-anchored crop in a taller band is
the only framing that keeps the roof AND the wheels. */
.gt-hero-band .hero-dark-bg{object-position:50% 100%}
@media(max-width:767px){
.avas-hero .hero-dark-bg {object-position:88% 8%}
.hygp-hero .hero-dark-bg {object-position:92% 10%}
}
/* Addendum item 6: the Research & Resources hero was magnified to the point where the
photograph stopped reading. A taller band shows more of the frame at less scale. */
.rr-hero{padding:180px 0 116px}
@media(max-width:767px){.rr-hero{padding:142px 0 76px}}
/* ---- THE PROOF GAP hero -----------------------------------------------------
The operator's head sits within the top ~1% of the source frame, so the crop is
already flush to the top and no further headroom exists in the photograph. A
slightly deeper band is what makes the person and the machine read as context
rather than as a sliver. */
.pg-hero{padding:150px 0 104px}
@media(max-width:767px){.pg-hero{padding:118px 0 66px}}
/* ---- RESEARCH: the two featured cards align their buttons on one baseline ---- */
.pub-card-body{display:flex;flex-direction:column;height:100%}
.pub-card-body .btn{margin-top:auto;align-self:flex-start}
/* ---- HOW YOU GAIN PROOF: the two "What Gets Built" tables get the same stacked-card
treatment as the Roadmap table on a phone. At 390px a 440px-min-width table
scrolled sideways with the "Why It Matters" column clipped off screen. ------ */
@media(max-width:719px){
.stack-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.stack-table,.stack-table tbody,.stack-table tr,.stack-table td{display:block;width:auto;min-width:0}
.stack-table tbody tr{padding:16px 0;border-bottom:1px solid var(--border)}
.stack-table tbody tr:last-child{border-bottom:0}
.stack-table tbody td{padding:0;border-bottom:0;width:auto}
.stack-table td.st-a{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:6px}
.stack-table td.st-b{color:var(--text-secondary)}
.stack-table td.st-b::before{content:attr(data-label);display:block;font-size:.7rem;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.stack-table tbody tr:nth-child(even){background:none}
}
/* ==========================================================================
AUG 19 REVISION
========================================================================== */
/* ---- SITEWIDE: page heroes -------------------------------------------------
THE DEFECT: every page hero is a short, very wide band (~3.5:1 on desktop) with the
photograph as an absolutely-positioned .hero-dark-bg behind the copy. Two consequences
the client flagged:
1. Desktop — barely 40% of the frame survives the crop, so each photo reads as a
different, arbitrary sliver: "displaying inconsistently across the site".
2. Mobile — the band gets shorter still while the copy gets taller, so the headline
and button sit ON TOP of the photo: "text overlapping the photo instead of
stacking cleanly".
THE FIX: one shared treatment for every photographic hero.
Desktop — a materially taller band (74vh, matching Home's 88vh / Contact's deep
padding) so a real portion of each photograph is visible, with the copy centred.
Mobile — the hero STACKS: the photograph becomes a normal in-flow block at its own
natural aspect ratio (nothing cropped, the whole scene visible) and the copy sits
below it on solid black. Nothing overlaps anything.
Scoped with :has(> .hero-dark-bg) so it reaches exactly the photographic heroes and
leaves Home (.hero-kb slideshow) and Contact (solid black band) alone. ------------- */
.hero-dark:has(> .hero-dark-bg){min-height:74vh;display:flex;flex-direction:column;justify-content:center}
@media(max-width:767px){
/* The stacked hero: photo block, then copy. The section's own top padding goes to 0 —
the photo's margin-top is what clears the position:fixed header instead. */
.hero-dark:has(> .hero-dark-bg){min-height:0;display:block;padding:0 0 40px;background:var(--dark)}
/* The readability scrim exists only to keep copy legible ON the photo. Nothing sits on
the photo any more, so it must go — otherwise it dims the whole stacked band. */
.hero-dark:has(> .hero-dark-bg)::before{content:none}
/* position:static returns the image to the flow; height:auto + no object-fit means the
ENTIRE frame shows, uncropped, at its own ratio. object-position is inert here, so the
per-page desktop crops below need no mobile counterparts. */
.hero-dark:has(> .hero-dark-bg) > .hero-dark-bg{
position:static;width:100%;height:auto;object-fit:fill;
margin-top:var(--header-total);filter:saturate(.9)}
.hero-dark:has(> .hero-dark-bg) > .container{padding-top:32px}
/* The per-page top padding (142px) existed only to clear the fixed header over an
absolutely-positioned photo. In the stacked layout it would open a black gap. */
.pg-hero,.avas-hero,.hygp-hero,.ab-hero,.rr-hero,.gt-hero-band{padding:0 0 40px}
}
/* Desktop crops. With the taller band each photograph keeps its subject AND enough
surrounding scene to read as a photograph rather than a sliver. */
/* The Proof Gap — the machinist's head sits at ~3% of the frame; anchor just below it. */
.pg-hero .hero-dark-bg {object-position:50% 6%}
/* AVAS — the two monitor screens occupy y 43–90%. The old 8% anchor cropped them off
entirely, which is what "both monitor screens fully visible" refers to. */
.avas-hero .hero-dark-bg {object-position:50% 58%}
/* How You Gain Proof — both men plus the pipe bender. */
.hygp-hero .hero-dark-bg {object-position:50% 25%}
/* About — a tight macro of the cutting head; centring it is what makes it legible. */
.ab-hero .hero-dark-bg {object-position:50% 45%}
.rr-hero .hero-dark-bg {object-position:50% 40%}
/* The deep one-off top paddings were sized for the old short band. The band now sizes
itself, and the copy is vertically centred, so they only push the copy off-centre —
a single clearance for the fixed header is all that is needed. */
@media(min-width:768px){
.pg-hero,.avas-hero,.hygp-hero,.ab-hero,.rr-hero,.gt-hero-band{padding:var(--header-total) 0 0}
}
/* ---- HOME: the Gardner statistic. "More than" is part of the claim, so it rides with
the figure at reduced size rather than being dropped from it. ---------------- */
.stat-band .sb-num-qual{display:block;font-family:var(--font-body);font-size:.9rem;
font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);
line-height:1;margin-bottom:8px}
/* …and the 89% figure reserves the same strip of space, so the two numbers stay on one
baseline instead of the qualifier shunting the Gardner figure down. */
.stat-band .sb-item:not(:has(.sb-num-qual)) .sb-num{margin-top:calc(.9rem + 8px)}
/* ---- WHAT PROOF LOOKS LIKE: the rain-room photograph moves up beside the opening line.
The second truck photograph is gone (it duplicated the hero band), so the case study is
now narrative + one photograph, and align-items:start is what puts the top of the photo
level with "We didn't tell people Gore-Tex worked. We proved it." ------------------- */
.gt-figure-portrait{margin:0;max-width:none;margin-inline:0}
@media(min-width:820px){
.gt-case{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
grid-template-areas:"narrative portrait";column-gap:44px;align-items:start}
.gt-narrative{grid-area:narrative}
.gt-figure-portrait{grid-area:portrait}
}
@media(max-width:819px){
.gt-figure-portrait{margin-top:30px;max-width:420px}
}
/* ---- CONTACT: the Jason photo + logo lockup is supporting detail, not the headline. It
ran full-bleed at the foot of the sidebar and outweighed everything above it. --- */
.contact-lockup{padding:20px 22px}
.contact-lockup img{display:block;width:100%;max-width:280px;height:auto;
border-radius:var(--radius-sm);margin-inline:auto}
/* ---- FOOTER, SITEWIDE: the lockup gets bigger, the phone line beneath it gets smaller,
so the logo leads the column instead of competing with the number. ------------ */
.footer-logo.footer-logo-tagline{max-width:390px;margin-bottom:14px}
@media(max-width:1023px){.footer-logo.footer-logo-tagline{max-width:330px}}
.footer-phone-line{font-size:.86rem;font-weight:700;gap:7px;margin-bottom:16px}
.footer-phone-line svg{width:14px;height:14px}
/* ---- MOBILE QA, SITEWIDE: touch target sizes -------------------------------
Found by the pre-launch mobile pass: on a phone the header logo link resolved to a
179x14 hit area (the wordmark is a wide, thin lockup, so its natural height at mobile
width is 14px) and every footer link to 17-23px tall. WCAG 2.5.8 asks for 24x24 CSS px
minimum, and a 14px-tall tap target is genuinely hard to hit.
The type sizes and the layout are untouched — only the hit area grows, and only on
touch widths, so the approved desktop footer is unaffected. ---------------------- */
.site-header .logo{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:1023px){
/* Column link lists: padding absorbs most of the existing gap, so the footer grows by
only a few pixels while each link becomes a comfortable 30px target. */
.footer-col ul{gap:2px}
.footer-col ul li a{display:inline-block;padding:7px 0;min-height:24px}
/* Contact rows: the label + value pair is the target, so pad the row rather than the
link, and keep the icon aligned to the top of it. */
.footer-contact-item{align-items:flex-start;margin-bottom:12px}
.footer-contact-item svg{margin-top:3px}
.footer-contact-item .fci-val{display:inline-block;padding:4px 0;min-height:24px}
/* The phone line under the logo stays visually small (as instructed) but gains a
comfortable hit area around it. */
.footer-phone-line{padding:5px 0;min-height:26px}
.footer-legal{gap:10px 18px;flex-wrap:wrap}
.footer-legal a{display:inline-block;padding:5px 0;min-height:24px}
/* Contact page sidebar cards — the LinkedIn link had the same 18px-tall problem. */
.contact-card > a{display:inline-block;padding:4px 0;min-height:24px}
}
/* ==========================================================================
AUG 20 REVISION
========================================================================== */
/* ---- SITEWIDE: page heroes still collided on tablets ------------------------
THE DEFECT (client, re-reported): "on every page with a header image the image and the
copy are colliding on mobile, text sitting on top of the photo instead of stacking
below it." The Aug 19 stacking fix was correct but its breakpoint was too narrow: it
only ran below 768px, so every width from 768px up still got the desktop OVERLAY —
iPad portrait (768/810/834px), iPad landscape (1024px+) and every phone held sideways.
Measured in both Chromium and WebKit: at 390/430/640 the hero stacked; at 768/820/900
the
sat inside the photograph's box.
THE FIX: stack at every width where this site is already in its mobile skin. The
hamburger drawer takes over below 1024px (`@media(min-width:1024px){.mobile-toggle
{display:none}}`), so 1024px is the site's own mobile boundary and the hero now uses it.
Also pinned with an explicit .hero-photo class alongside :has() — :has() is fine in
current Chrome/Safari, but this hero is the one thing on the site that must not fail
in an older in-app browser, and a plain class cannot fail. ------------------------- */
.hero-dark.hero-photo,
.hero-dark:has(> .hero-dark-bg){min-height:74vh;display:flex;flex-direction:column;justify-content:center}
@media(max-width:1023px){
.hero-dark.hero-photo,
.hero-dark:has(> .hero-dark-bg){min-height:0;display:block;padding:0 0 40px;background:var(--dark)}
.hero-dark.hero-photo::before,
.hero-dark:has(> .hero-dark-bg)::before{content:none}
.hero-dark.hero-photo > .hero-dark-bg,
.hero-dark:has(> .hero-dark-bg) > .hero-dark-bg{
position:static;width:100%;height:auto;object-fit:fill;
margin-top:var(--header-total);filter:saturate(.9)}
.hero-dark.hero-photo > .container,
.hero-dark:has(> .hero-dark-bg) > .container{padding-top:32px}
.pg-hero,.avas-hero,.hygp-hero,.ab-hero,.rr-hero,.gt-hero-band{padding:0 0 40px}
/* .gt-hero-band carries its own min-height:70vh, which would re-open the black gap the
stacked layout exists to remove. */
.gt-hero-band{min-height:0}
}
/* The overlay treatment (deep padding to clear the fixed header) belongs only to the
widths that actually still overlay. */
@media(min-width:1024px){
.pg-hero,.avas-hero,.hygp-hero,.ab-hero,.rr-hero,.gt-hero-band{padding:var(--header-total) 0 0}
}
/* ---- THE PROOF GAP: hero composition ---------------------------------------
Client: "I would like to see the person at the drill press centered vertically.
Currently, too much of the bottom of the photo is featured."
Measured against the source frame (2400x1601): the operator runs from y≈1% (the crown of
his head is all but flush with the top edge) to y≈65%, so his centre of mass is y≈33%.
Everything below 65% is machine bed and chip conveyor — the "bottom of the photo" the
client is reading as dead weight.
Desktop: the band shows 62% of the frame height, so anchoring at 0% both stops the old
6% anchor slicing the top of his head AND drops the lowest 38% of machine bed. His
centre then lands at 53% of the band — vertically centred, with the small bias upward
that keeps his head off the top edge.
Mobile: the stacked photo previously ran the WHOLE uncropped frame, which is where the
surplus bottom third was most obvious. Cropping the band to 15:7 shows the frame's top
70% only, putting his y≈33% centre at 47% of the band. Scoped to this page — the other
stacked heroes are framed as the client approved them. */
.pg-hero .hero-dark-bg{object-position:50% 0%}
@media(max-width:1023px){
.hero-dark.pg-hero > .hero-dark-bg,
.hero-dark:has(> .hero-dark-bg).pg-hero > .hero-dark-bg{
aspect-ratio:15/7;height:auto;object-fit:cover;object-position:50% 0%}
}
/* ---- HOME: the 3.4x badge stopped being a badge on a phone ------------------
Client: "the 3.4x stat is overlapping the entire photo of the engineer at the laptop
instead of sitting cleanly above or below it."
The badge is position:absolute over the photo. That reads as a badge while it stays
small, but its label is a full sentence, so as the column narrows the label wraps and
the badge grows while the photo shrinks. Measured coverage of the photo: 5% at 820px,
10% at 640px, 31% at 430px, 45% at 390px, 54% at 360px — and at phone widths the label
was also clipped by the bottom of the card.
THE FIX: below 640px the badge leaves the overlay and becomes a normal card directly
BELOW the photo, exactly as asked. Above 640px the float is 10% or less and stays. */
@media(max-width:639px){
.split-media .badge-float{position:static;transform:none;margin-top:14px;
border-radius:var(--radius-md);box-shadow:var(--shadow-md);border:1px solid var(--border);
align-items:center;gap:16px;padding:16px 18px}
.split-media .badge-float .bf-label{max-width:none}
}
/* ---- WHAT PROOF LOOKS LIKE: the rain-room photograph grows 4% ---------------
Client: "increase the size of the rain room photo by 3 to 5 percent. No change to its
position." The photo is the right-hand column of .gt-case, so its width is set by the
grid ratio, not by the figure. At 1.55fr/1fr the photo took 1/2.55 = 39.2% of the
track space; 1.45fr/1fr takes 1/2.45 = 40.8%. 40.8/39.2 = 1.04 — a 4% increase at every
viewport width, with the column order, the gap and the alignment untouched. */
@media(min-width:820px){
.gt-case{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
}
/* ---- AVAS: the lockup is a title, not a sentence ----------------------------
Client: two stacked lines, "AVAS(tm)" over "The AI Visibility Assessment System", and no
full stop. The comma and the period are removed in the markup; this keeps the second
line reading as a subtitle rather than as a second heading. */
.avas-h1 .avas-h1-expand{display:block}
/* ---- AVAS CTA note sits ABOVE the button ------------------------------------
Client: "add the AVAS CTA supporting paragraph directly above the request button, not
below". renderFooterForm() in js/main.js now emits .ffb-note before the submit button;
the spacing flips with it. */
.ffb-note{margin:0 0 18px}
/* ---- THE PROOF GAP: the new hero subhead + standfirst -----------------------
Client copy, added above the download button. The subhead is a deck under the H1, so it
is set at heading weight but well below H1 size — it must not compete with "The Proof
Gap" — and the standfirst below it is body copy at the hero's reading size.
.pg-hero .hero-content h1 carried a 30px bottom margin that existed to space the H1 off
the button when nothing sat between them; the deck supplies that rhythm now. */
.pg-hero .hero-content h1{margin-bottom:14px}
.pg-hero-subhead{font-family:var(--font-display);font-size:clamp(1.12rem,2.1vw,1.42rem);
font-weight:700;line-height:1.3;letter-spacing:-.01em;color:#fff;max-width:40ch;
margin:0 0 14px;text-wrap:balance}
.pg-hero-standfirst{font-size:1.02rem;line-height:1.6;color:rgba(255,255,255,.82);
max-width:58ch;margin:0 0 30px;text-wrap:pretty}
@media(max-width:1023px){
.pg-hero-subhead{max-width:none;font-size:1.16rem;margin-bottom:10px}
.pg-hero-standfirst{font-size:.98rem;margin-bottom:26px}
}
/* ---- AVAS: header standfirst above the request button ----------------------
Client: place this copy in the hero, where the photograph currently reads,
directly above the red “Request an AVAS Report” button. Matches the Proof Gap
standfirst rhythm so the H1 → deck → CTA spacing stays even. */
.avas-hero h1{margin-bottom:16px}
.avas-hero-standfirst{font-size:1.02rem;line-height:1.6;color:rgba(255,255,255,.82);
max-width:58ch;margin:0 0 30px;text-wrap:pretty}
@media(max-width:1023px){
.avas-hero-standfirst{font-size:.98rem;margin-bottom:26px}
}
/* ---- AUG 23: Home overlay stays; interior heroes STACK at every width ------
Client: homepage Ken Burns stills stay UNDERNEATH the copy — that overlay is
approved. Interior pages were still overlaying title/copy on the photograph
(on desktop always; on tablet whenever stacking didn't win), so the header
read as a darkened poster with type sitting on the subject. Composition off.
Interior photographic heroes now separate the two layers everywhere:
photograph as its own in-flow band (consistent cinematic crop, cover-framed
on the subject, no scrim — the photo is allowed to read as a photo)
copy on solid black underneath.
Home (.hero-fullscreen / .hero-kb) and Contact (no photo) are not touched. */
.hero-dark.hero-photo,
.hero-dark:has(> .hero-dark-bg){
min-height:0;
display:block;
padding:0 0 48px;
background:var(--dark)}
.hero-dark.hero-photo::before,
.hero-dark:has(> .hero-dark-bg)::before{content:none}
.hero-dark.hero-photo > .hero-dark-bg,
.hero-dark:has(> .hero-dark-bg) > .hero-dark-bg{
position:static;
width:100%;
height:auto;
aspect-ratio:8/3;
object-fit:cover;
margin-top:var(--header-total);
filter:saturate(.88) brightness(.96) contrast(1.02)}
.hero-dark.hero-photo > .container,
.hero-dark:has(> .hero-dark-bg) > .container{padding-top:40px}
.pg-hero,.avas-hero,.hygp-hero,.ab-hero,.rr-hero,.gt-hero-band{
padding:0 0 48px;min-height:0}
/* Per-page framing — same anchors the client already approved, now applied to
a real photograph band instead of an overlay crop. */
.pg-hero .hero-dark-bg{object-position:50% 0%}
.avas-hero .hero-dark-bg{object-position:50% 58%}
.hygp-hero .hero-dark-bg{object-position:50% 25%}
.ab-hero .hero-dark-bg{object-position:50% 45%}
.rr-hero .hero-dark-bg{object-position:50% 40%}
.gt-hero-band .hero-dark-bg{object-position:50% 100%;filter:saturate(.72) brightness(.92)}
@media(max-width:1023px){
.hero-dark.hero-photo > .hero-dark-bg,
.hero-dark:has(> .hero-dark-bg) > .hero-dark-bg,
.hero-dark.pg-hero > .hero-dark-bg,
.hero-dark:has(> .hero-dark-bg).pg-hero > .hero-dark-bg{
aspect-ratio:16/9;height:auto;object-fit:cover}
.avas-hero .hero-dark-bg{object-position:88% 8%}
.hygp-hero .hero-dark-bg{object-position:92% 10%}
}