and let the single .cc-foot
link stretch over the card via this overlay. No anchor wrapping needed.
========================================================================== */
.cat-card,.img-card,.related-card{position:relative}
.cat-card .cc-foot,.img-card .cc-foot,.img-card .ic-body .cc-foot{position:static}
.cat-card .cc-foot::after,.img-card .cc-foot::after{content:"";position:absolute;inset:0;z-index:1}
/* Defensive: if a build uses a `.cc-media` image box inside a card (the canonical
image card is `.img-card > .ic-media`, but `.cc-media` was improvised with NO
css and rendered images at full intrinsic size, blowing the grid apart), still
constrain it to a fixed-ratio cover box so it can never balloon. */
.cc-media{aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius-md);margin-bottom:18px;position:relative}
.cc-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Last-ditch: a card-footer link that got ejected to be a DIRECT child of a grid
(the nested-anchor bug) must not sit in a card column and shove everything out of
alignment — drop it onto its own full-width row instead of interleaving the cards. */
.grid-2 > .cc-foot,.grid-3 > .cc-foot,.grid-4 > .cc-foot{grid-column:1/-1}
/* ==========================================================================
CTA / button breathing room. A button or actions row that follows content in a
body column (e.g. the "See the math" button pinned flush under a comparison
table) must never sit jammed against the element above it.
========================================================================== */
.split-body > .btn,.split-body > .hero-actions,.split-body > .btn-row,
.cta-content > * + .btn,.cta-content > * + .hero-actions{margin-top:24px}
.split-body > * + .btn,.detail-card > * + .btn,.sidebar-cta > * + .btn{margin-top:22px}
/* ==========================================================================
TABLES — for genuinely tabular content (comparison / spec / pricing). Use a REAL
wrapped in (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:600;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:800;letter-spacing:-.03em;line-height:1.02}
.display-lg{font-size:clamp(2.1rem,5.5vw,3.8rem);font-weight:800;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(--accent)} /* 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:600;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:color-mix(in srgb,var(--accent) 55%,var(--text));font-weight:800}
: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)}
/* .btn-primary is SOLID --cta blue, so it keeps its white ink (5.3:1). The dark-ink
rule above is only for the OUTLINE button, which is transparent on the white card.
Applying it to .btn-primary too put #181818 on #1568D4 — 3.35:1, below AA, on the
form's submit button. */
.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:800;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}}
/* ==========================================================================
REVAMP ADDITIONS — Surface Solutions homepage brief (2026-07)
Tagline under logo, Trust Bar, Problem Cards, Coating Swatches,
Industries icon-row, 4-Step Process, Testimonials grid, Objection chips
========================================================================== */
/* Logo + one-line tagline under it (desktop only; mobile keeps compact) */
.logo-block{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1;flex-shrink:0}
.logo-block .logo{max-width:none}
.logo-tagline{display:none;font-family:var(--font-display);font-size:.72rem;font-weight:600;letter-spacing:.06em;color:var(--text-muted);text-transform:uppercase;margin-top:2px;white-space:nowrap}
@media(min-width:1024px){.logo-tagline{display:block}}
/* Transparent (over hero) first, scrolled/solid last — on the homepage the header keeps
BOTH .header-transparent AND .header-scrolled once scrolled, so the white-header rule
must come last to win; otherwise the tagline stays white-on-white and disappears. */
.header-transparent .logo-tagline{color:rgba(255,255,255,.72)}
.header-scrolled .logo-tagline,.header-solid .logo-tagline{color:var(--text-muted)}
/* Under-hero trust micro-line (legacy — kept for other pages) */
.hero-trust-line{margin-top:22px;color:rgba(255,255,255,.82);font-size:.95rem;font-weight:500;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hero-trust-line svg{width:16px;height:16px;color:var(--accent);flex-shrink:0}
/* Under-hero trust list — one fact per line, checkmark-aligned */
.hero-trust-list{margin:22px 0 0;padding:0;list-style:none;color:rgba(255,255,255,.82);font-size:.95rem;font-weight:500;display:flex;flex-direction:column;gap:8px}
.hero-trust-list li{display:flex;align-items:center;gap:10px;line-height:1.4}
.hero-trust-list svg{width:16px;height:16px;color:var(--accent);flex-shrink:0}
/* Trust Bar (5-across numbers row) */
.trust-bar{padding:44px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trust-bar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px 20px;text-align:center;max-width:1200px;margin:0 auto}
.trust-bar-item{display:flex;flex-direction:column;gap:6px;padding:0 8px;position:relative}
.trust-bar-item + .trust-bar-item::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:var(--border)}
.trust-bar-num{font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:800;color:var(--primary);letter-spacing:-.02em;line-height:1.05}
.trust-bar-label{font-size:.82rem;font-weight:600;color:var(--text-secondary);letter-spacing:.02em}
@media(max-width:1100px){
.trust-bar-grid{grid-template-columns:repeat(3,1fr);gap:26px 20px;max-width:900px}
.trust-bar-item:nth-child(3n+1)::before{display:none}
}
@media(max-width:820px){
.trust-bar-grid{grid-template-columns:repeat(2,1fr);gap:22px 16px}
.trust-bar-item::before{display:none}
}
@media(max-width:520px){.trust-bar-grid{grid-template-columns:1fr}}
/* Problem-framing cards — "Sound Familiar?" */
.problem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1100px){.problem-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.problem-grid{grid-template-columns:1fr}}
.problem-card{background:var(--bg);border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:var(--radius-md);padding:24px 22px;display:flex;flex-direction:column;gap:10px;transition:transform .2s,box-shadow .2s,border-color .2s}
.problem-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-left-color:var(--accent)}
.problem-card h3{font-size:1.02rem;font-weight:700;color:var(--text);line-height:1.3;margin:0}
.problem-card p{font-size:.92rem;color:var(--text-secondary);line-height:1.55;margin:0;flex-grow:1}
.problem-card a{margin-top:8px;font-size:.85rem;font-weight:700;color:var(--primary);letter-spacing:.02em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}
.problem-card a::after{content:"→";transition:transform .2s}
.problem-card a:hover::after{transform:translateX(3px)}
/* Customer pain points as a picture slider (rides on .card-carousel).
Same problem-card language — left accent rule, uppercase link — with a 4:3
photo of the application on top, so each problem shows the part it happens
to. The rail only scrolls when the five slides overflow; .cc-nav below it is
wired by main.js and hides itself if everything already fits. */
.pain-rail{padding:6px 2px 12px;counter-reset:pain}
.pain-rail>.pain-slide{width:330px}
.pain-slide{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:box-shadow .3s ease,border-color .3s ease}
.pain-slide:hover{box-shadow:var(--shadow-md);border-color:var(--surface-2)}
/* Slide number chip over the photo — gives the rail a guided, editorial feel
and quietly tells visitors there is more to scroll through. */
.pain-slide::before{counter-increment:pain;content:"0" counter(pain);position:absolute;top:14px;left:14px;z-index:2;background:rgba(255,255,255,.94);color:var(--text);font-family:var(--font-display);font-weight:700;font-size:.76rem;letter-spacing:.08em;padding:5px 10px;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}
/* Brand accent that draws along the bottom edge on hover, replacing the old
static left border. Lives on a pseudo so it never fights the reveal motion. */
.pain-slide::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,.61,.36,1);z-index:2}
.pain-slide:hover::after{transform:scaleX(1)}
.pain-slide .ps-media{position:relative;background:var(--surface);overflow:hidden}
.pain-slide .ps-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,0) 62%,rgba(17,17,17,.22) 100%);pointer-events:none}
.pain-slide .ps-media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;max-height:none;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.pain-slide:hover .ps-media img{transform:scale(1.05)}
.pain-slide .ps-body{padding:24px 24px 22px;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.pain-slide h3{font-size:1.06rem;font-weight:700;color:var(--text);line-height:1.32;margin:0}
.pain-slide p{font-size:.92rem;color:var(--text-secondary);line-height:1.6;margin:0;flex-grow:1}
.pain-slide a{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);font-size:.83rem;font-weight:700;color:var(--primary);letter-spacing:.04em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}
.pain-slide a::after{content:"→";transition:transform .25s ease}
.pain-slide a:hover{color:var(--primary-dark)}
.pain-slide a:hover::after{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.pain-slide:hover .ps-media img{transform:none}.pain-slide::after{transition:none}}
/* Desktop: four slides fill the row and the fifth peeks in by ~24px, so the
rail reads as a slider instead of a grid that happens to clip. */
@media(min-width:1024px){.pain-rail>.pain-slide{flex:0 0 auto;min-width:0;max-width:none;width:calc((100% - 120px)/4)}}
/* Coating card upgrades: color swatch bar + best-for list + key-benefit line */
.cc-swatch{display:inline-block;width:100%;height:8px;border-radius:2px;margin-bottom:14px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.15)}
.cc-swatch.sw-alpha{background:linear-gradient(90deg,#E4C87F 0%,#F3E4B6 50%,#D9BA6C 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.cc-swatch.sw-tin{background:#D4AF37}
.cc-swatch.sw-ticn{background:linear-gradient(90deg,#7E858C 0%,#B9BFC6 55%,#8C939A 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.cc-swatch.sw-altin{background:linear-gradient(90deg,#2F3237 0%,#4C525A 60%,#383C43 100%)}
.cc-swatch.sw-crn{background:linear-gradient(90deg,#b8bcc2 0%,#e2e5ea 100%)}
.cc-bestfor{list-style:none;padding:0;margin:8px 0 6px;display:flex;flex-direction:column;gap:4px}
.cc-bestfor li{font-size:.85rem;color:var(--text-secondary);padding-left:16px;position:relative}
.cc-bestfor li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--accent);border-radius:1px}
.cc-benefit{font-size:.88rem;color:var(--text);font-weight:600;margin:6px 0 12px;line-height:1.45}
.cc-bestfor-label{display:block;font-size:.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-top:6px}
/* Selector prompt inside the Coatings header */
.selector-prompt{margin-top:14px;text-align:center;font-size:.95rem;color:var(--text-secondary)}
.selector-prompt a{color:var(--primary);font-weight:700;border-bottom:1px solid var(--primary)}
.selector-prompt a:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* Industries compact icon row */
.industry-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;max-width:1080px;margin:0 auto}
@media(max-width:900px){.industry-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.industry-row{grid-template-columns:1fr}}
.industry-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);transition:transform .2s,box-shadow .2s,border-color .2s}
.industry-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--primary)}
.industry-item .industry-icon{width:46px;height:46px;border-radius:8px;background:var(--secondary);color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.industry-item .industry-icon svg{width:22px;height:22px}
.industry-item .industry-label{font-size:.92rem;font-weight:700;color:var(--text);line-height:1.25}
/* 4-Step Process */
.process-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step;position:relative}
@media(max-width:960px){.process-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.process-4{grid-template-columns:1fr}}
.process-4 .p4-step{position:relative;padding:26px 22px 24px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md)}
.process-4 .p4-num{width:44px;height:44px;border-radius:50%;background:var(--primary);color:#fff;font-weight:800;font-family:var(--font-display);font-size:1.15rem;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.process-4 .p4-step h3{font-size:1.05rem;font-weight:700;margin:0 0 8px;color:var(--text)}
.process-4 .p4-step p{font-size:.92rem;color:var(--text-secondary);line-height:1.55;margin:0}
/* Testimonials grid (3-up) */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
@media(max-width:960px){.testi-grid{grid-template-columns:1fr;gap:18px}}
.testi-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:26px 24px;display:flex;flex-direction:column;gap:12px}
.testi-card .testi-mark{color:var(--primary);opacity:.4;font-size:2rem;line-height:.8;font-family:var(--font-display)}
.testi-card blockquote{font-size:1.02rem;font-weight:600;color:var(--text);line-height:1.5;margin:0;flex-grow:1}
.testi-card .testi-attrib{font-size:.82rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;border-top:1px solid var(--border);padding-top:12px}
.testi-card .testi-result{font-size:.85rem;color:var(--primary);font-weight:700}
.testi-card .testi-attrib-row{display:flex;align-items:center;gap:12px;border-top:1px solid var(--border);padding-top:12px;margin-top:2px}
.testi-card .testi-attrib-row .testi-photo{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--primary);box-shadow:0 2px 8px rgba(0,0,0,.08);display:block}
.testi-card .testi-attrib-row .testi-attrib{border-top:0;padding-top:0;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;font-weight:700;color:var(--text-muted)}
/* Objection killer chips under bottom CTA */
.objection-chips{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:20px;justify-content:flex-start;align-items:center}
.objection-chips span{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--text-secondary)}
.objection-chips span svg{width:16px;height:16px;color:var(--primary);flex-shrink:0}
/* Footer coatings & industries link columns fit the same grid */
.footer-col ul.footer-list{list-style:none;padding:0;margin:0}
.footer-col ul.footer-list li{margin-bottom:6px}
.footer-col ul.footer-list a{font-size:.88rem;color:rgba(255,255,255,.72)}
.footer-col ul.footer-list a:hover{color:#fff}
.footer-serving{font-size:.82rem;color:rgba(255,255,255,.62);margin-top:6px;font-style:italic}
.footer-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;align-items:center}
.footer-badges a{display:inline-block;transition:opacity .2s,transform .2s;line-height:0}
.footer-badges a:hover{opacity:.85;transform:translateY(-1px)}
.footer-badges img{height:38px;width:auto;display:block;border-radius:6px}
.footer-badges .fb-note{font-size:.72rem;color:rgba(255,255,255,.55);letter-spacing:.04em;text-transform:uppercase;margin-right:4px;align-self:center}
/* 5-column footer for the SEO-rich footer (Coatings + Industries columns) */
@media(min-width:1024px){
.footer-grid.footer-grid-5{grid-template-columns:1.35fr 1fr 1fr 1fr 1.2fr;gap:30px}
}
/* ==========================================================================
REVAMP ADDITIONS ROUND 2 — Resources page + per-coating pages (2026-07)
Coating comparison table, FAQ list, glossary grid, coating-detail hero,
coating spec panel
========================================================================== */
/* Compare table (Resources page) */
.compare-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg)}
.compare-table{width:100%;border-collapse:collapse;min-width:720px;font-size:.94rem}
.compare-table thead th{background:var(--surface);text-align:left;padding:14px 16px;font-size:.78rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border)}
.compare-table tbody th{text-align:left;padding:16px;font-weight:800;color:var(--primary);font-family:var(--font-display);font-size:1rem;white-space:nowrap;vertical-align:top}
.compare-table td{padding:16px;vertical-align:top;color:var(--text-secondary);border-top:1px solid var(--border)}
.compare-table tbody tr:hover{background:var(--surface)}
.compare-table td a{color:var(--primary);font-weight:700}
.compare-table td a:hover{color:var(--accent)}
.compare-swatch{width:26px;height:12px;margin:0 6px -1px 0;vertical-align:middle;border-radius:2px}
/* FAQ list */
.faq-list{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:0;overflow:hidden}
.faq-item summary{cursor:pointer;padding:18px 22px;font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:16px;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.4rem;color:var(--primary);font-weight:400;transition:transform .2s;flex-shrink:0}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--primary)}
.faq-item p{padding:0 22px 20px;color:var(--text-secondary);line-height:1.6;margin:0;font-size:.95rem}
/* Glossary grid */
.glossary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1024px){.glossary-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.glossary-grid{grid-template-columns:1fr}}
.glossary-item{background:var(--bg);border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:var(--radius-sm,8px);padding:18px 18px 16px}
.glossary-item h3{font-size:.98rem;font-weight:700;margin:0 0 6px;color:var(--text)}
.glossary-item p{font-size:.88rem;color:var(--text-secondary);line-height:1.55;margin:0}
/* Coating detail page — hero swatch strip + spec panel */
.coating-hero-swatch{display:block;width:120px;height:10px;border-radius:3px;margin-bottom:20px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.2)}
.coating-spec-panel{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:24px;margin-top:8px}
@media(max-width:900px){.coating-spec-panel{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.coating-spec-panel{grid-template-columns:1fr}}
.coating-spec-item{display:flex;flex-direction:column;gap:4px}
.coating-spec-label{font-size:.72rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}
.coating-spec-value{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--text)}
.coating-detail-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px}
@media(max-width:900px){.coating-detail-grid{grid-template-columns:1fr}}
.coating-uses{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:10px}
.coating-uses li{padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm,8px);font-size:.94rem;color:var(--text)}
.coating-uses li strong{display:block;color:var(--primary);font-family:var(--font-display);margin-bottom:2px}
.coating-cross-links{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}
@media(max-width:900px){.coating-cross-links{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.coating-cross-links{grid-template-columns:1fr}}
.coating-cross-links a{display:flex;flex-direction:column;padding:16px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm,8px);transition:transform .2s,border-color .2s,box-shadow .2s}
.coating-cross-links a:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:var(--shadow-sm)}
.coating-cross-links a strong{color:var(--text);font-family:var(--font-display);font-size:.98rem;margin-bottom:2px}
.coating-cross-links a span{font-size:.82rem;color:var(--text-secondary)}
.coating-cross-links a .ccl-swatch{width:100%;height:6px;border-radius:2px;margin-bottom:10px}
/* ==========================================================================
ROI CALCULATOR
========================================================================== */
#roi{background:var(--bg)}
.roi-shell{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:flex-start}
.roi-inputs{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px 22px 8px}
.roi-output{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px;position:sticky;top:calc(var(--header-total) + 20px)}
/* Numbered blocks */
.roi-block{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px 18px;margin-bottom:14px}
.roi-block-head{display:flex;align-items:center;gap:12px;margin:0 0 12px;cursor:default;list-style:none}
.roi-block-head::-webkit-details-marker{display:none}
.roi-block-head h3{font-size:1.02rem;font-weight:700;color:var(--text);letter-spacing:-.01em;margin:0}
.roi-block-num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;font-family:var(--font-display);font-size:.82rem;font-weight:800;letter-spacing:.02em;flex-shrink:0}
.roi-optional-tag{margin-left:8px;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);background:var(--surface-2);border-radius:var(--radius-pill);padding:3px 8px;vertical-align:middle}
.roi-block-optional{cursor:pointer}
.roi-block-optional .roi-summary-caret{margin-left:auto;font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--primary);line-height:1;transition:transform .2s}
.roi-block-optional[open] .roi-summary-caret{transform:rotate(45deg)}
/* Segmented radios */
.roi-radio-row{display:flex;gap:8px;flex-wrap:wrap}
.roi-radio{position:relative;flex:1 1 140px}
.roi-radio input{position:absolute;opacity:0;pointer-events:none}
.roi-radio span{display:flex;align-items:center;justify-content:center;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:#fff;font-size:.92rem;font-weight:600;color:var(--text);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.roi-radio input:checked + span{border-color:var(--primary);background:var(--primary);color:#fff}
.roi-radio input:focus-visible + span{box-shadow:0 0 0 3px rgba(201,26,26,.18)}
/* Hint + warning */
.roi-hint{display:block;font-size:.78rem;color:var(--text-muted);margin-top:6px;line-height:1.45}
.roi-warn{background:rgba(201,26,26,.06);border:1px solid rgba(201,26,26,.22);border-left:3px solid var(--primary);color:var(--text);border-radius:var(--radius-sm);padding:10px 12px;font-size:.86rem;margin:0 0 14px}
.roi-warn strong{color:var(--primary);font-weight:800}
/* Output — heading */
.roi-output-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.roi-output-head h3{font-size:1.08rem;font-weight:800;color:var(--text);margin:0}
.roi-pill{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--dark);padding:5px 10px;border-radius:var(--radius-pill)}
/* Hero tile */
.roi-hero-tile{display:flex;flex-direction:column;gap:6px;background:var(--primary);color:#fff;border-radius:var(--radius-md);padding:22px 22px 20px;box-shadow:0 8px 22px rgba(201,26,26,.22)}
.roi-hero-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.85)}
.roi-hero-value{font-family:var(--font-display);font-size:2.4rem;font-weight:800;line-height:1.05;letter-spacing:-.02em;color:#fff}
.roi-hero-sub{font-size:.82rem;color:rgba(255,255,255,.78)}
/* Metric row */
.roi-metric-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.roi-metric{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.roi-metric-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.roi-metric-value{font-family:var(--font-display);font-size:1.2rem;font-weight:800;color:var(--text)}
/* Breakdown */
.roi-breakdown{margin-top:14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 14px}
.roi-breakdown-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px dashed var(--border);font-size:.9rem;color:var(--text-secondary)}
.roi-breakdown-row:last-child{border-bottom:none}
.roi-breakdown-row span:last-child{font-family:var(--font-display);font-weight:700;color:var(--text)}
/* Recommendation card */
.roi-rec{margin-top:14px;background:var(--bg);border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:var(--radius-sm);padding:14px 16px}
.roi-rec-eyebrow{display:block;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.roi-rec-body{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.roi-rec-chip{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.95rem;font-weight:800;color:#fff;background:var(--accent);padding:6px 12px;border-radius:var(--radius-pill);white-space:nowrap}
.roi-rec-note{font-size:.86rem;color:var(--text-secondary);margin:0;flex:1 1 200px;line-height:1.5}
.roi-rec-link{display:inline-block;margin-top:10px;font-size:.86rem;font-weight:700;color:var(--primary)}
.roi-rec-link:hover{text-decoration:underline}
/* Disclaimer */
.roi-disclaimer{font-size:.76rem;color:var(--text-muted);margin:14px 0 16px;line-height:1.55}
/* Actions */
.roi-actions{display:flex;gap:10px;flex-wrap:wrap}
.roi-actions .btn{flex:1 1 auto}
/* Responsive */
@media (max-width:900px){
.roi-shell{grid-template-columns:1fr;gap:20px}
.roi-output{position:static;top:auto}
.roi-hero-value{font-size:2rem}
}
@media (max-width:520px){
.roi-inputs,.roi-output{padding:16px}
.roi-radio{flex:1 1 100%}
.roi-metric-row{grid-template-columns:1fr}
}
/* Print — hide chrome, keep results legible */
@media print{
body > header, body > footer, .quote-fab, #industries, #testimonials, #cta-band, .site-nav, .top-bar{display:none !important}
#roi{padding:0}
.roi-shell{grid-template-columns:1fr;gap:12px}
.roi-output{position:static;border:2px solid #000;box-shadow:none}
.roi-hero-tile{background:#000 !important;color:#fff !important;box-shadow:none}
.roi-actions,.roi-block-optional summary .roi-summary-caret{display:none !important}
.roi-rec,.roi-metric,.roi-breakdown{border-color:#000}
a[href]:after{content:""}
}
/* ==========================================================================
COATING SELECTOR — reuses .roi-* layout but tweaks the hero tile / swatch.
========================================================================== */
.sel-hero-tile{background:var(--dark);box-shadow:0 8px 22px rgba(0,0,0,.28)}
.sel-hero-tile .roi-hero-value{font-size:2.2rem}
.sel-hero-tile .roi-hero-sub{color:rgba(255,255,255,.85);font-size:.88rem;line-height:1.5}
.sel-swatch-wrap{margin:12px 0 0}
.sel-swatch-wrap .cc-swatch{margin-bottom:0;height:10px;border-radius:3px}
.sel-breakdown{margin-top:14px}
.sel-breakdown .roi-breakdown-row span:first-child{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);font-weight:700}
.sel-breakdown .roi-breakdown-row span:last-child{max-width:60%;text-align:right;font-family:var(--font-sans);font-weight:600;font-size:.9rem;color:var(--text)}
.sel-alt{border-left-color:var(--accent);opacity:.94}
.sel-alt .roi-rec-chip{background:var(--dark)}
@media (max-width:900px){
.sel-hero-tile .roi-hero-value{font-size:1.9rem}
}
.footer-li-more{margin-top:12px;font-size:.8rem;color:rgba(255,255,255,.6)}
.footer-li-more a{color:rgba(255,255,255,.82);text-decoration:underline;text-underline-offset:2px}
.footer-li-more a:hover{color:#fff}