.elementor-56 .elementor-element.elementor-element-4e95567{--display:flex;--min-height:100vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:9000;}.elementor-56 .elementor-element.elementor-element-4e95567.e-con{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-56 .elementor-element.elementor-element-bce3dfc{--e-image-carousel-slides-to-show:1;width:var( --container-widget-width, 100% );max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;z-index:9000;border-style:none;border-radius:0px 0px 0px 0px;box-shadow:0px 0px 0px 0px rgba(0,0,0,0.5);}.elementor-56 .elementor-element.elementor-element-bce3dfc.elementor-element{--align-self:flex-start;}.elementor-56 .elementor-element.elementor-element-bce3dfc .swiper-pagination-bullet{--swiper-pagination-bullet-horizontal-gap:3px;--swiper-pagination-bullet-vertical-gap:3px;width:20px;height:20px;background:#FFFCFC;}.elementor-56 .elementor-element.elementor-element-bce3dfc .swiper-pagination-bullet:not(.swiper-pagination-bullet-active){background:#E1E1E1BF;opacity:1;}.elementor-56 .elementor-element.elementor-element-bce3dfc .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-style:none;border-radius:0px 0px 0px 0px;}.elementor-56 .elementor-element.elementor-element-bce3dfc .elementor-image-carousel-caption{text-align:start;color:#FFFFFF;font-family:"Neue Haas Grotesk";font-size:18px;font-weight:400;font-style:normal;text-shadow:0px 0px 10px rgba(0,0,0,0.3);margin-block-start:0px;}.elementor-56 .elementor-element.elementor-element-3ea6aff{--display:flex;--min-height:262px;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );border-style:none;--border-style:none;--margin-top:-280px;--margin-bottom:0px;--margin-left:0px;--margin-right:00px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:9899;}.elementor-56 .elementor-element.elementor-element-2594c9c{width:initial;max-width:initial;margin:-50px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;z-index:9999;border-style:none;border-radius:0px 0px 0px 0px;}.elementor-56 .elementor-element.elementor-element-2594c9c.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-56 .elementor-element.elementor-element-204eb4f{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--margin-top:-20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-56 .elementor-element.elementor-element-44e4c8a{--display:flex;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}@media(min-width:768px){.elementor-56 .elementor-element.elementor-element-4e95567{--width:100vw;}.elementor-56 .elementor-element.elementor-element-3ea6aff{--width:100%;}}/* Start custom CSS for image-carousel, class: .elementor-element-bce3dfc *//* 1) The widget is a fixed-height viewport */
.elementor-56 .elementor-element.elementor-element-bce3dfc {
width: 100vw;
  height: 100vh;
  object-fit: contain; /* no cropping, Pentagram-style */
}

/* 2) Make the entire Swiper hierarchy inherit that height */
.elementor-56 .elementor-element.elementor-element-bce3dfc .elementor-image-carousel-wrapper,
.elementor-56 .elementor-element.elementor-element-bce3dfc .elementor-image-carousel,
.elementor-56 .elementor-element.elementor-element-bce3dfc .swiper,
.elementor-56 .elementor-element.elementor-element-bce3dfc .swiper-wrapper,
.elementor-56 .elementor-element.elementor-element-bce3dfc .swiper-slide,
.elementor-56 .elementor-element.elementor-element-bce3dfc .swiper-slide-inner {
  height: 100% !important;
}

/* 3) Ensure anchors/figures inside slides fill the slide */
.elementor-56 .elementor-element.elementor-element-bce3dfc .swiper-slide a,
.elementor-56 .elementor-element.elementor-element-bce3dfc .swiper-slide figure {
  display: block;
  height: 100%;
  margin: 0;
  position: relative;      /* caption anchor */
}

/* 4) Every image fills the slide uniformly */
.elementor-56 .elementor-element.elementor-element-bce3dfc .swiper-slide-image,
.elementor-56 .elementor-element.elementor-element-bce3dfc .swiper-slide img,
.elementor-56 .elementor-element.elementor-element-bce3dfc img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;      /* prevents top/bottom bars */
  object-position: center center !important;
  display: block;
}

/* 5) Caption pinned identically for every slide (relative to figure) */
.elementor-56 .elementor-element.elementor-element-bce3dfc .elementor-image-carousel-caption,
.elementor-56 .elementor-element.elementor-element-bce3dfc .swiper-slide figcaption {
  position: absolute !important;
  left: 24px;
  bottom: 24px;
  margin: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  line-height: 1.4;
  z-index: 3;
  transform: none;
  text-align: left;
}

/* 6) Right-align bullets (optional) */
.elementor-56 .elementor-element.elementor-element-bce3dfc .swiper-pagination {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  text-align: right !important;
  padding-right: 90px;
  bottom: 16px;
}

/* 7) Responsive heights */
@media (max-width: 1024px) {
  .elementor-56 .elementor-element.elementor-element-bce3dfc { height: 70vh; }
}
@media (max-width: 767px) {
  .elementor-56 .elementor-element.elementor-element-bce3dfc { height: 60vh; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2594c9c */.sentence-container {
  display: flex;
  width: fit-content;  /* matches child width */
  height: 45px; /* matches child height */
  align-items: center;
  background-color: #ffffff;
  white-space: nowrap;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 16px;
  font-family: "Neue Haas Grotesk", Tahoma, sans-serif;
}

.sentence {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-family: "Neue Haas Grotesk", Tahoma, sans-serif;
   
}

.rotating-button {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  background-color: #ffffff;
  color: #000;
  height: 45px;
  transition: width 0.1s ease;
  font-size: 16px;
  font-family: "Neue Haas Grotesk", Tahoma, sans-serif;
  word-spacing: 0px;
}

.static-text {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-family: "Neue Haas Grotesk", Tahoma, sans-serif;
  color: #000;
padding-right: 2px;
padding-left: 2px;

}


            /* BUTTON ROTATING-TEXT */
.button1 .rotating-text span,
.button2 .rotating-text span,
.button3 .rotating-text span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 45px;
  height: 45px;
  font-size: 16px;
  font-family: "Neue Haas Grotesk", Tahoma, sans-serif;
  color: #000;
  word-spacing: 2px;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(0%);
  transition: transform 0.1s ease-in-out;
  perspective: 1000px; /* keeps depth realistic, reduces distortion */
   -webkit-font-smoothing: antialiased;   /* smoother edges */
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;           /* prevents blur during rotation */
  transform: translateZ(0);              /* forces GPU layer, reduces fuzziness */
  font-weight: 500;                      /* bump weight if still looking thin */
}


            /* SPINTOWORD ANIMATION */
/* Button 1 animation - */
.button1 .rotating-text span {
  animation: buttonResize1 40s linear infinite, spinToWord1 40s infinite;
}

/* Button 2 animation -  */
.button2 .rotating-text span {
  animation: buttonResize2 40s linear infinite, spinToWord2 40s infinite;
}

/* Button 3 animation -  */
.button3 .rotating-text span {
  animation: buttonResize3 40s linear infinite, spinToWord3 40s infinite;
}

/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
            /* @KEYFRAMES SPINTOWORD - SPINNING WORD SPEED  */
/* Button 1-Spinword | Button 1-Spinword | Button 1-Spinword | Button 1-Spinwor */
@keyframes spinToWord1 {
  0%, 5%   { transform: translateY(0%); } /* #0 define */
  6%, 16%  { transform: translateY(-300%); } /* #1 establish */
  17%, 27%  { transform: translateY(-100%); } /* #2 engineer */
  28%, 38%  { transform: translateY(-200%); } /* #3 build */
  39%, 49%  { transform: translateY(-500%); } /* #4 drive */
  50%, 60%  { transform: translateY(-400%); } /* #5 optimize */
  61%, 71% { transform: translateY(-600%); } /* #6 execute */
  72%, 82% { transform: translateY(-700%); } /* #7 structure */
  83%, 94% { transform: translateY(-800%); } /* #8 convert */
  95%, 100% { transform: translateY(-900%); } /* #9 neutralize */
}

/* Button 1-ButtonResize | Button 1-ButtonResize | Button 1-ButtonResize | Button 1-ButtonResize */
@keyframes buttonResize1 {
  0%, 5%   { width: 49px; }  /* #0 define*/
  6%, 16%  { width: 69px; }  /* #1 establish*/
  17%, 27%  { width: 66px; }  /* #2 engineer*/
  28%, 38%  { width: 40px; }  /* #3 build*/
  39%, 49%  { width: 41px; }  /* #4 drive*/
  50%, 60% { width: 64px; }  /* #5 optimize*/
  61%, 71% { width: 59px; }  /* #6 execute*/
  72%, 82% { width: 69px; }  /* #7 structure*/
  83%, 94% { width: 57px; }  /* #8 convert*/
  95%, 100% { width: 77px; } /* #9 neutralize*/
}

/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/* Button 2-Spinword | Button 2-Spinword | Button 2-Spinword | Button 2-Spinword */
@keyframes spinToWord2 {
  0%, 5%   { transform: translateY(0%); } /* #0 asset positioning*/
  6%, 16%  { transform: translateY(-200%); } /* #1 rent thesis */
  17%, 27%  { transform: translateY(-100%); } /* #2  merchandising strategy */
  28%, 38%  { transform: translateY(-400%); } /* #3 qualified tenant pipelines */
  39%, 49%  { transform: translateY(-500%); } /* #4 expansion */
  50%, 60%  { transform: translateY(-600%); } /* #5 underperforming assets*/
  61%, 71% { transform: translateY(-300%); } /* #6 with discipline */
  72%, 82% { transform: translateY(-700%); } /* #7 owner-focused deals */
  83%, 94% { transform: translateY(-800%); } /* #8 LOIs into leases */
  95%, 100% { transform: translateY(-900%); } /* #9 rollover risk*/
}


/* Button 2-ButtonResize | Button 2-ButtonResize | Button 2-ButtonResize | Button 2-ButtonResize*/
@keyframes buttonResize2 {
  0%, 5%   { width:122px; } /* #0 asset positioning */
  6%, 16%  { width: 80px; } /* #1 rent thesis */
  17%, 27%  { width: 167px; } /* #2 merchandising strategy */
  28%, 38%  { width: 175px; } /* #3 qualified tenant pipelines */
  39%, 49%  { width: 75px; } /* #4 expansion */
  50%, 60%  { width: 170px; } /* #5 underperforming assets */
  61%, 71% { width: 105px; } /* #6 with discipline */
   72%, 82% { width: 149px; }  /* #7 owner-focused deals */
  83%, 94% { width: 117px; }  /* #8 LOIs into leases  */
  95%, 100% { width: 81px; } /* #9 rollover risk  */  
}

/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/* Button 3-Spinword | Button 3-Spinword | Button 3-Spinword | Button 3-Spinword */
@keyframes spinToWord3 {
  0%, 5%   { transform: translateY(0%); } /* #0 ownership conviction */
  6%, 16%  { transform: translateY(-200%); } /* #1 institutional valuation control (1st) */
  17%, 27%  { transform: translateY(-100%); } /* #2 maximum NOI lift */
  28%, 38%  { transform: translateY(-300%); } /* #3 leasing velocity */
  39%, 49%  { transform: translateY(-500%); } /* #4 brands targeting market dominance */
  50%, 60%  { transform: translateY(-600%); } /* #5 portfolio strength */
  61%, 71% { transform: translateY(-400%); } /* #6 institutional assurance */
  72%, 82% { transform: translateY(-700%); } /* #7 capital protection */
  83%, 94% { transform: translateY(-800%); } /* #8 term integrity */
  95%, 100% { transform: translateY(-900%); } /* #9 vacancy elimination */
}

/* Button 3-ButtonResize | Button 3-ButtonResize | Button 3-ButtonResize | Button 3-ButtonResize*/
@keyframes buttonResize3 {
  0%, 5%   { width: 154px; } /* #0 ownership conviction */ 
  6%, 16%  { width: 200px; } /* #1 institutional valuation control*/
  17%, 27%  { width: 124px; } /* #2 maximum NOI lift*/
  28%, 38%  { width: 111px; } /* #3 leasing velocity*/
  39%, 49%  { width: 247px; } /* #4 brands targeting market dominance*/
  50%, 60% { width: 123px; } /* #5 portfolio strength */
  61%, 71% { width: 156px; } /* #6 institutional assurance */
  72%, 82% { width: 124px; }  /* #7 capital protection */
  83%, 94% { width: 95px; }  /* #8 term integrity*/
  95%, 100% { width: 134px; } /* #9 vacancy elimination */  
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3ea6aff *//* Applies 80px margins on both sides for specific containers */
.custom-margin {
  margin-left: 80px;
  margin-right: 80px;
}

/* Optional: Adjust for smaller screens */
@media (max-width: 1024px) {
  .custom-margin {
    margin-left: 40px;
    margin-right: 40px;
  }
}

@media (max-width: 768px) {
  .custom-margin {
    margin-left: 20px;
    margin-right: 20px;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4e95567 *//* EXCEPTION: make the carousel section truly edge-to-edge */
.full-bleed,
.full-bleed.elementor-section,
.full-bleed.elementor-section-stretched,
.full-bleed > .elementor-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Force viewport-width bleed even inside padded parents */
.full-bleed {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box;
}

/* Optional: ensure the actual carousel widget fills the section */
.full-bleed .elementor-widget-image-carousel,
.full-bleed .elementor-image-carousel,
.full-bleed .swiper,
.full-bleed .swiper-container {
  width: 100%;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Neue Haas Grotesk';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://cornerstonecommercialnyc.com/wp-content/uploads/2025/09/font.woff2') format('woff2'),
		url('https://cornerstonecommercialnyc.com/wp-content/uploads/2025/09/font.woff') format('woff');
}
/* End Custom Fonts CSS */
/* Start custom CSS *//* === FULL-BLEED ELEMENTS (hero images, containers, headlines, etc.) === */
.full-bleed,
.full-bleed.elementor-section,
.full-bleed.elementor-container {
  width: 100vw !important;          /* span full viewport width */
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;  /* align with viewport edges */
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;       /* remove global gutters */
  padding-right: 0 !important;
  box-sizing: border-box;
}

/*================================
   HOMEPAGE CAROUSEL EDGE-TO-EDGE HOMEPAGE CAROUSEL EDGE-TO-EDGE HOMEPAGE CAROUSEL EDGE-TO-EDGE
================================*/
.home .image-carousel,
.home .wp-block-gallery.alignfull,
.home .elementor-widget-image-carousel {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}


/* =============================
   HOMEPAGE — HERO INTRO BLOCK
   INSTITUTIONAL VERSION
   ============================= */

:root {
  --csn-white: #ffffff;
  --csn-gray: #5b6470;
  --csn-black: #000000;
}

/* Full-width black hero */
.home-hero {
  position: relative;
  width: 100%;
  padding: 96px 0 104px;
  background: #0A0A0A;
  color: var(--csn-white);
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Blueprint grid overlay */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

/* Content wrapper — institutional editorial width */
.home-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 820px; /* ★ Perfect institutional width */
  margin-left: auto;
  margin-right: auto;
  padding: 0 32px;
  text-align: left; /* FORCE LEFT ALIGNMENT */
}

/* Kicker */
.home-hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 18px;
  color: rgba(255,255,255,0.75);
}

/* Main Title */
.home-hero-title {
  font-size: 40px;
  line-height: 1.18;
  font-weight: 650;
  margin: 0 0 24px;
  color: #FFFFFF !important; /* pure white */
  letter-spacing: -0.01em; /* subtle luxury tightness */
}

/* Body text */
.home-hero-copy {
  font-size: 17px;
  line-height: 1.68;
  color: rgba(255,255,255,0.88);
  margin: 0 0 22px;
  max-width: 700px; /* slightly narrower for aesthetic harmony */
  text-align: left;
}

/* Responsive */
@media (max-width: 900px) {
  .home-hero-title {
    font-size: 32px;
  }
}

@media (max-width: 640px) {
  .home-hero {
    padding: 72px 0 80px;
  }
  .home-hero-title {
    font-size: 26px;
  }
  .home-hero-inner {
    padding: 0 22px;
  }
}

/* =========================================
   GLOBAL WRAPPER FOR HOMEPAGE CONTENT
   ========================================= */
:root {
  --csn-navy: #0A2540;
  --csn-gold: #c9a35a;
  --csn-light: #f5f5f7;
  --csn-gray: #5b6470;
  --csn-border-soft: rgba(0,0,0,0.06);
  --csn-red-accent: #C62828;
  --csn-max-width: 1120px;
}

/* shared page shell */
.home-shell {
  max-width: var(--csn-max-width);
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* Section spacing rhythm */
.home-section {
  padding: 56px 0;
  border-top: 1px solid var(--csn-border-soft);
}

/* Section headings */
.home-section-kicker {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 11px;
  font-weight: 600;
  color: var(--csn-gray);
  margin-bottom: 6px;
}

.home-section-title {
  font-size: 28px;
  line-height: 1.25;
  font-weight: 650;
  margin: 0 0 16px;
  color: #000;
}

.home-section-intro {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--csn-gray);
  max-width: 640px;
  margin: 0 0 24px;
}



/* =========================================
   3. WHAT WE DO GRID
   ========================================= */
.home-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 16px;
}

.home-service-card {
  padding: 24px 22px;
  border-radius: 18px;
  border: 1px solid var(--csn-border-soft);
  background: #ffffff;
}

.home-service-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px;
}

.home-service-body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--csn-black);
  margin: 0;
}

