/* =========================================================================
   Total Concrete — widgets.css
   Per-widget styles. Every property here is intended as a DEFAULT that
   Elementor controls will override. Use classes that are scoped so there's
   no bleed between widgets.
   ========================================================================= */

/* Shared button primitives (used in Hero, Hero Slider, CTAs). */
.tcc-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 14px 24px; border-radius: 999px;
	font-family: var(--tcc-font-body);
	font-size: 14px; font-weight: 600;
	letter-spacing: -.005em; text-decoration: none;
	transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
	border: 1px solid transparent; cursor: pointer;
	white-space: nowrap;
}
.tcc-btn--primary       { background: var(--tcc-green);  color: var(--tcc-ink); }
.tcc-btn--primary:hover { background: var(--tcc-paper);  color: var(--tcc-ink); transform: translateY(-1px); }
.tcc-btn--dark          { background: var(--tcc-ink);    color: var(--tcc-paper); }
.tcc-btn--dark:hover    { background: var(--tcc-green);  color: var(--tcc-ink); transform: translateY(-1px); }
.tcc-btn--ghost         { background: transparent;        color: var(--tcc-ink); border-color: var(--tcc-rule-2); }
.tcc-btn--ghost:hover   { background: var(--tcc-ink);    color: var(--tcc-paper); border-color: var(--tcc-ink); }
.tcc-btn--ghost-light         { background: transparent;            color: var(--tcc-paper); border-color: rgba(255,255,255,0.35); }
.tcc-btn--ghost-light:hover   { background: var(--tcc-paper);       color: var(--tcc-ink); border-color: var(--tcc-paper); }
.tcc-btn__ar { display: inline-block; transition: transform .25s ease; }
.tcc-btn:hover .tcc-btn__ar { transform: translateX(3px); }

/* Reveal-on-scroll primitive (targeted by widgets.js) */
.tcc-reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.tcc-reveal.tcc-in { opacity: 1; transform: none; }

/* =========================================================================
   HERO  (widget: tcc-hero)
   ========================================================================= */
.tcc-hero {
	position: relative;
	min-height: 100vh;
	padding: 120px 40px 60px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	color: var(--tcc-paper);
	background: var(--tcc-ink);
}
.tcc-hero__bg {
	position: absolute; inset: 0; z-index: 0;
	background-size: cover; background-position: center;
}
.tcc-hero__overlay {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(10,10,11,0.4) 0%, rgba(10,10,11,0.2) 40%, rgba(10,10,11,0.9) 100%),
		linear-gradient(135deg, rgba(108,182,69,0.08), transparent 50%);
}
.tcc-hero__inner { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; width: 100%; }
.tcc-hero .tcc-kicker--pill {
	color: var(--tcc-green);
	background: rgba(108,182,69,0.15);
	border-color: rgba(108,182,69,0.3);
	margin-bottom: 32px;
}
.tcc-hero .tcc-kicker--pill::before { background: var(--tcc-green); box-shadow: 0 0 0 3px rgba(108,182,69,0.3); }
.tcc-hero__headline {
	font-family: var(--tcc-font-display);
	font-weight: 900;
	font-size: clamp(56px, 10vw, 168px);
	line-height: .9;
	letter-spacing: -.045em;
	text-transform: uppercase;
	color: var(--tcc-paper);
	max-width: 16ch;
	margin: 0 0 32px;
}
.tcc-hero__headline em { font-style: normal; color: var(--tcc-green); }
.tcc-hero__meta {
	display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end;
	padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.18); margin-top: 40px;
}
.tcc-hero__sub {
	font-size: 18px; color: rgba(255,255,255,0.82);
	line-height: 1.5; max-width: 52ch; font-weight: 400; margin: 0;
}
.tcc-hero__ctas { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 768px) {
	.tcc-hero { padding: 120px 20px 50px; min-height: 85vh; }
	.tcc-hero__meta { grid-template-columns: 1fr; gap: 24px; }
}

/* =========================================================================
   HERO SLIDER  (widget: tcc-hero-slider)
   ========================================================================= */
