/* ============================================================
   TECTUM ROOFING — Landing page design system
   ============================================================ */

:root {
    --c-ink: #0B0C0F;
    --c-ink-2: #16181D;
    --c-ink-3: #2A2D35;
    --c-surface: #FFFFFF;
    --c-surface-2: #F7F6F2;
    --c-surface-3: #EEEBE3;
    --c-line: #E5E2D8;
    --c-mute: #6B6E75;
    --c-text: #1A1C21;

    --c-brand: #B91C1C;          /* Tectum red */
    --c-brand-dark: #7F1010;
    --c-accent: #F5A524;         /* warm amber */
    --c-accent-2: #FBBF24;
    --c-success: #15803D;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;

    --shadow-sm: 0 1px 2px rgba(11,12,15,.06), 0 1px 1px rgba(11,12,15,.04);
    --shadow-md: 0 10px 30px -12px rgba(11,12,15,.20), 0 4px 10px -4px rgba(11,12,15,.08);
    --shadow-lg: 0 30px 60px -20px rgba(11,12,15,.35), 0 12px 24px -8px rgba(11,12,15,.15);
    --shadow-glow: 0 0 0 4px rgba(245,165,36,.25);

    --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;

    --ease: cubic-bezier(.22,.61,.36,1);
    --dur: 320ms;

    --container: 1200px;
    --container-wide: 1320px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--c-text);
    background: var(--c-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    width: 100%;
    max-width: 100vw;
}

img, svg { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5 { margin: 0; color: var(--c-ink); letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.5rem); line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; }
h3 { font-size: 1.35rem; line-height: 1.25; font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }
p  { margin: 0 0 1rem; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 32px;
}
.container--wide { max-width: var(--container-wide); }

