/* ==========================================================================
   Thumbtack-style homepage layout.
   Loaded after landing-refresh.css + landing-polish.css on the home page only.
   Scoped to .tt-home so no other landing page is affected.
   ========================================================================== */

.tt-home {
    --tt-blue: #009fd9;
    --tt-blue-deep: #0a2540;
    --tt-blue-ink: #007ea8;
    --tt-wash: #e8f6fc;
    --tt-wash-2: #f4fbfe;
    --tt-ink: #12141d;
    --tt-ink-2: #3f4350;
    --tt-ink-3: #6b6f7d;
    --tt-rule: #e3e5e9;
    --tt-paper: #ffffff;
    --tt-sunk: #f7f8f9;
    --tt-r: 12px;
    --tt-r-lg: 16px;
    --tt-gap: clamp(56px, 6.5vw, 96px);
    --tt-ease: cubic-bezier(.22, 1, .36, 1);
    font-family: var(--lr-font);
    color: var(--tt-ink);
}

[data-bs-theme="dark"] .tt-home,
body.dark .tt-home {
    --tt-wash: #10222b;
    --tt-wash-2: #0d1a21;
    --tt-ink: #f2f4f8;
    --tt-ink-2: #c5c9d4;
    --tt-ink-3: #9297a4;
    --tt-rule: #2b2f38;
    --tt-paper: #0f1116;
    --tt-sunk: #14161c;
    --tt-blue-ink: #4cc4ef;
}

/* The shared landing shell adds generous padding; the Thumbtack rhythm is
   driven per-section instead, so neutralise it inside this page only. */
.tt-home .section-padding {
    padding-top: 0;
    padding-bottom: 0;
}

.tt-section {
    padding-top: var(--tt-gap);
    padding-bottom: var(--tt-gap);
    background: var(--tt-paper);
}

.tt-section--sunk {
    background: var(--tt-sunk);
}

.tt-container {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
    /* Keep the inline padding inside the declared width, otherwise the
       container is wider than the viewport and the page scrolls sideways. */
    box-sizing: border-box;
}

/* The shared stylesheets do not set a global border-box, so every element
   that pairs a width with padding has to opt in explicitly. */
.tt-home *,
.tt-home *::before,
.tt-home *::after {
    box-sizing: border-box;
}

/* Nothing in this page may push the document wider than the viewport. */
.tt-home {
    overflow-x: clip;
    max-width: 100vw;
}

/* ---------- shared type ---------- */
.landing-refresh .tt-h2,
.tt-h2 {
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.15;
    letter-spacing: -.03em;
    font-weight: 600;
    color: var(--tt-ink);
    margin: 0;
}

.tt-h2 em {
    font-style: normal;
    color: var(--tt-blue);
}

.landing-refresh .tt-lede,
.tt-lede {
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.6;
    color: var(--tt-ink-3);
    margin: 12px auto 0;
    max-width: 54ch;
}

.tt-head-center {
    text-align: center;
    margin-bottom: clamp(28px, 3.5vw, 44px);
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.tt-hero {
    position: relative;
    /* Fill the screen below the header so the photo never ends mid-scroll. */
    min-height: calc(100vh - var(--header-height, 78px));
    min-height: calc(100svh - var(--header-height, 78px));
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #1d2b33;
}

@media (max-width: 767.98px) {
    .tt-hero {
        min-height: auto;
        padding-block: 0;
    }
}

.tt-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* ---------- Ken Burns slideshow ----------
   Each slide owns an equal share of one shared cycle: it fades up, holds,
   then fades out as the next one fades in, so the crossfades overlap and the
   backdrop never blanks. The image drifts (scale + pan) the whole time, which
   is what sells it as running footage rather than a static photo.

   calc() is not allowed in a keyframe selector, so the percentages are
   written out per slide-count. Three slides is the normal case; four applies
   when an admin hero image is set and leads the sequence. */
.tt-hero__bg--slideshow {
    --tt-shot: 6s;
    --tt-cycle: calc(var(--tt-shot) * var(--tt-slides));
}

.tt-hero__slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    will-change: opacity;
    animation: tt-fade-3 var(--tt-cycle) linear infinite;
    animation-delay: calc(var(--tt-shot) * var(--i));
}

.tt-hero__slide img {
    animation: tt-kb-3 var(--tt-cycle) ease-in-out infinite;
    animation-delay: calc(var(--tt-shot) * var(--i));
    transform-origin: center;
    will-change: transform;
}

/* Alternate the drift so consecutive shots do not move identically. */
.tt-hero__slide:nth-child(even) img {
    animation-name: tt-kb-3-alt;
}

/* --- three slides: each owns 33.333% of the cycle --- */
@keyframes tt-fade-3 {
    0% { opacity: 0; }
    5% { opacity: 1; }
    28% { opacity: 1; }
    33.333% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes tt-kb-3 {
    0% { transform: scale(1.05); }
    33.333% { transform: scale(1.15) translate3d(-1.5%, -1%, 0); }
    100% { transform: scale(1.15) translate3d(-1.5%, -1%, 0); }
}

@keyframes tt-kb-3-alt {
    0% { transform: scale(1.15) translate3d(1.3%, 1%, 0); }
    33.333% { transform: scale(1.05); }
    100% { transform: scale(1.05); }
}

/* --- four slides: each owns 25% of the cycle --- */
.tt-hero__bg--slideshow[style*="--tt-slides: 4"] .tt-hero__slide {
    animation-name: tt-fade-4;
}

.tt-hero__bg--slideshow[style*="--tt-slides: 4"] .tt-hero__slide img {
    animation-name: tt-kb-4;
}

.tt-hero__bg--slideshow[style*="--tt-slides: 4"] .tt-hero__slide:nth-child(even) img {
    animation-name: tt-kb-4-alt;
}

@keyframes tt-fade-4 {
    0% { opacity: 0; }
    4% { opacity: 1; }
    21% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes tt-kb-4 {
    0% { transform: scale(1.05); }
    25% { transform: scale(1.15) translate3d(-1.5%, -1%, 0); }
    100% { transform: scale(1.15) translate3d(-1.5%, -1%, 0); }
}

@keyframes tt-kb-4-alt {
    0% { transform: scale(1.15) translate3d(1.3%, 1%, 0); }
    25% { transform: scale(1.05); }
    100% { transform: scale(1.05); }
}

/* A still backdrop is the right call when motion is unwelcome. */
@media (prefers-reduced-motion: reduce) {

    .tt-hero__slide,
    .tt-hero__slide img {
        animation: none !important;
    }

    .tt-hero__slide {
        opacity: 0;
    }

    .tt-hero__slide:first-child {
        opacity: 1;
    }
}

.tt-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Left-weighted scrim keeps the headline legible over any photo.
   Must sit above the slides, which are absolute siblings. */
.tt-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(8, 16, 22, .74) 0%, rgba(8, 16, 22, .50) 32%, rgba(8, 16, 22, .18) 58%, rgba(8, 16, 22, .02) 84%, rgba(8, 16, 22, 0) 100%);
}

@media (max-width: 767.98px) {
    .tt-hero__bg::after {
        background: linear-gradient(180deg, rgba(8, 16, 22, .74) 0%, rgba(8, 16, 22, .86) 100%);
    }
}

.tt-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: clamp(56px, 8vw, 88px);
}

.tt-hero__copy {
    max-width: 540px;
}

/* .landing-refresh h1 (2 classes) sets a dark ink colour, so the hero
   headline has to match that specificity to stay white on the photo. */
.landing-refresh .tt-hero__title,
.tt-home .tt-hero__title {
    font-size: clamp(34px, 4.4vw, 56px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 600;
    color: #fff;
    margin: 0;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .3);
}

.landing-refresh .tt-hero__sub,
.tt-hero__sub {
    margin: 16px 0 0;
    font-size: clamp(14px, 1.15vw, 16px);
    line-height: 1.55;
    color: rgba(255, 255, 255, .88);
    max-width: 34ch;
}

/* ---------- floating search card ---------- */
.tt-search {
    margin-top: clamp(22px, 3vw, 30px);
    background: var(--tt-paper);
    border-radius: var(--tt-r);
    padding: 12px;
    box-shadow: 0 20px 50px rgba(3, 12, 20, .34);
    max-width: 580px;
    width: 100%;
}

/* Primary action, styled after the reference's "Find a pro". */
.tt-search__go {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 50px;
    margin-top: 10px;
    border-radius: 9px;
    background: var(--tt-blue-deep);
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.005em;
    text-decoration: none;
    transition: background .2s ease, transform .18s var(--tt-ease);
}

.tt-search__go:hover {
    background: #123354;
    color: #fff !important;
    gap: 13px;
}