.tcc-hero-slider {
	position: relative;
	min-height: 100vh;
	padding: 120px 40px 60px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	color: var(--tcc-paper);
	background: var(--tcc-ink);
}
.tcc-hero-slider__slides { position: absolute; inset: 0; z-index: 0; }
.tcc-hero-slider__slide {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0;
	transform: scale(1.08);
	transition: opacity 1.6s cubic-bezier(.4,0,.2,1), transform 8s ease-out;
}
.tcc-hero-slider__slide.is-on { opacity: 1; transform: scale(1); }
.tcc-hero-slider__overlay {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(10,10,11,0.45) 40%, rgba(10,10,11,0.2) 60%, rgba(10,10,11,0.9) 100%),
		linear-gradient(135deg, rgba(108,182,69,0.08), transparent 50%);
}
.tcc-hero-slider__inner { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; width: 100%; }
.tcc-hero-slider .tcc-kicker--pill {
	color: var(--tcc-green);
	background: rgba(108,182,69,0.15);
	border-color: rgba(108,182,69,0.3);
	margin-bottom: 32px;
}
.tcc-hero-slider__headline {
	font-family: var(--tcc-font-display);
	font-weight: 900;
	font-size: clamp(56px, 10vw, 168px);
	line-height: .9;
	letter-spacing: -.045em;
	text-transform: uppercase;
	max-width: 16ch;
	margin: 0 0 32px;
}
.tcc-hero-slider__headline em { font-style: normal; color: var(--tcc-green); }
.tcc-hero-slider__meta {
	display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end;
	padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.18); margin-top: 40px;
}
.tcc-hero-slider__sub { font-size: 18px; color: rgba(255,255,255,0.82); line-height: 1.5; max-width: 52ch; margin: 0; }
.tcc-hero-slider__ctas { display: flex; gap: 10px; flex-wrap: wrap; }

/* Slide dots (right side, vertical) */
.tcc-hero-slider__dots {
	position: absolute; right: 40px; bottom: 40px; z-index: 3;
	display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.tcc-hero-slider__count {
	font-family: var(--tcc-font-mono); font-size: 11px;
	letter-spacing: .14em; color: rgba(255,255,255,0.75);
	writing-mode: vertical-rl; transform: rotate(180deg); margin-bottom: 16px;
}
.tcc-hero-slider__count b { color: var(--tcc-green); font-weight: 500; }
.tcc-hero-slider__dot {
	width: 8px; height: 28px; border-radius: 4px;
	background: rgba(255,255,255,0.3); border: none; padding: 0;
	cursor: pointer; transition: all .35s ease; display: block;
}
.tcc-hero-slider__dot.is-on { background: var(--tcc-green); height: 40px; }
.tcc-hero-slider__dot:hover { background: rgba(255,255,255,0.55); }

@media (max-width: 1024px) {
	.tcc-hero-slider__dots { display: none; }
}
@media (max-width: 768px) {
	.tcc-hero-slider { padding: 120px 20px 50px; min-height: 85vh; }
	.tcc-hero-slider__meta { grid-template-columns: 1fr; gap: 24px; }
}

/* =========================================================================
   SERVICE GRID  (widget: tcc-service-grid)
   ========================================================================= */
.tcc-service-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.tcc-service-grid__item {
	background: var(--tcc-paper-2);
	border-radius: var(--tcc-radius-md);
	padding: 32px;
	aspect-ratio: 1 / 1.1;
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; justify-content: space-between;
	transition: transform .5s cubic-bezier(.2,.7,.2,1), background .5s ease, color .5s ease;
	text-decoration: none; color: var(--tcc-ink);
}
.tcc-service-grid__item::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(135deg, rgba(108,182,69,0.20), transparent 60%);
	opacity: 0; transition: opacity .5s;
}
.tcc-service-grid__item:hover { transform: translateY(-6px); background: var(--tcc-ink); color: var(--tcc-paper); }
.tcc-service-grid__item:hover::before { opacity: 1; }
.tcc-service-grid__item > * { position: relative; z-index: 1; }

.tcc-service-grid__num {
	font-family: var(--tcc-font-mono); font-size: 11px; font-weight: 500;
	letter-spacing: .16em; color: var(--tcc-muted); text-transform: uppercase;
	transition: color .5s;
}
.tcc-service-grid__item:hover .tcc-service-grid__num { color: var(--tcc-green); }

.tcc-service-grid__icon {
	width: 52px; height: 52px; border-radius: 14px;
	background: var(--tcc-paper); border: 1px solid var(--tcc-rule);
	display: flex; align-items: center; justify-content: center;
	transition: all .5s ease;
}
.tcc-service-grid__item:hover .tcc-service-grid__icon {
	background: var(--tcc-green); border-color: var(--tcc-green);
	transform: rotate(-8deg) scale(1.08);
}
.tcc-service-grid__icon svg {
	width: 24px; height: 24px;
	stroke: var(--tcc-ink); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
	transition: stroke .5s;
}
.tcc-service-grid__item:hover .tcc-service-grid__icon svg { stroke: var(--tcc-ink); }