@media (max-width: 960px) {
    .container { padding-left: 28px; padding-right: 28px; }
}
@media (max-width: 720px) {
    .container { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 480px) {
    .container { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 380px) {
    .container { padding-left: 18px; padding-right: 18px; }
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-brand);
    background: rgba(185,28,28,.08);
    padding: 6px 12px;
    border-radius: 999px;
}
.eyebrow--light { color: var(--c-accent); background: rgba(245,165,36,.12); }

.serif { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }

/* --------  BUTTONS  -------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    white-space: nowrap;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }

.btn--primary {
    background: var(--c-brand);
    color: #fff;
    box-shadow: 0 10px 24px -8px rgba(185,28,28,.55);
}
.btn--primary:hover { background: var(--c-brand-dark); box-shadow: 0 16px 32px -10px rgba(185,28,28,.6); }

.btn--accent {
    /* Slightly deeper amber base so white text hits adequate contrast and the
       button still reads as the same brand orange. Slight text-shadow gives
       the white label a little weight against the warm background. */
    background: linear-gradient(180deg, var(--c-accent) 0%, #E08F0A 100%);
    color: #fff;
    text-shadow: 0 1px 0 rgba(127,16,16,.18);
    box-shadow: 0 10px 24px -8px rgba(245,165,36,.55);
}
.btn--accent svg { color: #fff; }
.btn--accent:hover {
    background: linear-gradient(180deg, var(--c-accent-2) 0%, var(--c-accent) 100%);
    color: #fff;
}

.btn--dark { background: var(--c-ink); color: #fff; }
.btn--dark:hover { background: var(--c-ink-3); }

.btn--ghost {
    background: transparent;
    color: var(--c-ink);
    border: 1.5px solid rgba(11,12,15,.18);
}
.btn--ghost:hover { border-color: var(--c-ink); background: var(--c-ink); color: #fff; }

.btn--ghost-light {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.3);
}
.btn--ghost-light:hover { background: #fff; color: var(--c-ink); border-color: #fff; }

.btn--lg { padding: 19px 32px; font-size: 1.05rem; }
.btn--lg svg { width: 20px; height: 20px; }
.btn--block { width: 100%; }

/* ---- High-emphasis CTA (red→amber gradient, glow, pulse halo) ---- */
.btn--cta {
    background: linear-gradient(120deg, var(--c-brand) 0%, #DC2626 50%, var(--c-accent) 130%);
    color: #fff;
    padding: 22px 28px;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.005em;
    border-radius: 16px;
    box-shadow:
        0 18px 36px -10px rgba(185,28,28,.55),
        0 6px 14px -4px rgba(245,165,36,.35),
        inset 0 1px 0 rgba(255,255,255,.18);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn--cta::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: linear-gradient(120deg, var(--c-brand), var(--c-accent));
    z-index: -1;
    opacity: 0;
    filter: blur(14px);
    transition: opacity 320ms var(--ease);
}
.btn--cta:hover { background: linear-gradient(120deg, #A11616 0%, var(--c-brand) 50%, #FFB933 130%); }
.btn--cta:hover::after { opacity: .65; }
.btn--cta svg { width: 22px; height: 22px; transition: transform 320ms var(--ease); }
.btn--cta:hover svg { transform: translateX(3px); }
@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 18px 36px -10px rgba(185,28,28,.55), 0 6px 14px -4px rgba(245,165,36,.35), 0 0 0 0 rgba(245,165,36,.45), inset 0 1px 0 rgba(255,255,255,.18); }
    60% { box-shadow: 0 18px 36px -10px rgba(185,28,28,.55), 0 6px 14px -4px rgba(245,165,36,.35), 0 0 0 12px rgba(245,165,36,0), inset 0 1px 0 rgba(255,255,255,.18); }
}
.btn--cta { animation: ctaPulse 2.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .btn--cta { animation: none; }
}

/* ---- Card-level Call CTA (used inside service cards) ---- */
.btn--card-cta {
    background: var(--c-ink);
    color: #fff;
    padding: 14px 18px;
    font-size: 0.94rem;
    font-weight: 700;
    border-radius: 12px;
    margin-top: 22px;
    box-shadow: 0 8px 18px -8px rgba(11,12,15,.35);
    border: 1px solid var(--c-ink);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn--card-cta svg { color: var(--c-accent); width: 18px; height: 18px; }
.btn--card-cta:hover {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: #fff;
}
.btn--card-cta:hover svg { color: #fff; }

@media (max-width: 720px) {
    .btn { padding: 14px 22px; font-size: 0.94rem; }
    .btn--lg { padding: 17px 26px; font-size: 1rem; }
}

/* --------  ANNOUNCEMENT BAR  -------- */
.announce {
    background: linear-gradient(90deg, #0A0B0E 0%, #15171C 100%);
    color: #FFFFFF;
    font-size: 0.82rem;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    letter-spacing: 0.01em;
}
.announce__inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
    min-height: 22px;
    flex-wrap: wrap;
}
.announce__list {
    display: flex;
    gap: 18px;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    color: #FFFFFF;
}
.announce__list li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: #FFFFFF; }
.announce__list svg { width: 13px; height: 13px; color: var(--c-accent); }
.announce__link,
.announce__cta {
    color: #FFFFFF;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    transition: color var(--dur), opacity var(--dur);
}
.announce__link svg,
.announce__cta svg { width: 14px; height: 14px; color: var(--c-accent); }
.announce__link:hover,
.announce__cta:hover { color: var(--c-accent); }
/* push the call CTA to the far right when there's room */
.announce__cta { margin-left: auto; }

@media (max-width: 960px) {
    .announce__cta { margin-left: 0; }
}
@media (max-width: 820px) {
    .announce__list li:nth-child(3) { display: none; }
}
@media (max-width: 640px) {
    .announce { font-size: 0.78rem; padding: 9px 0; }
    .announce__inner { gap: 16px; }
    .announce__list { gap: 12px; }
    .announce__list li:nth-child(2) { display: none; }
}
@media (max-width: 480px) {
    /* Mobile announce row: Call CTA (white) first, Free Estimate Request (amber) second.
       Both stay on one line. Trust list is hidden. */
    .announce__list { display: none; }
    .announce__inner {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 14px;
    }
    .announce__cta {
        order: 1;
        margin-left: 0;
    }
    .announce__link {
        order: 2;
        /* Yellow text + yellow icon (icon was already amber) */
        color: var(--c-accent);
    }
    .announce__link svg { color: var(--c-accent); }
    .announce__cta, .announce__link { font-size: 0.82rem; }
    /* Strip "Call now:" prefix and " Request" suffix on phone widths */
    .announce__hide-xs { display: none; }
}
@media (max-width: 380px) {
    .announce__inner { gap: 10px; }
    .announce__cta, .announce__link { font-size: 0.78rem; }
    .announce__cta svg, .announce__link svg { width: 13px; height: 13px; }
}

/* --------  STICKY HEADER (announce + nav as a unit)  -------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    /* clip just enough to allow nav box-shadow to sit below */
    isolation: isolate;
}

/* --------  NAV  -------- */
.nav {
    background: rgba(255,255,255,.94);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 280ms var(--ease), box-shadow 280ms var(--ease), padding 280ms var(--ease);
}
.nav.is-scrolled {
    border-color: var(--c-line);
    box-shadow: 0 4px 20px -10px rgba(11,12,15,.15);
}
/* Logo shrink-on-scroll — 50% smaller for more viewing area.
   Only the WIDTH changes; height stays auto so the browser preserves the
   image's intrinsic aspect ratio at every interpolated frame. The earlier
   max-height clamp was forcing the height shorter than the proportional
   value during the transition, which is what was squashing the logo. */
.brand__logo {
    transition: width 320ms var(--ease);
    /* Hint the browser to interpolate intrinsic dimensions smoothly */
    will-change: width;
}
.nav.is-scrolled .nav__inner { min-height: 56px !important; padding: 6px 0 !important; }
.nav.is-scrolled .brand__logo {
    /* Exactly 50% of the mobile-default 300px. Height auto-scales. */
    width: 150px !important;
    max-width: 150px !important;
    max-height: none !important;
}
.announce { transition: padding 280ms var(--ease), font-size 280ms var(--ease); }
.site-header.is-scrolled .announce { padding: 5px 0; font-size: 0.74rem; }
.nav__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    min-height: 88px;
    padding: 16px 0;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-weight: 800;
    font-size: 1.18rem;
    color: var(--c-ink);
    letter-spacing: -0.02em;
    line-height: 1.1;
    min-width: 0;
    margin-right: auto;   /* hard left-align */
    margin-left: 0;
}
.brand__text { min-width: 0; display: inline-flex; flex-direction: column; }
.brand__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand__logo {
    width: 240px;
    height: auto;
    max-width: 100%;
    display: block;
    flex-shrink: 0;
    padding: 0;
}
.brand__logo--light { filter: brightness(0) invert(1); }
.brand__mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: var(--c-ink);
    color: #fff;
    border-radius: 11px;
    font-weight: 900;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.brand__mark::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 55%, var(--c-brand) 55%);
}
.brand__mark span { position: relative; z-index: 1; font-size: 1.05rem; }
.brand small {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--c-mute);
    text-transform: uppercase;
    margin-top: 3px;
    white-space: nowrap;
}

.nav__links {
    display: flex;
    gap: 28px;
    align-items: center;
    list-style: none;
    flex-wrap: nowrap;
    white-space: nowrap;
    padding: 0;
    margin: 0;
}
.nav__links a { font-weight: 600; font-size: 0.95rem; color: var(--c-ink-3); transition: color var(--dur); white-space: nowrap; }
.nav__links a:hover { color: var(--c-brand); }
.nav__cta { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.nav__phone { font-weight: 800; font-size: 1.02rem; color: var(--c-ink); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.nav__phone svg { color: var(--c-brand); width: 18px; height: 18px; }
.nav__cta .btn { padding: 12px 20px; font-size: 0.92rem; }

@media (max-width: 1060px) {
    .nav__links { display: none; }
    .nav__cta .btn { display: none; }
    .nav__phone { display: none; }
}
@media (max-width: 720px) {
    /* Tighter nav-only container so a 300px logo fits next to the hamburger */
    .nav > .container { padding: 0 16px; }
    .nav__inner { min-height: 104px; padding: 14px 0; gap: 10px; }
    .brand { font-size: 1.05rem; gap: 10px; padding: 0; }
    .brand__mark { width: 36px; height: 36px; border-radius: 10px; }
    .brand__mark span { font-size: 0.95rem; }
    .brand__logo {
        /* explicit width — replaced elements need this, min-width alone is unreliable */
        width: 300px;
        height: auto;
        /* leave ~88px for nav padding (32) + gap (12) + hamburger (44) */
        max-width: calc(100vw - 88px);
        padding: 0;
    }
    .brand small { font-size: 0.54rem; letter-spacing: 0.14em; margin-top: 2px; }
    .nav__phone { display: none; }
    .nav__cta .btn { padding: 11px 16px; font-size: 0.86rem; }
}
@media (max-width: 420px) {
    .nav__inner { min-height: 96px; padding: 12px 0; }
    .brand__logo { width: 280px; max-width: calc(100vw - 84px); }
}
@media (max-width: 360px) {
    .nav__inner { min-height: 88px; }
    .brand__logo { width: 240px; max-width: calc(100vw - 80px); }
}
@media (max-width: 420px) {
    .brand small { display: none; }
}

/* --------  HAMBURGER + MOBILE MENU  -------- */
.nav__toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    border-radius: 12px;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--dur) var(--ease);
}
.nav__toggle:hover { background: rgba(11,12,15,.06); }
.nav__toggle:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.nav__toggle span {
    position: absolute;
    left: 11px;
    right: 11px;
    height: 2.5px;
    background: var(--c-ink);
    border-radius: 2px;
    transition: transform 360ms var(--ease), opacity 240ms var(--ease), top 360ms var(--ease);
}
.nav__toggle span:nth-child(1) { top: 14px; }
.nav__toggle span:nth-child(2) { top: 21px; }
.nav__toggle span:nth-child(3) { top: 28px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    visibility: hidden;
}
.mobile-menu.is-open { pointer-events: auto; visibility: visible; }

.mobile-menu__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11,12,15,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 320ms var(--ease);
}
.mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }

.mobile-menu__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(86vw, 380px);
    background: linear-gradient(180deg, #fff 0%, #FAF8F2 100%);
    box-shadow: -20px 0 60px -10px rgba(11,12,15,.35);
    display: flex;
    flex-direction: column;
    padding: 22px 22px calc(22px + env(safe-area-inset-bottom, 0));
    transform: translateX(100%);
    transition: transform 420ms cubic-bezier(.32,.72,.24,1);
    overflow-y: auto;
}
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }

.mobile-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 18px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--c-line);
}
.mobile-menu__brand {
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--c-mute);
}
.mobile-menu__close {
    width: 40px; height: 40px;
    border: 0;
    background: var(--c-surface-2);
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--c-ink);
    cursor: pointer;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.mobile-menu__close:hover { background: var(--c-line); transform: rotate(90deg); }
.mobile-menu__close svg { width: 20px; height: 20px; }

.mobile-menu__links {
    list-style: none;
    margin: 0;
    padding: 12px 0 22px;
    display: flex;
    flex-direction: column;
}
.mobile-menu__links li {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 360ms var(--ease), transform 360ms var(--ease);
}
.mobile-menu.is-open .mobile-menu__links li { opacity: 1; transform: translateX(0); }
.mobile-menu.is-open .mobile-menu__links li:nth-child(1) { transition-delay: 120ms; }
.mobile-menu.is-open .mobile-menu__links li:nth-child(2) { transition-delay: 170ms; }
.mobile-menu.is-open .mobile-menu__links li:nth-child(3) { transition-delay: 220ms; }
.mobile-menu.is-open .mobile-menu__links li:nth-child(4) { transition-delay: 270ms; }
.mobile-menu.is-open .mobile-menu__links li:nth-child(5) { transition-delay: 320ms; }
.mobile-menu.is-open .mobile-menu__links li:nth-child(6) { transition-delay: 370ms; }

.mobile-menu__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 6px;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--c-ink);
    border-bottom: 1px solid var(--c-line);
    transition: color var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.mobile-menu__links a span {
    color: var(--c-mute);
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1;
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mobile-menu__links a:hover,
.mobile-menu__links a:active {
    color: var(--c-brand);
    padding-left: 12px;
}
.mobile-menu__links a:hover span,
.mobile-menu__links a:active span {
    color: var(--c-brand);
    transform: translateX(4px);
}

.mobile-menu__cta {
    margin-top: auto;
    display: grid;
    gap: 10px;
    padding-top: 18px;
}
.mobile-menu__foot {
    margin: 16px 0 0;
    text-align: center;
    font-size: 0.78rem;
    color: var(--c-mute);
    letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu__panel,
    .mobile-menu__backdrop,
    .mobile-menu__links li,
    .nav__toggle span { transition: none !important; }
}

/* When menu is open, lock body scroll */
body.menu-open { overflow: hidden; }

/* Show toggle on tablet/mobile (where nav__links is hidden) */
@media (max-width: 1060px) {
    .nav__toggle { display: inline-grid; place-items: center; }
}

/* --------  HERO  -------- */
.hero {
    position: relative;
    background-color: var(--c-ink);
    /* Desktop overlay — lightened ~20% from original (.78/.62/.85 → .62/.50/.68) */
    background-image:
        linear-gradient(180deg, rgba(11,12,15,.62) 0%, rgba(11,12,15,.50) 55%, rgba(11,12,15,.68) 100%),
        url('/img/hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

/* Tablet — slightly lighter still, photo retained */
@media (max-width: 960px) {
    .hero {
        background-image:
            linear-gradient(180deg, rgba(11,12,15,.55) 0%, rgba(11,12,15,.42) 55%, rgba(11,12,15,.62) 100%),
            url('/img/hero.jpg');
        background-position: center 35%;
    }
}

/* Mobile — same 3-stop overlay as desktop (.62 / .50 / .68) over the photo.
   Photo shifted up 400px. The image is sized to overflow vertically (auto 140%)
   so the -400px Y offset has actual room to shift it up; with plain `cover`
   on a portrait container the image would already fit to the container height
   and a negative position would do nothing.
   Desktop/tablet rules above are intentionally untouched. */
@media (max-width: 720px) {
    .hero {
        background-image:
            linear-gradient(180deg, rgba(11,12,15,.62) 0%, rgba(11,12,15,.50) 55%, rgba(11,12,15,.68) 100%),
            url('/img/hero.jpg');
        background-size: cover, auto 140%;
        background-position: center, center -400px;
        background-repeat: no-repeat, no-repeat;
        background-color: var(--c-ink); /* fallback while image loads */
    }
    /* Keep the brand-color radial tints and grid pattern hidden so only the
       photo + the desktop-matched overlay are visible. */
    .hero::before { display: none; }
    .hero::after { display: none; }
}
.hero::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(245,165,36,.14), transparent 60%),
        radial-gradient(900px 500px at 10% 110%, rgba(185,28,28,.22), transparent 55%);
    z-index: -2;
}
.hero::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    opacity: .5;
    z-index: -1;
}

.hero__inner {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 72px;
    align-items: center;
    padding: 80px 0 96px;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    padding: 7px 16px 7px 7px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #E6E7EB;
    margin-bottom: 24px;
}
.hero__badge .dot {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    background: var(--c-accent);
    color: var(--c-ink);
    border-radius: 50%;
    font-weight: 900;
}
.hero__badge .dot svg { width: 13px; height: 13px; }