/* =========================================
   WHAT WE DO — COLOR BACKGROUNDS
   ========================================= */

/* subtle navy tint */
.home-service-card {
  background: rgba(10, 37, 64, 0.05); /* institutional transparent navy */
  border: 1px solid rgba(10, 37, 64, 0.12);
}

/* =========================================
   4. CASE STUDY PREVIEW CARDS
   ========================================= */
.home-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 16px;
  
}

.home-case-card {
  padding: 22px 20px;
  border-radius: 16px;
  border: 1px solid var(--csn-border-soft);
  background: #f8f9fb;
  display: flex;
  flex-direction: column;
  gap: 10px;
  
}

.home-case-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--csn-black);
}

.home-case-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

.home-case-meta {
  font-size: 13px;
  color: var(--csn-gray);
}

.home-case-body {
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}

.home-case-link {
  margin-top: auto;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--csn-navy);
  text-decoration: none;
}

/* =========================================
   HOMEPAGE — CASE STUDY SECTION
   FULL HERO BACKGROUND (MATCH SCREENSHOT)
   ========================================= */

.home-cases-section {
  position: relative;
  width: 100%;
  padding: 96px 0 104px;               /* identical hero spacing */
  background: #0A0A0A;                 /* same full black */

}

/* Blueprint grid overlay — IDENTICAL to your screenshot */
.home-cases-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.15;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}

