/*
 * rowmarkllc-builder.css — Rowmark LLC landing-page THEME
 * =======================================================
 * Layers on top of the cross-domain shared.css (which provides the base
 * page-builder block layout). This sheet gives the LLC landing pages their
 * look: section bands, section titles, buttons, stat rows, card variants,
 * and the swatch / pattern marquees.
 *
 * It targets the same class contract the shared block templates emit
 * (.block--hero, .block--card-grid, .block--section, .block--slider, …) plus
 * a small set of theme utility classes (.pb-*) that marketing applies via a
 * block's "customCssClasses" field. Nothing here is page-specific, so it
 * carries straight over to real Landing Pages entries in phase 2.
 *
 * Palette + type are from the Figma design tokens (Acumin Pro; azure #005a9c,
 * bright #0092d0, navy #22305f, Dove Gray #636363, Concrete #f3f3f3).
 */

:root {
    --llc-navy: #22305f;
    --llc-blue: #0071bc;
    --llc-bright: #0092d0;
    --llc-ink: #2b2b2b;
    --llc-gray: #5a5a5a;
    --llc-light: #f3f4f6;
    --llc-line: #e2e6ea;
    --pb-max: 1216px;
    --pb-section-y: 76px;
}

/* ============================================================
   Rhythm + containers
   ============================================================ */
.landing-page .page-builder {
    font-family: "acumin-pro", sans-serif;
    color: var(--llc-ink);
    overflow-x: hidden;
}

/* Full-bleed band sections; inner content is contained + padded. */
.landing-page .block--section {
    padding: 0;
}
.landing-page .block--section__inner {
    max-width: var(--pb-max);
    margin: 0 auto;
    padding: var(--pb-section-y) 32px;
}

/* Standalone (non-section) blocks that should be contained. These are `.block`
   elements (shared.css sets .block width:100%), so border-box is required or the
   32px padding pushes the content past the viewport on small screens (clipped by
   .page-builder overflow-x:hidden — the SEO/rich-text paragraphs ran off-screen). */
.landing-page .pb-contained {
    max-width: var(--pb-max);
    margin: 0 auto;
    padding: var(--pb-section-y) 32px;
    box-sizing: border-box;
}