.tcc-service-grid__title {
	font-family: var(--tcc-font-display); font-weight: 800;
	font-size: 26px; line-height: 1; letter-spacing: -.025em;
	margin: 22px 0 10px; text-transform: uppercase;
	color: var(--tcc-ink); transition: color .5s;
}
.tcc-service-grid__item:hover .tcc-service-grid__title { color: var(--tcc-paper); }

.tcc-service-grid__desc {
	font-size: 13.5px; line-height: 1.5; color: var(--tcc-muted);
	font-weight: 400; margin: 0; transition: color .5s;
}
.tcc-service-grid__item:hover .tcc-service-grid__desc { color: rgba(255,255,255,0.72); }

.tcc-service-grid__arrow {
	position: absolute; top: 32px; right: 32px;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--tcc-paper); border: 1px solid var(--tcc-rule);
	display: flex; align-items: center; justify-content: center;
	font-size: 14px; color: var(--tcc-ink);
	transition: all .5s ease;
}
.tcc-service-grid__item:hover .tcc-service-grid__arrow {
	background: var(--tcc-green); border-color: var(--tcc-green);
	color: var(--tcc-ink); transform: rotate(-45deg);
}

@media (max-width: 1024px) { .tcc-service-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px)  { .tcc-service-grid { grid-template-columns: 1fr !important; } }

/* =========================================================================
   Total Concrete — Pass 2a widget styles
   Append to assets/css/widgets.css
   ========================================================================= */

/* =========================================================================
   FEATURE CARD  (widget: tcc-feature-card)
   ========================================================================= */
.tcc-feature-card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	overflow: hidden;
	background: var(--tcc-paper-2);
	color: var(--tcc-ink);
	border-radius: 28px;
	transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.tcc-feature-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.2); }
.tcc-feature-card--dark  { background: var(--tcc-ink);   color: var(--tcc-paper); }
.tcc-feature-card--green { background: linear-gradient(135deg, #7cc957, var(--tcc-green-dk)); color: var(--tcc-ink); }

.tcc-feature-card--image-left  .tcc-feature-card__visual { order: -1; }
.tcc-feature-card--no-image    { grid-template-columns: 1fr; }

.tcc-feature-card__text {
	padding: 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
}
.tcc-feature-card__eyebrow {
	font-family: var(--tcc-font-mono);
	font-size: 12px; font-weight: 500;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--tcc-green-dk);
}
.tcc-feature-card--dark  .tcc-feature-card__eyebrow { color: var(--tcc-green); }
.tcc-feature-card--green .tcc-feature-card__eyebrow { color: var(--tcc-ink); }

.tcc-feature-card__headline {
	font-family: var(--tcc-font-display);
	font-weight: 900;
	font-size: clamp(32px, 3.8vw, 60px);
	line-height: .95;
	letter-spacing: -.035em;
	text-transform: uppercase;
	color: var(--tcc-ink);
	margin: 0;
}
.tcc-feature-card--dark  .tcc-feature-card__headline { color: var(--tcc-paper); }
.tcc-feature-card__headline em { font-style: normal; color: var(--tcc-green-dk); }
.tcc-feature-card--dark  .tcc-feature-card__headline em { color: var(--tcc-green); }

.tcc-feature-card__desc {
	font-size: 17px;
	line-height: 1.55;
	color: var(--tcc-muted);
	margin: 0;
}
.tcc-feature-card--dark  .tcc-feature-card__desc { color: rgba(255,255,255,0.65); }
.tcc-feature-card--green .tcc-feature-card__desc { color: rgba(10,10,11,0.7); }

.tcc-feature-card__stats {
	display: flex;
	gap: 40px;
	margin-top: auto;
	padding-top: 8px;
	flex-wrap: wrap;
}
.tcc-feature-card__stat-value {
	font-family: var(--tcc-font-display);
	font-weight: 900;
	font-size: 44px;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--tcc-ink);
}
.tcc-feature-card--dark  .tcc-feature-card__stat-value { color: var(--tcc-paper); }
.tcc-feature-card__stat-label {
	font-family: var(--tcc-font-mono);
	font-size: 10px; font-weight: 500;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--tcc-muted);
	margin-top: 8px;
}
.tcc-feature-card--dark  .tcc-feature-card__stat-label { color: rgba(255,255,255,0.55); }
.tcc-feature-card--green .tcc-feature-card__stat-label { color: rgba(10,10,11,0.65); }

