html {
overflow-x: clip;
}
.acs-home-preview {
--acs-red: #e63946;
--acs-black: #101010;
--acs-text: #2b2b2b;
--acs-muted: #707070;
--acs-line: #ececec;
--acs-soft: #f7f7f7;
--acs-hero-edge: max(30px, calc((100vw - 1220px) / 2));
/* Spacing tokens (8pt rhythm): sections own all between-module space.
Visual gap between modules = 2 x --acs-sec-y. Inner spacing must stay
smaller than the module gap (internal <= external). */
--acs-sec-y: clamp(40px, 4.5vw, 60px);
--acs-head-mb: 32px;
--acs-sub-gap: 48px;
}
/* Hide Rey theme header on homepage — replaced by custom .acs-home-header */
.acs-home-preview .rey-siteHeader { display: none !important; }
/* Full-bleed: Rey wrapper is ~15px narrower than body (scrollbar) -> white gap on right */
.acs-home-preview .rey-siteWrapper,
.acs-home-preview .rey-siteContent,
.acs-home-preview #content { width: 100% !important; max-width: 100% !important; }
.acs-home-preview .rey-siteWrapper { overflow-x: clip; }
/* Also clear inherited padding/margin so the hero reaches all four edges
(left/right/top white gaps from Rey/Elementor content container). Homepage-scoped only. */
.acs-home-preview .rey-siteContent,
.acs-home-preview #content,
.acs-home-preview main.acs-home { padding: 0 !important; margin: 0 !important; }
/* Rey puts overflow-y:scroll on -> body owns a 15px scrollbar gutter that
shows as a white strip right of the full-bleed content. Scroll on the viewport instead. */
body.acs-home-preview { overflow-y: visible !important; overflow-x: clip !important; }
.acs-home {
color: var(--acs-text);
background: #fff;
}
.acs-home a {
text-decoration: none;
}
.acs-container {
width: min(1220px, calc(100vw - 40px));
margin: 0 auto;
}
.acs-hero {
position: relative;
margin-top: 0;
background: #121212;
}
.acs-hero-stage {
position: relative;
min-height: 100dvh;
overflow: hidden;
}
.acs-hero-bg,
.acs-hero-image,
.acs-hero-video {
position: absolute;
inset: 0;
}
.acs-hero-bg {
z-index: 0;
background-color: #121212;
background-size: cover;
background-position: center;
}
/* Single persistent hero video; poster (CSS bg above) shows until it plays / when
reduced-motion or data-saver keeps it from loading. */
.acs-hero-video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.acs-hero-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
visibility: hidden;
transform: scale(1.015);
transition: opacity .58s ease, visibility .58s ease, transform 1.2s ease;
}
.acs-hero-image.is-active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.acs-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .1) 31%, rgba(0, 0, 0, .5) 100%),
linear-gradient(90deg, rgba(0, 0, 0, .63), rgba(0, 0, 0, .2) 48%, rgba(0, 0, 0, .08));
}
.acs-hero-copy {
position: absolute;
z-index: 2;
/* Anchored a fixed distance below the (transparent) header so the kicker can never
slide under the logo, no matter how long the headline or which font is used. */
top: clamp(118px, 17vh, 210px);
left: var(--acs-hero-edge);
width: min(720px, calc(100vw - 60px));
min-height: 248px;
color: #fff;
}
.acs-hero-message {
position: absolute;
inset: 0 auto auto 0;
width: 100%;
opacity: 0;
pointer-events: none;
transform: translateY(14px);
transition: opacity .28s ease, transform .34s ease;
}
.acs-hero-message.is-active {
position: relative;
opacity: 1;
pointer-events: auto;
transform: none;
}
.acs-kicker {
margin: 0 0 14px;
color: var(--acs-red);
font-size: 12px;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
}
.acs-hero .acs-kicker {
color: #fff;
opacity: .86;
}
.acs-hero-copy h1,
.acs-hero-copy .acs-hero-title {
margin: 0 0 18px;
color: #fff;
font-size: clamp(40px, 4.35vw, 56px);
line-height: 1.04;
font-weight: 800;
max-width: 760px;
}
.acs-hero-text {
max-width: 560px;
margin: 0 0 26px;
color: rgba(255, 255, 255, .88);
font-size: 17px;
line-height: 1.65;
}
.acs-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.acs-btn {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 13px 25px;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.acs-btn:hover {
transform: translateY(-1px);
}
.acs-btn-primary {
background: var(--acs-red);
border: 1px solid var(--acs-red);
color: #fff !important;
}
.acs-btn-primary:hover {
background: #cf2d39;
border-color: #cf2d39;
}
.acs-btn-light {
background: #fff;
border: 1px solid #fff;
color: #111 !important;
}
.acs-btn-outline {
background: transparent;
border: 1px solid currentColor;
color: #111 !important;
}
.acs-hero-panels {
position: absolute;
z-index: 3;
left: var(--acs-hero-edge);
right: var(--acs-hero-edge);
bottom: clamp(52px, 9vh, 104px);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
color: #fff;
}
.acs-hero-panel {
position: relative;
display: flex;
min-height: 138px;
flex-direction: column;
justify-content: flex-end;
gap: 9px;
padding: 24px 24px 22px;
overflow: hidden;
border-radius: 12px;
color: #fff;
border: 1px solid rgba(255, 255, 255, .76);
background: rgba(255, 255, 255, .03);
transition: background .28s ease, border-color .28s ease, color .28s ease, transform .28s ease;
}
.acs-hero-panel::before {
content: "";
position: absolute;
inset: 0;
border: 1px solid rgba(255, 255, 255, .14);
pointer-events: none;
}
.acs-hero-panel:hover,
.acs-hero-panel:focus-visible,
.acs-hero-panel.is-active {
color: #171717;
border-color: rgba(255, 255, 255, .94);
background: rgba(255, 255, 255, .9);
transform: translateY(-3px);
}
.acs-hero-panel:focus-visible {
outline: 2px solid #fff;
outline-offset: 4px;
}
.acs-panel-action {
position: absolute;
top: 24px;
left: 24px;
color: currentColor;
font-size: 12px;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
opacity: 0;
transform: translateY(8px);
transition: opacity .22s ease, transform .22s ease;
}
.acs-hero-panel:hover .acs-panel-action,
.acs-hero-panel:focus-visible .acs-panel-action,
.acs-hero-panel.is-active .acs-panel-action {
opacity: 1;
transform: none;
}
.acs-hero-panel strong {
color: currentColor;
font-size: 24px;
line-height: 1.08;
font-weight: 800;
}
.acs-hero-panel > span:not(.acs-panel-action) {
color: currentColor;
font-size: 13px;
line-height: 1.45;
opacity: .82;
}
.acs-section {
padding: var(--acs-sec-y) 0;
}
.acs-intro {
border-bottom: 1px solid var(--acs-line);
}
.acs-intro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(34px, 7vw, 96px);
align-items: start;
}
.acs-intro h2,
.acs-section-head h2,
.acs-proof-main h2,
.acs-resources-grid h2,
.acs-final-cta h2 {
margin: 0;
color: var(--acs-black);
font-size: 52px;
line-height: 1.08;
font-weight: 800;
}
.acs-intro-copy {
font-size: 17px;
line-height: 1.75;
}
.acs-intro-copy p {
margin: 0 0 18px;
}
.acs-text-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--acs-black);
font-size: 13px;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
}
.acs-text-link::after {
content: "";
display: block;
width: 30px;
height: 1px;
background: currentColor;
transition: width .2s ease;
}
.acs-text-link:hover::after {
width: 48px;
}
.acs-section-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items: end;
margin-bottom: var(--acs-head-mb);
}
.acs-section-head .acs-kicker {
grid-column: 1 / -1;
}
/* Optional full-width subhead under the H2 (kept on its own row, left-aligned,
never squeezed into a narrow side column). Unifies every module's header. */
.acs-section-head .acs-section-sub {
grid-column: 1 / -1;
max-width: 820px;
margin: 14px 0 0;
color: var(--acs-muted);
font-size: 16px;
line-height: 1.65;
}
.acs-category-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid var(--acs-line);
border-left: 1px solid var(--acs-line);
}
.acs-category-card {
display: grid;
grid-template-rows: 230px 1fr;
min-height: 405px;
background: #fff;
color: inherit;
border-right: 1px solid var(--acs-line);
border-bottom: 1px solid var(--acs-line);
transition: transform .25s ease, box-shadow .25s ease;
}
.acs-category-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
z-index: 2;
}
.acs-card-media {
display: block;
overflow: hidden;
background: #f1f1f1;
}
.acs-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .45s ease;
}
.acs-category-card:hover img {
transform: scale(1.04);
}
.acs-card-body {
display: flex;
min-height: 174px;
flex-direction: column;
justify-content: space-between;
gap: 20px;
padding: 24px;
}
.acs-card-body strong {
color: var(--acs-black);
font-size: 20px;
line-height: 1.2;
}
.acs-card-body span {
color: var(--acs-muted);
font-size: 14px;
line-height: 1.65;
}
.acs-solutions-band,
.acs-featured {
background: var(--acs-soft);
}
.acs-solution-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.acs-solution-card {
background: #fff;
border: 1px solid var(--acs-line);
border-radius: 6px;
overflow: hidden;
}
.acs-solution-card img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}
.acs-solution-card div {
padding: 22px;
}
.acs-solution-card h3,
.acs-mix-grid h3 {
margin: 0 0 10px;
color: var(--acs-black);
font-size: 20px;
line-height: 1.2;
}
.acs-solution-card p,
.acs-mix-grid p,
.acs-muted {
margin: 0;
color: var(--acs-muted);
font-size: 14px;
line-height: 1.65;
}
.acs-proof-grid {
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: clamp(34px, 7vw, 86px);
align-items: start;
}
.acs-proof-list {
display: grid;
border-top: 1px solid var(--acs-line);
}
.acs-proof-list div {
display: grid;
grid-template-columns: 220px 1fr;
gap: 24px;
padding: 24px 0;
border-bottom: 1px solid var(--acs-line);
}
.acs-proof-list strong {
color: var(--acs-black);
font-size: 16px;
}
.acs-proof-list span {
color: var(--acs-muted);
font-size: 14px;
line-height: 1.65;
}
.acs-mix-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
background: var(--acs-line);
border: 1px solid var(--acs-line);
}
.acs-mix-grid article {
background: #fff;
padding: 30px 26px;
}
.acs-mix-grid span {
display: block;
margin-bottom: 36px;
color: var(--acs-red);
font-size: 12px;
font-weight: 800;
letter-spacing: 0;
}
.acs-resources-grid {
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: clamp(34px, 7vw, 86px);
}
.acs-resources-grid h2 {
margin-bottom: 20px;
}
.acs-resource-links {
display: grid;
gap: 12px;
}
.acs-resource-links a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 20px 0;
color: inherit;
border-bottom: 1px solid var(--acs-line);
}
.acs-resource-links strong {
color: var(--acs-black);
font-size: 18px;
}
.acs-resource-links span {
color: var(--acs-muted);
font-size: 14px;
line-height: 1.5;
text-align: right;
}
.acs-final-cta {
padding: var(--acs-sec-y) 0;
background: #fff;
border-top: 1px solid var(--acs-line);
text-align: center;
}
.acs-final-cta h2 {
max-width: 760px;
margin: 0 auto 28px;
}
.acs-final-cta .acs-actions {
justify-content: center;
}
.acs-reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity .6s ease, transform .6s ease;
}
.acs-reveal.in {
opacity: 1;
transform: none;
}
/* staggered reveal within 3-col grids */
.acs-category-grid .acs-reveal:nth-child(3n+2),
.acs-solution-grid .acs-reveal:nth-child(3n+2) { transition-delay: .08s; }
.acs-category-grid .acs-reveal:nth-child(3n+3),
.acs-solution-grid .acs-reveal:nth-child(3n+3) { transition-delay: .16s; }
.acs-mix-grid .acs-reveal:nth-child(2) { transition-delay: .06s; }
.acs-mix-grid .acs-reveal:nth-child(3) { transition-delay: .12s; }
.acs-mix-grid .acs-reveal:nth-child(4) { transition-delay: .18s; }
.acs-stats-grid .acs-reveal:nth-child(3n+2) { transition-delay: .07s; }
.acs-stats-grid .acs-reveal:nth-child(3n+3) { transition-delay: .14s; }
/* Floating contact stack moved to global footer (acs-footer-loader.php / acs-footer.css)
so it shows site-wide with 3 buttons (Send Inquiry + WhatsApp + Email). */
/* Why ACS stats section */
.acs-why-section {
background: var(--acs-black);
color: #fff;
}
.acs-why-title {
margin: 0 0 52px;
color: #fff;
font-size: clamp(26px, 2.8vw, 38px);
line-height: 1.2;
font-weight: 700;
max-width: 840px;
}
.acs-why-section .acs-kicker {
color: var(--acs-red);
}
.acs-stats-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .1);
}
.acs-stat {
display: flex;
flex-direction: column;
gap: 6px;
padding: 36px 32px;
background: var(--acs-black);
transition: background .25s ease;
}
.acs-stat:hover {
background: #1a1a1a;
}
.acs-stat-number {
display: block;
color: #fff;
font-size: clamp(36px, 3.8vw, 52px);
font-weight: 800;
line-height: 1;
letter-spacing: -.02em;
}
.acs-stat-number small {
font-size: .5em;
font-weight: 700;
vertical-align: super;
letter-spacing: 0;
}
.acs-stat strong {
color: #fff;
font-size: 15px;
font-weight: 700;
margin-top: 8px;
}
.acs-stat span {
color: rgba(255, 255, 255, .56);
font-size: 13px;
line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) {
.acs-home *,
.acs-home *::before,
.acs-home *::after {
transition: none !important;
animation: none !important;
}
}
@media (max-width: 1024px) {
.acs-home-preview .rey-siteHeader--custom.header-pos--absolute {
position: absolute !important;
top: 0;
}
.acs-home-preview .elementor-element-efb49dc .rey-siteLogo img.custom-logo,
.acs-home-preview .elementor-element-efb49dc .rey-siteLogo img.rey-mobileLogo {
width: auto !important;
max-width: 210px !important;
max-height: 44px !important;
}
.acs-category-grid,
.acs-solution-grid,
.acs-mix-grid,
.acs-stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.acs-hero-copy {
top: 122px;
}
.acs-hero-copy h1,
.acs-hero-copy .acs-hero-title {
font-size: 52px;
}
.acs-hero-panels {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.acs-hero-panel {
min-height: 132px;
}
.acs-intro h2,
.acs-section-head h2,
.acs-proof-main h2,
.acs-resources-grid h2,
.acs-final-cta h2 {
font-size: 40px;
}
.acs-intro-grid,
.acs-proof-grid,
.acs-resources-grid {
grid-template-columns: 1fr;
}
.acs-proof-list div {
grid-template-columns: 1fr;
gap: 10px;
}
}
@media (max-width: 767px) {
.acs-container {
width: min(100% - 28px, 1220px);
}
/* Mobile hero is laid out in NORMAL FLOW (flex column), not absolute
positioning. This is the structural guard against the recurring overlap:
long copy now pushes the panels (and the next section) DOWN instead of
overlapping them. Desktop/tablet keep the original absolute layout. */
.acs-hero-stage {
min-height: 100svh;
display: flex;
flex-direction: column;
}
.acs-hero-overlay {
background:
linear-gradient(180deg, rgba(0, 0, 0, .48), rgba(0, 0, 0, .16) 34%, rgba(0, 0, 0, .74)),
linear-gradient(90deg, rgba(0, 0, 0, .44), rgba(0, 0, 0, .12));
}
.acs-hero-copy {
position: relative;
top: auto;
left: auto;
right: auto;
transform: none;
width: auto;
min-height: 0;
padding: 110px 18px 0;
}
.acs-hero-copy h1,
.acs-hero-copy .acs-hero-title {
font-size: 34px;
line-height: 1.06;
}
.acs-hero-text {
font-size: 14px;
line-height: 1.55;
}
.acs-hero-panels {
position: static;
left: auto;
right: auto;
bottom: auto;
margin-top: auto;
padding: 24px 18px;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.acs-hero-panel {
min-height: 124px;
padding: 40px 14px 16px;
}
.acs-panel-action {
top: 15px;
left: 14px;
font-size: 10px;
}
.acs-hero-panel strong {
font-size: 17px;
}
.acs-hero-panel > span:not(.acs-panel-action) {
font-size: 12px;
}
.acs-intro h2,
.acs-section-head h2,
.acs-proof-main h2,
.acs-resources-grid h2,
.acs-final-cta h2 {
font-size: 32px;
}
.acs-section-head {
grid-template-columns: 1fr;
align-items: start;
}
.acs-category-grid,
.acs-solution-grid,
.acs-mix-grid,
.acs-stats-grid {
grid-template-columns: 1fr;
}
/* Floating contact buttons are now styled once in acs-footer.css for all pages —
the homepage-specific override was removed so every page matches. */
.acs-category-card {
grid-template-rows: 210px 1fr;
min-height: auto;
}
.acs-resource-links a {
display: block;
}
.acs-resource-links span {
display: block;
margin-top: 8px;
text-align: left;
}
}
/* ===================== v3 modules ===================== */
.acs-whyacs { background: #fff; }
.acs-trust-intro { max-width: 720px; margin: -10px 0 28px; color: var(--acs-muted); font-size: 16px; line-height: 1.65; }
.acs-trust-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--acs-line); border: 1px solid var(--acs-line); border-radius: 14px; overflow: hidden; margin-bottom: var(--acs-head-mb); }
.acs-trust-metric { min-height: 162px; padding: 24px; background: #fff; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.acs-trust-metric:hover { background: #fbfbfb; border-color: #ddd; transform: translateY(-2px); }
.acs-tb-num { display: block; font-size: clamp(25px, 2.6vw, 36px); font-weight: 800; color: var(--acs-black); line-height: 1.05; }
.acs-tb-num small { font-size: .55em; font-weight: 700; }
.acs-tb-label { display: block; margin-top: 8px; color: var(--acs-black); font-size: 14px; font-weight: 800; line-height: 1.25; }
.acs-trust-metric p { margin: 10px 0 0; color: var(--acs-muted); font-size: 13.5px; line-height: 1.55; }
/* Same layout language as .acs-section-head: kicker spans, title left, link top-right. */
.acs-trust-subhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: end; margin: 0 0 18px; }
.acs-trust-subhead .acs-kicker { grid-column: 1 / -1; margin-bottom: 0; }
.acs-trust-subhead h3 { margin: 0; color: var(--acs-black); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; font-weight: 800; }
.acs-trust-evidence { margin-bottom: 0; }
/* Six portrait cards in one row so the tall proof photos show in full. */
.acs-evidence-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.acs-evidence-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--acs-line); border-radius: 10px; transition: border-color .2s ease, box-shadow .2s ease; }
.acs-evidence-card:hover { border-color: var(--acs-red); box-shadow: 0 14px 30px rgba(16, 16, 16, .06); }
.acs-evidence-media { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--acs-soft); }
.acs-evidence-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .32s ease; }
.acs-evidence-card:hover .acs-evidence-media img { transform: scale(1.035); }
.acs-evidence-body { padding: 13px 14px 15px; }
.acs-evidence-body span { display: block; margin-bottom: 6px; color: var(--acs-red); font-size: 10px; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.acs-evidence-body strong { display: block; color: var(--acs-black); font-size: 14.5px; font-weight: 800; line-height: 1.2; }
.acs-evidence-body p { margin: 7px 0 0; color: var(--acs-muted); font-size: 12.5px; line-height: 1.5; }
.acs-carousel { position: relative; margin-bottom: 14px; }
.acs-car-viewport { overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.acs-car-viewport::-webkit-scrollbar { display: none; }
.acs-car-track { display: flex; gap: 20px; padding: 4px 2px 10px; }
.acs-hot-card { flex: 0 0 clamp(200px, 22vw, 258px); display: flex; flex-direction: column; text-decoration: none; }
.acs-hot-media { display: block; aspect-ratio: 1/1; background: var(--acs-soft); border: 1px solid var(--acs-line); border-radius: 10px; overflow: hidden; }
.acs-hot-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.acs-hot-card:hover .acs-hot-media img { transform: scale(1.05); }
.acs-hot-card strong { margin-top: 12px; font-size: 14.5px; font-weight: 700; color: var(--acs-text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.acs-hot-card:hover strong { color: var(--acs-red); }
.acs-car-arrow { position: absolute; top: calc(50% - 18px); transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.16); color: var(--acs-black); font-size: 22px; line-height: 1; cursor: pointer; z-index: 3; }
.acs-car-prev { left: -8px; } .acs-car-next { right: -8px; }
.acs-car-arrow:hover { background: var(--acs-red); color: #fff; }
/* Hot Sale carousel dot indicators */
.acs-car-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.acs-car-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(16, 16, 16, .18); cursor: pointer; transition: background .2s ease, width .2s ease; }
.acs-car-dot:hover { background: rgba(16, 16, 16, .42); }
.acs-car-dot.is-active { width: 22px; background: var(--acs-red); }
.acs-prodrow2 { margin-top: var(--acs-sub-gap); }
/* In-section subhead (e.g. Inside Our Factory inside the Why ACS module). */
.acs-sub { margin-top: var(--acs-sub-gap); }
.acs-category-strip {
display: grid;
grid-template-columns: repeat(9, minmax(0, 1fr));
gap: 10px;
}
.acs-cat-card {
display: grid;
grid-template-rows: 82px minmax(38px, auto);
min-width: 0;
min-height: 136px;
padding: 8px;
align-content: start;
gap: 10px;
background: #fff;
border: 1px solid var(--acs-line);
border-radius: 8px;
color: var(--acs-text);
text-align: center;
text-decoration: none;
transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.acs-cat-card:hover,
.acs-cat-card:focus-visible {
border-color: var(--acs-red);
color: var(--acs-red);
box-shadow: 0 14px 30px rgba(16, 16, 16, .06);
}
.acs-cat-card:focus-visible {
outline: 2px solid rgba(230, 57, 70, .3);
outline-offset: 3px;
}
.acs-cat-card-media {
display: block;
width: 100%;
height: 82px;
overflow: hidden;
background: var(--acs-soft);
border-radius: 6px;
}
.acs-cat-card-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .32s ease;
}
.acs-cat-card:hover .acs-cat-card-media img,
.acs-cat-card:focus-visible .acs-cat-card-media img {
transform: scale(1.04);
}
.acs-cat-card strong {
display: -webkit-box;
min-width: 0;
overflow: hidden;
color: currentColor;
font-size: 13px;
font-weight: 800;
line-height: 1.25;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow-wrap: anywhere;
}
.acs-sol { display: grid; grid-template-columns: 270px 1fr; gap: clamp(20px, 3vw, 44px); }
/* Four clearly separated card-style tabs, shifted slightly down; auto-advance handled in JS. */
.acs-sol-tabs { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.acs-sol-tab { display: flex; align-items: center; gap: 12px; text-align: left; text-decoration: none; background: #fff; border: 1px solid var(--acs-line); border-left: 3px solid transparent; padding: 17px 18px; font-size: 16px; font-weight: 800; color: var(--acs-muted); cursor: pointer; border-radius: 10px; box-shadow: 0 2px 10px rgba(16, 16, 16, .04); transition: color .2s, background .2s, border-color .2s, box-shadow .2s; }
.acs-sol-tab:hover { color: var(--acs-text); border-color: rgba(230, 57, 70, .4); }
.acs-sol-tab.is-active { color: var(--acs-black); border-color: var(--acs-line); border-left-color: var(--acs-red); background: var(--acs-soft); box-shadow: 0 10px 24px rgba(16, 16, 16, .08); }
.acs-sol-tab-num { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid rgba(230, 57, 70, .35); border-radius: 7px; color: var(--acs-red); font-size: 12px; font-weight: 850; }
.acs-sol-tab.is-active .acs-sol-tab-num { background: var(--acs-red); border-color: var(--acs-red); color: #fff; }
.acs-sol-panel { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(18px,2.4vw,36px); align-items: center; }
.acs-sol-panel[hidden] { display: none; }
.acs-sol-media { border-radius: 12px; overflow: hidden; background: var(--acs-soft); aspect-ratio: 4/3; }
.acs-sol-media img { width: 100%; height: 100%; object-fit: cover; }
.acs-sol-body h3 { margin: 0 0 12px; font-size: clamp(20px,2.4vw,28px); color: var(--acs-black); }
.acs-sol-body p { margin: 0 0 16px; color: var(--acs-text); line-height: 1.6; }
.acs-sol-body ul { margin: 0 0 22px; padding: 0; list-style: none; }
.acs-sol-body li { position: relative; padding-left: 24px; margin-bottom: 9px; color: var(--acs-text); }
.acs-sol-body li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; background: var(--acs-red); border-radius: 2px; }
.acs-ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.acs-ind-item { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 26px 14px; background: #fff; border: 1px solid var(--acs-line); border-radius: 12px; transition: border-color .2s, transform .2s; }
.acs-ind-item:hover { border-color: var(--acs-red); transform: translateY(-3px); }
.acs-ind-icon { color: var(--acs-red); }
.acs-ind-icon svg { width: 40px; height: 40px; }
.acs-ind-label { font-size: 13.5px; font-weight: 700; color: var(--acs-text); }
/* Recent projects — per-case mosaic of real photos (region + venue, no client names) */
.acs-case { margin-bottom: 42px; }
.acs-case:last-child { margin-bottom: 0; }
.acs-case-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--acs-line); }
.acs-case-region { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--acs-red); }
.acs-case-head strong { font-size: clamp(18px, 2vw, 24px); font-weight: 800; color: var(--acs-black); line-height: 1.2; }
/* Packed photo-wall grid: every case block is the same height and fully filled
(cover-fill, no gaps). Per-case templates tile the exact photo count; the
arcade block uses one wide feature tile so 11 photos fill a 4x3 grid exactly. */
.acs-case-mosaic { display: grid; gap: 8px; height: clamp(360px, 40vw, 500px); grid-auto-flow: dense; }
.acs-case-mosaic--fec { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.acs-case-mosaic--mall { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); }
.acs-case-mosaic--arcade { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }
.acs-case-mosaic--arcade .acs-case-shot:first-child { grid-column: span 2; }
.acs-case-shot { position: relative; overflow: hidden; border-radius: 10px; background: var(--acs-soft); }
.acs-case-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.acs-case-shot:hover img { transform: scale(1.06); }
/* Brand watermark: semi-transparent white logo, no box, fixed top-left on every framed case photo. */
.acs-wm-badge {
position: absolute; top: 10px; left: 10px; z-index: 2;
display: inline-flex; align-items: center;
pointer-events: none;
}
.acs-wm-badge img {
display: block; width: auto; height: 16px;
filter: brightness(0) invert(1) drop-shadow(0 0 1px rgba(0, 0, 0, .95)) drop-shadow(0 0 2px rgba(0, 0, 0, .6));
opacity: .95;
}
@media (max-width: 600px) {
.acs-case-mosaic,
.acs-case-mosaic--fec,
.acs-case-mosaic--mall,
.acs-case-mosaic--arcade { height: auto; grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: 124px; }
}
/* Lightbox (click a project photo to enlarge) */
.acs-lightbox { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(16, 16, 16, .92); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.acs-lightbox.is-open { opacity: 1; visibility: visible; }
.acs-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 8px; }
.acs-lightbox-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; transition: background .2s ease; }
.acs-lightbox-close:hover { background: rgba(255, 255, 255, .28); }
@media (max-width: 1200px) {
.acs-category-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.acs-cat-card { grid-template-rows: 120px minmax(34px, auto); min-height: 176px; padding: 10px; }
.acs-cat-card-media { height: 120px; }
}
@media (max-width: 1024px) {
.acs-trust-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acs-evidence-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acs-trust-subhead { grid-template-columns: 1fr; gap: 8px; }
.acs-sol { grid-template-columns: 1fr; }
.acs-sol-tabs { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.acs-sol-tab { border-left: 0; border-bottom: 3px solid transparent; border-radius: 6px; padding: 10px 14px; font-size: 14px; }
.acs-sol-tab.is-active { border-left: 0; border-bottom-color: var(--acs-red); }
.acs-sol-panel { grid-template-columns: 1fr; }
.acs-ind-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
.acs-category-strip {
display: flex;
gap: 12px;
margin-left: -14px;
margin-right: -14px;
padding: 2px 14px 12px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.acs-category-strip::-webkit-scrollbar { display: none; }
.acs-cat-card {
flex: 0 0 clamp(138px, 42vw, 172px);
grid-template-rows: 108px minmax(34px, auto);
min-height: 160px;
scroll-snap-align: start;
}
.acs-cat-card-media { height: 108px; }
}
@media (max-width: 600px) {
/* Why ACS: compact horizontal scroll strips instead of long vertical stacks */
.acs-trust-metrics {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 10px;
border: 0;
border-radius: 0;
background: transparent;
margin: 0 -14px 26px;
padding: 2px 14px 10px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.acs-trust-metrics::-webkit-scrollbar { display: none; }
.acs-trust-metric {
flex: 0 0 clamp(144px, 58vw, 200px);
min-height: auto;
padding: 16px;
border: 1px solid var(--acs-line);
border-radius: 10px;
scroll-snap-align: start;
}
.acs-evidence-grid {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 10px;
margin: 0 -14px;
padding: 2px 14px 10px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.acs-evidence-grid::-webkit-scrollbar { display: none; }
.acs-evidence-card {
flex: 0 0 clamp(150px, 56vw, 190px);
scroll-snap-align: start;
}
.acs-ind-grid { grid-template-columns: repeat(2, 1fr); }
}
/* anchors not hidden under fixed header */
[id^="solution-"], #acs-solutions, #acs-honors, #acs-certs, #acs-products, #acs-cases, #acs-expos, #acs-why { scroll-margin-top: 96px; }
/* ===================== Certifications (Trust section) ===================== */
.acs-cert-badges { display: flex; flex-wrap: nowrap; gap: 16px; align-items: center; justify-content: safe center; overflow-x: auto; list-style: none; margin: 0 0 26px; padding: 22px 20px; background: #fff; border: 1px solid var(--acs-line); border-radius: 14px; box-shadow: 0 2px 10px rgba(16, 16, 16, .04); }
.acs-cert-badges li { flex: 0 0 auto; display: inline-flex; }
.acs-cert-badges img { height: 50px; width: auto; object-fit: contain; transition: transform .2s ease; }
.acs-cert-badges li:hover img { transform: scale(1.12); }
.acs-cert-docs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.acs-cert-doc { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--acs-line); border-radius: 12px; overflow: hidden; text-decoration: none; box-shadow: 0 2px 10px rgba(16, 16, 16, .04); transition: border-color .2s, box-shadow .2s, transform .2s; }
.acs-cert-doc:hover { border-color: rgba(230, 57, 70, .4); box-shadow: 0 10px 24px rgba(16, 16, 16, .08); transform: translateY(-3px); }
.acs-cert-doc-media { aspect-ratio: 3 / 4; background: var(--acs-soft); overflow: hidden; }
.acs-cert-doc-media img { width: 100%; height: 100%; object-fit: contain; }
.acs-cert-doc-label { padding: 12px 14px; font-size: 13px; font-weight: 800; color: var(--acs-text); text-align: center; }
/* ===================== Factory · Exhibitions · Honors ===================== */
.acs-credibility-sub { margin-top: var(--acs-sub-gap); }
.acs-factory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.acs-factory-shot { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--acs-soft); }
.acs-factory-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.acs-factory-shot:hover img { transform: scale(1.05); }
.acs-factory-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 14px 11px; font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, .62), transparent); }
.acs-expo-logos { display: flex; flex-wrap: nowrap; align-items: center; justify-content: safe center; overflow-x: auto; gap: 22px; list-style: none; margin: 0 0 26px; padding: 24px 20px; background: #fff; border: 1px solid var(--acs-line); border-radius: 14px; box-shadow: 0 2px 10px rgba(16, 16, 16, .04); }
.acs-expo-logos li { flex: 0 0 auto; display: inline-flex; }
.acs-expo-logos img { height: 44px; width: auto; max-width: 130px; object-fit: contain; transition: transform .2s ease; }
.acs-expo-logos li:hover img { transform: scale(1.12); }
.acs-expo-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.acs-expo-shot { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--acs-soft); }
.acs-expo-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.acs-expo-shot:hover img { transform: scale(1.05); }
/* Round 11 v2: expo collage — FIXED bento (grid-template-areas) so it's always a complete filled
rectangle. Tall areas A F G K O P (portrait photos), square areas B C D E I J N Q (landscape),
logo areas H L M R (spread, never adjacent). */
.acs-expo-collage {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, clamp(116px, 12.5vw, 156px));
grid-template-areas:
"A D G J M P"
"A E G K N P"
"B F H K O Q"
"C F I L O R";
gap: 8px;
}
.acs-collage-cell { border-radius: 10px; overflow: hidden; }
.col-A{grid-area:A} .col-B{grid-area:B} .col-C{grid-area:C} .col-D{grid-area:D} .col-E{grid-area:E} .col-F{grid-area:F}
.col-G{grid-area:G} .col-H{grid-area:H} .col-I{grid-area:I} .col-J{grid-area:J} .col-K{grid-area:K} .col-L{grid-area:L}
.col-M{grid-area:M} .col-N{grid-area:N} .col-O{grid-area:O} .col-P{grid-area:P} .col-Q{grid-area:Q} .col-R{grid-area:R}
.acs-collage-photo { background: var(--acs-soft); }
.acs-collage-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.acs-collage-photo:hover img { transform: scale(1.05); }
.acs-collage-logo { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--acs-line); padding: 14px; }
.acs-collage-logo img { max-width: 100%; max-height: 72%; width: auto; object-fit: contain; }
.acs-honors { margin-top: var(--acs-sub-gap); text-align: center; }
.acs-honors-head { margin-bottom: 20px; }
.acs-honors-media { margin: 0; }
.acs-honors-shot { position: relative; display: inline-block; max-width: 100%; overflow: hidden; border-radius: 14px; border: 1px solid var(--acs-line); }
.acs-honors-shot img { display: block; transition: transform .4s ease; }
.acs-honors-shot:hover img { transform: scale(1.02); }
.acs-honors-media img { max-width: 100%; height: auto; border-radius: 14px; }
@media (max-width: 980px) {
.acs-cert-docs { grid-template-columns: repeat(3, 1fr); }
.acs-factory-grid { grid-template-columns: repeat(2, 1fr); }
.acs-expo-photos { grid-template-columns: repeat(3, 1fr); }
.acs-expo-collage { grid-template-rows: repeat(4, clamp(96px, 13vw, 140px)); }
}
@media (max-width: 680px) {
/* Mobile: drop the fixed areas → clean 2-col grid of 4:3 tiles. */
.acs-expo-collage { grid-template-areas: none; grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
.acs-expo-collage > .acs-collage-cell { grid-area: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
.acs-cert-badges img { height: 44px; }
.acs-cert-docs { grid-template-columns: repeat(2, 1fr); }
.acs-expo-photos { grid-template-columns: repeat(2, 1fr); }
.acs-expo-logos img { height: 38px; }
}