.hero h1 { color: #fff; max-width: 15ch; letter-spacing: -0.035em; }
.hero h1 em {
    font-style: normal;
    background: linear-gradient(120deg, var(--c-accent) 0%, #FFD77A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: var(--font-display);
    font-weight: 900;
}
.hero__sub {
    color: #B8BAC2;
    font-size: 1.08rem;
    line-height: 1.6;
    margin: 22px 0 32px;
    max-width: 52ch;
}
.hero__sub strong { color: #fff; font-weight: 700; }

.hero__cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.hero__proof {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 20px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.hero__proof-item { min-width: 0; }
.hero__proof-item strong {
    display: block;
    font-size: 1.65rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin-bottom: 4px;
}
.hero__proof-item span {
    display: block;
    font-size: 0.78rem;
    color: #8E9199;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

/* Hero lead card */
.lead-card {
    /* Warm amber/golden gradient — pops hard against the dark hero, signals
       "free / promotional offer" instantly, and keeps brand cohesion. */
    background: linear-gradient(165deg, #FFF6D9 0%, #FFE89A 45%, #FCD34D 100%);
    color: var(--c-ink);
    border-radius: var(--radius-xl);
    padding: 38px 34px 30px;
    box-shadow:
        0 40px 80px -20px rgba(245,165,36,.55),
        0 16px 36px -10px rgba(185,28,28,.18),
        inset 0 1px 0 rgba(255,255,255,.7);
    position: relative;
    border: 1px solid rgba(245,165,36,.55);
}
.lead-card::before {
    /* Top accent — brand red anchor for visual weight on the warm card */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 6px;
    background: linear-gradient(90deg, var(--c-brand-dark) 0%, var(--c-brand) 50%, var(--c-ink) 100%);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.lead-card__ribbon {
    /* Dark ink ribbon now — maximum contrast on the amber card */
    position: absolute;
    top: -16px; left: 28px;
    background: var(--c-ink);
    color: var(--c-accent);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 10px 24px -6px rgba(11,12,15,.5);
    z-index: 2;
}
.lead-card h3 {
    /* Bright yellow band stretching end-to-end of the card. Negative margins
       pull it past the card's interior padding so the band reaches both
       edges; the top border-radius matches the card so the band fits flush
       at the top. The card's red ::before stripe is hidden below since this
       band visually replaces it. */
    font-family: var(--font-display);
    font-size: 2.05rem;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--c-ink);
    background: linear-gradient(180deg, #FFE600 0%, #FACC15 100%);
    margin: -38px -34px 18px;
    padding: 32px 24px 24px;
    text-align: center;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow:
        inset 0 -3px 0 rgba(0,0,0,.08),
        0 6px 18px -8px rgba(245,204,21,.55);
    position: relative;
    z-index: 1;
}
.lead-card h3 em {
    /* "FREE" — solid brand red on the yellow band reads loud and clean */
    font-style: normal;
    color: var(--c-brand);
    -webkit-text-fill-color: var(--c-brand);
    background: none;
    font-weight: 900;
}
/* Hide the red ::before accent stripe — the yellow band replaces it visually */
.lead-card::before { display: none; }
.lead-card p.lead-card__intro {
    color: rgba(11,12,15,.78);
    font-size: 0.98rem;
    line-height: 1.5;
    margin-bottom: 18px;
}
.lead-card p.lead-card__intro strong { color: var(--c-ink); font-weight: 700; }
.lead-card__perks {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}
.lead-card__perks li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--c-ink);
}
.lead-card__perks svg {
    /* Dark pill + amber check — brand-aligned, high contrast on yellow */
    width: 16px; height: 16px;
    background: var(--c-ink);
    color: var(--c-accent);
    border-radius: 50%;
    padding: 3px;
    flex-shrink: 0;
}
.lead-card form { display: grid; gap: 12px; }
.lead-card input, .lead-card select, .lead-card textarea {
    width: 100%;
    padding: 14px 16px;
    font: inherit;
    color: var(--c-ink);
    /* Solid white inputs — max contrast on the amber card body */
    background: #fff;
    border: 1.5px solid rgba(11,12,15,.14);
    border-radius: 12px;
    transition: border-color var(--dur), background var(--dur), box-shadow var(--dur);
}
.lead-card input::placeholder, .lead-card select:invalid, .lead-card textarea::placeholder {
    color: rgba(11,12,15,.45);
}
.lead-card input:focus, .lead-card select:focus, .lead-card textarea:focus {
    outline: none;
    border-color: var(--c-ink);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(11,12,15,.12);
}
.lead-card__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lead-card__check {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 0.82rem; color: var(--c-mute); line-height: 1.4;
}
.lead-card__check input { width: auto; margin-top: 3px; }
.lead-card__foot {
    margin-top: 4px;
    font-size: 0.78rem;
    color: rgba(11,12,15,.6);
    text-align: center;
}
.lead-card__foot svg { vertical-align: -3px; width: 14px; height: 14px; color: var(--c-success); }

/* Upgraded primary CTA (gets two-line label) */
.lead-card__submit {
    flex-direction: column;
    gap: 4px;
    padding: 20px 24px;
    margin-top: 4px;
    line-height: 1.1;
}
.lead-card__submit-main {
    font-size: 1.18rem;
    font-weight: 900;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.lead-card__submit-sub {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
}
.lead-card__submit .lead-card__submit-main svg { width: 20px; height: 20px; }
.lead-card__submit:hover .lead-card__submit-main svg { transform: translateX(3px); }

/* "or" divider between submit and call buttons */
.lead-card__or {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px 0;
    color: rgba(11,12,15,.55);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.lead-card__or::before, .lead-card__or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(11,12,15,.18);
}

.lead-card__call { padding: 16px 22px; font-size: 0.98rem; }
.lead-card__call svg { color: var(--c-accent); }
.lead-card__error {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.86rem;
    line-height: 1.45;
    display: grid;
    gap: 4px;
    margin-bottom: 4px;
}

/* ---- Per-field validation state ---- */
.lead-card .field { display: block; }
.lead-card input.is-invalid,
.lead-card select.is-invalid,
.lead-card textarea.is-invalid {
    border-color: #DC2626 !important;
    background: #FFF5F5 !important;
    box-shadow: 0 0 0 4px rgba(220,38,38,.1) !important;
}
.lead-card input.is-invalid:focus,
.lead-card select.is-invalid:focus,
.lead-card textarea.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(220,38,38,.18) !important;
}
.lead-card .field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: #B91C1C;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 6px 4px 0;
    letter-spacing: 0.005em;
}
.lead-card .field-error::before {
    content: "!";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: inline-grid;
    place-items: center;
    background: #DC2626;
    color: #fff;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 800;
    margin-top: 1px;
}

@media (max-width: 960px) {
    .hero__inner { grid-template-columns: 1fr; gap: 44px; padding: 56px 0 72px; }
    .hero__proof { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 720px) {
    /* Guarantee 20px breathing room around hero content on mobile */
    .hero .container.hero__inner { padding-left: 20px; padding-right: 20px; }
    /* Compacted hero so the lead card top is in the initial viewport on load */
    .hero__inner { padding-top: 18px; padding-bottom: 28px; gap: 18px; }

    /* Typography: tighter sizes/spacing on mobile */
    .hero h1 {
        font-size: clamp(1.85rem, 7.6vw, 2.4rem);
        line-height: 1.08;
        letter-spacing: -0.025em;
        max-width: 18ch;
    }
    .hero__sub {
        font-size: 0.95rem;
        line-height: 1.5;
        margin: 12px 0 16px;
        max-width: 46ch;
    }
    .hero__badge {
        font-size: 0.7rem;
        padding: 5px 12px 5px 5px;
        margin-bottom: 12px;
        letter-spacing: 0.01em;
    }
    .hero__badge .dot { width: 20px; height: 20px; }
    .hero__badge .dot svg { width: 10px; height: 10px; }

    /* CTAs: SIDE-BY-SIDE on one line on mobile (was stacked) */
    .hero__cta {
        flex-wrap: nowrap;
        gap: 8px;
        margin-bottom: 0;
    }
    .hero__cta .btn--lg {
        flex: 1 1 0;
        min-width: 0;
        padding: 13px 12px;
        font-size: 0.84rem;
        white-space: nowrap;
    }
    .hero__cta .btn--lg svg { width: 16px; height: 16px; }
    /* Hide the proof-stat row on phones — claims still appear elsewhere on
       the page (warranty + financing sections) and removing 4 stacked stats
       brings the lead-card top into the initial viewport on load */
    .hero__proof { display: none; }

    /* Lead card: matching 20px inner rhythm */
    .lead-card { padding: 26px 20px 22px; border-radius: var(--radius-lg); }
    .lead-card__ribbon { left: 20px; top: -12px; font-size: 0.66rem; padding: 6px 12px; }
    /* Re-stretch the yellow headline band to match the mobile card padding
       (26 / 20 / 22) and the smaller corner radius */
    .lead-card h3 {
        font-size: 1.4rem;
        line-height: 1.2;
        margin: -26px -20px 16px;
        padding: 22px 18px 18px;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .lead-card p.lead-card__intro { font-size: 0.92rem; margin-bottom: 18px; }
    .lead-card form { gap: 10px; }
    .lead-card__row { grid-template-columns: 1fr; gap: 10px; }
    .lead-card input, .lead-card select, .lead-card textarea { padding: 13px 14px; font-size: 1rem; }
    .lead-card__check { font-size: 0.8rem; }
}

@media (max-width: 380px) {
    .hero .container.hero__inner { padding-left: 20px; padding-right: 20px; }
    .hero__inner { padding-top: 14px; padding-bottom: 22px; gap: 14px; }
    .hero h1 { font-size: clamp(1.65rem, 8vw, 2rem); }
    .hero__sub { font-size: 0.9rem; margin: 10px 0 14px; }
    .hero__cta .btn--lg { padding: 12px 10px; font-size: 0.78rem; }
    .hero__cta .btn--lg svg { width: 14px; height: 14px; }
}

/* --------  MANUFACTURER PARTNERS STRIP  -------- */
.partners {
    padding: 36px 0 28px;
    background: #fff;
    border-bottom: 1px solid var(--c-line);
}
.partners__label {
    text-align: center;
    margin: 0 0 22px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-mute);
}
.partners__row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 48px;
}
.partners__row img {
    height: 64px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.78;
    transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.partners__row img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-2px);
}

@media (max-width: 720px) {
    .partners { padding: 28px 0 22px; }
    .partners__label { font-size: 0.72rem; margin-bottom: 16px; letter-spacing: 0.16em; }
    .partners__row { gap: 28px; }
    .partners__row img { height: 48px; }
}
@media (max-width: 380px) {
    .partners__row { gap: 22px; }
    .partners__row img { height: 40px; }
}

/* --------  EMERGENCY / SAME-DAY STRIP  -------- */
.urgent {
    background: linear-gradient(90deg, var(--c-brand-dark) 0%, var(--c-brand) 50%, #DC2626 100%);
    color: #fff;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0,0,0,.15);
}
.urgent__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.urgent__lead {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}
.urgent__lead strong {
    display: block;
    font-size: 1.06rem;
    font-weight: 800;
    letter-spacing: -0.005em;
    line-height: 1.15;
}
.urgent__lead span {
    display: block;
    font-size: 0.88rem;
    color: rgba(255,255,255,.85);
    line-height: 1.35;
    margin-top: 2px;
}
.urgent__pulse {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 0 5px rgba(245,165,36,.3);
    flex-shrink: 0;
    animation: urgentPulse 1.6s ease-in-out infinite;
}
@keyframes urgentPulse {
    0%, 100% { box-shadow: 0 0 0 5px rgba(245,165,36,.3); }
    50%      { box-shadow: 0 0 0 12px rgba(245,165,36,0); }
}
.urgent__cta { flex-shrink: 0; }
@media (max-width: 720px) {
    .urgent { padding: 16px 0; }
    .urgent__inner { gap: 14px; }
    .urgent__lead strong { font-size: .98rem; }
    .urgent__lead span { font-size: .8rem; }
    .urgent__cta { width: 100%; }
    .urgent__cta .btn { width: 100%; padding: 14px 18px; font-size: .94rem; }
}
@media (prefers-reduced-motion: reduce) {
    .urgent__pulse { animation: none; }
}

/* --------  TRUST BAR  -------- */
.trustbar {
    background: var(--c-surface-2);
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    padding: 30px 0;
}
.trustbar__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: center;
}
.trustbar__item {
    display: flex; align-items: center; gap: 12px;
    font-weight: 600; font-size: 0.92rem; color: var(--c-ink-3);
    line-height: 1.25;
}
.trustbar__icon {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 10px;
    color: var(--c-brand);
    flex-shrink: 0;
}
.trustbar__icon svg { width: 20px; height: 20px; }

@media (max-width: 960px) {
    .trustbar__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .trustbar__item { font-size: 0.86rem; }
}
@media (max-width: 480px) {
    .trustbar { padding: 22px 0; }
    .trustbar__grid { gap: 14px; }
    .trustbar__icon { width: 36px; height: 36px; }
    .trustbar__icon svg { width: 18px; height: 18px; }
}

/* --------  SECTION BASE  -------- */
section { padding: 96px 0; }
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { margin-top: 14px; }
.section-head p { color: var(--c-mute); font-size: 1.06rem; margin-top: 16px; line-height: 1.55; }
.section--tight { padding: 72px 0; }
.section--dark { background: var(--c-ink); color: #EAEAEA; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .section-head p { color: #9EA1A8; }
.section--cream { background: var(--c-surface-2); }

@media (max-width: 960px) {
    section { padding: 72px 0; }
    .section-head { margin-bottom: 44px; }
}
@media (max-width: 720px) {
    section { padding: 60px 0; }
    .section-head { margin-bottom: 36px; }
    .section-head p { font-size: 0.98rem; }
}

/* --------  SERVICES  -------- */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.svc-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    padding: 32px 28px 28px;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.svc-card > .btn--card-cta { margin-top: auto; }
.svc-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--c-brand), var(--c-accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 400ms var(--ease);
}
.svc-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}
.svc-card:hover::before { transform: scaleX(1); }

.svc-card__icon {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    background: var(--c-surface-3);
    border-radius: 14px;
    color: var(--c-brand);
    margin-bottom: 20px;
}
.svc-card__icon svg { width: 28px; height: 28px; }
.svc-card h3 { margin-bottom: 10px; }
.svc-card p { color: var(--c-mute); font-size: 0.96rem; }
.svc-card__warranty {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--c-line);
    display: flex; align-items: center; gap: 10px;
    font-size: 0.85rem; font-weight: 700; color: var(--c-ink);
}
.svc-card__warranty svg { width: 18px; height: 18px; color: var(--c-success); }

/* ---- Featured service card (Roof Replacement) ---- */
.svc-card--featured {
    background: linear-gradient(165deg, #FFFFFF 0%, #FFF8E1 100%);
    border-color: rgba(245,165,36,.55);
    box-shadow: 0 18px 40px -16px rgba(245,165,36,.4);
}
.svc-card--featured::before {
    background: linear-gradient(90deg, var(--c-brand) 0%, var(--c-accent) 100%);
    transform: scaleX(1);
    height: 5px;
}
.svc-card--featured .svc-card__icon {
    background: var(--c-ink);
    color: var(--c-accent);
}
.svc-card__tag {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--c-ink);
    color: var(--c-accent);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    z-index: 1;
}

@media (max-width: 960px) { .svc-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
    .svc-card { padding: 28px 24px 24px; border-radius: var(--radius-md); }
    .svc-card__icon { width: 48px; height: 48px; margin-bottom: 16px; }
    .svc-card__icon svg { width: 24px; height: 24px; }
    .svc-card__warranty { margin-top: 16px; padding-top: 16px; }
}

/* --------  WARRANTY BADGES  -------- */
.warranty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.warranty-card {
    background: linear-gradient(160deg, #1A1D24 0%, #0B0C0F 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.06);
}
.warranty-card::after {
    content: "";
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 140deg, transparent 0, transparent 60%, rgba(245,165,36,.45) 80%, transparent 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 500ms var(--ease);
}
.warranty-card:hover::after { opacity: 1; }
.warranty-card__seal {
    width: 92px; height: 92px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 30% 30%, #F5A524, #B91C1C);
    color: #fff;
    font-weight: 900;
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: -0.02em;
    box-shadow: 0 0 0 6px rgba(245,165,36,.12), inset 0 -4px 12px rgba(0,0,0,.25);
    position: relative;
}
.warranty-card__seal small { display: block; font-size: 0.68rem; letter-spacing: 0.14em; font-weight: 700; margin-top: 2px; opacity: .92; }
.warranty-card h3 { color: #fff; margin-bottom: 8px; font-size: 1.2rem; }
.warranty-card p { color: #A4A7AE; font-size: 0.92rem; margin: 0; }

@media (max-width: 720px) { .warranty-grid { grid-template-columns: 1fr; } }

/* --------  FINANCING  -------- */
.financing {
    background: linear-gradient(135deg, #B91C1C 0%, #7F1010 100%);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 72px 56px;
    position: relative;
    overflow: hidden;
}
.financing::before {
    content: "0%";
    position: absolute;
    right: -20px; top: -60px;
    font-family: var(--font-display);
    font-size: 28rem;
    font-weight: 900;
    color: rgba(255,255,255,.05);
    line-height: 1;
    pointer-events: none;
    letter-spacing: -0.06em;
}
.financing__inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
}
.financing h2 { color: #fff; margin-bottom: 18px; }
.financing p.financing__sub { color: rgba(255,255,255,.85); font-size: 1.08rem; margin-bottom: 28px; }
.financing__bullets { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 12px; }
.financing__bullets li {
    display: flex; align-items: center; gap: 12px;
    font-size: 1.02rem; font-weight: 500;
}
.financing__bullets svg {
    width: 22px; height: 22px;
    background: var(--c-accent);
    color: var(--c-ink);
    border-radius: 50%;
    padding: 4px;
    flex-shrink: 0;
}

.financing__stats {
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-lg);
    padding: 36px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.financing__stat { text-align: center; padding: 14px 0; border-bottom: 1px dashed rgba(255,255,255,.14); }
.financing__stat:last-child { border-bottom: 0; }
.financing__stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: 3.4rem;
    font-weight: 900;
    line-height: 1;
    color: var(--c-accent);
    margin-bottom: 4px;
}
.financing__stat span { font-size: 0.92rem; color: rgba(255,255,255,.75); letter-spacing: 0.04em; }

@media (max-width: 900px) {
    .financing { padding: 52px 32px; border-radius: var(--radius-lg); }
    .financing::before { font-size: 16rem; right: -20px; top: -40px; }
    .financing__inner { grid-template-columns: 1fr; gap: 32px; }
    .financing__stats { padding: 28px; }
}
@media (max-width: 520px) {
    .financing { padding: 40px 22px; }
    .financing::before { font-size: 12rem; right: -10px; top: -20px; }
    .financing__stat strong { font-size: 2.6rem; }
    .financing__stats { padding: 22px; }
}

/* --------  MANUFACTURERS  -------- */
.makers {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    align-items: center;
}
.maker {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: 22px 16px;
    min-height: 80px;
    display: grid;
    place-items: center;
    text-align: center;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--c-ink-3);
    letter-spacing: 0.02em;
    transition: transform var(--dur), box-shadow var(--dur), border-color var(--dur);
}
.maker:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
    border-color: var(--c-ink);
}
.maker small { display: block; font-weight: 500; font-size: 0.72rem; color: var(--c-mute); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }

@media (max-width: 960px) { .makers { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .makers { grid-template-columns: repeat(2, 1fr); } }

/* --------  FAMILY / WHY US  -------- */
.why {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
}
.why__visual {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-xl);
    background:
        linear-gradient(165deg, rgba(11,12,15,.05), rgba(11,12,15,.15)),
        linear-gradient(135deg, var(--c-surface-3), var(--c-surface-2));
    overflow: hidden;
    box-shadow: var(--shadow-md);
    display: grid;
    place-items: center;
}
.why__quote {
    position: absolute;
    bottom: 28px; left: 28px; right: 28px;
    background: rgba(11,12,15,.92);
    color: #fff;
    padding: 24px 26px;
    border-radius: var(--radius-md);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.why__quote p { font-size: 1.02rem; line-height: 1.5; margin: 0 0 14px; color: #EAEAEA; }
.why__quote footer { display: flex; align-items: center; gap: 12px; font-size: 0.88rem; color: #A4A7AE; }
.why__quote footer strong { color: #fff; }
.why__avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-brand), var(--c-accent));
    display: grid; place-items: center;
    font-weight: 800; color: #fff;
}
.why__seal {
    width: 70%;
    max-width: 340px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, var(--c-accent), var(--c-brand));
    display: grid;
    place-items: center;
    text-align: center;
    color: #fff;
    box-shadow: 0 0 0 14px rgba(255,255,255,.5), 0 24px 60px -18px rgba(11,12,15,.35);
    position: relative;
}
.why__seal::before {
    content: "";
    position: absolute; inset: 12px;
    border-radius: 50%;
    border: 2px dashed rgba(255,255,255,.5);
}
.why__seal div {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    line-height: 1;
    letter-spacing: -0.02em;
}
.why__seal small {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-top: 10px;
    font-weight: 700;
    opacity: .92;
}

.why__body ul { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; gap: 16px; }
.why__body ul li {
    display: flex; align-items: flex-start; gap: 14px;
    font-size: 1rem; color: var(--c-text);
}
.why__body ul li svg {
    width: 22px; height: 22px; flex-shrink: 0;
    background: var(--c-ink);
    color: var(--c-accent);
    border-radius: 50%;
    padding: 4px;
    margin-top: 2px;
}
.why__body ul li strong { color: var(--c-ink); font-weight: 700; }

@media (max-width: 960px) { .why { grid-template-columns: 1fr; gap: 40px; } .why__visual { aspect-ratio: 1; } }

/* --------  PROCESS  -------- */
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    counter-reset: step;
}
.step {
    position: relative;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    padding: 36px 24px 28px;
    counter-increment: step;
}
.step::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    top: -18px; left: 24px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--c-brand);
    background: var(--c-surface-2);
    padding: 0 10px;
}
.step h3 { margin: 6px 0 10px; }
.step p { color: var(--c-mute); font-size: 0.94rem; margin: 0; }