.tcc-feature-card .tcc-btn { align-self: flex-start; }

.tcc-feature-card__visual {
	position: relative;
	overflow: hidden;
}
.tcc-feature-card__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1024px) {
	.tcc-feature-card { grid-template-columns: 1fr; }
	.tcc-feature-card__text { padding: 44px; }
	.tcc-feature-card__visual { aspect-ratio: 16 / 10; order: -1; }
}
@media (max-width: 768px) {
	.tcc-feature-card__text { padding: 32px 24px; gap: 16px; }
	.tcc-feature-card__headline { font-size: clamp(28px, 7vw, 40px); }
	.tcc-feature-card__stats { gap: 28px; }
	.tcc-feature-card__stat-value { font-size: 36px; }
}

/* =========================================================================
   BIG STATS  (widget: tcc-big-stats)
   ========================================================================= */
.tcc-big-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 1px solid var(--tcc-rule);
	border-bottom: 1px solid var(--tcc-rule);
}
.tcc-big-stats__item {
	padding: 48px 32px 48px 0;
	border-right: 1px solid var(--tcc-rule);
}
.tcc-big-stats__item:last-child { border-right: none; padding-right: 0; }

.tcc-big-stats__num {
	display: flex;
	align-items: baseline;
	gap: 2px;
}
.tcc-big-stats__value {
	font-family: var(--tcc-font-display);
	font-weight: 900;
	font-size: clamp(56px, 7vw, 110px);
	line-height: .88;
	letter-spacing: -.04em;
	color: var(--tcc-ink);
}
.tcc-big-stats__suffix {
	font-family: var(--tcc-font-display);
	font-weight: 700;
	font-size: .5em;
	color: var(--tcc-green-dk);
	margin-left: 2px;
}
.tcc-big-stats__label {
	font-family: var(--tcc-font-mono);
	font-size: 11px; font-weight: 500;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--tcc-muted);
	margin-top: 20px;
	line-height: 1.5;
	max-width: 20ch;
}

@media (max-width: 1024px) {
	.tcc-big-stats { grid-template-columns: repeat(2, 1fr) !important; }
	.tcc-big-stats__item:nth-child(2) { border-right: none; }
	.tcc-big-stats__item:nth-child(-n+2) { border-bottom: 1px solid var(--tcc-rule); padding-bottom: 32px; }
	.tcc-big-stats__item:nth-child(n+3) { padding-top: 32px; }
}
@media (max-width: 640px) {
	.tcc-big-stats { grid-template-columns: 1fr !important; }
	.tcc-big-stats__item {
		padding: 32px 0;
		border-right: none;
		border-bottom: 1px solid var(--tcc-rule);
	}
	.tcc-big-stats__item:last-child { border-bottom: none; }
}

/* =========================================================================
   PROJECT GRID  (widget: tcc-project-grid)
   ========================================================================= */
.tcc-project-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.tcc-project-grid__card {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	aspect-ratio: 1 / 1;
	display: block;
	text-decoration: none;
	color: var(--tcc-paper);
	transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.tcc-project-grid__card:hover { transform: scale(1.01); }
.tcc-project-grid__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.tcc-project-grid__card:hover .tcc-project-grid__img { transform: scale(1.08); }

.tcc-project-grid__overlay {
	position: absolute; inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.88));
}
.tcc-project-grid__info {
	position: absolute;
	left: 22px; right: 22px; bottom: 22px;
	z-index: 1;
}
.tcc-project-grid__tag {
	font-family: var(--tcc-font-mono);
	font-size: 10px; font-weight: 500;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--tcc-green);
	margin-bottom: 8px;
}
.tcc-project-grid__title {
	font-family: var(--tcc-font-display);
	font-weight: 800;
	font-size: 24px;
	line-height: 1.02;
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: var(--tcc-paper);
	margin: 0;
}

@media (max-width: 1024px) { .tcc-project-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px)  { .tcc-project-grid { grid-template-columns: 1fr !important; } }

/* =========================================================================
   FAQ  (widget: tcc-faq)
   ========================================================================= */