/* Inner wrapper for content ABOVE the grid */
.home-cases-inner {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}

/* =========================================
   CASE STUDY SECTION — TEXT COLORS (MATCH HERO)
   ========================================= */

/* “Selected Case Studies” */
.home-cases-inner .home-section-kicker {
  color: rgba(255,255,255,0.75) !important;
}

/* “Disciplined strategy translated into real outcomes.” */
.home-cases-inner .home-section-title {
  color: #FFFFFF !important;
}

/* Description copy */
.home-cases-inner .home-section-intro {
  color: rgba(255,255,255,0.88) !important;
}

/* =========================================
   5. LOGO STRIP / TRUSTED BY (TICKER)
   ========================================= */
.home-logos-shell {
  padding-top: 40px;
}

.home-logos-bar {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--csn-border-soft);
  background: #ffffff;
  padding: 10px 0;
}

.home-logos-track {
  display: flex;
  gap: 48px;
  animation: homeLogosMarquee 40s linear infinite;
  will-change: transform;
}

.home-logo-item {
  flex: 0 0 auto;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--csn-gray);
  padding: 4px 0;
  white-space: nowrap;
}

/* duplicate track for seamless loop */
.home-logos-track:hover {
  animation-play-state: paused;
}

@keyframes homeLogosMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =========================================
   6. MINI TESTIMONIAL SLIDER
   ========================================= */
