/* ── Fonts ── */
		@font-face { font-family: 'nText';        src: url('assets/fonts/TextRegular.otf'); }
		@font-face { font-family: 'nText Medium'; src: url('assets/fonts/TextMedium.otf'); }
		@font-face { font-family: 'nText Bold';   src: url('assets/fonts/TextBold.otf'); }
		@font-face { font-family: 'Display';      src: url('assets/fonts/DisplayRegular.otf'); }
		@font-face { font-family: 'Display Medium'; src: url('assets/fonts/DisplayMedium.otf'); }
		@font-face { font-family: 'Display Bold'; src: url('assets/fonts/DisplayBold.otf'); }

		/* ── Scoped reset (box-sizing only) ── */
		#why_us.tcl-service-detail *,
		#why_us.tcl-service-detail *::before,
		#why_us.tcl-service-detail *::after {
			box-sizing: border-box;
		}

		#why_us.tcl-service-detail {
			font-family: 'nText', Helvetica, Arial, sans-serif;
			color: var(--color-black);
		}

		/* ── Tokens — aligned to brand.css v7.3 ── */
		:root {
			--color-sand:            #B89C84;
			--color-sand-40:         #E3D8CE;
			--color-sky:             #A2B4C0;  /* ex --color-blue */
			--color-sky-20:          #ECF0F2;  /* ex --color-light-blue / --color-blue-40 */
			--color-light-tan:       #F0E6E0;
			--color-black:           #0E100F;
			--color-dark-grey:       #282C2F;  /* brand.css primary dark — near-black */
			--color-dark-grey-90:    #3B4346;
			--color-dark-grey-70:    #626F73;  /* mid-grey — muted text on light surfaces */
			--color-bg-dark:         #1A1D1F;
			--color-white:           #FFFBF9;  /* ex --color-page-bg */
			--color-gold:            #876B46;  /* brand.css secondary — warm brown */
			--color-ocean-slate:     #26465F;
			--color-ocean-slate-80:  #3B6E95;
			--color-ocean-slate-70:  #4682B0;

			--space-8:  8px;
			--space-12: 12px;
			--space-16: 16px;
			--space-24: 24px;
			--space-32: 32px;
			--space-40: 40px;
			--space-48: 48px;
			--space-80: 80px;

			--radius-sm: 5px;
			--radius-md: 5px;

			--shadow-card:       0 1px 2px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.20);
			--shadow-card-hover: 0 4px 8px rgba(0,0,0,0.45), 0 12px 40px rgba(0,0,0,0.50);

			--transition-slow: 0.3s ease;
		}

		/* ══════════════════════════════════════════
		   LAYOUT
		   ══════════════════════════════════════════ */

		/* Horizontal padding only: vertical rhythm comes from #why_us in styleV22 (80px top/bottom),
		   not duplicated here — avoids ~160px gap vs hero-metrics / next section. */
		#why_us.tcl-service-detail .service-section {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 var(--space-24);
		}

		/* ── Section header ── */
		#why_us.tcl-service-detail .section-header {
			text-align: center;
			margin-bottom: var(--space-48);
		}

		#why_us.tcl-service-detail .eyebrow {
			font-family: 'nText Medium', Helvetica, sans-serif;
			font-size: 13px;
			letter-spacing: 1.3px;
			text-transform: uppercase;
			color: var(--color-sand);
			display: block;
			margin-bottom: var(--space-16);
		}

		#why_us.tcl-service-detail .section-header h2 {
			font-family: 'Display Bold', Helvetica, sans-serif;
			font-size: 42px;
			line-height: 1.1;
			letter-spacing: 0.84px;
			text-transform: uppercase;
			color: var(--color-dark-grey);
		}

		#why_us.tcl-service-detail .section-header p {
			font-family: 'nText', Helvetica, sans-serif;
			font-size: 17px;
			line-height: 1.6;
			color: var(--color-dark-grey);
			max-width: 600px;
			margin: var(--space-16) auto 0;
		}

		/* ── Bento Grid — Three Columns ── */
		#why_us.tcl-service-detail .bento {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			gap: var(--space-16);
		}

		#why_us.tcl-service-detail .bento-col {
			display: flex;
			flex-direction: column;
			gap: var(--space-16);
		}

		#why_us.tcl-service-detail .bento-col > .card { flex: 1; }

		#why_us.tcl-service-detail .card.card--sky { background: var(--color-sky-20); }

		/* ── Card Tag chips (from testimonial-card__tag system) ── */
		#why_us.tcl-service-detail .card-tags {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-8);
		}


		#why_us.tcl-service-detail .card-tag {
			display: inline-block;
			padding: 5px 12px;
			border-radius: var(--radius-sm);
			background: var(--color-sand);
			font-family: 'nText Medium', Helvetica, sans-serif;
			font-size: 11px;
			letter-spacing: 1.3px;
			text-transform: uppercase;
			color: var(--color-bg-dark);
			white-space: nowrap;
		}

		/* ── Horizontal Icon Card ── */
		#why_us.tcl-service-detail .card__h-row {
			display: flex;
			gap: var(--space-16);
			align-items: flex-start;
		}

		#why_us.tcl-service-detail .card__h-content {
			display: flex;
			flex-direction: column;
			gap: var(--space-8);
			flex: 1;
		}

		/* ══════════════════════════════════════════
		   CARD BASE
		   ══════════════════════════════════════════ */

		#why_us.tcl-service-detail .card {
			border: none;
			box-shadow: none;
			background: var(--color-light-tan);
			border-radius: var(--radius-md);
			overflow: hidden;
			display: flex;
			flex-direction: column;
		}

		/* ── Card Dark ── */
		#why_us.tcl-service-detail .card--dark { background: #232729; }
		#why_us.tcl-service-detail .card--dark .card__label    { color: var(--color-sand); }
		#why_us.tcl-service-detail .card--dark .card__title    { color: var(--color-white); }
		#why_us.tcl-service-detail .card--dark .card__body-text { color: var(--color-white); }
		#why_us.tcl-service-detail .card--dark .icon-tile      { background: var(--color-dark-grey-90); }
		#why_us.tcl-service-detail .card--dark .card__cta      { color: var(--color-white); }
		#why_us.tcl-service-detail .card--dark .card__cta:hover { color: var(--color-sand); }

		/* ── Card Body ── */
		#why_us.tcl-service-detail .card__body {
			padding: var(--space-24);
			display: flex;
			flex-direction: column;
			gap: var(--space-12);
			flex: 1;
		}

		#why_us.tcl-service-detail .card__label {
			font-family: 'nText Medium', Helvetica, sans-serif;
			font-size: 11px;
			letter-spacing: 1.3px;
			text-transform: uppercase;
			color: var(--color-dark-grey-70);
		}

		#why_us.tcl-service-detail .card__title {
			font-family: 'Display Bold', Helvetica, sans-serif;
			font-size: 20px;
			line-height: 1.15;
			letter-spacing: 0.6px;
			text-transform: uppercase;
			color: var(--color-black);
		}

		#why_us.tcl-service-detail .card__body-text {
			font-family: 'nText', Helvetica, sans-serif;
			font-size: 15px;
			line-height: 1.6;
			color: var(--color-dark-grey);
		}

		/* ── Card Media ── */
		#why_us.tcl-service-detail .card__media {
			overflow: hidden;
			flex-shrink: 0;
			position: relative;
		}

		/* ── Card Footer ── */
		#why_us.tcl-service-detail .card__footer {
			padding: 0 var(--space-24) var(--space-24);
		}

		/* ══════════════════════════════════════════
		   COVER CARD
		   ══════════════════════════════════════════ */

		#why_us.tcl-service-detail .card--cover {
			position: relative;
			min-height: 300px;
		}

		#why_us.tcl-service-detail .card--cover .card__media {
			position: absolute;
			inset: 0;
			height: 100%;
			border-radius: var(--radius-md);
			overflow: hidden;
		}

		#why_us.tcl-service-detail .card--cover .card__overlay {
			position: relative;
			z-index: 1;
			margin-top: auto;
			padding: var(--space-24);
			display: flex;
			flex-direction: column;
			gap: var(--space-12);
		}

		/* ══════════════════════════════════════════
		   LOGO PATTERN
		   ══════════════════════════════════════════ */

		#why_us.tcl-service-detail .logo-pattern {
			position: relative;
			overflow: hidden;
			background-color: var(--lp-bg);
		}

		/* Scaled wordmark — absolutely positioned, never blocks content */
		#why_us.tcl-service-detail .logo-pattern__asset {
			position: absolute;
			inset: 0;
			pointer-events: none;
			user-select: none;
			color: var(--lp-color);
		}

		/* Text-safe pairings — no opacity modifier needed */
		#why_us.tcl-service-detail .logo-pattern--dark-grey {
			--lp-bg:    var(--color-dark-grey);
			--lp-color: var(--color-black);
		}

		#why_us.tcl-service-detail .logo-pattern--blue {
			--lp-bg:    var(--color-sky);
			--lp-color: var(--color-black);
		}

		#why_us.tcl-service-detail .logo-pattern--sand {
			--lp-bg:       var(--color-sand);
			--lp-color:    var(--color-light-tan);
			--lp-width:    900px;
			--lp-offset-x: -80px;
			--lp-offset-y: -140px;
		}

		/* ══════════════════════════════════════════
		   ICON TILE
		   ══════════════════════════════════════════ */

		#why_us.tcl-service-detail .icon-tile {
			width: 40px;
			height: 40px;
			min-width: 40px;
			border-radius: var(--radius-sm);
			background: var(--color-dark-grey);
			color: var(--color-sand);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
		}

		#why_us.tcl-service-detail .icon-tile--sand { background: var(--color-sand); color: var(--color-bg-dark); }
		#why_us.tcl-service-detail .icon-tile--sky  { background: var(--color-sky);  color: var(--color-bg-dark); }

		#why_us.tcl-service-detail .icon-tile svg { width: 20px; height: 20px; }

		/* ══════════════════════════════════════════
		   CTA
		   ══════════════════════════════════════════ */

		#why_us.tcl-service-detail .card__cta {
			font-family: 'nText Medium', Helvetica, sans-serif;
			font-size: 12px;
			letter-spacing: 1.3px;
			text-transform: uppercase;
			color: var(--color-black);
			text-decoration: none;
			display: inline-flex;
			align-items: center;
			gap: var(--space-8);
			align-self: flex-start;
			border-bottom: 1px solid currentColor;
			padding-bottom: 3px;
			transition: color var(--transition-slow);
		}

		#why_us.tcl-service-detail .card__cta:hover { color: var(--color-gold); }

		/* Light variant — for dark backgrounds */
		#why_us.tcl-service-detail .card__cta--light { color: var(--color-white); }
		#why_us.tcl-service-detail .card__cta--light:hover { color: var(--color-sand); }

		/* Secondary — Ocean Slate (Content & Collateral): inherits 12px from .card__cta; Medium / 120% LH / 6% tracking */
		#why_us.tcl-service-detail .card__cta--ocean-secondary {
			font-family: 'nText Medium', Helvetica, sans-serif;
			line-height: 1.2;
			letter-spacing: 0.06em;
			text-transform: uppercase;
			color: var(--color-ocean-slate);
			padding-bottom: 4px;
		}

		#why_us.tcl-service-detail .card__cta--ocean-secondary:hover {
			color: var(--color-ocean-slate-70);
		}

		#why_us.tcl-service-detail .card__cta--ocean-secondary:active {
			color: var(--color-ocean-slate-80);
		}

		#why_us.tcl-service-detail .btn-arrow {
			display: inline-block;
			transition: transform var(--transition-slow);
		}

		#why_us.tcl-service-detail .card__cta:hover .btn-arrow { transform: translateX(5px); }

		/* ══════════════════════════════════════════
		   CONTENT & COLLATERAL — inline items
		   ══════════════════════════════════════════ */

		#why_us.tcl-service-detail .cc-items {
			display: flex;
			flex-direction: column;
			margin-top: var(--space-8);
		}

		#why_us.tcl-service-detail .cc-item {
			display: flex;
			align-items: center;
			gap: var(--space-16);
			padding: var(--space-12) 0;
			border-top: 1px solid var(--color-sand-40);
		}

		#why_us.tcl-service-detail .cc-item:first-child {
			border-top: none;
		}

		#why_us.tcl-service-detail .cc-item__title {
			font-family: 'nText Medium', Helvetica, sans-serif;
			font-size: 12px;
			letter-spacing: 0.8px;
			text-transform: uppercase;
			color: var(--color-black);
		}

		#why_us.tcl-service-detail .cc-item__body {
			font-family: 'nText', Helvetica, sans-serif;
			font-size: 12px;
			color: var(--color-dark-grey);
			line-height: 1.4;
			margin-top: 2px;
		}

		/* ══════════════════════════════════════════
		   AI CARD — dark column, single axis
		   ══════════════════════════════════════════ */

		#why_us.tcl-service-detail .card__body--ai {
			display: flex;
			flex-direction: column;
			gap: var(--space-24);
			padding: var(--space-32);
			flex: 1;
		}

		#why_us.tcl-service-detail .card__title--hero {
			font-size: 32px;
			line-height: 1.05;
		}

		#why_us.tcl-service-detail .ip-note {
			font-family: 'nText', Helvetica, sans-serif;
			font-size: 12px;
			color: var(--color-dark-grey-70);
			font-style: italic;
		}

		/* ══════════════════════════════════════════
		   RESPONSIVE
		   ══════════════════════════════════════════ */

		@media (max-width: 767px) {
			/* styleV22: legacy fixed heights on #why_us — stacked bento is taller, overflow overlapped #how_it_works */
			#why_us.tcl-service-detail {
				height: auto !important;
				min-height: 0;
				overflow: visible;
			}

			#why_us.tcl-service-detail .bento { grid-template-columns: 1fr; }

			#why_us.tcl-service-detail .section-header h2 { font-size: 28px; }

			#why_us.tcl-service-detail .card__title--hero { font-size: 26px; }
		}