.tcc-faq { border-top: 1px solid var(--tcc-rule); }
.tcc-faq__item {
	border-bottom: 1px solid var(--tcc-rule);
}
.tcc-faq__q {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 28px 0;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--tcc-font-display);
	font-weight: 800;
	font-size: clamp(20px, 2.3vw, 32px);
	letter-spacing: -.025em;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--tcc-ink);
}
.tcc-faq__q-text { flex: 1; }
.tcc-faq__plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--tcc-paper-2);
	font-size: 18px;
	font-weight: 400;
	color: var(--tcc-ink);
	transition: all .35s cubic-bezier(.2,.7,.2,1);
}
.tcc-faq__item.is-open .tcc-faq__plus {
	background: var(--tcc-green);
	transform: rotate(45deg);
}
.tcc-faq__a {
	max-height: 0;
	overflow: hidden;
	transition: max-height .5s cubic-bezier(.2,.7,.2,1), margin .5s ease, padding .5s ease;
	font-family: var(--tcc-font-body);
	font-size: 16px;
	color: var(--tcc-muted);
	line-height: 1.65;
	max-width: 72ch;
}
.tcc-faq__item.is-open .tcc-faq__a {
	max-height: 600px;
	padding-bottom: 28px;
}
.tcc-faq__a p { margin: 0 0 1em; }
.tcc-faq__a p:last-child { margin-bottom: 0; }

/* =========================================================================
   Total Concrete — Pass 2b widget styles
   APPEND to assets/css/widgets.css
   Covers: TCC Testimonial, TCC Process Steps, TCC Dark Scene, TCC Service Detail Hero
   ========================================================================= */

/* =========================================================================
   TESTIMONIAL  (widget: tcc-testimonial)
   ========================================================================= */
.tcc-testimonial {
	padding: 60px 0;
}
.tcc-testimonial--center { text-align: center; }
.tcc-testimonial--left   { text-align: left; }

.tcc-testimonial__quote {
	font-family: var(--tcc-font-display);
	font-weight: 700;
	font-size: clamp(32px, 5vw, 72px);
	line-height: 1;
	letter-spacing: -.035em;
	text-transform: uppercase;
	max-width: 24ch;
	margin: 0 auto 40px;
	color: var(--tcc-ink);
}
.tcc-testimonial--left .tcc-testimonial__quote { margin-left: 0; margin-right: auto; }

.tcc-testimonial__quote em {
	font-style: normal;
	color: var(--tcc-green-dk);
}
.tcc-testimonial__mark {
	color: var(--tcc-green-dk);
	display: inline-block;
	transform: translateY(0.05em);
}

.tcc-testimonial__who {
	display: inline-flex;
	gap: 16px;
	align-items: center;
	justify-content: center;
}
.tcc-testimonial--left .tcc-testimonial__who { justify-content: flex-start; }