@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* --------  SERVICE AREA  -------- */
.area {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 56px;
    align-items: center;
}
.area__cities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 24px;
}
.area__cities span {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #D4D6DB;
    font-weight: 500;
}
.area__map {
    aspect-ratio: 5 / 4;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(600px 400px at 70% 30%, rgba(245,165,36,.18), transparent 60%),
        linear-gradient(135deg, #1A1D24 0%, #0B0C0F 100%);
    border: 1px solid rgba(255,255,255,.08);
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.area__map::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 40px 40px;
}
.area__pin {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
}
.area__pin-dot {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--c-brand);
    box-shadow: 0 0 0 8px rgba(185,28,28,.25), 0 0 0 24px rgba(185,28,28,.12);
    margin: 0 auto 14px;
    animation: pulse 2.2s infinite;
}
.area__pin strong { font-family: var(--font-display); font-size: 2.4rem; display: block; line-height: 1; letter-spacing: -0.02em; }
.area__pin span { font-size: 0.88rem; color: #A4A7AE; letter-spacing: 0.06em; text-transform: uppercase; }

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 8px rgba(185,28,28,.3), 0 0 0 24px rgba(185,28,28,.15); }
    50% { box-shadow: 0 0 0 14px rgba(185,28,28,.18), 0 0 0 34px rgba(185,28,28,.0); }
}