.home-testimonials-shell {
  padding-top: 32px;
}

.home-testimonials-strip {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
}

.home-testimonial-card {
  flex: 0 0 360px;
  max-width: 360px;
  scroll-snap-align: start;
  border-radius: 18px;
  border: 1px solid var(--csn-border-soft);
  background: #ffffff;
  padding: 20px 20px 18px;
}

.home-testimonial-quote {
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 12px;
  color: #111;
}

.home-testimonial-pull {
  font-weight: 600;
  color: var(--csn-red-accent);
}

.home-testimonial-author {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--csn-gray);
  margin: 0;
}

/* =========================================
   7. WHY CORNERSTONE CLOSER
   ========================================= */
.home-why-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.8fr);
  column-gap: 40px;
  align-items: flex-start;
  margin-top: 16px;
}

.home-why-main {
  font-size: 15px;
  line-height: 1.7;
  color: #111;
}

.home-why-list {
  font-size: 14px;
  line-height: 1.7;
  color: var(--csn-gray);
  padding-left: 18px;
  margin: 0 0 22px;
}

.home-cta-button {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid #000;
  background: #000;
  color: #ffffff;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

/* =======================================================
   WHY CORNERSTONE — FULL BLEED BLACK + GRID (MATCH HERO)
   ======================================================= */

.home-why-section {
  position: relative;
  width: 100vw;
  padding: 96px 0 104px;
  background: #0A0A0A;
  color: var(--csn-white);
  overflow: hidden;

  /* Required for true full-bleed */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Grid overlay (same as hero + case study) */
.home-why-section::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image:
      linear-gradient(to right, rgba(255,255,255,0.15) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

/* Inner wrapper (match hero + case study) */
.home-why-inner {
  position: relative;
  z-index: 2;
  max-width: 820px;       /* matches hero alignment */
  margin-left: auto;
  margin-right: auto;
  padding: 0 32px;
  text-align: left;
}

/* =========================================
   TEXT COLORS — MATCH HERO TYPOGRAPHY
   ========================================= */

/* Kicker */
.home-why-inner .home-section-kicker {
  color: rgba(255,255,255,0.75) !important;
}

/* Section Title */
.home-why-inner .home-section-title {
  color: #ffffff !important;
}

/* Body copy */
.home-why-main p {
  color: rgba(255,255,255,0.88);
}

/* Bullet list */
.home-why-list {
  color: rgba(255,255,255,0.88);
}

/* CTA button */
.home-cta-button {
  border: 1px solid #ffffff;
  background: #ffffff;
  color: #0A0A0A;
}

.home-cta-button:hover {
  background: transparent;
  color: #ffffff;
}


/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1024px) {
  .home-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-cases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .home-services-grid,
  .home-cases-grid {
    grid-template-columns: 1fr;
  }
  .home-why-layout {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
}

@media (max-width: 640px) {
  .home-shell {
    padding: 0 18px 64px;
  }
  .home-metrics {
    padding: 22px 18px;
  }
  .home-testimonial-card {
    flex: 0 0 82%;
    max-width: 82%;
  }
}/* End custom CSS */