.tcc-testimonial__avatar {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--tcc-ink);
	flex-shrink: 0;
}
.tcc-testimonial__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tcc-testimonial__who-text {
	text-align: left;
}
.tcc-testimonial__name {
	font-family: var(--tcc-font-display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -.01em;
	color: var(--tcc-ink);
}
.tcc-testimonial__title {
	font-family: var(--tcc-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tcc-muted);
	margin-top: 2px;
}

/* =========================================================================
   PROCESS STEPS  (widget: tcc-process-steps)
   ========================================================================= */
.tcc-process {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.tcc-process__step {
	padding: 32px 28px;
	background: var(--tcc-paper-2);
	border-radius: 20px;
	position: relative;
	transition: all .4s cubic-bezier(.2,.7,.2,1);
}
.tcc-process__step:hover {
	background: var(--tcc-green);
	transform: translateY(-4px);
}
.tcc-process__num {
	font-family: var(--tcc-font-display);
	font-weight: 900;
	font-size: 48px;
	line-height: 1;
	letter-spacing: -.035em;
	color: var(--tcc-green-dk);
	margin-bottom: 24px;
	transition: color .4s;
}
.tcc-process__step:hover .tcc-process__num {
	color: var(--tcc-ink);
}
.tcc-process__title {
	font-family: var(--tcc-font-display);
	font-weight: 800;
	font-size: 22px;
	line-height: 1;
	letter-spacing: -.02em;
	margin: 0 0 12px;
	text-transform: uppercase;
	color: var(--tcc-ink);
	transition: color .4s;
}
.tcc-process__step:hover .tcc-process__title { color: var(--tcc-ink); }
.tcc-process__desc {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--tcc-muted);
	font-weight: 400;
	margin: 0;
	transition: color .4s;
}
.tcc-process__step:hover .tcc-process__desc {
	color: rgba(10, 10, 11, 0.78);
}

@media (max-width: 1024px) { .tcc-process { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px)  { .tcc-process { grid-template-columns: 1fr !important; } }

/* =========================================================================
   DARK SCENE  (widget: tcc-dark-scene)
   ========================================================================= */
.tcc-dark-scene {
	position: relative;
	overflow: hidden;
	background: var(--tcc-ink);
	color: var(--tcc-paper);
	padding: 160px 40px;
}
.tcc-dark-scene--glow::before {
	content: '';
	position: absolute;
	top: 10%;
	right: -10%;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(108,182,69,0.28), transparent 60%);
	filter: blur(40px);
	pointer-events: none;
}

.tcc-dark-scene__wrap {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.2fr 2fr;
	gap: 80px;
	align-items: start;
	max-width: 1440px;
	margin: 0 auto;
}
.tcc-dark-scene__wrap--heading-only,
.tcc-dark-scene__wrap--cards-only {
	grid-template-columns: 1fr;
}

.tcc-dark-scene__heading--sticky {
	position: sticky;
	top: 120px;
}

.tcc-dark-scene__kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--tcc-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--tcc-green);
	margin-bottom: 18px;
}
.tcc-dark-scene__kicker::before {
	content: '';
	width: 24px;
	height: 1px;
	background: var(--tcc-green);
}

.tcc-dark-scene__title {
	font-family: var(--tcc-font-display);
	font-weight: 900;
	font-size: clamp(44px, 6.5vw, 96px);
	line-height: .9;
	letter-spacing: -.04em;
	text-transform: uppercase;
	color: var(--tcc-paper);
	margin: 0 0 28px;
}
.tcc-dark-scene__title em {
	font-style: normal;
	color: var(--tcc-green);
}

.tcc-dark-scene__lead {
	font-size: 18px;
	color: rgba(255,255,255,0.72);
	line-height: 1.5;
	max-width: 40ch;
	margin: 0;
}

.tcc-dark-scene__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.tcc-dark-scene__card {
	padding: 40px 32px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.025);
	transition: all .5s cubic-bezier(.2,.7,.2,1);
}
.tcc-dark-scene__card:hover {
	background: rgba(108, 182, 69, 0.08);
	border-color: rgba(108, 182, 69, 0.3);
	transform: translateY(-4px);
}
.tcc-dark-scene__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(108, 182, 69, 0.15);
	border: 1px solid rgba(108, 182, 69, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
}
.tcc-dark-scene__icon svg {
	width: 22px;
	height: 22px;
	stroke: var(--tcc-green);
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.tcc-dark-scene__card-title {
	font-family: var(--tcc-font-display);
	font-weight: 800;
	font-size: 26px;
	line-height: 1;
	letter-spacing: -.025em;
	margin: 0 0 12px;
	text-transform: uppercase;
	color: var(--tcc-paper);
}
.tcc-dark-scene__card-desc {
	font-size: 14.5px;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.55;
	margin: 0;
}

@media (max-width: 1024px) {
	.tcc-dark-scene__wrap { grid-template-columns: 1fr; gap: 40px; }
	.tcc-dark-scene__heading--sticky { position: static; }
	.tcc-dark-scene__cards { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
	.tcc-dark-scene { padding: 80px 20px; }
}

/* =========================================================================
   SERVICE DETAIL HERO  (widget: tcc-service-detail-hero)
   ========================================================================= */
.tcc-svc-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	padding: 100px 40px;
	max-width: 1440px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
.tcc-svc-hero::before {
	content: '';
	position: absolute;
	top: -100px;
	left: -100px;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(108, 182, 69, 0.10), transparent 55%);
	filter: blur(40px);
	z-index: 0;
	pointer-events: none;
}
.tcc-svc-hero > * { position: relative; z-index: 1; }

.tcc-svc-hero--image-left .tcc-svc-hero__image { order: -1; }
.tcc-svc-hero--no-image { grid-template-columns: 1fr; }

.tcc-svc-hero__tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px;
	background: var(--tcc-green-soft);
	border: 1px solid rgba(108, 182, 69, 0.22);
	border-radius: 999px;
	font-family: var(--tcc-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tcc-green-dk);
	margin-bottom: 24px;
}