.tt-search__go:active {
    transform: translateY(1px);
}

.tt-search__row {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid var(--tt-rule);
    border-radius: 10px;
    padding: 0 14px;
    height: 52px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.tt-search__row:focus-within {
    border-color: var(--tt-blue);
    box-shadow: 0 0 0 3px rgba(0, 159, 217, .16);
}

.tt-search__row svg {
    flex: 0 0 auto;
    color: var(--tt-ink-3);
}

.tt-search__row input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: var(--tt-ink);
    font-family: inherit;
}

.tt-search__row input::placeholder {
    color: var(--tt-ink-3);
}

.tt-search__split {
    display: grid;
    grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.tt-search__btn {
    height: 52px;
    border: 0;
    border-radius: 10px;
    background: var(--tt-blue-deep);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .2s var(--tt-ease);
}

.tt-search__btn:hover {
    background: #123354;
    color: #fff;
}

.tt-search__btn:active {
    transform: translateY(1px);
}

.landing-refresh .tt-search__note,
.tt-search__note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 12px 2px 0;
    font-size: 12px;
    color: var(--tt-ink-3);
}

/* Vue <location-search> renders its own markup; keep it inside the card. */
.tt-search .lp-search-panel,
.tt-search .lp-search-panel>* {
    margin: 0;
    width: 100%;
}

/* ---------- hero stats ---------- */
.tt-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px, 4vw, 52px);
    margin-top: clamp(26px, 3.5vw, 38px);
}

.tt-stat__val {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 600;
    color: #fff;
    line-height: 1;
    letter-spacing: -.02em;
}

.tt-stat__val .tt-star {
    color: #ffc043;
    font-size: .8em;
}

.landing-refresh .tt-stat__label,
.tt-stat__label {
    margin: 7px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .72);
    line-height: 1.4;
}

/* scroll cue */
.tt-hero__cue {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255, 255, 255, .8);
    animation: tt-bob 2.4s var(--tt-ease) infinite;
}

@keyframes tt-bob {

    0%,
    100% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, 7px);
    }
}

/* photo credit chip, bottom-right of hero */
.tt-hero__credit {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    text-align: right;
    color: rgba(255, 255, 255, .82);
    font-size: 10px;
    line-height: 1.5;
    max-width: 220px;
}

.tt-hero__credit strong {
    display: block;
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: .8;
}

@media (max-width: 767.98px) {
    .tt-hero__credit {
        display: none;
    }
}

/* ==========================================================================
   2. CATEGORY TABS + IMAGE CARDS
   ========================================================================== */
.tt-tabs {
    position: relative;
    margin-bottom: clamp(24px, 3vw, 36px);
}

/* Horizontal rail: scrolls on small screens, centres when it fits. */
.tt-tabs__rail {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: clamp(18px, 2.6vw, 38px);
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-bottom: 1px solid var(--tt-rule);
    padding-inline: 4px;
}

.tt-tabs__rail::-webkit-scrollbar {
    display: none;
}

@media (min-width: 992px) {
    .tt-tabs__rail {
        justify-content: center;
    }
}

.tt-tab {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 4px 2px 12px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--tt-ink-3);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}

.tt-tab__icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
}

.tt-tab__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    filter: grayscale(1) opacity(.55);
    transition: filter .2s ease;
}

.tt-tab__icon i {
    font-size: 16px;
}

.tt-tab:hover {
    color: var(--tt-ink);
}

.tt-tab:hover .tt-tab__icon img {
    filter: grayscale(0) opacity(1);
}

.tt-tab.is-active {
    color: var(--tt-blue);
    border-bottom-color: var(--tt-blue);
    font-weight: 600;
}

.tt-tab.is-active .tt-tab__icon img {
    filter: none;
}

/* arrow control on the right edge of the rail */
.tt-tabs__arrow {
    position: absolute;
    right: -4px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--tt-rule);
    background: var(--tt-paper);
    color: var(--tt-ink);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .07);
    transition: background .2s ease, transform .2s var(--tt-ease);
}

.tt-tabs__arrow:hover {
    background: var(--tt-sunk);
    transform: scale(1.06);
}

@media (max-width: 991.98px) {
    .tt-tabs__arrow {
        display: none;
    }
}

/* ---------- image card grid ---------- */
.tt-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 20px);
}

@media (max-width: 991.98px) {
    .tt-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 519.98px) {
    .tt-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Photo tile with the label burned into the bottom-left corner. */
.tt-card {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--tt-r);
    overflow: hidden;
    background: var(--tt-sunk);
    text-decoration: none;
    isolation: isolate;
}

.tt-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--tt-ease);
}

.tt-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .62) 100%);
    z-index: 1;
}

.tt-card:hover img {
    transform: scale(1.05);
}

.tt-card__label {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 13px;
    z-index: 2;
    color: #fff;
    font-size: clamp(13px, 1.1vw, 15px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

/* skeleton while categories load */
.tt-card--skeleton {
    animation: tt-pulse 1.5s ease-in-out infinite;
}

@keyframes tt-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .55;
    }
}

/* ==========================================================================
   3. WHY CUSTOMERS LOVE US — interactive benefit story
   ========================================================================== */
.tt-why {
    position: relative;
    overflow: hidden;
    padding-block: clamp(76px, 7vw, 108px);
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}

.tt-why::before {
    content: "";
    position: absolute;
    top: -280px;
    right: -260px;
    width: 760px;
    height: 760px;
    border-radius: 50%;
    background: rgba(0, 159, 217, .07);
    pointer-events: none;
}

.tt-why__inner { position: relative; z-index: 1; }
.tt-why .tt-head-center { max-width: 720px; margin-inline: auto; }
.tt-why .tt-lede { max-width: 62ch; }

.tt-why__layout {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr);
    gap: clamp(38px, 5vw, 76px);
    align-items: center;
    margin-top: clamp(42px, 5vw, 66px);
}

