/**
 * Shared service + homepage hero layout and typography.
 * Loaded after tm-hero-height-fix.css and tm-hero-lead-form-fix.css.
 */

:root {
    --tm-hero-title: clamp(1.75rem, 2.4vw + 0.65rem, 2.625rem);
    --tm-hero-title-lh: 1.12;
    --tm-hero-body: 1.0625rem;
    --tm-hero-body-lh: 1.55;
    --tm-hero-meta: 0.875rem;
    --tm-hero-meta-lh: 1.45;
    --tm-hero-form-title: 1.375rem;
    --tm-hero-eyebrow: 0.8125rem;
    --tm-hero-control-h: 2.75rem;
    --tm-hero-control-radius: 0.75rem;
    --tm-hero-grid-gap: 2rem;
    --tm-hero-form-col: minmax(18rem, 25rem);
    --tm-hero-shell-pad-y: 2.75rem;
    --tm-hero-form-pad: 1.5rem;
}

@media (max-width: 767px) {
    :root {
        --tm-hero-title: clamp(1.5rem, 5vw + 0.5rem, 1.875rem);
        --tm-hero-body: 1rem;
        --tm-hero-form-title: 1.25rem;
        --tm-hero-shell-pad-y: 2rem;
        --tm-hero-form-pad: 1.25rem;
    }
}

/* --------------------------------------------------------------------------
   Hero shell — one rhythm for CMS service pages and homepage hero
   -------------------------------------------------------------------------- */

.cms-page-view .tm-hero.flex.items-center,
.cms-hero-section .tm-hero {
    align-items: flex-start !important;
}

.cms-page-view .tm-hero[class*="pt-"],
.cms-page-view .tm-hero[class*="pb-"] {
    padding-top: var(--tm-hero-shell-pad-y) !important;
    padding-bottom: calc(var(--tm-hero-shell-pad-y) + 2rem) !important;
}

.cms-hero-section .tm-hero > .mx-auto.max-w-7xl {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.cms-page-view .tm-hero .relative.z-10.max-w-7xl,
.cms-page-view .tm-hero .relative.z-10[class*="max-w-7xl"] {
    padding-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   Two-column grid — copy + form share one block, top-aligned
   -------------------------------------------------------------------------- */

@media (min-width: 901px) {
    .cms-page-view .tm-hero [class*="hero-grid"],
    .cms-page-view .tm-hero .tm-qscore-hero-grid,
    .cms-page-view .tm-hero .tm-maint-hero-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--tm-hero-form-col) !important;
        gap: var(--tm-hero-grid-gap) !important;
        align-items: start !important;
    }

    .cms-hero-section .tm-hero .grid {
        gap: var(--tm-hero-grid-gap) !important;
        align-items: start !important;
    }
}

.cms-page-view .tm-hero #landing-contact-form,
.cms-hero-section .tm-hero #landing-contact-form {
    margin-top: 0 !important;
    width: 100%;
    max-width: 25rem;
    justify-self: end;
}

@media (max-width: 900px) {
    .cms-page-view .tm-hero #landing-contact-form,
    .cms-hero-section .tm-hero #landing-contact-form {
        max-width: none;
        justify-self: stretch;
    }
}

/* --------------------------------------------------------------------------
   Type scale — headline, subcopy, form, meta
   -------------------------------------------------------------------------- */

.cms-page-view .tm-hero h1,
.cms-page-view .tm-hero h1[class*="text-5xl"],
.cms-page-view .tm-hero h1[class*="text-3xl"],
.cms-page-view .tm-hero h1[class*="text-4xl"],
.cms-hero-section .tm-hero .tm-hero__heading {
    font-size: var(--tm-hero-title) !important;
    line-height: var(--tm-hero-title-lh) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

.cms-page-view .tm-hero [class*="hero-grid"] > div:first-child > p,
.cms-page-view .tm-hero .tm-qscore-hero-grid > div:first-child > p,
.cms-page-view .tm-hero .tm-maint-hero-grid > div:first-child > p,
.cms-page-view .tm-hero .tm-hero__copy,
.cms-page-view .tm-hero .tm-hero__body,
.cms-page-view .tm-hero .tm-hero__body p,
.cms-page-view .tm-hero h1 + p,
.cms-page-view .tm-hero .text-base.lg\:text-lg,
.cms-page-view .tm-hero .text-lg.lg\:text-xl,
.cms-page-view .tm-hero .tm-development-hero p.text-lg {
    font-size: var(--tm-hero-body) !important;
    line-height: var(--tm-hero-body-lh) !important;
    margin-top: 0 !important;
}

.cms-page-view .tm-hero [class*="hero-grid"] > div:first-child > p + p,
.cms-page-view .tm-hero .tm-qscore-hero-grid > div:first-child > p + p,
.cms-page-view .tm-hero .tm-maint-hero-grid > div:first-child > p + p {
    margin-bottom: 1.25rem !important;
}

.cms-page-view .tm-hero [class*="hero-grid"] > div:first-child > p.text-sm,
.cms-page-view .tm-hero .tm-qscore-hero-grid > div:first-child > p.text-sm,
.cms-page-view .tm-hero .hero-phone-support,
.cms-page-view .tm-hero .tm-form-note,
.cms-page-view .tm-hero .tm-form-note--light {
    font-size: var(--tm-hero-meta) !important;
    line-height: var(--tm-hero-meta-lh) !important;
}

.cms-page-view .tm-hero #landing-contact-form h2,
.cms-hero-section .tm-hero #landing-contact-form h2,
.cms-page-view .tm-hero .tm-hero-form__title {
    font-size: var(--tm-hero-form-title) !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 0.25rem !important;
}

.cms-page-view .tm-hero .inline-flex.items-center.rounded-full[class*="border-white"],
.cms-page-view .tm-hero .inline-flex.items-center.px-4.py-2.rounded-full,
.cms-page-view .tm-hero .tm-hero__eyebrow {
    font-size: var(--tm-hero-eyebrow) !important;
    line-height: 1.3 !important;
    padding: 0.35rem 0.85rem !important;
    margin-bottom: 0.75rem !important;
}

.cms-page-view .tm-hero .tm-emergency-panel-phone {
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
}

@media (min-width: 1024px) {
    .cms-page-view .tm-hero .tm-emergency-panel-phone {
        font-size: 1.375rem !important;
    }
}

/* --------------------------------------------------------------------------
   Form card — same padding, radius family as CTAs
   -------------------------------------------------------------------------- */

.cms-page-view .tm-hero #landing-contact-form.tm-form-panel,
.cms-hero-section .tm-hero #landing-contact-form.tm-form-panel {
    padding: var(--tm-hero-form-pad) !important;
    border-radius: 1.25rem !important;
}

