/* Homepage styles are scoped to preserve the account and checkout layouts. */
.tsi-home { --ink: #232c3b; --muted: #6a7483; --orange: #ff6c3a; color: var(--ink); font-family: 'regular', Arial, sans-serif; font-size: 17px; line-height: 1.6; }
.tsi-home * { box-sizing: border-box; }
.tsi-home h1, .tsi-home h2, .tsi-home h3 { font-family: 'bold', Arial, sans-serif; font-weight: normal; }
.tsi-home h1 { font-size: clamp(42px, 4.6vw, 66px); line-height: 1.04; letter-spacing: -2px; margin: 18px 0 24px; }
.tsi-home h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.14; letter-spacing: -1px; }
.tsi-home h3 { font-size: 23px; line-height: 1.25; }
.tsi-home .eyebrow { font-size: 12px; font-family: 'bold', Arial, sans-serif; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 16px; }
.tsi-home a { transition: background .2s, color .2s; }
.tsi-home a:focus-visible { outline: 3px solid #b3441e; outline-offset: 5px; }
.home-hero { padding: 76px 0 80px; background: #f9f9f9; border-top: 1px solid #e9edf0; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }
.hero-copy h1 span { color: var(--orange); }
.hero-intro { color: var(--muted); font-size: 20px; max-width: 570px; }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }
.tsi-home .home-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; }
.tsi-home .home-text-link { color: var(--ink); font-family: 'bold', Arial, sans-serif; font-size: 16px; text-decoration: underline; text-underline-offset: 5px; }
.home-text-link span { margin-left: 8px; }
.hero-note { font-size: 14px; color: var(--muted); margin-top: 22px; }
.hero-image { display: block; width: 100%; max-width: 500px; height: auto; margin: auto; border-radius: 5px; }
.home-section { padding: 84px 0; }
.section-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 70px; margin-bottom: 38px; }
.section-intro > p { color: var(--muted); max-width: 470px; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.service-card { border: 1px solid #dde3e8; border-radius: 5px; padding: 26px 22px; display: flex; flex-direction: column; }
.service-image { display: block; width: 100%; max-width: 240px; height: auto; aspect-ratio: 1; object-fit: contain; align-self: center; margin: -6px 0 22px; }
.service-card h3 { margin-bottom: 16px; }
.service-card p { color: var(--muted); font-size: 16px; }
.service-card ul { margin: 22px 0 26px; padding: 0; list-style: none; font-size: 14px; }
.service-card li { padding: 6px 0 6px 16px; position: relative; }
.service-card li:before { content: ''; background: #c5542d; height: 4px; width: 4px; position: absolute; left: 0; top: 16px; border-radius: 50%; }
.service-card a { color: var(--ink); font-family: 'bold', Arial, sans-serif; font-size: 14px; margin-top: auto; border-top: 1px solid #e5e9ed; padding-top: 18px; }
.service-card a:hover { color: var(--orange); }
.service-card a span { margin-left: 4px; }
.home-approach { background: #f9f9f9; }
.approach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.approach-copy { color: var(--muted); margin: 24px 0; }
.approach-steps { list-style: none; padding: 0; margin: 0; }
.approach-steps li { display: flex; gap: 22px; padding: 22px 0; border-bottom: 1px solid #dce2e7; }
.approach-steps li:first-child { padding-top: 0; }
.approach-steps li > span { font-size: 13px; color: var(--orange); padding-top: 4px; }
.approach-steps h3 { font-size: 21px; margin-bottom: 8px; }
.approach-steps p { color: var(--muted); font-size: 16px; }
.home-contact { background: #232c3b; color: #fff; padding: 58px 0; border-bottom: 1px solid #465162; }
.contact-grid { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.home-contact .eyebrow { color: #ffad8e; }
.home-contact p:last-child { margin-top: 16px; color: #c6d1df; }
.contact-actions { display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; }
.tsi-home .contact-phone { color: #fff; font-size: 15px; text-align: center; text-decoration: underline; text-underline-offset: 4px; }
#services { scroll-margin-top: 70px; }
@media (max-width: 1199px) { .hero-grid { gap: 32px; } .service-grid { grid-template-columns: repeat(2, 1fr); } .approach-grid { gap: 45px; } }
@media (max-width: 767px) { .home-hero { padding: 44px 0; } .hero-grid, .section-intro, .approach-grid { grid-template-columns: 1fr; gap: 32px; } .hero-intro { font-size: 18px; }  .home-section { padding: 48px 0; } .section-intro { gap: 20px; } .contact-grid { flex-direction: column; align-items: flex-start; } .home-contact { padding: 42px 0; } .home-actions { gap: 20px; } }
@media (max-width: 479px) { .service-grid { grid-template-columns: 1fr; } .tsi-home h1 { letter-spacing: -1.5px; } }
@media (prefers-reduced-motion: reduce) { .tsi-home a { transition: none; } }
/* Bootstrap's clearfix pseudo-elements must not become grid or flex items. */
.tsi-home .hero-grid::before, .tsi-home .hero-grid::after,
.tsi-home .approach-grid::before, .tsi-home .approach-grid::after,
.tsi-home .contact-grid::before, .tsi-home .contact-grid::after { content: none; }