.tt-why__list { display: grid; gap: 14px; }
.tt-why__item { position: relative; border: 1px solid transparent; border-radius: 18px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.tt-why__trigger {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 28px;
    gap: 16px;
    align-items: center;
    width: 100%;
    min-height: 112px;
    padding: 20px 22px;
    border: 0;
    border-radius: 17px;
    background: transparent;
    color: var(--tt-ink);
    text-align: start;
    cursor: pointer;
}
.tt-why__item:hover { background: #fff; border-color: #dfe8ec; transform: translateY(-1px); }
.tt-why__item.is-active { background: #fff; border-color: rgba(0, 126, 168, .35); box-shadow: 0 14px 34px rgba(11, 42, 58, .09); }
.tt-why__number { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #edf8fc; color: #007ea8; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.tt-why__text { display: grid; gap: 7px; }
.landing-refresh .tt-why__text strong { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.25; letter-spacing: -.02em; color: var(--tt-ink); }
.landing-refresh .tt-why__text > span { font-size: 14px; line-height: 1.55; color: var(--tt-ink-3); }
.tt-why__arrow { color: #8b969c; font-size: 22px; transition: color .2s ease, transform .2s ease; }
.tt-why__item.is-active .tt-why__number { background: #009fd9; color: #fff; }
.tt-why__item.is-active .tt-why__arrow { color: #007ea8; transform: translateX(4px); }
.tt-why__terms { position: absolute; left: 84px; bottom: 14px; color: var(--tt-ink-3); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; z-index: 2; }
.tt-why__item:has(.tt-why__terms) .tt-why__trigger { padding-bottom: 34px; }
.tt-why__trigger:focus-visible { outline: 3px solid rgba(0, 159, 217, .28); outline-offset: 3px; }

.tt-why__stage {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    border: 1px solid rgba(0, 126, 168, .12);
    border-radius: 32px;
    background: linear-gradient(145deg, #e8f7fc 0%, #d7f0fa 52%, #effaff 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 24px 60px rgba(8, 57, 78, .12);
}
.tt-why__stage::before,
.tt-why__stage::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.42); }
.tt-why__stage::before { width: 320px; height: 320px; right: -110px; top: -120px; }
.tt-why__stage::after { width: 190px; height: 190px; left: -70px; bottom: -90px; }
.tt-why__panel { position: absolute; inset: 0; display: grid; place-items: center; padding: 42px; z-index: 1; }
.tt-why__panel[hidden] { display: none; }
.tt-why__panel.is-active { animation: tt-why-reveal .32s var(--tt-ease) both; }

@keyframes tt-why-reveal {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.tt-why__device {
    width: min(100%, 360px);
    overflow: hidden;
    border: 7px solid #fff;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 24px 58px rgba(12, 53, 70, .2);
}
.tt-device__top { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #e6ebee; color: #53616a; font-size: 11px; font-weight: 700; }
.tt-device__top > span:first-child { width: 8px; height: 8px; border-radius: 50%; background: #20b486; }
.tt-device__body { padding: 28px 24px 24px; }
.tt-device__eyebrow { color: #008dbf; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.landing-refresh .tt-device__body h3 { margin: 8px 0 22px; color: #17232a; font-size: 24px; letter-spacing: -.03em; }
.tt-device__input { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px; border: 1px solid #dbe3e7; border-radius: 12px; color: #71808a; font-size: 12px; }
.tt-device__input strong { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #0a2540; color: #fff; }
.tt-device__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.tt-device__chips span { padding: 7px 10px; border-radius: 999px; background: #f1f5f7; color: #53616a; font-size: 10px; font-weight: 600; }
.tt-device__progress { height: 5px; margin-top: 28px; overflow: hidden; border-radius: 99px; background: #e8edef; }
.tt-device__progress span { display: block; width: 34%; height: 100%; border-radius: inherit; background: #009fd9; }

.tt-why__float { position: absolute; display: grid; gap: 1px; min-width: 116px; padding: 12px 15px; border: 1px solid rgba(0,126,168,.12); border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 12px 30px rgba(11,42,58,.12); backdrop-filter: blur(8px); }
.tt-why__float strong { color: #102c3a; font-size: 16px; }
.tt-why__float span { color: #708089; font-size: 10px; }
.tt-why__float--one { right: 34px; bottom: 50px; }
.tt-why__float--two { left: 34px; top: 54px; }

.tt-pro-card { width: min(100%, 390px); padding: 28px; border-radius: 24px; background: #fff; box-shadow: 0 24px 58px rgba(12,53,70,.18); }
.tt-pro-card__head { display: grid; grid-template-columns: 54px 1fr 28px; gap: 13px; align-items: center; }
.tt-pro-card__avatar { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #0a2540; color: #fff; font-weight: 800; }
.tt-pro-card__head > span:nth-child(2) { display: grid; gap: 5px; }
.tt-pro-card__head strong { color: #18262d; font-size: 14px; }
.tt-pro-card__head small { color: #738089; font-size: 11px; }
.tt-pro-card__head small b { color: #f4a900; }
.tt-pro-card__head i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e3f7ee; color: #118758; font-style: normal; }
.tt-pro-card__badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0; }
.tt-pro-card__badges span { padding: 7px 10px; border-radius: 999px; background: #e9f7fc; color: #007ba5; font-size: 10px; font-weight: 700; }
.tt-pro-card__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tt-pro-card__facts span { display: grid; gap: 3px; padding: 14px; border-radius: 12px; background: #f6f8f9; color: #718089; font-size: 10px; }
.tt-pro-card__facts b { color: #1c2b32; font-size: 16px; }
.tt-pro-card button { width: 100%; margin-top: 18px; padding: 13px; border: 0; border-radius: 999px; background: #0a2540; color: #fff; font-size: 12px; font-weight: 700; }

.tt-cover-card { max-width: 390px; text-align: center; }
.tt-cover-card__shield { display: grid; place-items: center; width: 112px; height: 112px; margin: 0 auto 20px; border-radius: 32px; background: #009fd9; box-shadow: 0 20px 42px rgba(0,159,217,.3); transform: rotate(4deg); }
.tt-cover-card__shield svg { width: 68px; height: 76px; transform: rotate(-4deg); }
.tt-cover-card__shield path:first-child { fill: none; stroke: #fff; stroke-width: 3; }
.tt-cover-card__shield path:last-child { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.tt-cover-card__tag { color: #007ea8; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.landing-refresh .tt-cover-card h3 { max-width: 15ch; margin: 10px auto 12px; color: #102c3a; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.15; letter-spacing: -.035em; }
.tt-cover-card p { margin: 0 auto; color: #5d707a; font-size: 13px; line-height: 1.6; }
.tt-cover-card a { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: #007ea8; font-size: 12px; font-weight: 700; text-decoration: none; }

[data-bs-theme="dark"] .tt-why,
body.dark .tt-why { background: #0f1116; }
[data-bs-theme="dark"] .tt-why__item.is-active,
[data-bs-theme="dark"] .tt-why__item:hover,
body.dark .tt-why__item.is-active,
body.dark .tt-why__item:hover { background: #171a20; border-color: #344752; }
[data-bs-theme="dark"] .tt-why__stage,
body.dark .tt-why__stage { background: linear-gradient(145deg, #12303c, #10242d); border-color: #294752; }

@media (prefers-reduced-motion: reduce) {
    .tt-why__panel.is-active { animation: none; }
    .tt-why__item { transition: none; }
}

@media (max-width: 991.98px) {
    .tt-why__layout { grid-template-columns: 1fr; }
    .tt-why__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tt-why__trigger { grid-template-columns: 38px 1fr; align-items: start; min-height: 170px; padding: 18px; }
    .tt-why__number { width: 38px; height: 38px; border-radius: 11px; }
    .tt-why__arrow { display: none; }
    .tt-why__terms { left: 72px; }
}

@media (max-width: 767.98px) {
    .tt-why { padding-block: 64px; }
    .tt-why__layout { margin-top: 34px; }
    .tt-why__list { grid-template-columns: 1fr; }
    .tt-why__trigger { grid-template-columns: 42px 1fr; min-height: 0; padding: 17px; }
    .tt-why__number { width: 42px; height: 42px; }
    .tt-why__item:has(.tt-why__terms) .tt-why__trigger { padding-bottom: 34px; }
    .tt-why__terms { left: 75px; bottom: 12px; }
    .tt-why__stage { min-height: 430px; border-radius: 24px; }
    .tt-why__panel { padding: 26px 18px; }
    .tt-why__float { display: none; }
}

/* ==========================================================================
   4. EXPLORE MORE PROJECTS  (tabs + 1 wide tile + 3 small tiles)
   ========================================================================== */
.tt-explore__tabs {
    display: flex;
    justify-content: flex-start;
    gap: clamp(16px, 2.4vw, 34px);
    border-bottom: 1px solid var(--tt-rule);
    margin-bottom: clamp(20px, 2.6vw, 30px);
    overflow-x: auto;
    scrollbar-width: none;
}

.tt-explore__tabs::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
    .tt-explore__tabs {
        justify-content: center;
    }
}

.tt-explore__tab {
    flex: 0 0 auto;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0 2px 11px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--tt-ink-3);
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}

.tt-explore__tab:hover {
    color: var(--tt-ink);
}

.tt-explore__tab.is-active {
    color: var(--tt-ink);
    font-weight: 600;
    border-bottom-color: var(--tt-blue);
}

/* hero tile */
.tt-feature {
    position: relative;
    display: block;
    border-radius: var(--tt-r);
    overflow: hidden;
    aspect-ratio: 21 / 9;
    text-decoration: none;
    background: var(--tt-sunk);
    margin-bottom: clamp(12px, 1.5vw, 20px);
}

@media (max-width: 767.98px) {
    .tt-feature {
        aspect-ratio: 4 / 3;
    }
}

.tt-feature img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--tt-ease);
}

.tt-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, 0) 72%);
}

.tt-feature:hover img {
    transform: scale(1.03);
}

.tt-feature__copy {
    position: absolute;
    z-index: 2;
    left: clamp(18px, 3vw, 34px);
    top: clamp(18px, 3vw, 32px);
    max-width: 34ch;
    color: #fff;
}

.landing-refresh .tt-feature__copy h4,
.tt-feature__copy h4 {
    font-size: clamp(15px, 1.5vw, 20px);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.02em;
    margin: 0;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .35);
}

.tt-feature__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    border-bottom: 1.5px solid rgba(255, 255, 255, .75);
    padding-bottom: 2px;
    transition: gap .25s var(--tt-ease);
}

.tt-feature:hover .tt-feature__link {
    gap: 12px;
}

/* the three tiles under the hero tile */
.tt-explore__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 20px);
}

@media (max-width: 767.98px) {
    .tt-explore__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 519.98px) {
    .tt-explore__row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.tt-explore__row .tt-card {
    aspect-ratio: 16 / 10;
}

/* ==========================================================================
   5. BRAND MARQUEE
   ========================================================================== */
.tt-brands {
    padding-top: var(--tt-gap);
    padding-bottom: var(--tt-gap);
    background: var(--tt-paper);
    overflow: hidden;
}

.tt-brands h2 {
    text-align: center;
    margin-bottom: clamp(26px, 3.4vw, 42px);
}

.tt-marquee {
    position: relative;
    /* Fade the logo strip out at both edges. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.tt-marquee__track {
    display: flex;
    align-items: center;
    gap: clamp(40px, 6vw, 88px);
    width: max-content;
    animation: tt-scroll 34s linear infinite;
}

.tt-marquee:hover .tt-marquee__track {
    animation-play-state: paused;
}

@keyframes tt-scroll {
    from {
        transform: translateX(0);
    }

    /* the track holds the logo set twice, so -50% loops seamlessly */
    to {
        transform: translateX(-50%);
    }
}

.tt-brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: clamp(17px, 1.9vw, 25px);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--tt-ink);
    opacity: .26;
    white-space: nowrap;
    transition: opacity .25s ease;
}

.tt-marquee:hover .tt-brand {
    opacity: .38;
}

.tt-brand img {
    height: clamp(20px, 2.1vw, 27px);
    width: auto;
    object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
    .tt-marquee__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    .tt-hero__cue {
        animation: none;
    }
}

/* ==========================================================================
   6. RESOURCES  (3 tall tiles)
   ========================================================================== */
.tt-resources__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 22px);
}

@media (max-width: 767.98px) {
    .tt-resources__grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 420px;
        margin-inline: auto;
    }
}

.tt-resources__grid .tt-card {
    aspect-ratio: 4 / 5;
}

.tt-card__copy {
    position: absolute;
    z-index: 2;
    left: 16px;
    right: 16px;
    bottom: 15px;
    color: #fff;
}

.landing-refresh .tt-card__copy h4,
.tt-card__copy h4 {
    font-size: clamp(14px, 1.3vw, 17px);
    font-weight: 600;
    margin: 0 0 5px;
    letter-spacing: -.015em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.landing-refresh .tt-card__copy p,
.tt-card__copy p {
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
    color: rgba(255, 255, 255, .87);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

/* ==========================================================================
   7. TRUSTED PROS  (city pills on a curved wash)
   ========================================================================== */
.tt-cities {
    position: relative;
    overflow: hidden;
    padding-top: var(--tt-gap);
    padding-bottom: var(--tt-gap);
    background: var(--tt-paper);
    text-align: center;
}

/* Mirror of the .tt-why wash, bleeding off the left edge instead. */
.tt-cities::before {
    content: "";
    position: absolute;
    bottom: -46%;
    left: -16%;
    width: 132%;
    height: 118%;
    background: var(--tt-wash-2);
    border-radius: 50%;
    z-index: 0;
}

.tt-cities__inner {
    position: relative;
    z-index: 1;
}

.tt-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: clamp(24px, 3vw, 34px);
    max-width: 620px;
    margin-inline: auto;
}

.tt-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 17px;
    border-radius: 999px;
    background: rgba(0, 159, 217, .1);
    color: var(--tt-blue-ink);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, transform .2s var(--tt-ease);
}

.tt-pill:hover {
    background: var(--tt-blue);
    color: #fff;
    transform: translateY(-1px);
}

.tt-cities__more {
    display: inline-block;
    margin-top: clamp(20px, 2.6vw, 30px);
    font-size: 13px;
    font-weight: 600;
    color: var(--tt-blue-ink);
    text-decoration: none;
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 2px;
}

.tt-cities__more:hover {
    color: var(--tt-blue);
}

/* ==========================================================================
   8. APP CTA  (dark photo band + phone mockup)
   ========================================================================== */
.tt-app {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: none;
    min-height: 460px;
    margin: 0;
    border-radius: 0;
    background: #18251d;
    isolation: isolate;
}

.tt-app__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.tt-app__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: none;
    transform: none;
}

.tt-app__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    background: linear-gradient(90deg,
        rgba(8, 18, 14, .86) 0%,
        rgba(8, 18, 14, .72) 34%,
        rgba(8, 18, 14, .34) 62%,
        rgba(8, 18, 14, .14) 100%);
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .tt-app {
        width: 100%;
        margin: 0;
        border-radius: 0;
    }

    .tt-app__bg::after {
        background: rgba(8, 18, 14, .76);
    }
}

.tt-app__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(400px, 1.08fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: end;
    box-sizing: border-box;
    min-height: 460px;
    padding-top: 0;
}

@media (max-width: 767.98px) {
    .tt-app__grid {
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: 48px;
    }
}

.tt-app__copy {
    align-self: center;
    padding: 42px 0;
    color: #fff;
    max-width: 500px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .72);
}

.landing-refresh .tt-app__copy h2,
.tt-app__copy h2 {
    max-width: 11ch;
    font-size: clamp(36px, 3.25vw, 48px);
    font-weight: 700;
    line-height: 1.07;
    letter-spacing: -.045em;
    margin: 0;
    color: #fff;
}

.landing-refresh .tt-app__copy p,
.tt-app__copy p {
    max-width: 52ch;
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .9);
}

.tt-app__badges {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.tt-app__badges img {
    height: 40px;
    width: auto;
    display: block;
}

.tt-app__qr {
    margin-top: 18px;
    width: 82px;
    height: 82px;
    border-radius: 10px;
    background: #fff;
    padding: 6px;
    display: grid;
    place-items: center;
}

.tt-app__qr img,
.tt-app__qr svg {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 767.98px) {
    .tt-app__qr {
        display: none;
    }
}

/* phone mockup sits flush to the bottom edge of the band */
.tt-app__phone {
    align-self: end;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 430px;
    margin-bottom: 0;
    text-align: center;
}

.tt-app__phone img {
    position: static;
    width: 100%;
    max-width: 620px;
    max-height: 430px;
    height: auto;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    margin: 0 auto;
    transform: none;
    filter: drop-shadow(0 28px 44px rgba(0, 0, 0, .48));
}

[dir="rtl"] .tt-app__phone img {
    transform: none;
}

.tt-app__phone--fallback img {
    clip-path: none;
}

/* The homepage banner already owns its rounded frame and surrounding space. */
.landing-refresh-footer.home-footer {
    border-radius: 0;
}

/* Keep equal breathing room above and below the FAQ content. */
.tt-home .lp-faq {
    padding-top: clamp(84px, 7vw, 112px) !important;
    padding-bottom: clamp(84px, 7vw, 112px) !important;
}

@media (max-width: 767.98px) {
    .tt-home .lp-faq {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }
}

@media (max-width: 991.98px) and (min-width: 768px) {
    .tt-app__grid {
        grid-template-columns: minmax(0, .95fr) minmax(300px, 1.05fr);
        gap: 20px;
    }

    .tt-app__phone img {
        width: 100%;
        max-width: 560px;
    }
}

@media (max-width: 767.98px) {
    .tt-app__phone {
        display: none;
    }
}

/* ==========================================================================
   Dynamic-section bridge
   The admin-driven Vue sliders (services, testimonials, promos) keep their
   own markup; these rules only re-seat them in the Thumbtack rhythm.
   ========================================================================== */
.tt-home .tt-dyn {
    padding-top: var(--tt-gap);
    padding-bottom: var(--tt-gap);
}

.tt-home .tt-dyn .lr-sec-head {
    margin-bottom: clamp(22px, 2.8vw, 32px);
}

.tt-home .tt-dyn .row.mt-5,
.tt-home .tt-dyn section>.row.mt-5 {
    margin-top: 0 !important;
}

.tt-empty {
    text-align: center;
    padding: clamp(34px, 5vw, 56px) 20px;
    border: 1px dashed var(--tt-rule);
    border-radius: var(--tt-r);
    color: var(--tt-ink-3);
    font-size: 13.5px;
    background: var(--tt-sunk);
}

/* Respect reduced motion across the hover transforms. */
@media (prefers-reduced-motion: reduce) {

    .tt-card img,
    .tt-feature img,
    .tt-pill,
    .tt-tabs__arrow {
        transition: none;
    }

    .tt-card:hover img,
    .tt-feature:hover img,
    .tt-pill:hover {
        transform: none;
    }
}

/* ==========================================================================
   Search widget bridge
   The Vue <location-search> markup is shared with the previous hero, which
   styled it via .home-hero. The new hero keeps that class so all of the
   widget's internals (location picker, autocomplete, dropdown) still work;
   these rules only re-seat the console inside the white card.
   ========================================================================== */
.tt-home .tt-search .location-search-block {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    border: 1.5px solid var(--tt-rule);
    border-radius: 10px;
    background: var(--tt-paper);
    overflow: visible;
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.tt-home .tt-search .location-search-block:focus-within {
    border-color: var(--tt-blue);
    box-shadow: 0 0 0 3px rgba(0, 159, 217, .16);
}

/* The console already carries the border; drop any inherited framing. */
.tt-home .tt-search .modal-location,
.tt-home .tt-search .location-search {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    min-height: 50px;
}

.tt-home .tt-search .modal-location {
    border-radius: 9px 0 0 9px;
}

/* Primary action reads as the Thumbtack "Find a pro" button. */
.tt-home .tt-search .btn-primary,
.tt-home .tt-search button[type="submit"] {
    border-radius: 9px !important;
    background: var(--tt-blue-deep) !important;
    border-color: var(--tt-blue-deep) !important;
    font-weight: 600;
    min-height: 46px;
    padding-inline: 22px;
}

.tt-home .tt-search .btn-primary:hover,
.tt-home .tt-search button[type="submit"]:hover {
    background: #123354 !important;
    border-color: #123354 !important;
}

@media (max-width: 575.98px) {
    .tt-home .tt-search .location-search-block {
        flex-wrap: wrap;
    }

    .tt-home .tt-search .modal-location {
        width: 100%;
        border-radius: 9px 9px 0 0;
        border-bottom: 1px solid var(--tt-rule) !important;
    }
}

/* ==========================================================================
   Hero refinements — alignment and responsive behaviour
   ========================================================================== */

/* The widget's own wrapper adds padding meant for the old hero; neutralise it
   so the console aligns flush with the card's edges. */
.tt-home .tt-search .search-box-wrapper {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
}

.tt-home .tt-search .search-box-wrapper > .d-flex {
    width: 100%;
}

/* Drop the widget's trailing (empty) button slot so it adds no dead space. */
.tt-home .tt-search .search-box-wrapper > .d-flex > .py-2.px-3:last-child:empty,
.tt-home .tt-search .search-box-wrapper .py-2.px-3:has(> div:empty) {
    display: none;
}

.tt-home .tt-search .location-search-block {
    width: 100%;
    min-height: 52px;
}

/* Location picker keeps a sensible share and never collapses. */
.tt-home .tt-search .modal-location {
    flex: 0 0 auto;
    min-width: 150px;
    max-width: 46%;
}

.tt-home .tt-search .modal-location span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-home .tt-search .location-search {
    flex: 1 1 auto;
    min-width: 0;
}

.tt-home .tt-search .location-search input {
    width: 100%;
    font-size: 14px;
}

/* Results panel spans the whole card. */
.tt-home .tt-search .dropdown-menu {
    width: 100%;
    left: 0;
    right: 0;
}

/* ---------- stats ---------- */
.tt-home .tt-hero__stats {
    gap: clamp(20px, 3.4vw, 46px);
}

.landing-refresh .tt-stat__val,
.tt-stat__val {
    text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}

.landing-refresh .tt-stat__label,
.tt-stat__label {
    text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    .tt-hero__copy {
        max-width: 100%;
    }

    .tt-search {
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .tt-home .tt-search .location-search-block {
        flex-wrap: wrap;
    }

    .tt-home .tt-search .modal-location {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        border-radius: 9px 9px 0 0;
        border-bottom: 1px solid var(--tt-rule) !important;
    }

    .tt-home .tt-search .location-search {
        width: 100%;
    }

    /* The form-group keeps a left rule meant for the side-by-side layout. */
    .tt-home .tt-search .location-search .form-group {
        border-left: 0 !important;
        padding-left: 0 !important;
    }

    .tt-hero__stats {
        gap: 18px 26px;
    }

    .tt-stat__val {
        font-size: 19px;
    }
}

/* ==========================================================================
   Neutralise the previous hero's styling
   .home-hero is kept on the section only so the Vue search widget inherits
   its working internals. Everything that styled the OLD light hero (white
   background, faint grid overlay, top padding, bottom rule) has to be undone
   or it washes out the photo behind the slideshow.
   ========================================================================== */
.landing-refresh .tt-hero.home-hero {
    background: #0d1519 !important;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* The decorative grid belongs to the old hero; it hazes the photo. */
.landing-refresh .tt-hero.home-hero::before {
    display: none;
}

/* Keep the photograph and its scrim in the same clipped layer. Search results
   and the location modal remain free to extend outside the hero. */
.landing-refresh .tt-hero.home-hero {
    min-height: calc(100vh - var(--header-height, 78px));
    min-height: calc(100svh - var(--header-height, 78px));
    margin: 0;
    overflow: visible;
    isolation: isolate;
}
.tt-hero__bg { overflow: hidden; }
.tt-hero__inner { padding-block: clamp(40px, 6vh, 72px); }
.tt-hero__copy { width: 100%; max-width: 590px; }
.tt-home .tt-hero__title { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.12; }
.tt-home .tt-hero__sub { max-width: 52ch; }
.tt-home .tt-search { box-sizing: border-box; max-width: 590px; padding: 16px; }
.tt-home .tt-search .lp-search-panel { margin: 0; max-width: none; }
.tt-search__fallback { margin: 0; }
.tt-search__field { display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 0; color: var(--tt-ink-2); }
.tt-search__field svg { flex: 0 0 auto; }
.landing-refresh .tt-search__field input[type="search"] {
    width: 100%; min-width: 0; height: 52px; padding: 10px 0;
    border: 0; border-radius: 0; background: transparent; color: var(--tt-ink); font-size: 16px;
}
.tt-search__field:focus-within { outline: 2px solid var(--tt-blue); outline-offset: 3px; border-radius: 4px; }
.tt-home .tt-search .lp-search-panel:has(.location-search input) .tt-search__fallback { display: none; }
.tt-home .tt-search .search-box-wrapper { border: 0; box-shadow: none; }
.tt-home .tt-search .location-search-block { border: 0; border-radius: 0; }
.tt-home .tt-search .location-search { padding: 8px !important; }
.tt-home .tt-search .location-search input { min-width: 0; font-size: 16px; }
.tt-home .tt-search__go { margin-top: 12px; border-radius: 999px; }
.tt-home .tt-search__note { margin: 16px 0 0; color: rgba(255,255,255,.92); font-size: 13px; }
.tt-home .tt-hero__stats { margin-top: 24px; }
@media (max-width: 575.98px) {
    .tt-hero__inner { padding-block: 36px 56px; }
    .tt-home .tt-search { padding: 12px; }
    .tt-home .tt-search .location-search-block { flex-direction: column; align-items: stretch !important; }
    .tt-home .tt-search .modal-location, .tt-home .tt-search .location-search { width: 100%; max-width: none; }
    .tt-home .tt-hero__stats { flex-wrap: wrap; gap: 20px; }
}

/* Reference search console: project row, then location and primary action. */
.landing-refresh .tt-search--reference {
    width: 100%; max-width: 588px; padding: 0 16px 16px;
    border: 1px solid #d6d8da; border-radius: 16px;
    background: #fff; box-shadow: none;
}
.tt-search--reference .tt-search__field {
    min-height: 54px; gap: 12px; border-bottom: 1px solid #e8e9eb;
    color: #303438;
}
.landing-refresh .tt-search--reference .tt-search__field input[type="search"] {
    height: 54px; padding: 12px 0; font-size: 15px; font-weight: 400;
    letter-spacing: .01em; color: #303438; box-shadow: none;
}
.landing-refresh .tt-search--reference input::placeholder { color: #707780; opacity: 1; }
.tt-search__actions { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding-top: 12px; }
.tt-search__location {
    display: flex; align-items: center; position: relative; margin: 0;
    height: 40px; border: 1px solid #d2d5d8; border-radius: 999px;
    color: #69727a; overflow: hidden;
}
.tt-search__location svg { position: absolute; inset-inline-start: 12px; pointer-events: none; }
.tt-search__location select {
    appearance: none; width: 100%; height: 100%; min-width: 0;
    border: 0; border-radius: inherit; padding: 0 10px 0 36px;
    background: transparent; color: #303438; font: inherit; font-size: 14px;
    cursor: pointer; text-overflow: ellipsis;
}
.tt-search__location:focus-within { outline: 2px solid #007ea8; outline-offset: 2px; }
.tt-home .tt-search--reference .tt-search__go {
    width: 100%; height: 40px; min-height: 40px; margin: 0; padding: 0 16px;
    border: 0; border-radius: 999px; background: #083649;
    color: #b5ecff !important; font-size: 14px; font-weight: 700; cursor: pointer;
}
.tt-home .tt-search--reference .tt-search__go:hover { background: #0c465c; }
.tt-home .tt-search--reference .tt-search__go:focus-visible { outline: 3px solid #009fd9; outline-offset: 3px; }
.tt-home .tt-search__note { margin: 18px 0 0; gap: 8px; font-size: 14px; line-height: 1.5; color: #fff; }
.tt-search__note svg { flex: 0 0 auto; }
.tt-home .tt-hero__stats { gap: 28px; margin-top: 24px; }
.tt-home .tt-stat__val { font-size: 28px; font-weight: 700; line-height: 1.1; }
.tt-home .tt-stat__label { margin-top: 8px; font-size: 14px; color: #fff; line-height: 1.4; }
@media (max-width: 575.98px) {
    .landing-refresh .tt-search--reference { padding: 0 12px 12px; }
    .tt-search__actions { grid-template-columns: 136px minmax(0, 1fr); gap: 10px; }
    .tt-home .tt-hero__stats { gap: 18px; }
    .tt-home .tt-stat__val { font-size: 25px; }
    .tt-home .tt-stat__label, .tt-home .tt-search__note { font-size: 12px; }
}

/* A single focus indicator belongs to the project row, not its inner input. */
.landing-refresh .tt-search--reference .tt-search__field {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 54px;
    padding: 0;
    border-radius: 0;
    outline: none;
    box-shadow: none;
}
.landing-refresh .tt-search--reference .tt-search__field:focus-within {
    outline: none;
    box-shadow: none;
    border-bottom-color: #007ea8;
}
.landing-refresh .tt-search--reference .tt-search__field input[type="search"],
.landing-refresh .tt-search--reference .tt-search__field input[type="search"]:focus,
.landing-refresh .tt-search--reference .tt-search__field input[type="search"]:focus-visible {
    flex: 1 1 0%;
    box-sizing: border-box;
    width: 0;
    min-width: 0;
    margin: 0;
    height: 52px !important;
    padding: 0 !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: 1.5;
    color: #303438 !important;
}
.landing-refresh .tt-search--reference .tt-search__location select:focus {
    outline: none;
    box-shadow: none;
}

/* Give the unfiltered location a readable label and one focus boundary. */
.landing-refresh .tt-search--reference .tt-search__location {
    box-sizing: border-box;
    overflow: visible;
    background: #fff;
}
.landing-refresh .tt-search--reference .tt-search__location::after {
    content: "";
    position: absolute;
    inset-inline-end: 14px;
    top: 15px;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid #69727a;
    border-bottom: 1.5px solid #69727a;
    transform: rotate(45deg);
    pointer-events: none;
}
.landing-refresh .tt-search--reference .tt-search__location select {
    box-sizing: border-box;
    padding-inline: 34px 30px;
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
    line-height: normal;
}
.landing-refresh .tt-search--reference .tt-search__location:focus-within {
    outline: none;
    border-color: #007ea8;
    box-shadow: 0 0 0 1px #007ea8;
}

/* Reference discovery shelves immediately below the hero. */
.landing-refresh .home-discover {
    max-width: 1450px;
    margin-inline: auto;
    padding: 46px 36px 80px;
    background: #fff;
    color: #111;
    box-sizing: border-box;
}
.home-discover__section + .home-discover__section { margin-top: 68px; }
.home-discover__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.landing-refresh .home-discover__heading h2 { margin: 0; font-size: 28px; line-height: 1.3; font-weight: 600; letter-spacing: -.025em; color: #303030; }
.landing-refresh .home-discover__heading > a { flex-shrink: 0; color: #111; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.home-discover__shelf { position: relative; }
.home-discover__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 80px) / 6);
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    padding: 0 2px 4px;
    margin: 0 -2px;
}
.home-discover__rail::-webkit-scrollbar { display: none; }
.landing-refresh .home-discover__card {
    display: flex; flex-direction: column; min-width: 0;
    background: #fff; color: #080808; text-decoration: none;
    border-radius: 3px; overflow: hidden;
    box-shadow: 0 2px 4px #0003;
    scroll-snap-align: start;
}
.home-discover__card img { display: block; width: 100%; height: 168px; object-fit: cover; }
.home-discover__label { display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 8px 12px; box-sizing: border-box; text-align: center; font-size: 15px; font-weight: 500; line-height: 20px; }
.home-discover__card:hover .home-discover__label { text-decoration: underline; text-underline-offset: 3px; }
.landing-refresh .home-discover__intro { padding: 20px; background: #f0eee9; font-size: 17px; font-weight: 500; line-height: 25px; justify-content: space-between; }
.home-discover__intro-arrow { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #242424; color: #fff; font-size: 27px; align-self: flex-end; margin: 20px 8px 8px 0; }
.home-discover__next { position: absolute; inset-inline-end: -20px; top: 84px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #16232c; box-shadow: 0 2px 5px #0003; cursor: pointer; z-index: 1; }
.home-discover__next:hover { background: #f1f3f5; }
.home-discover__rail--stories { grid-auto-columns: calc((100% - 48px) / 4); }
.landing-refresh .home-discover__story { border-radius: 0; box-shadow: none; }
.home-discover__story img { height: 180px; }
/* "Popular" and the title sit directly on the card surface (visible in
   dark mode, where the story card takes a background). Inset both by the
   same amount so they clear the card edge and stay aligned with each
   other; the image above them stays full-bleed. */
.home-discover__story > .home-discover__eyebrow { padding-inline: 12px; }
.landing-refresh .home-discover__story .home-discover__label {
    display: block; min-height: 0; text-align: start; font-weight: 500;
    /* Matches the eyebrow's inline inset so both lines share one left
       edge, plus a bottom inset so a two-line title never runs into the
       card edge below it. */
    padding: 0 12px 12px;
}
.home-discover__eyebrow { font-size: 13px; line-height: 20px; margin-top: 8px; }
.home-discover :is(a, button, [tabindex]):focus-visible { outline: 2px solid #007ea8; outline-offset: 2px; }
@media (max-width: 991.98px) {
    .home-discover__rail { grid-auto-columns: calc((100% - 48px) / 4); }
    .home-discover__rail--stories { grid-auto-columns: calc((100% - 32px) / 3); }
}
@media (max-width: 1199.98px) and (min-width: 992px) {
    .landing-refresh .home-discover { padding-inline: 28px; }
    .home-discover__rail { grid-auto-columns: calc((100% - 64px) / 5); }
}
@media (max-width: 575.98px) {
    .landing-refresh .home-discover { padding: 28px 20px 40px; }
    .home-discover__section + .home-discover__section { margin-top: 36px; }
    .landing-refresh .home-discover__heading h2 { font-size: 20px; }
    .home-discover__heading { gap: 12px; margin-bottom: 16px; }
    .home-discover__rail { grid-auto-columns: calc((100% - 16px) / 2); }
    .home-discover__rail--stories { grid-auto-columns: 82%; }
    .home-discover__next { inset-inline-end: -12px; }
}

.home-discover__previous { inset-inline-end: auto; inset-inline-start: -18px; }
.home-discover__next[hidden] { display: none !important; }
[dir="rtl"] .home-discover__next svg { transform: rotate(180deg); }
@media (max-width: 575.98px) {
    .home-discover__previous { inset-inline-end: auto; inset-inline-start: -12px; }
}

/* ==========================================================================
   Homepage trust, resources, testimonials and coverage
   ========================================================================== */
.tt-showcase-container { max-width: 1360px; }
.tt-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: #0088b8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    line-height: 1;
    text-transform: uppercase;
}
.tt-section-kicker::before { content: ""; width: 24px; height: 2px; border-radius: 99px; background: currentColor; }

/* Proof band */
.tt-proof { padding-block: clamp(76px, 7vw, 104px); background: #0a2540; color: #fff; }
.tt-proof__header { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 64px; align-items: end; }
.tt-proof .tt-section-kicker { color: #75d7fa; }
.landing-refresh .tt-proof__header h2 { max-width: 16ch; margin: 0; color: #fff; font-size: clamp(36px, 4vw, 56px); line-height: 1.08; letter-spacing: -.045em; }
.landing-refresh .tt-proof__header p { max-width: 46ch; margin: 0; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.7; }
.tt-proof__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 60px; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.tt-proof__stat { display: grid; gap: 9px; padding: 30px 28px; border-right: 1px solid rgba(255,255,255,.18); }
.tt-proof__stat:last-child { border-right: 0; }
.tt-proof__stat strong { color: #fff; font-size: clamp(30px, 3.1vw, 46px); line-height: 1; letter-spacing: -.04em; }
.tt-proof__stat span { color: rgba(255,255,255,.65); font-size: 12px; line-height: 1.4; }

/* Resource guides */
.tt-guides { padding-block: clamp(82px, 8vw, 116px); background: #f5f7f8; }
.tt-showcase-heading { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 42px; }
.landing-refresh .tt-showcase-heading h2 { margin: 0; color: #121c22; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -.04em; }
.landing-refresh .tt-showcase-heading p { max-width: 58ch; margin: 14px 0 0; color: #69777f; font-size: 14px; line-height: 1.65; }
.tt-text-link { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; padding-bottom: 4px; border-bottom: 1px solid currentColor; color: #183747; font-size: 13px; font-weight: 700; text-decoration: none; }
.tt-text-link span { font-size: 18px; transition: transform .2s ease; }
.tt-text-link:hover span { transform: translateX(4px); }
.tt-guides__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.tt-guide-card { overflow: hidden; border: 1px solid #e0e5e8; border-radius: 22px; background: #fff; color: #132028; text-decoration: none; box-shadow: 0 10px 28px rgba(14,40,52,.06); transition: transform .25s ease, box-shadow .25s ease; }
.tt-guide-card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(14,40,52,.12); }
.tt-guide-card__image { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; }
.tt-guide-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--tt-ease); }
.tt-guide-card:hover img { transform: scale(1.035); }
.tt-guide-card__arrow { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.94); color: #0a2540; font-size: 20px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.tt-guide-card__body { display: grid; gap: 10px; padding: 24px 24px 27px; }
.tt-guide-card__body small { color: #0087b6; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tt-guide-card__body strong { color: #132028; font-size: 22px; line-height: 1.25; letter-spacing: -.025em; }
.tt-guide-card__body > span { color: #68767e; font-size: 13px; line-height: 1.65; }

/* Customer stories */
.tt-clients { padding-block: clamp(82px, 8vw, 116px); background: #fff; }
.tt-clients__header { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 42px; }
.landing-refresh .tt-clients__header h2 { margin: 0; color: #121c22; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -.04em; }
.landing-refresh .tt-clients__header p { margin: 13px 0 0; color: #68767e; font-size: 14px; }
.tt-clients__rating { display: flex; align-items: center; gap: 15px; flex-shrink: 0; padding: 15px 19px; border: 1px solid #dde4e7; border-radius: 16px; background: #fff; }
.tt-clients__rating > strong { color: #10252f; font-size: 28px; line-height: 1; }
.tt-clients__rating > span { display: grid; gap: 3px; }
.tt-clients__rating b { color: #f6ac19; font-size: 12px; letter-spacing: 2px; }
.tt-clients__rating small { color: #7b878d; font-size: 10px; }
.tt-clients__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tt-client-card { position: relative; display: flex; flex-direction: column; min-height: 260px; padding: 28px; border: 1px solid #e1e6e8; border-radius: 20px; background: #fbfcfc; }
.tt-client-card__quote { color: #009fd9; font-family: Georgia, serif; font-size: 58px; line-height: .7; }
.landing-refresh .tt-client-card > p { flex: 1; margin: 20px 0 30px; color: #36474f; font-size: 15px; line-height: 1.75; }
.tt-client-card footer { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; }
.tt-client-card__avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #0a2540; color: #fff; font-size: 12px; font-weight: 800; }
.tt-client-card footer > span:nth-child(2) { display: grid; gap: 3px; }
.tt-client-card footer strong { color: #192930; font-size: 13px; }
.tt-client-card footer small { color: #7b878d; font-size: 10px; }
.tt-client-card footer > b { color: #d99100; font-size: 12px; }

/* City coverage */
.tt-coverage { position: relative; overflow: hidden; padding-block: clamp(82px, 8vw, 116px); background: #eaf7fc; }
.tt-coverage::before { content: ""; position: absolute; left: -170px; top: -300px; width: 650px; height: 650px; border-radius: 50%; border: 120px solid rgba(0,159,217,.065); }
.tt-coverage__inner { position: relative; display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); gap: clamp(48px, 7vw, 96px); align-items: center; }
.landing-refresh .tt-coverage__copy h2 { max-width: 12ch; margin: 0; color: #10252f; font-size: clamp(36px, 3.7vw, 52px); line-height: 1.08; letter-spacing: -.045em; }
.landing-refresh .tt-coverage__copy p { max-width: 42ch; margin: 17px 0 0; color: #64757d; font-size: 14px; line-height: 1.7; }
.tt-coverage__action { display: inline-flex; align-items: center; gap: 10px; margin-top: 25px; padding: 13px 20px; border-radius: 999px; background: #0a2540; color: #fff; font-size: 12px; font-weight: 700; text-decoration: none; }
.tt-coverage__action span { font-size: 17px; transition: transform .2s ease; }
.tt-coverage__action:hover { color: #fff; background: #123d5e; }
.tt-coverage__action:hover span { transform: translateX(4px); }
.tt-coverage__cities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tt-coverage__cities > a { display: grid; grid-template-columns: 36px 1fr 22px; gap: 12px; align-items: center; min-height: 76px; padding: 13px 16px; border: 1px solid rgba(0,126,168,.14); border-radius: 16px; background: rgba(255,255,255,.76); color: #17303c; text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.tt-coverage__cities > a:hover { background: #fff; border-color: rgba(0,126,168,.32); transform: translateY(-2px); }
.tt-coverage__pin { position: relative; display: block; width: 34px; height: 34px; border-radius: 11px; background: #dff3fa; }
.tt-coverage__pin::before { content: ""; position: absolute; left: 12px; top: 9px; width: 9px; height: 12px; border: 2px solid #0088b8; border-radius: 9px 9px 10px 10px; transform: rotate(45deg); }
.tt-coverage__cities > a > span:nth-child(2) { display: grid; gap: 3px; }
.tt-coverage__cities strong { color: #173038; font-size: 14px; }
.tt-coverage__cities small { color: #75848b; font-size: 10px; }
.tt-coverage__cities > a > b { color: #0088b8; font-size: 18px; }

.tt-guides :is(a, button):focus-visible,
.tt-clients :is(a, button):focus-visible,
.tt-coverage :is(a, button):focus-visible { outline: 3px solid rgba(0,159,217,.28); outline-offset: 3px; }

@media (max-width: 991.98px) {
    .tt-proof__header, .tt-coverage__inner { grid-template-columns: 1fr; gap: 30px; }
    .tt-proof__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tt-proof__stat:nth-child(2) { border-right: 0; }
    .tt-proof__stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.18); }
    .tt-coverage__copy { text-align: center; }
    .landing-refresh .tt-coverage__copy h2, .landing-refresh .tt-coverage__copy p { margin-inline: auto; }
}

@media (max-width: 767.98px) {
    .tt-showcase-heading, .tt-clients__header { align-items: flex-start; flex-direction: column; }
    .tt-guides__grid, .tt-clients__grid { grid-template-columns: 1fr; }
    .tt-guide-card__image { aspect-ratio: 16 / 9; }
    .tt-client-card { min-height: 230px; }
}

@media (max-width: 575.98px) {
    .tt-proof, .tt-guides, .tt-clients, .tt-coverage { padding-block: 64px; }
    .tt-proof__stats { margin-top: 38px; }
    .tt-proof__stat { padding: 22px 16px; }
    .tt-coverage__cities { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Dark theme parity for the showcase bands.
   These sections were authored with literal light-mode colours, so the dark
   rules below only restate the same roles in dark values: no layout, spacing,
   radius, shadow geometry or type scale is touched here.
   ========================================================================== */

/* --- Section grounds ---------------------------------------------------- */
[data-bs-theme="dark"] .tt-guides,
body.dark .tt-guides { background: #14171c; }

[data-bs-theme="dark"] .tt-clients,
body.dark .tt-clients { background: #0f1116; }

[data-bs-theme="dark"] .tt-coverage,
body.dark .tt-coverage { background: #10222b; }

/* The decorative ring on the coverage band is nearly invisible on a dark
   ground at the light-mode alpha, so lift it just enough to read. */
[data-bs-theme="dark"] .tt-coverage::before,
body.dark .tt-coverage::before { border-color: rgba(76, 196, 239, .07); }

/* --- Shared section headings ------------------------------------------- */
[data-bs-theme="dark"] .landing-refresh .tt-showcase-heading h2,
[data-bs-theme="dark"] .landing-refresh .tt-clients__header h2,
[data-bs-theme="dark"] .landing-refresh .tt-coverage__copy h2,
body.dark .landing-refresh .tt-showcase-heading h2,
body.dark .landing-refresh .tt-clients__header h2,
body.dark .landing-refresh .tt-coverage__copy h2 { color: var(--tt-ink); }

[data-bs-theme="dark"] .landing-refresh .tt-showcase-heading p,
[data-bs-theme="dark"] .landing-refresh .tt-clients__header p,
[data-bs-theme="dark"] .landing-refresh .tt-coverage__copy p,
body.dark .landing-refresh .tt-showcase-heading p,
body.dark .landing-refresh .tt-clients__header p,
body.dark .landing-refresh .tt-coverage__copy p { color: var(--tt-ink-3); }

[data-bs-theme="dark"] .tt-guides .tt-section-kicker,
[data-bs-theme="dark"] .tt-clients .tt-section-kicker,
[data-bs-theme="dark"] .tt-coverage .tt-section-kicker,
body.dark .tt-guides .tt-section-kicker,
body.dark .tt-clients .tt-section-kicker,
body.dark .tt-coverage .tt-section-kicker { color: #4cc4ef; }

[data-bs-theme="dark"] .tt-text-link,
body.dark .tt-text-link { color: #d3dbe2; }

/* --- Guide cards -------------------------------------------------------- */
[data-bs-theme="dark"] .tt-guide-card,
body.dark .tt-guide-card { background: #191c22; border-color: #2c333b; color: var(--tt-ink); }

[data-bs-theme="dark"] .tt-guide-card,
body.dark .tt-guide-card { box-shadow: 0 10px 28px rgba(0, 0, 0, .34); }

[data-bs-theme="dark"] .tt-guide-card:hover,
body.dark .tt-guide-card:hover { box-shadow: 0 20px 44px rgba(0, 0, 0, .48); }

[data-bs-theme="dark"] .tt-guide-card__body small,
body.dark .tt-guide-card__body small { color: #4cc4ef; }

[data-bs-theme="dark"] .tt-guide-card__body strong,
body.dark .tt-guide-card__body strong { color: var(--tt-ink); }

[data-bs-theme="dark"] .tt-guide-card__body > span,
body.dark .tt-guide-card__body > span { color: var(--tt-ink-3); }

/* The arrow chip sits on the image, so keep it a light chip with dark glyph
   exactly as in light mode - only its shadow needs deepening. */
[data-bs-theme="dark"] .tt-guide-card__arrow,
body.dark .tt-guide-card__arrow { box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }

/* --- Client / testimonial cards ---------------------------------------- */
[data-bs-theme="dark"] .tt-client-card,
body.dark .tt-client-card { background: #191c22; border-color: #2c333b; }

[data-bs-theme="dark"] .tt-client-card__quote,
body.dark .tt-client-card__quote { color: #4cc4ef; }

[data-bs-theme="dark"] .landing-refresh .tt-client-card > p,
body.dark .landing-refresh .tt-client-card > p { color: var(--tt-ink-2); }

[data-bs-theme="dark"] .tt-client-card footer strong,
body.dark .tt-client-card footer strong { color: var(--tt-ink); }

[data-bs-theme="dark"] .tt-client-card footer small,
body.dark .tt-client-card footer small { color: var(--tt-ink-3); }

[data-bs-theme="dark"] .tt-client-card footer > b,
body.dark .tt-client-card footer > b { color: #f0b429; }

[data-bs-theme="dark"] .tt-client-card__avatar,
body.dark .tt-client-card__avatar { background: #21618a; color: #fff; }

/* --- Rating badge in the clients header -------------------------------- */
[data-bs-theme="dark"] .tt-clients__rating,
body.dark .tt-clients__rating { background: #191c22; border-color: #2c333b; }

[data-bs-theme="dark"] .tt-clients__rating > strong,
body.dark .tt-clients__rating > strong { color: var(--tt-ink); }

[data-bs-theme="dark"] .tt-clients__rating b,
body.dark .tt-clients__rating b { color: #f6ac19; }

[data-bs-theme="dark"] .tt-clients__rating small,
body.dark .tt-clients__rating small { color: var(--tt-ink-3); }

/* --- Coverage: CTA + city tiles ---------------------------------------- */
[data-bs-theme="dark"] .tt-coverage__action,
body.dark .tt-coverage__action { background: #0f4c75; color: #fff; }

[data-bs-theme="dark"] .tt-coverage__action:hover,
body.dark .tt-coverage__action:hover { background: #14608f; color: #fff; }

[data-bs-theme="dark"] .tt-coverage__cities > a,
body.dark .tt-coverage__cities > a {
    background: rgba(25, 28, 34, .74);
    border-color: rgba(76, 196, 239, .18);
    color: var(--tt-ink);
}

[data-bs-theme="dark"] .tt-coverage__cities > a:hover,
body.dark .tt-coverage__cities > a:hover {
    background: #191c22;
    border-color: rgba(76, 196, 239, .38);
}

[data-bs-theme="dark"] .tt-coverage__cities strong,
body.dark .tt-coverage__cities strong { color: var(--tt-ink); }

[data-bs-theme="dark"] .tt-coverage__cities small,
body.dark .tt-coverage__cities small { color: var(--tt-ink-3); }

[data-bs-theme="dark"] .tt-coverage__cities > a > b,
body.dark .tt-coverage__cities > a > b { color: #4cc4ef; }

[data-bs-theme="dark"] .tt-coverage__pin,
body.dark .tt-coverage__pin { background: rgba(76, 196, 239, .16); }

[data-bs-theme="dark"] .tt-coverage__pin::before,
body.dark .tt-coverage__pin::before { border-color: #4cc4ef; }

/* --- "Why customers love us" band -------------------------------------- */
/* The floating stat chips and the inactive-row arrow were literal light
   values and washed out against the dark stage. */
[data-bs-theme="dark"] .tt-why__float,
body.dark .tt-why__float {
    background: rgba(25, 28, 34, .92);
    border-color: rgba(76, 196, 239, .18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .42);
}

[data-bs-theme="dark"] .tt-why__float strong,
body.dark .tt-why__float strong { color: var(--tt-ink); }

[data-bs-theme="dark"] .tt-why__float span,
body.dark .tt-why__float span { color: var(--tt-ink-3); }

[data-bs-theme="dark"] .tt-why__number,
body.dark .tt-why__number { background: rgba(76, 196, 239, .14); color: #4cc4ef; }

[data-bs-theme="dark"] .tt-why__item.is-active .tt-why__number,
body.dark .tt-why__item.is-active .tt-why__number { background: #009fd9; color: #fff; }

[data-bs-theme="dark"] .tt-why__arrow,
body.dark .tt-why__arrow { color: var(--tt-ink-3); }

[data-bs-theme="dark"] .tt-why__item.is-active .tt-why__arrow,
body.dark .tt-why__item.is-active .tt-why__arrow { color: #4cc4ef; }

/* The cover card's text sits directly on the stage (not on a white card), so
   its literal dark-ink values disappear against the dark stage. */
[data-bs-theme="dark"] .tt-cover-card__tag,
body.dark .tt-cover-card__tag { color: #4cc4ef; }

[data-bs-theme="dark"] .landing-refresh .tt-cover-card h3,
body.dark .landing-refresh .tt-cover-card h3 { color: var(--tt-ink); }

[data-bs-theme="dark"] .tt-cover-card p,
body.dark .tt-cover-card p { color: var(--tt-ink-3); }

[data-bs-theme="dark"] .tt-cover-card a,
body.dark .tt-cover-card a { color: #4cc4ef; }

/* --- Browse / discover panel ------------------------------------------- */
/* Light mode renders this panel as a white sheet, but the surrounding page
   is white too, so no sheet is actually visible - the rows just sit on the
   page. Dark mode has to read the same way: drop the panel surface entirely
   rather than inventing a raised sheet that light mode never shows. */
[data-bs-theme="dark"] .landing-refresh .home-discover,
body.dark .landing-refresh .home-discover {
    background: transparent;
    color: var(--tt-ink);
}

[data-bs-theme="dark"] .landing-refresh .home-discover__heading h2,
body.dark .landing-refresh .home-discover__heading h2 { color: var(--tt-ink); }

[data-bs-theme="dark"] .landing-refresh .home-discover__heading > a,
body.dark .landing-refresh .home-discover__heading > a { color: var(--tt-ink-2); }

[data-bs-theme="dark"] .landing-refresh .home-discover__card,
body.dark .landing-refresh .home-discover__card {
    /* The cards are the only surface in this block now, sitting straight on
       the page (--tt-paper #0f1116), so they carry the separation on their
       own - same role the white cards play on the white page in light mode. */
    background: #262b33;
    color: var(--tt-ink);
    border: 1px solid #333944;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

[data-bs-theme="dark"] .landing-refresh .home-discover__intro,
body.dark .landing-refresh .home-discover__intro { background: #3a4350; border-color: #4b5462; color: var(--tt-ink); }

[data-bs-theme="dark"] .home-discover__intro-arrow,
body.dark .home-discover__intro-arrow { background: #4cc4ef; color: #0b1116; }

[data-bs-theme="dark"] .home-discover__next,
body.dark .home-discover__next {
    background: #333a45;
    color: var(--tt-ink);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}

[data-bs-theme="dark"] .home-discover__next:hover,
body.dark .home-discover__next:hover { background: #3e4653; }

[data-bs-theme="dark"] .home-discover__eyebrow,
body.dark .home-discover__eyebrow { color: var(--tt-ink-3); }

[data-bs-theme="dark"] .home-discover :is(a, button, [tabindex]):focus-visible,
body.dark .home-discover :is(a, button, [tabindex]):focus-visible { outline-color: #4cc4ef; }