.cms-page-view .tm-hero #landing-contact-form.space-y-5,
.cms-page-view .tm-hero #landing-contact-form.space-y-6,
.cms-hero-section .tm-hero #landing-contact-form.space-y-6 {
    gap: 1rem;
}

.cms-page-view .tm-hero .tm-input,
.cms-hero-section .tm-hero .tm-input {
    min-height: var(--tm-hero-control-h);
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    border-radius: var(--tm-hero-control-radius) !important;
    font-size: 0.9375rem !important;
    line-height: 1.35 !important;
}

.cms-page-view .tm-hero .tm-input--textarea,
.cms-hero-section .tm-hero .tm-input--textarea {
    min-height: 4.5rem;
    max-height: 5.5rem;
}

.cms-page-view .tm-hero .tm-landing-form-panel .tm-button,
.cms-hero-section .tm-hero .tm-button.tm-button--inverse {
    min-height: var(--tm-hero-control-h);
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    border-radius: var(--tm-hero-control-radius) !important;
    font-size: 0.9375rem !important;
}

/* --------------------------------------------------------------------------
   Hero CTAs — one button height and corner radius
   -------------------------------------------------------------------------- */

.cms-page-view .tm-hero a.hero-cta-primary,
.cms-page-view .tm-hero a.hero-cta-secondary,
.cms-page-view .tm-hero a.hero-phone-link,
.cms-page-view .tm-hero [class*="hero-ctas"] a,
.cms-page-view .tm-hero a.tm-button[class*="hero"],
.cms-page-view .tm-hero a.tm-button--primary,
.cms-page-view .tm-hero a.tm-button--outline {
    min-height: var(--tm-hero-control-h);
    padding: 0.625rem 1.25rem !important;
    font-size: 0.9375rem !important;
    line-height: 1.25 !important;
    border-radius: var(--tm-hero-control-radius) !important;
}

.cms-page-view .tm-hero [class*="hero-ctas"],
.cms-page-view .tm-hero .hero-cta-row {
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
}

.cms-page-view .tm-hero .hero-trust-chips,
.cms-page-view .tm-hero .hero-trust-row {
    gap: 0.5rem !important;
    margin-top: 0.75rem !important;
}

.cms-page-view .tm-hero .hero-trust-chip,
.cms-page-view .tm-hero .hero-trust-row span {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.65rem !important;
}

/* Copy column vertical rhythm */
.cms-page-view .tm-hero .hero-copy-column,
.cms-hero-section .tm-hero .hero-copy-column {
    gap: 1.25rem !important;
}

.cms-page-view .tm-hero .hero-copy-column.space-y-6 > * + *,
.cms-hero-section .tm-hero .hero-copy-column.space-y-6 > * + * {
    margin-top: 0 !important;
}

/* Development hero: dual H1 lines share one scale */
.cms-page-view .tm-hero.tm-development-hero h1 + h1 {
    margin-top: -0.35rem !important;
    margin-bottom: 0.75rem !important;
}

@media (max-width: 767px) {
    .cms-page-view .tm-hero .hero-cta-row a,
    .cms-page-view .tm-hero .hero-phone-link,
    .cms-page-view .tm-hero [class*="hero-ctas"] a {
        white-space: normal;
        text-align: center;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        font-size: 0.875rem !important;
    }

    .cms-page-view .tm-hero .hero-cta-row .hero-phone-link span {
        font-size: inherit !important;
    }
}

/* Fixed header clearance — .tm-header is position:fixed; heroes need top padding. */
.cms-hero-section .tm-hero {
    padding-top: calc(var(--tm-header-height, 5.0625rem) + 0.5rem) !important;
    padding-block-start: calc(var(--tm-header-height, 5.0625rem) + 0.5rem) !important;
}

body.cms-page-view .tm-hero:has(#landing-contact-form) {
    padding-top: calc(var(--tm-header-height, 5.0625rem) + 0.5rem) !important;
    padding-block-start: calc(var(--tm-header-height, 5.0625rem) + 0.5rem) !important;
}

body.tm-has-hero .cms-hero-section .tm-hero,
body.tm-has-hero.cms-page-view .tm-hero {
    scroll-margin-top: var(--tm-header-height, 5.0625rem);
}