/* BEACON CAPITAL - GRANITE DETAIL V2 - SHARED REUSABLE SYSTEM Scope: body.bc-granite-detail-v2 (set by _bc_granite_v2 post meta). Derived from the approved Black Aswan master (bc-granite-native.css). Hooks are container _element_id values, replicated identically on every Granite V2 page. No .page-id-* and no .elementor-element-* selectors. Marble V2 (bc-marble-v2.css) is a separate, frozen system. Do not couple. */ /* BEACON CAPITAL - GRANITE NATIVE-ELEMENTOR RESIDUE Only the design details Elementor's own controls cannot express. Hooks are container _element_id values, because Elementor 4.1.5 containers expose no custom-class control. Overrides target Elementor's CSS custom properties because plain property overrides cannot defeat them. No page-ID selectors. */ /* ---- fr column ratios: Elementor's grid control offers a column COUNT only ---- */ #bc-hero-grid{--e-con-grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);--e-con-grid-template-rows:auto} #bc-essence-grid{--e-con-grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);--e-con-grid-template-rows:auto} /* ---- auto rows: Elementor defaults grids to equal 1fr rows ---- */ #bc-hero-facts{--e-con-grid-template-rows:auto} #bc-strip-grid{--e-con-grid-template-rows:auto} /* ---- reset the theme paragraph margin inside Text Editor widgets ---- */ body.bc-granite-detail-v2 .elementor-widget-text-editor p{margin:0} /* ---- 1 HERO: decorative gradient (Elementor's own overlay occupies ::before) ---- */ #bc-granite-hero{position:relative} #bc-granite-hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(7,9,9,.96) 0%,rgba(7,9,9,.82) 42%,rgba(7,9,9,.55) 100%)} #bc-hero-wrap{position:relative;z-index:2} #bc-hero-desc{max-width:460px} #bc-hero-img img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block} #bc-hero-btn-quote .elementor-button,#bc-hero-btn-sample .elementor-button{height:52px;min-width:196px;display:inline-flex;align-items:center;justify-content:center;gap:10px} /* ---- 3 ESSENCE ---- */ #bc-essence-para{max-width:520px} #bc-essence-img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} /* ---- RESPONSIVE: original design breakpoints (Elementor defaults are 1024/767) ---- */ @media (max-width:1180px){ #bc-granite-hero{padding-top:100px;padding-bottom:54px} #bc-granite-essence{padding-top:54px;padding-bottom:54px} #bc-hero-grid{--grid-column-gap:40px;column-gap:40px} } @media (max-width:1024px){ #bc-strip-grid{--e-con-grid-template-columns:repeat(3,minmax(0,1fr));--grid-row-gap:18px;row-gap:18px} #bc-strip-grid>.elementor-element:nth-child(3n+1){border-left-width:0;padding-left:0} } @media (max-width:900px){ #bc-hero-grid{--e-con-grid-template-columns:minmax(0,1fr);--grid-row-gap:36px;row-gap:36px} #bc-essence-grid{--e-con-grid-template-columns:minmax(0,1fr);--grid-row-gap:36px;row-gap:36px} } @media (max-width:760px){ #bc-granite-hero{padding-top:90px;padding-bottom:44px} #bc-granite-essence{padding-top:44px;padding-bottom:44px} #bc-hero-wrap,#bc-strip-wrap,#bc-essence-wrap{--padding-inline-start:20px;--padding-inline-end:20px} #bc-hero-facts{--e-con-grid-template-columns:repeat(2,minmax(0,1fr))} #bc-hero-btns{--flex-direction:column;flex-direction:column;--align-items:stretch;align-items:stretch} #bc-hero-btn-quote .elementor-button,#bc-hero-btn-sample .elementor-button{width:100%;min-width:0} } @media (max-width:480px){ #bc-strip-grid{--e-con-grid-template-columns:repeat(2,minmax(0,1fr))} #bc-strip-grid>.elementor-element:nth-child(3n+1){border-left:1px solid rgba(209,170,109,.18);padding-left:20px} #bc-strip-grid>.elementor-element:nth-child(2n+1){border-left-width:0;padding-left:0} #bc-hero-facts{--e-con-grid-template-columns:minmax(0,1fr)} } /* ================= 4 TWO SIGNATURE FINISHES ================= */ #bc-finishes-head{--e-con-grid-template-columns:minmax(0,1.15fr) minmax(320px,0.85fr);--e-con-grid-template-rows:auto} #bc-finishes-grid{--e-con-grid-template-rows:auto} #bc-finishes-lede-p{max-width:460px} /* card shell + equal heights */ #bc-finish-polished,#bc-finish-flamed{transition:border-color .3s,transform .3s} #bc-finish-polished:hover,#bc-finish-flamed:hover{border-color:#D1AA6D;transform:translateY(-4px)} #bc-finish-pol-body,#bc-finish-fl-body{--e-con-grid-template-columns:auto minmax(0,1fr) auto;--e-con-grid-template-rows:auto;flex:1 1 auto} /* fixed-ratio media wells */ #bc-finish-pol-media,#bc-finish-fl-media{aspect-ratio:16/9;flex:0 0 auto;overflow:hidden} #bc-finish-pol-img,#bc-finish-pol-img .elementor-widget-container{height:100%} #bc-finish-pol-img img{width:100%;height:100%;object-fit:cover;display:block} #bc-finish-fl-ph{height:100%} #bc-finish-pol-use,#bc-finish-fl-use{width:138px} /* decorative pending-state ground: 4 layers, not expressible via Elementor controls */ #bc-finish-fl-ph{background-image:linear-gradient(rgba(209,170,109,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(209,170,109,.05) 1px,transparent 1px),radial-gradient(115% 85% at 50% 6%,rgba(209,170,109,.11) 0%,rgba(209,170,109,0) 62%),linear-gradient(180deg,#141819 0%,#0D1011 52%,#090B0C 100%);background-size:46px 46px,46px 46px,100% 100%,100% 100%;background-position:center center} #bc-finish-fl-main{max-width:300px} #bc-finish-fl-sub{max-width:296px} #bc-finish-fl-cta .elementor-button{transition:background .25s,color .25s,border-color .25s} #bc-finish-fl-cta .elementor-button:hover{background:#D1AA6D;color:#0B0C0C;border-color:#D1AA6D} @media (max-width:1180px){ #bc-granite-finishes{padding-top:54px;padding-bottom:54px} } @media (max-width:900px){ #bc-finishes-head{--e-con-grid-template-columns:minmax(0,1fr);--grid-row-gap:16px;row-gap:16px;--align-items:start;align-items:start;margin-bottom:32px} #bc-finishes-lede{--justify-content:flex-start;justify-content:flex-start;padding-bottom:0} #bc-finishes-lede-p{max-width:640px} } @media (max-width:760px){ #bc-granite-finishes{padding-top:44px;padding-bottom:44px} #bc-finishes-wrap{--padding-inline-start:20px;--padding-inline-end:20px} #bc-finishes-grid{--e-con-grid-template-columns:minmax(0,1fr)} } @media (max-width:560px){ #bc-finish-pol-media,#bc-finish-fl-media{aspect-ratio:4/3;min-height:252px} #bc-finish-fl-ph{--padding-block-start:20px;--padding-block-end:20px;--padding-inline-start:18px;--padding-inline-end:18px} #bc-finish-fl-main{max-width:250px} #bc-finish-fl-sub{max-width:250px;margin-bottom:16px} } @media (max-width:480px){ #bc-finish-pol-body,#bc-finish-fl-body{--e-con-grid-template-columns:auto minmax(0,1fr);--grid-column-gap:16px;--grid-row-gap:14px;column-gap:16px;row-gap:14px;--padding-block-start:20px;--padding-block-end:20px;--padding-inline-start:20px;--padding-inline-end:20px} #bc-finish-pol-use,#bc-finish-fl-use{grid-column:1/-1;width:auto;border-left-width:0;border-top:1px solid rgba(209,170,109,.28);padding-left:0;padding-top:14px} } /* ---- 4 FINISHES: exact metrics Elementor's controls round differently ---- */ #bc-finish-pol-ic .elementor-icon,#bc-finish-fl-ic .elementor-icon{width:42px;height:42px;padding:0;border-width:1px;display:grid;place-items:center;font-size:19px} #bc-finish-pol-ic .elementor-icon svg,#bc-finish-fl-ic .elementor-icon svg{width:19px;height:19px;display:block} #bc-finish-fl-cta .elementor-button-content-wrapper{gap:9px} #bc-finish-fl-cta .elementor-button-icon svg{width:15px;height:15px;display:block} /* ================= 5 TECHNICAL & COMMERCIAL SPECIFICATIONS ================= */ #bc-specs-grid{--e-con-grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);--e-con-grid-template-rows:auto} #bc-specs-rows{--e-con-grid-template-rows:auto} #bc-specs-note{max-width:660px} /* flex sizing inside rows - widget-level classes render, container classes do not */ body.bc-granite-detail-v2 .bcg-spec-ic{flex:0 0 20px} body.bc-granite-detail-v2 .bcg-spec-ic .elementor-icon-wrapper{line-height:0} body.bc-granite-detail-v2 .bcg-spec-ic svg{width:20px;height:20px;display:block} body.bc-granite-detail-v2 .bcg-spec-k{flex:1 1 auto;min-width:0} body.bc-granite-detail-v2 .bcg-spec-v{flex:0 0 auto;max-width:54%} body.bc-granite-detail-v2 .bcg-prow-k{flex:0 0 38%} body.bc-granite-detail-v2 .bcg-prow-v{flex:1 1 auto;min-width:0} #bc-specs-cta .elementor-button-content-wrapper{gap:10px} #bc-specs-cta .elementor-button-icon svg{width:15px;height:15px;display:block} #bc-specs-cta .elementor-button{transition:color .25s,border-color .25s} #bc-specs-cta .elementor-button:hover{color:#FCFAF6;border-color:#FCFAF6} @media (max-width:1180px){ #bc-granite-specifications{padding-top:54px;padding-bottom:54px} } @media (max-width:1024px){ #bc-specs-grid{--e-con-grid-template-columns:minmax(0,1fr);--grid-row-gap:36px;row-gap:36px} } @media (max-width:760px){ #bc-granite-specifications{padding-top:44px;padding-bottom:44px} #bc-specs-wrap{--padding-inline-start:20px;--padding-inline-end:20px} #bc-specs-rows{--e-con-grid-template-columns:minmax(0,1fr)} } /* ================= 6 DESIGNED FOR DISTINCTIVE SPACES ================= */ #bc-apps-featured,#bc-apps-secondary{--e-con-grid-template-rows:auto} body.bc-granite-detail-v2 [id^=bc-app-card-]{transition:border-color .3s,transform .3s} body.bc-granite-detail-v2 [id^=bc-app-card-]:hover{border-color:#D1AA6D;transform:translateY(-4px)} body.bc-granite-detail-v2 [id^=bc-app-body-]{flex:1 1 auto} body.bc-granite-detail-v2 .bcg-app-feat-img{flex:0 0 56%;width:56%} body.bc-granite-detail-v2 .bcg-app-feat-img img,body.bc-granite-detail-v2 .bcg-app-sec-img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} body.bc-granite-detail-v2 .bcg-app-sec-img{flex:0 0 auto} @media (max-width:1180px){ #bc-granite-applications{padding-top:54px;padding-bottom:54px} } @media (max-width:1024px){ #bc-apps-secondary{--e-con-grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:900px){ #bc-apps-featured{--e-con-grid-template-columns:minmax(0,1fr)} } @media (max-width:760px){ #bc-granite-applications{padding-top:44px;padding-bottom:44px} #bc-apps-wrap{--padding-inline-start:20px;--padding-inline-end:20px} #bc-apps-secondary{--e-con-grid-template-columns:minmax(0,1fr)} #bc-app-card-hotel-lobbies,#bc-app-card-exterior-facades{--flex-direction:column;flex-direction:column} body.bc-granite-detail-v2 .bcg-app-feat-img{flex:0 0 auto;width:100%} } /* ================= 7 GLOBAL SUPPLY ================= */ #bc-granite-global-supply{padding-top:clamp(74px,6.4vw,104px);padding-bottom:clamp(74px,6.4vw,104px)} #bc-supply-grid{--e-con-grid-template-columns:minmax(264px,0.80fr) minmax(312px,0.96fr) minmax(392px,1.34fr);--e-con-grid-template-rows:auto} #bc-supply-stats{--e-con-grid-template-rows:auto} #bc-supply-caps{--e-con-grid-template-rows:repeat(2,minmax(0,1fr))} #bc-supply-p{max-width:400px} #bc-supply-cta{margin-top:auto} #bc-supply-cta .elementor-button-content-wrapper{gap:10px} #bc-supply-cta .elementor-button-icon svg{width:15px;height:15px;display:block} #bc-supply-cta .elementor-button{transition:color .28s,border-color .28s} #bc-supply-cta .elementor-button:hover{color:#D1AA6D;border-color:#D1AA6D} /* capability cards: gold top wipe on hover */ #bc-cap-export-coordination,#bc-cap-secure-packing,#bc-cap-documentation-support,#bc-cap-project-support{position:relative;overflow:hidden;--align-items:flex-start;align-items:flex-start;transition:border-color .3s,box-shadow .3s,background .3s} #bc-cap-export-coordination::after,#bc-cap-secure-packing::after,#bc-cap-documentation-support::after,#bc-cap-project-support::after{content:'';position:absolute;left:0;top:0;width:100%;height:2px;background:#D1AA6D;transform:scaleX(0);transform-origin:left center;transition:transform .38s cubic-bezier(.22,.61,.36,1)} #bc-cap-export-coordination:hover,#bc-cap-secure-packing:hover,#bc-cap-documentation-support:hover,#bc-cap-project-support:hover{background:#FBF8F2;border-color:rgba(209,170,109,.5);box-shadow:0 14px 30px rgba(20,24,26,.07)} #bc-cap-export-coordination:hover::after,#bc-cap-secure-packing:hover::after,#bc-cap-documentation-support:hover::after,#bc-cap-project-support:hover::after{transform:scaleX(1)} body.bc-granite-detail-v2 .bcg-cap-k{margin-top:auto} body.bc-granite-detail-v2 .bcg-cap-ic .elementor-icon-wrapper{line-height:0} /* map panel */ #bc-supply-map-card{box-shadow:0 22px 54px rgba(20,24,26,.075),inset 0 1px 0 rgba(255,255,255,.7)} #bc-supply-map-head{position:relative} #bc-supply-map-head::after{content:'';position:absolute;left:0;bottom:-1px;width:46px;height:1px;background:#D1AA6D} #bc-supply-plate{flex:1 1 auto} #bc-supply-map{flex:1 1 auto} #bc-supply-map-img img{display:block;width:100%;height:auto;border-radius:1px;filter:saturate(1.04) contrast(1.04)} #bc-supply-legend{flex:0 0 auto} /* legend items must shrink-wrap; Elementor gives inner containers --width:100% */ #bc-supply-leg-origin,#bc-supply-leg-dest{--width:auto;width:auto;flex:0 0 auto} body.bc-granite-detail-v2 .bcg-legend-dot .elementor-icon-wrapper{line-height:0} body.bc-granite-detail-v2 .bcg-legend-dot .elementor-icon{font-size:6px;line-height:1;display:block} body.bc-granite-detail-v2 .bcg-legend-dot svg{width:6px;height:6px;display:block} body.bc-granite-detail-v2 .bcg-legend-dot--origin svg{box-shadow:0 0 0 3px rgba(209,170,109,.20);border-radius:50%} @media (max-width:1240px){ #bc-supply-grid{--e-con-grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);--grid-row-gap:36px;row-gap:36px} #bc-supply-map-card{grid-column:1/-1;--padding-block-start:26px;--padding-block-end:26px;--padding-inline-start:26px;--padding-inline-end:26px} #bc-supply-plate{flex:0 0 auto} #bc-supply-p{max-width:520px} #bc-supply-stats{margin-top:24px} } @media (max-width:860px){ #bc-supply-grid{--e-con-grid-template-columns:minmax(0,1fr);--grid-row-gap:34px;row-gap:34px} #bc-supply-p{max-width:640px} #bc-supply-pts{margin-bottom:0} #bc-supply-cta{margin-top:30px} body.bc-granite-detail-v2 .bcg-cap-k{margin-top:0} #bc-supply-caps{--e-con-grid-template-rows:auto} #bc-cap-export-coordination,#bc-cap-secure-packing,#bc-cap-documentation-support,#bc-cap-project-support{--min-height:0;min-height:0} } @media (max-width:760px){ #bc-supply-wrap{--padding-inline-start:20px;--padding-inline-end:20px} } @media (max-width:560px){ #bc-granite-global-supply{padding-top:64px;padding-bottom:64px} #bc-supply-caps{--e-con-grid-template-columns:minmax(0,1fr);--grid-row-gap:10px;row-gap:10px} #bc-supply-map-card{--padding-block-start:18px;--padding-block-end:18px;--padding-inline-start:18px;--padding-inline-end:18px} #bc-supply-map{--padding-block-start:12px;--padding-block-end:12px;--padding-inline-start:12px;--padding-inline-end:12px} #bc-supply-stats{margin-top:18px} } /* ================= 8 PROJECT CTA ================= */ #bc-pcta-h2{max-width:800px;margin-left:auto;margin-right:auto} body.bc-granite-detail-v2 .bcg-btn .elementor-button{height:52px;min-width:196px;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:background .25s,color .25s,border-color .25s} #bc-pcta-btn-quote .elementor-button:hover{background:#e0bd82;border-color:#e0bd82;color:#0B0C0C} #bc-pcta-btn-contact .elementor-button:hover{border-color:#D1AA6D;color:#D1AA6D} /* ================= 9 SIMILAR GRANITES ================= */ #bc-rel-grid{--e-con-grid-template-rows:auto} body.bc-granite-detail-v2 [id^=bc-rel-card-]{transition:border-color .3s,transform .3s} body.bc-granite-detail-v2 [id^=bc-rel-card-]:hover{border-color:#D1AA6D;transform:translateY(-5px)} body.bc-granite-detail-v2 [id^=bc-rel-body-]{flex:1 1 auto} body.bc-granite-detail-v2 .bcg-relcard__img-w{flex:0 0 auto;overflow:hidden} /* Elementor wraps linked images in an inline-block that shrink-wraps to 0 */ body.bc-granite-detail-v2 .bcg-relcard__img-w a{display:block;width:100%} body.bc-granite-detail-v2 .bcg-relcard__img-w img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s} body.bc-granite-detail-v2 [id^=bc-rel-card-]:hover .bcg-relcard__img-w img{transform:scale(1.05)} body.bc-granite-detail-v2 .bcg-relcard__cat{margin-bottom:auto} body.bc-granite-detail-v2 .bcg-relcard__cta{margin-top:auto} body.bc-granite-detail-v2 .bcg-relcard__cta .elementor-button-content-wrapper{gap:8px} body.bc-granite-detail-v2 .bcg-relcard__cta .elementor-button-icon svg{width:14px;height:14px;display:block} body.bc-granite-detail-v2 .bcg-relcard__cta .elementor-button:hover{color:#FCFAF6} @media (max-width:1180px){ #bc-granite-related{padding-top:54px;padding-bottom:54px} #bc-rel-grid{--e-con-grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:760px){ #bc-granite-related{padding-top:44px;padding-bottom:44px} #bc-rel-wrap,#bc-pcta-wrap{--padding-inline-start:20px;--padding-inline-end:20px} #bc-rel-grid{--e-con-grid-template-columns:minmax(0,1fr)} #bc-pcta-btns{--flex-direction:column;flex-direction:column;--align-items:stretch;align-items:stretch} body.bc-granite-detail-v2 .bcg-btn .elementor-button{width:100%;min-width:0} } /* ================= GRANITE V2 ADDITIONS ================= */ /* --- header -> hero seam: master measures 0px; guard against theme/canvas drift --- */ body.bc-granite-detail-v2 .ekit-template-content-header{margin:0} body.bc-granite-detail-v2 [data-elementor-type="wp-page"]{margin-top:0} body.bc-granite-detail-v2 #bc-granite-hero{margin-top:0;border-top:0} body.bc-granite-detail-v2 .ast-page-builder-template .site-content>.ast-container{padding:0;margin:0;max-width:none} /* --- global overflow guard: never hide defects, only prevent lateral scroll --- */ body.bc-granite-detail-v2{overflow-x:clip} body.bc-granite-detail-v2 img{max-width:100%;height:auto} /* --- small-viewport hardening: master stopped at 480px --- */ @media (max-width:430px){ #bc-hero-facts{--e-con-grid-template-columns:minmax(0,1fr) minmax(0,1fr)} #bc-hero-btn-quote .elementor-button,#bc-hero-btn-sample .elementor-button{width:100%;min-width:0} #bc-finishes-grid,#bc-apps-feat-grid,#bc-apps-sec-grid,#bc-rel-grid{--e-con-grid-template-columns:minmax(0,1fr)} } @media (max-width:360px){ #bc-hero-facts{--e-con-grid-template-columns:minmax(0,1fr)} #bc-hero-img img{aspect-ratio:4/3} } @media (max-width:320px){ #bc-hero-wrap,#bc-strip-wrap,#bc-essence-wrap,#bc-finishes-wrap{padding-left:14px;padding-right:14px} } /* ---- HEADER -> HERO SEAM (measured in real Chrome 2026-08-11) ---- Header 3945 is position:fixed and .site-content pads to clear it, but the pad overshoots the real header height below 1025px, producing a white strip: >=1025px header 96 / pad 96 -> 0px 601-1024 header 82 / pad 88 -> 6px gap <=600 header 80 / pad 84 -> 4px gap Corrected here, scoped to Granite V2 only. Header 3945 is NOT modified. */ /* Overrides bc-hf-scope's global 'body:not(.page-id-3928) #content.site-content' !important rule. Repeated class raises specificity without touching that file or Header 3945, and stays gated behind the Granite V2 body scope. */ @media (max-width:1024px){body.bc-granite-detail-v2 #content.site-content.site-content{padding-top:82px!important}} @media (max-width:767px){body.bc-granite-detail-v2 #content.site-content.site-content{padding-top:80px!important}} /* ============================================================ MARBLE V2 SECTION PARITY - 2026-08-11 Ports the APPROVED Marble V2 visual system onto TWO Granite sections only: Designed for Distinctive Spaces, and Global Supply You Can Rely On. Transcribed from bc-marble-v2.css (read-only reference, never written), selectors remapped bcm->bcg / bc-mv2-sup->bc-supply / bc-mv2-cap->bc-cap / bc-mv2-stat->bc-stat. Elementor container settings were already byte-identical to Marble, so no page data is modified. No other Granite section is touched. ============================================================ */ body.bc-granite-detail-v2 #bc-apps-featured > .e-con, body.bc-granite-detail-v2 #bc-apps-secondary > .e-con{height:100%} body.bc-granite-detail-v2 #bc-apps-featured [id^=bc-app-body-], body.bc-granite-detail-v2 #bc-apps-secondary [id^=bc-app-body-]{display:flex;flex-direction:column;flex:1 1 auto;min-height:0} body.bc-granite-detail-v2 #bc-apps-featured .bcg-app__title, body.bc-granite-detail-v2 #bc-apps-secondary .bcg-app__title{margin-bottom:6px} /* Granite has no verified per-application Suggested Finish data, so its own description takes the position Marble gives .bcm-app-fin. */ body.bc-granite-detail-v2 #bc-apps-featured .bcg-app__use, body.bc-granite-detail-v2 #bc-apps-secondary .bcg-app__use{margin-top:auto} body.bc-granite-detail-v2 #bc-apps-featured .bcg-app__desc, body.bc-granite-detail-v2 #bc-apps-secondary .bcg-app__desc{margin-top:4px} body.bc-granite-detail-v2 #bc-apps-featured .bcg-app__img img, body.bc-granite-detail-v2 #bc-apps-secondary .bcg-app__img img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;display:block} /* FEATURED SEAM: zero-pixel alignment to the lower 4-column grid. The card becomes an internal 2-track grid inheriting the 26px column gap, so the image track equals exactly one secondary column. Supersedes the fixed 56% width, which overshot the column by 47.4px at 1440. */ @media (min-width:1025px), (min-width:761px) and (max-width:900px){ body.bc-granite-detail-v2 #bc-apps-featured > .e-con{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:inherit;align-items:stretch} body.bc-granite-detail-v2 #bc-apps-featured .bcg-app-feat-img{flex:none;width:auto;min-width:0;align-self:stretch;overflow:hidden} body.bc-granite-detail-v2 #bc-apps-featured .bcg-app-feat-img img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center;display:block} body.bc-granite-detail-v2 #bc-apps-featured [id^=bc-app-body-]{min-width:0} } /* Capability cards: match Marble hover exactly (drop Granite-only gold wipe) */ body.bc-granite-detail-v2 #bc-cap-export-coordination::after, body.bc-granite-detail-v2 #bc-cap-secure-packing::after, body.bc-granite-detail-v2 #bc-cap-documentation-support::after, body.bc-granite-detail-v2 #bc-cap-project-support::after{content:none} /* KPI HIERARCHY (Marble R4). Typography and alignment only. The figures 30+ / 1000+ / 24h / 20+ are NOT changed. */ body.bc-granite-detail-v2 #bc-supply-stats > .e-con{height:100%} body.bc-granite-detail-v2 #bc-supply-stats [id^=bc-stat-n-]{display:flex;align-items:baseline;gap:2px} body.bc-granite-detail-v2 #bc-supply-stats .bcg-stat-num .elementor-heading-title{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(42px,4.2vw,58px);line-height:.95;font-weight:600;letter-spacing:-.01em;color:#0E3A38} body.bc-granite-detail-v2 #bc-supply-stats .bcg-stat-u .elementor-heading-title{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(24px,2.3vw,32px);line-height:1;font-weight:600;color:#C9A227} body.bc-granite-detail-v2 #bc-supply-stats .bcg-stat-t .elementor-heading-title{font-family:"Poppins",sans-serif;font-size:12px;line-height:1.4;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:#25403E} body.bc-granite-detail-v2 #bc-supply-stats .bcg-stat-t{margin-top:8px} /* Map cap on tablet (Marble R1) */ @media (min-width:761px) and (max-width:1240px){ body.bc-granite-detail-v2 #bc-supply-map-img img{max-width:560px;margin-left:auto;margin-right:auto} } /* ---- KPI MOBILE 2x2 (Marble parity). Elementor emits a 1-column grid at its mobile breakpoint because grid_columns_grid_mobile defaults to 1, which collapsed the four figures into a single stack. Marble overrides this at <=760; Granite was missing the override. ---- */ @media (max-width:760px){ body.bc-granite-detail-v2 #bc-supply-stats{--e-con-grid-template-columns:repeat(2,minmax(0,1fr));grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:560px){ body.bc-granite-detail-v2 #bc-supply-stats .bcg-stat-num .elementor-heading-title{font-size:38px} body.bc-granite-detail-v2 #bc-supply-stats .bcg-stat-u .elementor-heading-title{font-size:22px} body.bc-granite-detail-v2 #bc-supply-stats .bcg-stat-t .elementor-heading-title{font-size:11px;letter-spacing:.11em} }