.tcc-svc-hero__headline {
	font-family: var(--tcc-font-display);
	font-weight: 900;
	font-size: clamp(48px, 7vw, 120px);
	line-height: .9;
	letter-spacing: -.04em;
	text-transform: uppercase;
	margin: 0 0 28px;
	color: var(--tcc-ink);
}
.tcc-svc-hero__headline em {
	font-style: normal;
	color: var(--tcc-green-dk);
}

.tcc-svc-hero__lead {
	font-size: 19px;
	color: var(--tcc-muted);
	line-height: 1.55;
	max-width: 48ch;
	margin: 0 0 36px;
}

.tcc-svc-hero__ctas {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.tcc-svc-hero__image {
	aspect-ratio: 4 / 5;
	border-radius: 28px;
	overflow: hidden;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--tcc-rule);
	position: relative;
}
.tcc-svc-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.5s cubic-bezier(.2,.7,.2,1);
}
.tcc-svc-hero__image:hover img {
	transform: scale(1.04);
}

@media (max-width: 1024px) {
	.tcc-svc-hero { grid-template-columns: 1fr; gap: 40px; padding: 80px 20px; }
	.tcc-svc-hero__image { aspect-ratio: 16 / 10; order: -1; }
}

/* =========================================================================
   Total Concrete — Service Grid background image addition
   APPEND to the END of assets/css/widgets.css (after all existing rules).
   These rules ONLY activate when a card has the .tcc-service-grid__item--has-bg
   class, so they do not affect cards without background images.
   ========================================================================= */

/* Background layers + overlay */
.tcc-service-grid__item--has-bg .tcc-service-grid__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
	transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}

/* The hover-state image layer starts hidden */
.tcc-service-grid__item--has-bg .tcc-service-grid__bg--hover {
	opacity: 0;
}

/* On hover: cross-fade to the hover image (only when one is provided) */
.tcc-service-grid__item--has-hover-bg:hover .tcc-service-grid__bg:not(.tcc-service-grid__bg--hover) {
	opacity: 0;
}
.tcc-service-grid__item--has-hover-bg:hover .tcc-service-grid__bg--hover {
	opacity: 1;
}

/* Subtle Ken Burns zoom on hover for the visible image */
.tcc-service-grid__item--has-bg:hover .tcc-service-grid__bg {
	transform: scale(1.06);
}

/* The tinted overlay sits on top of the image but below the content */
.tcc-service-grid__item--has-bg .tcc-service-grid__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--tcc-svc-overlay, rgba(245, 243, 238, 0.8));
	transition: background-color .5s cubic-bezier(.2,.7,.2,1);
}
.tcc-service-grid__item--has-bg:hover .tcc-service-grid__overlay {
	background-color: var(--tcc-svc-overlay-hover, rgba(10, 10, 11, 0.7));
}

/* Override the default green-gradient ::before sheen for image cards
   so the overlay color is what shows */
.tcc-service-grid__item--has-bg::before {
	display: none;
}

/* Lift the card head, body, and arrow above the bg + overlay */
.tcc-service-grid__item--has-bg .tcc-service-grid__head,
.tcc-service-grid__item--has-bg .tcc-service-grid__body,
.tcc-service-grid__item--has-bg .tcc-service-grid__arrow {
	position: relative;
	z-index: 1;
}

/* When card has a bg image, do NOT apply the dark-on-hover background swap
   that the original CSS does (we rely on the hover overlay color instead).
   The ":not(.tcc-service-grid__item--has-bg):hover" selectors in the PHP
   widget's style controls already handle the no-image case; this rule
   neutralizes the global default rule from line 195 of the original CSS. */
.tcc-service-grid__item--has-bg:hover {
	background: transparent;
	color: inherit;
}

/* Improve text contrast on the static state when a light-tinted overlay
   is used (most common case). The default static overlay is light/paper —
   the dark text already contrasts well, so no change needed. The hover
   overlay is dark by default — the text below needs to lift. */
.tcc-service-grid__item--has-bg:hover .tcc-service-grid__title { color: var(--tcc-paper); }
.tcc-service-grid__item--has-bg:hover .tcc-service-grid__desc  { color: rgba(255, 255, 255, 0.78); }
.tcc-service-grid__item--has-bg:hover .tcc-service-grid__num   { color: var(--tcc-green); }