/* Band background colors */
.landing-page .pb-band-white  { background: #fff; }
.landing-page .pb-band-light  { background: var(--llc-light); }
.landing-page .pb-band-blue   { background: var(--llc-bright); }
.landing-page .pb-band-navy   { background: var(--llc-navy); }
/* Marquee bands: exact Figma band navy so the strip's baked-in background blends
   (swatch #253976, pattern #18244a); the strip sits just under the intro with
   navy padding below it (the inner drops its bottom padding; the section adds it
   back below the strip). */
.landing-page .pb-band-swatch { background: #253976; }
.landing-page .pb-band-navy--tight { background: #18244a; }
.landing-page .pb-band-swatch, .landing-page .pb-band-navy--tight { padding-bottom: 56px; }
.landing-page .pb-band-swatch .block--section__inner,
.landing-page .pb-band-navy--tight .block--section__inner { padding-bottom: 0; }
.landing-page .pb-band-swatch .pb-section-intro,
.landing-page .pb-band-navy--tight .pb-section-intro { margin-bottom: 0; }

/* Pattern Types header: title inline with the intro on its right; stacks on
   small screens. */
.landing-page .pb-patterns__head { display: flex; align-items: center; gap: 48px; }
.landing-page .pb-patterns__head .pb-section-title { margin: 0; flex: 0 0 auto; }
.landing-page .pb-patterns__head .pb-section-intro { margin: 0 0 0 auto; flex: 0 1 auto; max-width: 680px; }
@media (max-width: 768px) {
    .landing-page .pb-patterns__head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .landing-page .pb-patterns__head .pb-section-intro { margin-left: 0; }
}

/* ============================================================
   Section titles + intros
   ============================================================ */
.landing-page .pb-section-title {
    font-size: 36px;
    line-height: 1.15;
    font-weight: 700;
    color: #253976;   /* Figma navy for headings (was --llc-navy #22305f) */
    text-align: center;
    margin: 0 0 18px;
    /* Figma renders section titles all-caps via CSS (source text is mixed case
       but displays uppercase), so transform here rather than in the copy. */
    text-transform: uppercase;
}
.landing-page .pb-section-title--light { color: #fff; }
.landing-page .pb-section-title--left  { text-align: left; }
.landing-page .pb-section-title .is-bright { color: var(--llc-bright); }
/* Custom Surface page uses 44px section headings (Figma 71:477/562/716); Total
   Signage uses 36px. Same-specificity as the base rule, declared later, so it wins. */
.landing-css .pb-section-title { font-size: 44px; }

.landing-page .pb-section-intro {
    /* 900px keeps the TRG Difference paragraph at 3 lines at full size (672 made
       it 4). Per-section overrides below handle the full-width / 50% cases. */
    max-width: 900px;
    margin: 0 auto 40px;
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
    color: var(--llc-gray);
}
.landing-page .pb-section-intro--light { color: rgba(255, 255, 255, 0.92); }
.landing-page .pb-section-intro--left  { margin-left: 0; text-align: left; }

/* --- Per-section overrides (TSS punch-list, all Figma-grounded) --- */
/* Brands heading is mixed case in Figma (node 17:1328 "The Brands Behind TRG
   SIGNAGE SOLUTIONS"); drop the global uppercase transform for this section. */
#brands .pb-section-title { text-transform: none; }
/* Intros that span the full content/gallery width (Figma): One Source & Built on
   Industry (match the card grid), and Industries Served (match the tile gallery). */
.landing-page .pb-band-blue .pb-section-intro,
.landing-page .block--section:has(.block--stats) .pb-section-intro,
.landing-page .block--section:has(.image-grid--tiles) .pb-section-intro { max-width: none; }
/* Bold Color intro is a strict ~50% column (Figma 222:469). */
.landing-page .pb-band-swatch .pb-section-intro { max-width: 50%; }

/* ============================================================
   Buttons  (.pb-btn + variants)
   ============================================================ */
.landing-page .pb-btn {
    display: inline-block;
    padding: 14px 26px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;   /* Figma buttons are square */
    border: 2px solid transparent;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.landing-page .pb-btn--solid        { background: #0089d0; color: #fff; border-color: #0089d0; }   /* Figma primary #0089d0 */
.landing-page .pb-btn--solid:hover   { background: #0071bc; border-color: #0071bc; }
.landing-page .pb-btn--navy         { background: var(--llc-navy); color: #fff; border-color: var(--llc-navy); }
.landing-page .pb-btn--navy:hover    { background: #172246; }
.landing-page .pb-btn--outline      { background: transparent; color: #0089d0; border-color: #0089d0; }
.landing-page .pb-btn--outline:hover { background: #0089d0; color: #fff; }
.landing-page .pb-btn--outline-light      { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.landing-page .pb-btn--outline-light:hover { background: #fff; color: var(--llc-navy); }
.landing-page .pb-btn--block         { display: block; text-align: center; }

/* TSS button blue: Figma uses #0089d0 (hero 15:543, trusted 15:572) — lighter
   than the shared --llc-blue (#0071bc), which marketing flagged as "too dark".
   Scoped to .landing-tss so the already-approved Custom Surface page is untouched. */
.landing-tss .pb-btn--solid          { background: #0089d0; border-color: #0089d0; }
.landing-tss .pb-btn--solid:hover    { background: #0071bc; border-color: #0071bc; }
.landing-tss .pb-btn--outline        { color: #0089d0; border-color: #0089d0; }
.landing-tss .pb-btn--outline:hover  { background: #0089d0; color: #fff; border-color: #0089d0; }

/* ============================================================
   HERO — split variant (Total Signage)
   ============================================================ */
.landing-page .block--hero.hero--split {
    /* Figma hero (15:531): white base with a faint (5% opacity) signage photo
       behind the whole hero — the "subtle background image". */
    background: #fff;
    height: auto;          /* override shared .block--hero height:calc(100vh - header) */
    overflow: hidden;
    position: relative;
}
.hero--split::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('/images/tss-hero-bg.jpg') center / cover no-repeat;
    opacity: 0.05;
    pointer-events: none;
}
.hero--split .hero-slide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
    max-width: var(--pb-max);
    margin: 0 auto;
    padding: 64px 32px;
    height: auto;
    position: relative;    /* sits above the faint bg layer */
    z-index: 1;
}
/* Reset shared slideshow absolute positioning so the split lays out in grid flow */
.hero--split .slide-text { position: static; top: auto; left: auto; padding: 0; }
.hero--split .hero-image { position: static; inset: auto; height: auto; }
.hero--split .hero-image img {
    width: 100%;
    height: auto;
    display: block;
    /* Figma 15:547: rounded card with a soft drop shadow */
    border-radius: 4px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}
/* display:block above would defeat the UA [hidden] rule — restore it so only the
   active rotation image (hero-rotate.js) is shown */
.hero--split .hero-image img[hidden] { display: none; }
/* Rotating heroes: pin the panel to the first image's aspect ratio (set inline as
   --hero-ar by blockLandingHero.twig) so cuts never move the layout; odd-sized
   images crop to fill instead of resizing the panel */
.hero--split .hero-image.js-hero-rotate { aspect-ratio: var(--hero-ar, auto); }
.hero--split .hero-image.js-hero-rotate img { height: 100%; object-fit: cover; }
.landing-page .pb-hero-title {
    font-size: 52px;
    line-height: 1.05;
    font-weight: 700;
    color: #253976;   /* Figma navy (was --llc-navy #22305f) */
    margin: 0 0 16px;
}
.landing-page .pb-hero-title .is-bright { color: var(--llc-bright); }
.landing-page .pb-hero-title .is-white  { color: #fff; }
.landing-page .pb-hero-lead {
    font-size: 18px;
    font-weight: 700;
    color: var(--llc-ink);
    margin: 0 0 16px;
}
/* Figma split hero (TSS): 63px heading (15:536), 20px slate-bold lead (15:538),
   20px light body (15:540). Scoped to .hero--split so the CSS page's overlay
   hero keeps its own type scale. */
.hero--split .pb-hero-title { font-size: 63px; line-height: 1.15; }
/* p.pb-hero-lead beats the sibling `.hero--split .slide-text p` (which sets the
   body color) so the lead keeps its Figma slate color. */
.hero--split .slide-text p.pb-hero-lead { font-size: 20px; color: #364153; }
.hero--split .slide-text p { color: #4a4a4a; font-size: 20px; line-height: 26px; margin: 0 0 14px; }
.landing-page .slide-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; padding: 0; }

/* ============================================================
   HERO — overlay variant (Custom Surface)
   ============================================================ */
.landing-page .block--hero.hero--overlay {
    position: relative;
    height: auto;          /* override shared .block--hero height:calc(100vh - header) */
    min-height: 520px;
    background-color: #1a2540;   /* Figma 71:429 section fill behind the photo */
    background-size: cover;
    background-position: left center;   /* Figma: photo 71:430 is left-anchored (x:0), not centered */
    isolation: isolate;
}
.hero--overlay .hero-slide { height: auto; }
.hero--overlay .slide-text { position: static; top: auto; left: auto; width: 100%; }
.hero--overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    /* EXACT Figma overlay (node 71:431): solid navy #253976 on the right where the
       copy sits, fading through the middle to a translucent cyan (#0089d0 @ 0.35) at
       the lower-left so the B&W photo reads through. */
    background: linear-gradient(-60deg, rgb(37,57,118) 32.37%, rgba(37,57,118,0.88) 52.3%, rgba(0,137,208,0.35) 92.27%);
    z-index: -1;
}
.hero--overlay .hero-slide {
    display: flex;
    justify-content: flex-end;
    max-width: var(--pb-max);
    margin: 0 auto;
    padding: 90px 32px;
    position: static;
}
.hero--overlay .slide-text { padding: 0; }
.hero--overlay__copy {
    /* Figma copy box is 768px wide (node 71:434); a narrower box makes the
       64px "Custom Surface Solutions" wrap to two lines. */
    max-width: 768px;
    text-align: right;
    margin-left: auto;
}
/* Figma heading (71:436): 64px / line-height 70.4px / tracking -0.64px, so
   "Custom Surface Solutions" sits on ONE line across the 768px box. */
.hero--overlay .pb-hero-title {
    color: #fff;
    font-size: 64px;
    /* Unitless 1.1 (= 70.4/64) so the line-height scales with the responsive
       font-size — a fixed 70.4px left a big gap between the two heading lines
       once the font dropped to 40px/32px on small screens. */
    line-height: 1.1;
    letter-spacing: -0.64px;
}
/* Figma lead (71:439): 19.2px regular, 31.68px line-height, 82% white, and a
   576px measure right-aligned within the copy box (narrower than the heading). */
.hero--overlay .pb-hero-lead {
    font-size: 19.2px;
    line-height: 31.68px;
    font-weight: 400;
    color: rgba(255,255,255,0.82);
    max-width: 576px;
    margin-left: auto;
}
.hero--overlay .slide-buttons { justify-content: flex-end; }

/* hero stat strip */
.landing-page .pb-hero-stats {
    display: grid;
    /* Figma 71:447: three 191px columns, 40px gutters, the whole 653px block
       pushed to the right edge of the copy (not stretched full-width). */
    grid-template-columns: repeat(3, 191px);
    justify-content: flex-end;
    gap: 26px 40px;
    margin-top: 36px;
    padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,0.1);   /* Figma 71:447 */
    text-align: left;
}
/* Each stat's number + label are LEFT-aligned within its column (Figma items-start),
   overriding the base .pb-stat centering used by the on-page stat rows. */
.landing-page .pb-hero-stats .pb-stat {
    align-items: flex-start;
    text-align: left;
    padding: 8px 0;
}
.landing-page .pb-hero-stats .pb-stat__num { color: #0089d0; }   /* Figma 71:449 */
.landing-page .pb-stat--sm .pb-stat__num { font-size: 28px; }
.landing-page .pb-stat--sm .pb-stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.88px; }

/* ============================================================
   Stat row  (.pb-stats / .pb-stat) — candidate blockStats
   ============================================================ */
.landing-page .block--stats { margin: 8px 0 48px; }
.landing-page .pb-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 900px;
    margin: 0 auto;
}
.landing-page .pb-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 24px;
}
.landing-page .pb-stats .pb-stat + .pb-stat { border-left: 1px solid var(--llc-line); }
.landing-page .pb-stat__num {
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    color: var(--llc-bright);
    margin-bottom: 8px;
}
.landing-page .pb-stat__label { font-size: 16px; font-weight: 700; color: var(--llc-navy); }
.hero--overlay .pb-stat__label { color: rgba(255,255,255,0.6); }   /* Figma 71:452 */
.landing-page .pb-stat__sub { font-size: 12px; color: var(--llc-gray); margin-top: 4px; }
.hero--overlay .pb-stat__sub, .hero--overlay .pb-stat__label small { color: rgba(255,255,255,0.7); }
.landing-page .pb-stat__label small { display: block; font-weight: 400; font-size: 11px; margin-top: 3px; }

/* Built on Industry stat row (Figma 16:1041): 60px #0089d0 numbers, a
   REGULAR-weight (400) 20px navy label — marketing flagged the current bold as
   "too dark or bold" — and a 14px slate sub. Full-width row. Scoped to
   .block--stats so the CSS page's hero stat strip is untouched. */
.landing-page .block--stats .pb-stats { max-width: none; }
.landing-page .block--stats .pb-stat__num { font-size: 60px; color: #0089d0; }
.landing-page .block--stats .pb-stat__label { font-size: 20px; font-weight: 400; color: #253976; }
.landing-page .block--stats .pb-stat__sub { font-size: 14px; color: #4a5565; }

/* ============================================================
   Placeholders (themed, pending phase-2 asset upload)
   ============================================================ */
.landing-page .pb-ph {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #dbe4ee 0%, #bccddd 100%);
}
/* .pb-ph--photo fills its container only where that container is sized
   (absolute in overlay cards/tiles, fixed-height media in card grids).
   No min-height:100% — that made in-flow photos stretch to the equalized
   grid-row height and bury the card content. */
.landing-page .pb-ph--icon {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,0.9);
}

/* ============================================================
   Card grid — BRANDS variant (3-up, logo + body + button)
   ============================================================ */
.landing-page .card-grid--brands .block--card-grid__wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.card-grid--brands .block--card-grid__item {
    flex: none !important;
    justify-content: space-between;
    padding: 30px 26px;
    border: 1px solid var(--llc-line);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border-radius: 0;   /* square, matching the other cards */
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Card content sits above the hover background layer. */
.card-grid--brands .block--card-grid__item > * { position: relative; z-index: 1; }
/* Hover ("Variant2" in the Figma): the card flips to the brand's product photo
   under a blue tint, with a white logo/text and an outline button. Each item
   sets its own --pb-hover-bg in the twig. */
.card-grid--brands .block--card-grid__item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: linear-gradient(rgba(0, 105, 165, 0.82), rgba(0, 88, 150, 0.86)), var(--pb-hover-bg) center / cover no-repeat;
}
.card-grid--brands .block--card-grid__item:hover {
    border-color: transparent;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}
.card-grid--brands .block--card-grid__item:hover::before { opacity: 1; }
.card-grid--brands .block--card-grid__item:hover .block--card-grid__body { color: #fff; }
.card-grid--brands .block--card-grid__item:hover .block--card-grid__media img { filter: brightness(0) invert(1); }
.card-grid--brands .block--card-grid__item:hover .pb-wordmark--accent,
.card-grid--brands .block--card-grid__item:hover .pb-wordmark--accent small { color: #fff; }
.card-grid--brands .block--card-grid__item:hover .pb-btn--navy { background: transparent; border-color: #fff; }
.card-grid--brands .block--card-grid__media {
    width: auto; height: 64px; background: none; box-shadow: none;
    border-radius: 0; margin-bottom: 18px;
}
.card-grid--brands .block--card-grid__media img { max-width: 190px; max-height: 60px; }
.card-grid--brands .block--card-grid__body { color: var(--llc-gray); line-height: 1.55; margin-bottom: 22px; }
/* Learn More button spans the full card width (Figma card CTA is wide). The card
   is align-items:center, so a plain block button shrinks to its text — align-self:
   stretch makes it fill while the logo/body above stay centered. */
.card-grid--brands .pb-btn--block { width: auto; margin: 0; align-self: stretch; }

/* Accent text wordmark (no logo asset yet) */
.landing-page .pb-wordmark--accent {
    font-weight: 700; font-size: 30px; color: #7ab648; line-height: 1;
    display: inline-flex; flex-direction: column; align-items: center;
}
.landing-page .pb-wordmark--accent small { font-size: 11px; letter-spacing: 0.18em; color: #8a8f94; font-weight: 400; margin-top: 2px; }

/* ============================================================
   JPP feature band
   ============================================================ */
.landing-page .pb-jpp-band {
    position: relative;
    border-radius: 0;   /* Figma banner is square — was 6px (read as too rounded) */
    overflow: hidden;
    background-size: cover;
    background-position: center;
    margin-bottom: 44px;
    isolation: isolate;
}
.pb-jpp-band::before {
    content: "";
    position: absolute; inset: 0;
    /* Figma overlay (node 17:1335): a light-blue vertical gradient (#0070ab→#0089d0→#0070ab),
       NOT the old horizontal blue→dark-navy gradient. */
    background: linear-gradient(to bottom, rgba(0,112,171,0.9) 0%, rgba(0,137,208,0.7) 50.24%, rgba(0,112,171,0.9) 100%);
    z-index: -1;
}
/* Figma content 17:1336: full-width, centered, 80px vertical / 48px side padding. */
.pb-jpp-band__inner {
    margin: 0 auto;
    padding: 80px 48px;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
}
/* Real Johnson Plastics Plus logo (white PNG exported from Figma) — 284×64 in Figma. */
.pb-jpp-band__logo { display: block; height: 64px; width: auto; margin: 0 auto; }
/* Figma 17:1339: 36px / 40px, tracking 0.37px, 24px above (one line at desktop width). */
.pb-jpp-band__title { font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: 0.37px; margin: 24px 0 0; }
/* Figma 17:1342: 20px / 32.5px white, tracking -0.45px, capped at 672px, 16px above / 32px below. */
.pb-jpp-band__copy { font-size: 20px; line-height: 32.5px; letter-spacing: -0.45px; color: #fff; max-width: 672px; margin: 16px auto 32px; }

/* ============================================================
   Card grid — PHOTO-TOP variant (One Source, 4-up)
   ============================================================ */
/* Figma one-source card (node 15:718): white card, rounded 4px (NOT 8px), a
   subtle drop shadow, a full-width 192px cover image, 24px padding, a 12px
   title->body gap, and the exact type ramp. 4-up grid with 32px gaps. */
.landing-page .card-grid--photo-top .block--card-grid__wrapper { gap: 32px; }
.card-grid--photo-top .block--card-grid__item {
    padding: 0;
    align-items: stretch;
    text-align: left;
    overflow: hidden;
    /* Square corners per marketing (Figma shows a token 4px; the explicit
       instruction is square, so 0 wins). */
    border-radius: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
    background: #fff;
}
.card-grid--photo-top .block--card-grid__media {
    width: 100%; height: 192px; border-radius: 0;
    background: linear-gradient(135deg, #dbe4ee, #bccddd);
    box-shadow: none; margin: 0;
}
/* Real photo fills the media slot. The max-width/max-height resets override
   shared.css `.block--card-grid__media img { max-width:60%; max-height:60% }`,
   which was clamping the photo to a padded thumbnail instead of covering. */
.card-grid--photo-top .block--card-grid__media img {
    width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; display: block;
}
.card-grid--photo-top .block--card-grid__text { padding: 24px; }
.card-grid--photo-top .block--card-grid__title {
    text-align: left; text-transform: none; font-size: 20px;
    /* !important overrides shared.css `h3 { margin-bottom: 0 !important }` so the
       12px title->description gap (Figma pt-12) survives. */
    color: #253976; line-height: 28px; margin: 0 0 12px !important; letter-spacing: -0.449px;
}
.card-grid--photo-top .block--card-grid__body { text-align: left; color: #4a5565; font-size: 16px; line-height: 26px; }

/* ============================================================
   Card grid — OVERLAY variant (Leadership, 2-up)
   ============================================================ */
.landing-page .card-grid--overlay .block--card-grid__wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}
/* Figma leadership cards (16:1064): rounded 4px + soft shadow, 384px tall. */
.pb-overlay-card {
    flex: none !important;
    position: relative;
    min-height: 384px;
    padding: 0 !important;
    /* Square corners per marketing (see one-source note above). */
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    justify-content: flex-end !important;
    isolation: isolate;
}
.pb-overlay-card .pb-ph,
.pb-overlay-card img {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
    background: linear-gradient(135deg, #3a4a72, #22305f);
}
/* Figma 16:1066: the navy gradient covers the WHOLE card (top 0.5 -> mid 0.7 ->
   bottom 0.9), not just the lower third. Navy is #253976 = rgb(37,57,118). */
.pb-overlay-card::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, rgba(37,57,118,0.9) 0%, rgba(37,57,118,0.7) 50%, rgba(37,57,118,0.5) 100%);
}
.pb-overlay-card__text { padding: 40px; color: #fff; }
.pb-overlay-card__text h3 { font-size: 30px; font-weight: 700; margin: 0 0 12px !important; }
.pb-overlay-card__text p { font-size: 16px; line-height: 26px; color: rgba(255,255,255,0.95); margin: 0; }

/* ============================================================
   Card grid — ICON variant (TRG Difference, 3-up chips)
   ============================================================ */
.landing-page .card-grid--icon .block--card-grid__wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.card-grid--icon .block--card-grid__item {
    flex: none !important;
    border: 1px solid var(--llc-line);
    box-shadow: none;
    border-radius: 0;
    padding: 30px 24px;
}
/* Figma icon (node 71:484) is a 40x40 blue-circle glyph with the art filling the
   box. The max-width/max-height resets override shared.css's `.block--card-grid__media
   img { max-width:60%; max-height:60% }`, which was shrinking it inside the box. */
.card-grid--icon .block--card-grid__media { background: transparent; box-shadow: none; width: 40px; height: 40px; margin: 0 auto 6px; }
.card-grid--icon .pb-icon { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; display: block; }
.card-grid--icon .block--card-grid__title { text-transform: none; font-size: 18px; color: var(--llc-navy); }
.card-grid--icon .block--card-grid__body { color: var(--llc-gray); font-size: 14px; line-height: 1.5; }

/* ============================================================
   Card grid — CAPABILITY variant (Custom Capabilities, 3-up)
   ============================================================ */
.landing-page .card-grid--capability .block--card-grid__wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
/* Figma capability card (node 71:568): square corners, 184px cover photo. */
.card-grid--capability .block--card-grid__item {
    flex: none !important;
    padding: 0;
    align-items: stretch;
    text-align: left;
    overflow: hidden;
    border-radius: 0;
}
.card-grid--capability .pb-ph--photo { height: 184px; }
.card-grid--capability .pb-cap__photo { width: 100%; height: 184px; object-fit: cover; display: block; }
.card-grid--capability .pb-cap__logo { padding: 20px 22px 0; text-align: center; }
/* Each card's logo is a complete brand lockup image (wordmark + division line
   baked in — Rowmark Custom Extrusion / Rowmark Custom Laminations / FinishTEK),
   so no separate text line. Sized to Figma: laminations is tallest (74px) because
   of its swoosh; the others land ~56/48px at this max-width. */
.card-grid--capability .pb-cap__logo img { max-height: 74px; max-width: 280px; width: auto; height: auto; }
.card-grid--capability .pb-cap__logo small {
    display: block; margin-top: 4px; font-size: 12px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--llc-blue);
}
.card-grid--capability .block--card-grid__text { padding: 16px 22px; }
.card-grid--capability .block--card-grid__body { text-align: center; color: var(--llc-gray); font-size: 14px; line-height: 1.5; }
.card-grid--capability .pb-btn--block { margin: auto 38px 22px; }  /* Figma inset (~44px) — button ~304px, not full width */

/* Card gaps. shared.css sets `--card-gap: 40px` on
   `.block--card-grid:not(.card-grid--stack):not(.card-grid--horizontal) .block--card-grid__wrapper`
   — (0,4,0), no !important — and uses it for both `gap` and the flex-basis. The
   per-variant `gap` set above is only (0,3,0), so it lost. Match (0,4,0) here (this
   sheet loads after shared, so equal specificity wins on order) and set the variable. */
.landing-page .card-grid--brands.block--card-grid    .block--card-grid__wrapper { --card-gap: 26px; }
.landing-page .card-grid--photo-top.block--card-grid .block--card-grid__wrapper { --card-gap: 32px; }
.landing-page .card-grid--overlay.block--card-grid   .block--card-grid__wrapper { --card-gap: 32px; }
.landing-page .card-grid--icon.block--card-grid      .block--card-grid__wrapper { --card-gap: 16px; }
.landing-page .card-grid--capability.block--card-grid .block--card-grid__wrapper { --card-gap: 20px; }

/* Check list */
.landing-page .pb-check-list { list-style: none; margin: 16px 0 0; padding: 0; }
.landing-page .pb-check-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 9px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--llc-ink);
}
.landing-page .pb-check-list li::before {
    content: "";
    position: absolute; left: 0; top: 2px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #4d86cb;   /* Figma check dot — outer (left/right) capability cards */
}
/* Figma deliberately tints the MIDDLE capability card's check dots a darker navy
   (#2f3872) vs the #4d86cb on the left/right cards — per Marketing's design. */
.landing-page .card-grid--capability .block--card-grid__wrapper > .block--card-grid__item:nth-child(2) .pb-check-list li::before {
    background: #2f3872;
}
.landing-page .pb-check-list li::after {
    content: "";
    /* Centered in the 16px circle (center 8,10): the box sits ~1px above center so
       the ✓ — whose visual weight is toward its junction — reads centered. */
    position: absolute; left: 5px; top: 4px;
    width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.landing-page .pb-band__cta { text-align: center; margin-bottom: 44px; }

/* ============================================================
   Image tile grid (Industries)
   ============================================================ */
.landing-page .image-grid--tiles .block--image-grid__wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
/* Figma tiles (node 71:722) are 4:3 (292x219) with square corners. */
.landing-page .pb-tile {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 0;
    overflow: hidden;
    isolation: isolate;
}
.pb-tile .pb-ph { position: absolute; inset: 0; z-index: -1; }
.pb-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
/* Real-text tile label over the (now label-less) photo. The tile source images
   were re-exported without the baked-in Figma label so this WCAG-clean text label
   is the only one — see replace-landing-assets. */
.pb-tile__label {
    position: absolute;
    /* Figma (71:722): the band floats ~20px above the tile bottom (a spacer sits
       below it), so the image shows in the gap — not flush to the edge. */
    left: 0; right: 0; bottom: 20px;
    background: #253976;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 6px;
}

/* ============================================================
   Marquees (swatches + patterns) — reuse shared pb-slider JS/markup
   ============================================================ */
/* Gap between the band heading and the marquee (Figma: ~28px swatch, ~40px pattern). */
.landing-page .pb-swatch-marquee { margin-top: 28px; }
.landing-page .pb-pattern-marquee { margin-top: 40px; }

/* Strip marquee: the exported Figma strip (swatches / patterns) scrolled via a
   duplicated track for a seamless loop. */
.landing-page .pb-strip-marquee { overflow: hidden; width: 100%; position: relative; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.landing-page .pb-strip-marquee.is-dragging { cursor: grabbing; }
.landing-page .pb-strip-marquee__track { display: flex; width: max-content; animation: pb-strip-scroll 60s linear infinite; will-change: transform; }
.landing-page .pb-strip-marquee__track img { -webkit-user-drag: none; user-drag: none; }
.landing-page .pb-strip-marquee__track img { display: block; width: auto; }
/* Horizontal edge fade: tiles dissolve into the band navy at the left/right
   edges as they scroll (fixed to the marquee, NOT moving with a slide). Uses the
   per-band navy so the fade matches the band. */
.landing-page .pb-strip-marquee::before,
.landing-page .pb-strip-marquee::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 160px;
    z-index: 2;
    pointer-events: none;
}
.landing-page .pb-strip-marquee::before { left: 0; }
.landing-page .pb-strip-marquee::after { right: 0; }
.landing-page .pb-swatch-marquee .pb-strip-marquee::before { background: linear-gradient(to right, #253976, rgba(37, 57, 118, 0)); }
.landing-page .pb-swatch-marquee .pb-strip-marquee::after  { background: linear-gradient(to left,  #253976, rgba(37, 57, 118, 0)); }
.landing-page .pb-pattern-marquee .pb-strip-marquee::before { background: linear-gradient(to right, #18244a, rgba(24, 36, 74, 0)); }
.landing-page .pb-pattern-marquee .pb-strip-marquee::after  { background: linear-gradient(to left,  #18244a, rgba(24, 36, 74, 0)); }
.landing-page .pb-swatch-marquee .pb-strip-marquee, .landing-page .pb-swatch-marquee .pb-strip-marquee__track img { height: 148px; }
.landing-page .pb-pattern-marquee .pb-strip-marquee, .landing-page .pb-pattern-marquee .pb-strip-marquee__track img { height: 420px; }
/* The pattern strip is the full 26-slide reel (~7600px/copy) vs the swatch strip's
   ~1650px, so scale its duration to keep a matching calm scroll speed (~27px/s). */
.landing-page .pb-pattern-marquee .pb-strip-marquee__track { animation-duration: 280s; }
/* 24-swatch reel (~4640px/copy) — scaled to the same ~27px/s calm speed. */
.landing-page .pb-swatch-marquee .pb-strip-marquee__track { animation-duration: 170s; }
/* Three identical copies in the track (see blockMarquee.twig); scroll exactly one
   copy width (-100%/3) so the loop restart is invisible. */
@keyframes pb-strip-scroll { to { transform: translateX(-33.3333%); } }
/* a11y (WCAG 2.2 AA — ACCESSIBILITY.md): stop the auto-scroll for users who ask
   for reduced motion; the strip stays legible from its start position. */
@media (prefers-reduced-motion: reduce) {
    .landing-page .pb-strip-marquee__track { animation: none; }
}
.landing-page .pb-slider__track { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; }
.landing-page .pb-slider__track::-webkit-scrollbar { display: none; }
.landing-page .pb-slider__slide { flex: 0 0 auto; }

.landing-page .pb-swatch {
    position: relative;
    width: 150px; height: 150px;
    display: flex; align-items: flex-end;
}
.landing-page .pb-swatch__label {
    width: 100%;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 8px;
}
.landing-page .pb-pattern {
    position: relative;
    width: 150px; height: 300px;
    display: flex; align-items: flex-end;
    border-radius: 2px;
}
.landing-page .pb-pattern__label {
    width: 100%;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 12px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* ============================================================
   SEO copy block
   ============================================================ */
/* Figma SEO block is 976px of content (1024 container, 24px pad). border-box + the
   32px .pb-contained padding → 1040 outer so the heading stays on one line. */
.landing-page .pb-seo { max-width: 1040px; }
.landing-page .pb-seo h2 { font-size: 30px; font-weight: 700; color: var(--llc-ink); margin: 0 0 20px; }
/* Figma SEO copy (17:1373) separates paragraphs by a full empty line (~26px).
   The real cause of "missing padding between paragraphs" was shared.css's
   `.block--rich-text p { margin-bottom: 0 !important }`, so this must be
   !important (higher specificity) to win. */
.landing-page .pb-seo p { color: var(--llc-gray); font-size: 16px; line-height: 1.7; margin: 0 0 26px !important; }

/* ============================================================
   Trusted Solutions (column-single-with-image) tweaks
   ============================================================ */
/* Figma (node 15:562): the whole Trusted Solutions block is a white card with a
   soft drop shadow, rounded 4px, 48px padding, with section-height breathing
   room around it. */
.landing-page .block--column-single-with-image.pb-contained {
    gap: 48px;
    align-items: center;
    background: #fff;
    border-radius: 0;   /* square, matching the other cards */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    padding: 48px;
    margin: var(--pb-section-y) auto;
    /* border-box so the 48px padding sits INSIDE the max-width instead of pushing
       the card wider than the viewport on small screens — the overflow was being
       clipped by .page-builder overflow-x:hidden, cutting off the image callouts. */
    box-sizing: border-box;
}
/* Figma 15:570: 18px/28px #4a4a4a, tracking -0.44px, with 24px above / 32px below
   the paragraph (pt-24 pb-32) for breathing room. */
.landing-page .block--column-single-with-image .content-container p { color: #4a4a4a; font-size: 18px; line-height: 28px; letter-spacing: -0.44px; margin: 24px 0 32px; }
/* Figma 15:568 heading: 36px, line-height 44px, uppercase #253976, tracking 0.35px.
   margin-bottom 0 so the paragraph's own 24px top gap sets the heading→body spacing. */
.landing-page .block--column-single-with-image .pb-section-title--left { margin-bottom: 0; line-height: 44px; letter-spacing: 0.35px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
    :root { --pb-section-y: 52px; }
    .hero--split .hero-slide { grid-template-columns: 1fr; gap: 28px; }
    .hero--split .hero-image { order: -1; }
    .landing-page .pb-hero-title { font-size: 40px; }
    /* Keep the overlay hero copy right-aligned at all sizes (Figma) — just let it
       use the full width on small screens rather than flipping to the left. */
    .hero--overlay__copy { max-width: none; }
    .landing-page .card-grid--brands .block--card-grid__wrapper,
    .landing-page .card-grid--icon .block--card-grid__wrapper,
    .landing-page .card-grid--capability .block--card-grid__wrapper,
    .landing-page .card-grid--overlay .block--card-grid__wrapper,
    .landing-page .image-grid--tiles .block--image-grid__wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
    .landing-page .pb-hero-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .landing-page .pb-section-title { font-size: 27px; }
    .landing-page .pb-hero-title { font-size: 32px; }
    .landing-page .pb-stats { grid-template-columns: 1fr; gap: 24px; }
    .landing-page .pb-stats .pb-stat + .pb-stat { border-left: 0; }
    .landing-page .card-grid--brands .block--card-grid__wrapper,
    .landing-page .card-grid--icon .block--card-grid__wrapper,
    .landing-page .card-grid--capability .block--card-grid__wrapper,
    .landing-page .card-grid--overlay .block--card-grid__wrapper,
    .landing-page .image-grid--tiles .block--image-grid__wrapper {
        grid-template-columns: 1fr;
    }
    .landing-page .pb-hero-stats { grid-template-columns: 1fr; }
    /* The Bold Color intro's strict 50% is a desktop spec; give it room on phones. */
    .landing-page .pb-band-swatch .pb-section-intro { max-width: none; }
}