@media (max-width: 960px) { .area { grid-template-columns: 1fr; gap: 40px; } .area__cities { grid-template-columns: repeat(2, 1fr); } }

/* --------  TESTIMONIALS  -------- */
.testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.testi {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    transition: transform var(--dur), box-shadow var(--dur);
}
.testi:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testi__stars { display: inline-flex; gap: 2px; color: var(--c-accent); margin-bottom: 14px; }
.testi__stars svg { width: 18px; height: 18px; }
.testi blockquote { margin: 0 0 20px; font-size: 1.02rem; line-height: 1.55; color: var(--c-text); flex-grow: 1; }
.testi footer { display: flex; align-items: center; gap: 12px; font-size: 0.88rem; color: var(--c-mute); }
.testi footer strong { color: var(--c-ink); display: block; }
.testi__avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-ink), var(--c-ink-3));
    color: var(--c-accent);
    display: grid; place-items: center;
    font-weight: 800;
}

@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
    .testi { padding: 26px 22px; border-radius: var(--radius-md); }
    .testi blockquote { font-size: 0.98rem; }
}

/* --------  FAQ  -------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
    border-bottom: 1px solid var(--c-line);
    padding: 22px 0;
}
.faq details[open] summary { color: var(--c-brand); }
.faq summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--c-ink);
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    transition: color var(--dur);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: .8;
    color: var(--c-brand);
    transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--c-mute); font-size: 0.98rem; line-height: 1.6; margin: 14px 0 0; }

@media (max-width: 720px) {
    .faq details { padding: 18px 0; }
    .faq summary { font-size: 1rem; gap: 16px; }
    .faq details p { font-size: 0.94rem; }
}

/* --------  IN-FLOW SECTION CTAs  -------- */
.section-cta {
    margin-top: 56px;
    padding: 32px 36px;
    text-align: center;
    background: linear-gradient(135deg, #FFF8EE 0%, #FFFFFF 100%);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.section-cta p {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--c-ink);
    text-align: left;
    flex: 1 1 320px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.section-cta__btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.section-cta--dark {
    background: linear-gradient(135deg, rgba(245,165,36,.08) 0%, rgba(255,255,255,.03) 100%);
    border-color: rgba(255,255,255,.1);
}
.section-cta--dark p { color: #fff; }
@media (max-width: 720px) {
    /* Drop flex on mobile — block layout with explicit gaps avoids flex space-between
       and any min-height inheritance that was creating dead vertical space */
    .section-cta {
        display: block;
        padding: 22px 20px;
        margin-top: 28px;
        gap: 0;
    }
    .section-cta p {
        text-align: center;
        font-size: 1rem;
        margin: 0 0 14px;
        flex: none;
    }
    .section-cta__btns {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .section-cta__btns .btn { width: 100%; }
}

/* --------  FINAL CTA  -------- */
.final-cta {
    text-align: center;
    background: var(--c-ink);
    color: #fff;
    padding: 110px 32px;
    position: relative;
    overflow: hidden;
}
.final-cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.final-cta__trust {
    margin-top: 32px;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    font-size: .88rem;
    color: #9EA1A8;
    letter-spacing: 0.02em;
}
.final-cta__trust > span { white-space: nowrap; }
@media (max-width: 720px) {
    .final-cta { padding: 76px 24px; }
    .final-cta p { font-size: 1rem; margin-bottom: 28px; }
    .final-cta__btns .btn { flex: 1 1 100%; }
    .final-cta__trust { font-size: .8rem; }
}
.final-cta::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(900px 600px at 50% -10%, rgba(245,165,36,.2), transparent 60%),
        radial-gradient(600px 500px at 80% 120%, rgba(185,28,28,.3), transparent 55%);
}
.final-cta__inner { position: relative; max-width: 760px; margin: 0 auto; }
.final-cta h2 { color: #fff; margin-bottom: 20px; font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.final-cta p { color: #C7C9CE; font-size: 1.1rem; margin-bottom: 36px; max-width: 54ch; margin-left: auto; margin-right: auto; }
.final-cta .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* --------  FOOTER  -------- */
.footer {
    background: #07080A;
    color: #9EA1A8;
    padding: 64px 0 28px;
    font-size: 0.92rem;
}
.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.footer h4 { color: #fff; margin-bottom: 16px; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer a:hover { color: #fff; }
.footer__bottom {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
    padding-top: 28px;
    font-size: 0.82rem;
    color: #6B6E75;
}
.footer .brand { color: #fff; }
.footer .brand small { color: #6B6E75; }

@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

/* --------  STICKY MOBILE CTA  -------- */
.mcta {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 90;
    display: none;
    box-sizing: border-box;
    max-width: 100vw;
    background: rgba(11,12,15,.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0));
    gap: 8px;
}
.mcta a { flex: 1; min-width: 0; }
.mcta .btn { padding: 14px 18px; font-size: 0.95rem; }

@media (max-width: 820px) { .mcta { display: flex; } body { padding-bottom: 88px; } }

/* --------  SCROLL-TO-TOP  -------- */
.scroll-top {
    position: fixed;
    right: 24px;
    bottom: 28px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--c-ink);
    color: #fff;
    border: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 85;
    box-shadow: 0 14px 28px -10px rgba(11,12,15,.45), 0 6px 12px -4px rgba(11,12,15,.2);
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity 280ms var(--ease), transform 280ms var(--ease), background 280ms var(--ease);
}
.scroll-top svg { width: 20px; height: 20px; color: var(--c-accent); }
.scroll-top:hover { background: var(--c-brand); transform: translateY(-2px); }
.scroll-top:hover svg { color: #fff; }
.scroll-top:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.scroll-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
@media (max-width: 820px) {
    /* Lift above the sticky mobile CTA bar so it doesn't overlap */
    .scroll-top { right: 16px; bottom: calc(88px + env(safe-area-inset-bottom, 0)); width: 44px; height: 44px; }
    .scroll-top svg { width: 18px; height: 18px; }
}

/* --------  MOBILE SPACING POLISH  -------- */
@media (max-width: 720px) {
    /* Legacy inline overrides on trustbar — neutralize for breathing room */
    .trustbar[style] { padding-top: 26px !important; padding-bottom: 26px !important; }

    /* Tighten section rhythm on small screens */
    section { padding: 48px 0; }
    .section--tight { padding: 40px 0; }
    .section-head { margin-bottom: 28px; }
    .section-head p { margin-top: 12px; }

    /* Ensure inline button rows stack full-width and have spacing */
    .hero__cta,
    .financing .btn-row,
    .final-cta .btn-row,
    .why__body > div[style*="display:flex"],
    .financing__inner > div > div[style*="display:flex"],
    .why__body div[style*="flex-wrap:wrap"] {
        gap: 10px !important;
    }
    .hero__cta .btn,
    .final-cta .btn-row .btn,
    .why__body div[style*="flex-wrap:wrap"] .btn,
    .financing__inner div[style*="flex-wrap:wrap"] .btn {
        flex: 1 1 100%;
    }

    /* Services / warranty / testi breathing room between cards */
    .svc-grid,
    .warranty-grid,
    .testi-grid,
    .steps { gap: 16px; }

    /* Trust bar: two columns feel too cramped on tiny screens */
    .trustbar__grid { gap: 14px 16px; }
    .trustbar__item { font-size: 0.88rem; gap: 10px; }

    /* Area map — avoid huge empty square on mobile */
    .area__map { aspect-ratio: 4 / 3; }
    .area__cities { gap: 8px; margin-top: 20px; }
    .area__cities span { padding: 10px 12px; font-size: 0.86rem; }

    /* Financing stats spacing */
    .financing__stat { padding: 12px 0; }
    .financing__bullets li { font-size: 0.96rem; }

    /* Footer readability */
    .footer { padding: 48px 0 24px; }
    .footer__grid { gap: 32px; padding-bottom: 32px; }
    .footer__bottom { text-align: center; justify-content: center; }

    /* FAQ tighter */
    .faq { padding: 0 2px; }

    /* Nav CTA should not crowd brand */
    .nav__cta { gap: 8px; }
}

@media (max-width: 480px) {
    section { padding: 40px 0; }
    .section--tight { padding: 32px 0; }
    .section-head { margin-bottom: 24px; }

    h1 { letter-spacing: -0.03em; }
    h2 { font-size: clamp(1.6rem, 6.4vw, 2rem); }

    /* Hero inner padding tuned for very small devices */
    .hero__inner { padding: 32px 0 44px !important; gap: 28px !important; }
    .hero__proof { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; padding-top: 18px; }
    .hero__proof-item strong { font-size: 1.25rem; }

    .lead-card { padding: 26px 18px 22px; }
    .lead-card h3 { font-size: 1.3rem; }

    .final-cta { padding: 56px 18px; }
    .final-cta h2 { margin-bottom: 14px; }
    .final-cta p { margin-bottom: 24px; }

    .financing { padding: 36px 18px; }
    .financing__stats { padding: 20px 18px; }

    /* Testimonial + service cards tighter */
    .svc-card { padding: 24px 20px 22px; }
    .testi { padding: 24px 20px; }
    .step { padding: 32px 20px 24px; }
    .warranty-card { padding: 32px 22px; }
}

/* --------  REVEAL ANIMATION  -------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
    .area__pin-dot { animation: none; }
}

/* --------  THANK YOU PAGE  -------- */
.ty {
    position: relative;
    min-height: calc(100vh - 96px);
    background:
        radial-gradient(900px 500px at 80% -10%, rgba(245,165,36,.18), transparent 60%),
        radial-gradient(700px 500px at 0% 110%, rgba(185,28,28,.16), transparent 55%),
        linear-gradient(180deg, #0B0C0F 0%, #141720 100%);
    color: #fff;
    padding: 64px 0 80px;
    overflow: hidden;
    isolation: isolate;
}
.ty::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    opacity: .5;
    z-index: -1;
}
.ty__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.ty__card {
    background: #fff;
    color: var(--c-text);
    border-radius: var(--radius-xl);
    padding: 56px 44px 44px;
    box-shadow: var(--shadow-lg);
    position: relative;
    text-align: center;
    animation: tyFadeUp 600ms var(--ease) both;
}
@keyframes tyFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
.ty__check {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, #15803D 0%, #22C55E 100%);
    display: grid;
    place-items: center;
    margin: -88px auto 22px;
    box-shadow: 0 14px 30px -10px rgba(21,128,61,.55), 0 0 0 6px rgba(21,128,61,.08);
    color: #fff;
    animation: tyPop 700ms 120ms var(--ease) both;
}
.ty__check svg { width: 42px; height: 42px; }
@keyframes tyPop {
    0% { opacity: 0; transform: scale(.6); }
    60% { transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}
.ty__title {
    font-size: clamp(2rem, 5vw, 2.8rem);
    margin: 14px 0 16px;
    color: var(--c-ink);
    line-height: 1.1;
}
.ty__lead {
    color: var(--c-mute);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 56ch;
    margin: 0 auto 28px;
}
.ty__lead strong { color: var(--c-ink); }
.ty__cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.ty__note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.86rem;
    color: var(--c-mute);
}
.ty__note svg { width: 16px; height: 16px; color: var(--c-success); }

.ty__trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
    padding: 28px 24px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.ty__trust-item strong {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.ty__trust-item span {
    display: block;
    font-size: 0.78rem;
    color: #9EA1A8;
    line-height: 1.35;
}

.ty__creds {
    margin-top: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: 0.82rem;
    color: #9EA1A8;
    letter-spacing: 0.02em;
}
.ty__creds .dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
}

@media (max-width: 720px) {
    .ty { padding: 48px 0 64px; }
    .ty__card { padding: 44px 22px 28px; border-radius: var(--radius-lg); }
    .ty__check { width: 76px; height: 76px; margin-top: -76px; }
    .ty__check svg { width: 36px; height: 36px; }
    .ty__cta .btn { flex: 1 1 100%; }
    .ty__trust { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 22px 18px; }
    .ty__trust-item strong { font-size: 1.2rem; }
}