/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 5.10.0
Description: Custom child theme for Tiger & Type, with hand-coded header, footer, and custom templates.
Author: Ock
Text Domain: hello-elementor-child
*/

/* =========================================
   Child theme styles load after parent.
   Add site-wide CSS below this line.
   ========================================= */

/* --- Global reset / base --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    background: #0A0A0A;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
}


/* =========================================
   HEADER
   ========================================= */

.site-header {
    background: #ffffff !important;
    padding: 0 40px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 1000;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.site-header.scrolled {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 72px;
}

.site-logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.site-logo a,
.site-logo .custom-logo-link {
    display: flex;
    align-items: center;
}
.site-logo img,
.site-logo .custom-logo {
    max-width: 160px;
    max-height: 44px;
    height: auto;
    width: auto;
}
.site-logo-text {
    font-family: 'Gabarito', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #0A0A0A;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 40px;
}
.site-nav .nav-menu {
    list-style: none;
    display: flex;
    gap: 32px;
    margin: 0;
    padding: 0;
    align-items: center;
}
.site-nav .nav-menu li {
    margin: 0;
}
.site-nav .nav-menu a {
    text-decoration: none;
    color: #0A0A0A;
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
}
.site-nav .nav-menu a:hover {
    color: #0A0A0A;
    opacity: 0.7;
}
.site-nav .nav-menu .current-menu-item > a,
.site-nav .nav-menu .current_page_item > a {
    color: #0A0A0A;
}

.site-header .site-nav a.nav-cta {
    display: inline-block !important;
    background: var(--lime, #a3ff52) !important;
    color: #0A0A0A !important;
    font-family: 'Gabarito', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 10px 24px !important;
    border-radius: 100px !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    transition: opacity 0.2s ease;
}
.site-header .site-nav a.nav-cta:hover {
    opacity: 0.85;
    background: var(--lime, #a3ff52) !important;
    color: #0A0A0A !important;
}

/* Hamburger toggle */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}
.nav-toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: #0A0A0A;
    margin: 5px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-radius: 2px;
}
.nav-toggle.open .nav-toggle-bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}
.nav-toggle.open .nav-toggle-bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Sub-menus (dropdowns) */
.site-nav .nav-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 12px 0;
    min-width: 220px;
    list-style: none;
    margin: 8px 0 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.site-nav .nav-menu .sub-menu::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
}
.site-nav .nav-menu li {
    position: relative;
}
.site-nav .nav-menu li:hover > .sub-menu {
    display: block;
}
.site-nav .nav-menu .sub-menu a {
    display: block;
    padding: 8px 24px;
    font-size: 13px;
    color: rgba(10,10,10,0.6);
}
.site-nav .nav-menu .sub-menu a:hover {
    color: #0A0A0A;
    background: rgba(0,0,0,0.03);
}
.site-nav .nav-menu .has-children > a::after,
.site-nav .nav-menu .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid rgba(10,10,10,0.4);
    border-bottom: 1.5px solid rgba(10,10,10,0.4);
    transform: rotate(45deg);
    margin-left: 6px;
    margin-bottom: 2px;
}
.site-nav .nav-menu .menu-item-has-children {
    position: relative;
}
.site-nav .nav-menu .menu-item-has-children:hover > .sub-menu {
    display: block;
}


/* =========================================
   MAIN CONTENT
   ========================================= */

.site-content {
    min-height: 60vh;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.site-content > .entry-content,
.site-content > article,
.site-content > .elementor,
.site-content > div,
.site-content .entry-content,
.site-content .page-content,
.site-content article {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.site-content .tt-page:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
main.site-content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.site-content > *:last-child {
    margin-bottom: 0 !important;
}
.tt-page.tt-post {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}
footer.site-footer {
    margin-top: -1px !important;
    border-top: none !important;
}


/* =========================================
   FOOTER
   ========================================= */

/* Override Hello Elementor parent theme max-width constraints */
.site-footer,
.site-footer:not(.dynamic-footer),
footer.site-footer:not(.dynamic-footer) {
    background: #0A0A0A;
    color: rgba(255,255,255,0.5);
    padding: 80px 48px 40px;
    margin-top: 0 !important;
    font-family: 'Figtree', sans-serif;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 64px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-logo {
    margin-bottom: 16px;
}
.footer-logo a,
.footer-logo .custom-logo-link {
    display: inline-block;
}
.footer-logo img,
.footer-logo .custom-logo {
    max-width: 160px;
    height: auto;
    width: auto;
    display: block;
}

.footer-tagline {
    font-size: 14px;
    color: rgba(255,255,255,0.4);
    margin: 0;
}

.footer-nav-group h4 {
    font-family: 'Gabarito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: lowercase;
    letter-spacing: 0.08em;
    color: #ffffff;
    margin-bottom: 20px;
}
.footer-nav-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-nav-group li {
    margin-bottom: 10px;
}
.footer-nav-group a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-size: 14px;
    text-transform: lowercase;
    transition: color 0.2s ease;
}
.footer-nav-group a:hover {
    color: #ffffff;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
}
.footer-copy {
    font-size: 13px;
    margin: 0;
    color: rgba(255,255,255,0.3);
}
.footer-legal {
    display: flex;
    gap: 20px;
    margin: 8px 0;
}
.footer-legal a {
    font-size: 13px;
    color: rgba(255,255,255,0.35);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-legal a:hover {
    color: rgba(255,255,255,0.7);
}
.footer-location {
    font-size: 13px;
    margin: 0;
    color: rgba(255,255,255,0.3);
}


/* =========================================
   RESPONSIVE (HEADER / FOOTER)
   ========================================= */

@media (max-width: 768px) {
    .site-header {
        padding: 0 20px;
    }
    .header-inner {
        height: 64px;
    }

    .nav-toggle {
        display: block;
    }

    .site-nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(10,10,10,0.98);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
        padding: 80px 40px 40px;
        z-index: 999;
    }
    .site-nav.open {
        display: flex;
    }
    .site-nav .nav-menu {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }
    .site-nav .nav-menu a {
        font-size: 20px;
        color: rgba(255,255,255,0.8);
        text-transform: uppercase;
    }
    .site-nav .nav-menu .sub-menu {
        position: static;
        display: block;
        background: none;
        border: none;
        backdrop-filter: none;
        padding: 8px 0 0;
        min-width: 0;
        margin: 0;
    }
    .site-nav .nav-menu .sub-menu a {
        padding: 6px 0;
        font-size: 16px;
        color: var(--electric-blue);
        text-transform: none;
    }
    .site-header .site-nav a.nav-cta {
        margin-top: 32px;
        font-size: 14px !important;
        padding: 14px 32px !important;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 40px;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    .site-footer {
        padding: 60px 20px 32px;
    }
}


/* =========================================
   SERVICE PAGE: Website Design & Development
   All styles scoped under .tt-page
   ========================================= */

:root {
    --black: #0A0A0A;
    --charcoal: #2A2A2A;
    --dark: #141414;
    --white: #FFFFFF;
    --off-white: #FAFAFA;
    --smoke: #e8e8e4;
    --grey: #E8E8E8;
    --muted: #888888;
    --lime: #C4FF35;
    --coral: #E84B4F;
    --electric-blue: #5B6CF0;
    --purple: #9B6CF0;
}

.tt-page * { margin: 0; padding: 0; box-sizing: border-box; }
.tt-page {
    font-family: 'Figtree', sans-serif;
    color: var(--black);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.tt-page h1, .tt-page h2, .tt-page h3, .tt-page h4, .tt-page h5, .tt-page h6 {
    font-family: 'Gabarito', sans-serif;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.tt-page a { color: inherit; text-decoration: none; }
.tt-page img { display: block; width: 100%; height: auto; }
.tt-page .entry-title { display: none; }

.tt-page .container { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.tt-page .container-sm { max-width: 860px; margin: 0 auto; padding: 0 48px; }

/* ---- BUTTONS ---- */
.tt-page .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    font-family: 'Gabarito', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.tt-page .btn:hover { transform: translateY(-2px); }
.tt-page .btn-primary { background: var(--black); color: var(--white); }
.tt-page .btn-primary:hover { background: var(--lime); color: var(--black); }
.tt-page .btn-outline { background: transparent; color: var(--black); border: 1px solid var(--black); }
.tt-page .btn-outline:hover { background: var(--black); color: var(--white); }
.tt-page .btn-outline-w { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.3); }
.tt-page .btn-outline-w:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.6); color: var(--white); }
.tt-page .btn-lime { background: var(--lime); color: var(--black); }
.tt-page .btn-lime:hover { background: #d4ff70; color: var(--black); }

.tt-page .label {
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
}
.tt-page .label-lime { color: var(--lime); }

/* ---- HERO ---- */
.tt-page .hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--black);
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.tt-page .hero-img {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    filter: grayscale(100%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.tt-page .hero-content {
    position: relative;
    z-index: 2;
    padding: 0 48px 100px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}
.tt-page .hero h1 {
    font-size: clamp(48px, 8vw, 110px);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -0.04em;
    max-width: 1000px;
}
.tt-page .hero h1 .lime { color: var(--lime); }
.tt-page .hero .sub {
    font-size: clamp(17px, 1.5vw, 20px);
    color: rgba(255,255,255,0.6);
    max-width: 600px;
    margin-top: 40px;
    line-height: 1.7;
    font-weight: 400;
}
.tt-page .hero .ctas { margin-top: 48px; display: flex; gap: 12px; flex-wrap: wrap; }
.tt-page .hero-gradient {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(to top, var(--black) 20%, transparent);
    z-index: 1;
}

/* ---- INTRO ---- */
.tt-page .intro { padding: 160px 0 140px; }
.tt-page .intro h2 {
    font-size: clamp(36px, 5vw, 64px);
    max-width: 800px;
    margin-bottom: 48px;
    line-height: 1.02;
}
.tt-page .intro-body { max-width: 640px; }
.tt-page .intro-body p {
    font-size: 18px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 24px;
}
.tt-page .intro-body .pill {
    display: inline;
    background: var(--lime);
    padding: 1px 8px;
    font-weight: 600;
    color: var(--black);
}

/* ---- IMAGE BREAK ---- */
.tt-page .img-break {
    width: 100%;
    height: 50vh;
    min-height: 360px;
    overflow: hidden;
    position: relative;
}
.tt-page .img-break img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
}
.tt-page .img-break-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,10,10,0.5);
    z-index: 2;
}
.tt-page .img-break-overlay .quote {
    font-family: 'Gabarito', sans-serif;
    font-size: clamp(24px, 3.5vw, 52px);
    font-weight: 800;
    color: var(--white);
    text-align: center;
    padding: 0 40px;
    line-height: 1.05;
    white-space: nowrap;
}
.tt-page .img-break-overlay .quote .lime { color: var(--lime); }

/* ---- SEO BLOCK ---- */
.tt-page .seo {
    padding: 160px 0;
    background: var(--white);
}
.tt-page .seo .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}
.tt-page .seo .label { margin-bottom: 24px; display: block; }
.tt-page .seo h2 {
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.02;
    margin-bottom: 40px;
}
.tt-page .seo-right p {
    font-size: 17px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 20px;
}
.tt-page .seo-right p strong { color: var(--black); font-weight: 600; }
.tt-page .seo-right .lead-text {
    font-family: 'Gabarito', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--black);
    line-height: 1.3;
    margin-bottom: 32px;
}

/* ---- PACKAGES ---- */
.tt-page .packages-section {
    background: var(--off-white);
    padding: 160px 0 80px;
}
.tt-page .packages-section .header {
    text-align: center;
    margin-bottom: 80px;
}
.tt-page .packages-section .header h2 {
    font-size: clamp(48px, 7vw, 96px);
    margin-top: 16px;
    line-height: 0.95;
}
.tt-page .packages-section .header p {
    max-width: 560px;
    margin: 24px auto 0;
    font-size: 17px;
    color: var(--muted);
    line-height: 1.7;
}

.tt-page .tier-row { margin-bottom: 100px; }
.tt-page .tier-row .tier-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--grey);
}
.tt-page .tier-row .tier-head .tier-title {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-shrink: 0;
}
.tt-page .tier-row .tier-head h3 { font-size: 28px; font-weight: 800; white-space: nowrap; }
.tt-page .tier-row .tier-head .tag {
    font-family: 'Figtree', sans-serif;
    font-size: 15px;
    color: var(--muted);
    font-weight: 400;
    text-align: right;
}
.tt-page .tier-row .tier-head .tag .pill {
    display: inline;
    background: rgba(91,108,240,0.1);
    color: var(--electric-blue);
    padding: 2px 8px;
    font-weight: 600;
}
.tt-page .tier-row .tier-head .tier-from {
    font-family: 'Gabarito', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--electric-blue);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.tt-page .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.tt-page .cards.cards-2 {
    grid-template-columns: repeat(2, 1fr);
}

.tt-page .card {
    background: var(--white);
    padding: 44px 36px 40px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
    border: 1px solid transparent;
}
.tt-page .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(0,0,0,0.08);
    border-color: rgba(91,108,240,0.15);
}
.tt-page .card.featured { background: var(--black); color: var(--white); }
.tt-page .card.featured:hover { box-shadow: 0 24px 48px rgba(0,0,0,0.25); border-color: transparent; }

.tt-page .card .badge {
    display: inline-block;
    align-self: flex-start;
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 12px;
    margin-bottom: 28px;
    background: rgba(91,108,240,0.06);
    color: var(--electric-blue);
}
.tt-page .card.featured .badge { background: var(--lime); color: var(--black); }

.tt-page .card h4 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.tt-page .card .price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.tt-page .card .price {
    font-family: 'Gabarito', sans-serif;
    font-size: 36px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--electric-blue);
}
.tt-page .card.featured .price { color: var(--lime); }
.tt-page .card .price-note { font-size: 13px; color: var(--muted); font-weight: 500; }
.tt-page .card.featured .price-note { color: rgba(255,255,255,0.4); }

.tt-page .card .desc {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 32px;
}
.tt-page .card.featured .desc { color: rgba(255,255,255,0.6); }

.tt-page .card .divider { width: 40px; height: 2px; background: var(--grey); margin-bottom: 24px; }
.tt-page .card.featured .divider { background: rgba(255,255,255,0.15); }

.tt-page .card .includes-title {
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 16px;
}
.tt-page .card.featured .includes-title { color: rgba(255,255,255,0.35); }

.tt-page .card ul { list-style: none; margin-bottom: 20px; flex-grow: 1; }
.tt-page .card ul li {
    font-size: 14px;
    line-height: 1.6;
    padding: 6px 0 6px 20px;
    position: relative;
    color: #444;
}
.tt-page .card.featured ul li { color: rgba(255,255,255,0.7); }
.tt-page .card ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 13px;
    width: 6px; height: 6px;
    background: var(--lime);
    border-radius: 50%;
}

.tt-page .card .note { font-size: 12px; color: var(--muted); margin-bottom: 28px; line-height: 1.5; }
.tt-page .card.featured .note { color: rgba(255,255,255,0.3); }

.tt-page .card .btn {
    text-align: center;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    font-size: 13px;
}

/* ---- TIERED PRICE CARDS ---- */
.tt-page .card .price-tiers { margin-bottom: 24px; }
.tt-page .card .price-tiers .tier-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 15px;
}
.tt-page .card.featured .price-tiers .tier-line { border-bottom-color: rgba(255,255,255,0.08); }
.tt-page .card .price-tiers .tier-line:last-child { border-bottom: none; }
.tt-page .card .price-tiers .tier-label { color: #555; font-weight: 500; }
.tt-page .card.featured .price-tiers .tier-label { color: rgba(255,255,255,0.5); }
.tt-page .card .price-tiers .tier-price {
    font-family: 'Gabarito', sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.02em;
}
.tt-page .card.featured .price-tiers .tier-price { color: var(--lime); }

/* ---- GLOW-UPS SECTION ---- */
.tt-page .glowups-section { background: var(--off-white); padding: 160px 0 80px; }
.tt-page .glowups-section .header { text-align: center; margin-bottom: 80px; }
.tt-page .glowups-section .header h2 {
    font-size: clamp(48px, 7vw, 96px);
    margin-top: 16px;
    line-height: 0.95;
}
.tt-page .glowups-section .header p {
    max-width: 580px;
    margin: 24px auto 0;
    font-size: 17px;
    color: var(--muted);
    line-height: 1.7;
}
.tt-page .glowups-section .cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 100px;
}

/* Once-Over standalone */
.tt-page .once-over-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.tt-page .once-over-row .card { margin: 0; }
.tt-page .once-over-intro .label { display: block; margin-bottom: 16px; }
.tt-page .once-over-intro h3 {
    font-size: clamp(28px, 3.5vw, 44px);
    margin-bottom: 20px;
    line-height: 1.05;
}
.tt-page .once-over-intro p { font-size: 17px; color: #555; line-height: 1.8; }

.tt-page .maintenance-section { background: var(--white); padding: 120px 0; }

/* ---- POCKET EDIT ---- */
.tt-page .pocket-edit {
    background: var(--black);
    color: var(--white);
    position: relative;
    overflow: hidden;
    padding: 160px 0;
}
.tt-page .pocket-edit-bg {
    position: absolute;
    inset: 0;
    opacity: 0.12;
    filter: grayscale(100%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.tt-page .pocket-edit .container { position: relative; z-index: 2; }
.tt-page .pocket-edit .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.tt-page .pocket-edit .label { margin-bottom: 24px; display: block; }
.tt-page .pocket-edit h2 {
    font-size: clamp(36px, 5vw, 64px);
    margin-bottom: 32px;
    line-height: 1.02;
}
.tt-page .pocket-edit p {
    font-size: 17px;
    color: rgba(255,255,255,0.6);
    line-height: 1.8;
    margin-bottom: 20px;
}
.tt-page .pocket-edit p strong { color: var(--white); }
.tt-page .pocket-edit .price-block {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 48px;
}
.tt-page .pocket-edit .price-block .label { margin-bottom: 28px; }
.tt-page .pocket-edit .price-block .tier-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tt-page .pocket-edit .price-block .tier-line:last-child { border-bottom: none; }
.tt-page .pocket-edit .price-block .tier-label-text { color: rgba(255,255,255,0.6); font-size: 16px; }
.tt-page .pocket-edit .price-block .tier-price-text {
    font-family: 'Gabarito', sans-serif;
    font-weight: 900;
    font-size: 32px;
    color: var(--lime);
    letter-spacing: -0.02em;
}
.tt-page .pocket-edit .includes { margin-top: 32px; list-style: none; }
.tt-page .pocket-edit .includes li {
    padding: 8px 0 8px 24px;
    position: relative;
    font-size: 15px;
    color: rgba(255,255,255,0.65);
}
.tt-page .pocket-edit .includes li::before {
    content: '';
    position: absolute;
    left: 0; top: 15px;
    width: 8px; height: 8px;
    background: var(--lime);
    border-radius: 50%;
}
.tt-page .pocket-edit .btn { margin-top: 32px; }

/* ---- HOSTING ---- */
.tt-page .hosting { padding: 160px 0; background: var(--off-white); }
.tt-page .hosting .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}
.tt-page .hosting .label { margin-bottom: 24px; display: block; }
.tt-page .hosting h2 {
    font-size: clamp(32px, 4vw, 52px);
    margin-bottom: 40px;
    line-height: 1.02;
}
.tt-page .hosting p { font-size: 17px; color: #555; line-height: 1.8; margin-bottom: 20px; }
.tt-page .hosting p.emphasis { color: var(--black); font-weight: 500; }
.tt-page .hosting .btn { margin-top: 20px; }

.tt-page .hosting .panel {
    padding: 48px;
    border: 1px solid var(--grey);
    background: var(--white);
}
.tt-page .hosting .panel .label { margin-bottom: 28px; }
.tt-page .hosting .panel ul { list-style: none; }
.tt-page .hosting .panel ul li {
    padding: 12px 0 12px 24px;
    position: relative;
    font-size: 16px;
    color: #444;
    border-bottom: 1px solid var(--grey);
}
.tt-page .hosting .panel ul li:last-child { border-bottom: none; }
.tt-page .hosting .panel ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 18px;
    width: 8px; height: 8px;
    background: var(--lime);
    border-radius: 50%;
}

/* ---- ADD-ONS ---- */
.tt-page .addons { padding: 160px 0; background: var(--white); }
.tt-page .addons h2 {
    font-size: clamp(40px, 5vw, 64px);
    margin: 16px 0 16px;
    line-height: 1.02;
}
.tt-page .addons .intro-line {
    font-size: 17px;
    color: #555;
    margin-bottom: 56px;
    max-width: 580px;
}

.tt-page .accordion { margin-bottom: 48px; }
.tt-page .acc-item { border-bottom: 1px solid var(--grey); }
.tt-page .acc-q {
    width: 100%;
    text-align: left;
    padding: 28px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Gabarito', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--black);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.2s;
    letter-spacing: -0.01em;
}
.tt-page .acc-q:hover { color: var(--muted); }
.tt-page .acc-q .icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    font-weight: 300;
    flex-shrink: 0;
    margin-left: 20px;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    color: var(--muted);
}
.tt-page .acc-item.open .acc-q .icon { transform: rotate(45deg); }
.tt-page .acc-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.tt-page .acc-a-inner {
    padding: 0 0 28px 0;
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    max-width: 600px;
}
.tt-page .acc-item.open .acc-a { max-height: 300px; }

.tt-page .addons .cta-text { font-size: 18px; margin-bottom: 24px; color: #444; }
.tt-page .addons .cta-text strong { color: var(--black); }

/* ---- FAQ ---- */
.tt-page .faq { padding: 160px 0; background: var(--off-white); }
.tt-page .faq h2 {
    font-size: clamp(40px, 5vw, 64px);
    margin: 16px 0 64px;
    line-height: 1.02;
}
.tt-page .faq .acc-item { border-bottom-color: #D0D0D0; }
.tt-page .faq .acc-q { font-size: 19px; }

/* ---- BOTTOM CTA ---- */
.tt-page .bottom-cta {
    padding: 200px 0;
    background: var(--black);
    color: var(--white);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.tt-page .bottom-cta-bg {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    filter: grayscale(100%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.tt-page .bottom-cta .container { position: relative; z-index: 2; }
.tt-page .bottom-cta h2 {
    font-size: clamp(48px, 8vw, 104px);
    line-height: 0.92;
    max-width: 900px;
    margin: 0 auto 40px;
}
.tt-page .bottom-cta p {
    font-size: 19px;
    color: rgba(255,255,255,0.5);
    max-width: 600px;
    margin: 0 auto 56px;
    line-height: 1.7;
}
.tt-page .bottom-cta .ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- SCROLL REVEAL ---- */
.tt-page .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.tt-page .reveal.in { opacity: 1; transform: translateY(0); }
.tt-page .r-d1 { transition-delay: 0.1s; }
.tt-page .r-d2 { transition-delay: 0.2s; }
.tt-page .r-d3 { transition-delay: 0.3s; }
.tt-page .r-d4 { transition-delay: 0.4s; }

/* ---- TICKER ---- */
.tt-page .ticker {
    background: var(--lime);
    padding: 16px 0;
    overflow: hidden;
    white-space: nowrap;
}
.tt-page .ticker-track {
    display: inline-flex;
    animation: scroll-ticker 35s linear infinite;
}
.tt-page .ticker-track span {
    font-family: 'Gabarito', sans-serif;
    font-weight: 800;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 32px;
    color: var(--black);
}
.tt-page .ticker-track .sep { opacity: 0.25; font-weight: 400; }

/* Lime ticker variant (homepage) */
.tt-page .ticker-blue {
    background: var(--lime);
}
.tt-page .ticker-blue .ticker-track span {
    color: var(--black);
}
.tt-page .ticker-blue .ticker-track .sep {
    color: var(--black);
    opacity: 0.25;
}

@keyframes scroll-ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---- SERVICE PAGE RESPONSIVE ---- */
@media (max-width: 960px) {
    .tt-page .container, .tt-page .container-sm { padding: 0 28px; }
    .tt-page .hero-content { padding: 0 28px 80px; }
    .tt-page .seo .grid, .tt-page .hosting .grid, .tt-page .pocket-edit .grid { grid-template-columns: 1fr; gap: 48px; }
    .tt-page .cards, .tt-page .cards.cards-2 { grid-template-columns: 1fr; gap: 16px; max-width: none; }
    .tt-page .glowups-section .cards-row { grid-template-columns: 1fr; gap: 16px; }
    .tt-page .once-over-row { grid-template-columns: 1fr; gap: 32px; }
    .tt-page .tier-row .tier-head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .tt-page .tier-row .tier-head .tag { text-align: left; }
    .tt-page .card { padding: 36px 28px 32px; }
    .tt-page .intro, .tt-page .seo, .tt-page .hosting, .tt-page .addons, .tt-page .faq, .tt-page .glowups-section, .tt-page .pocket-edit { padding: 100px 0; }
    .tt-page .packages-section { padding: 100px 0 40px; }
    .tt-page .bottom-cta { padding: 120px 0; }
    .tt-page .hero .ctas { flex-direction: column; }
    .tt-page .hero .ctas .btn { width: 100%; justify-content: center; }
    .tt-page .bottom-cta .ctas { flex-direction: column; align-items: center; }
    /* tier-head responsive handled above */
}


/* =========================================
   SEO PAGE - Editorial Sections, Tabs,
   Service Table Rows, Keywords Grid
   ========================================= */

/* ---- EDITORIAL LAYOUT ---- */
.tt-page .editorial {
    padding: 160px 0;
    background: var(--white);
}
.tt-page .editorial.alt {
    background: var(--off-white);
}
.tt-page .editorial-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}
.tt-page .editorial-left .label {
    display: block;
    margin-bottom: 24px;
}
.tt-page .editorial-left h2 {
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.02;
}
.tt-page .editorial-right p {
    font-size: 17px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 20px;
}
.tt-page .editorial-right p strong {
    color: var(--black);
    font-weight: 600;
}
.tt-page .editorial-right .lead-text {
    font-family: 'Gabarito', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--black);
    line-height: 1.3;
    margin-bottom: 32px;
}

/* ---- KEYWORDS SECTION ---- */
.tt-page .keywords-section {
    padding: 160px 0;
    background: var(--black);
    color: var(--white);
}
.tt-page .keywords-header {
    text-align: center;
    margin-bottom: 80px;
}
.tt-page .keywords-header .label {
    display: block;
    margin-bottom: 24px;
    color: var(--lime);
}
.tt-page .keywords-header h2 {
    font-size: clamp(40px, 5vw, 64px);
    margin-bottom: 32px;
    line-height: 1.02;
}
.tt-page .keywords-intro {
    font-size: 18px;
    color: rgba(255,255,255,0.6);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
}
.tt-page .keywords-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 64px;
}
.tt-page .kw-card {
    padding: 40px 32px;
    border: 1px solid rgba(255,255,255,0.1);
    position: relative;
}
.tt-page .kw-card:hover {
    border-color: var(--lime);
    transition: border-color 0.3s ease;
}
.tt-page .kw-num {
    font-family: 'Gabarito', sans-serif;
    font-size: 48px;
    font-weight: 900;
    color: var(--electric-blue);
    opacity: 0.4;
    display: block;
    margin-bottom: 16px;
    line-height: 1;
}
.tt-page .kw-card p {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,0.7);
}
.tt-page .kw-card p strong {
    color: var(--white);
}
.tt-page .keywords-footer {
    font-size: 17px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
}

/* ---- SERVICES SECTION (TABS) ---- */
.tt-page .services-section {
    padding: 160px 0;
    background: var(--off-white);
}
.tt-page .services-header {
    text-align: center;
    margin-bottom: 64px;
}
.tt-page .services-header h2 {
    font-size: clamp(40px, 5vw, 64px);
    margin: 16px 0 16px;
    line-height: 1.02;
}
.tt-page .services-header p {
    font-size: 17px;
    color: var(--muted);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Tab navigation */
.tt-page .tab-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 48px;
    border-bottom: 2px solid var(--grey);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tt-page .tab-btn {
    font-family: 'Gabarito', sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 16px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    color: var(--muted);
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
    letter-spacing: -0.01em;
}
.tt-page .tab-btn:hover {
    color: var(--black);
}
.tt-page .tab-btn.active {
    color: var(--black);
    border-bottom-color: var(--electric-blue);
}

/* Tab panels */
.tt-page .tab-panel {
    display: none;
}
.tt-page .tab-panel.active {
    display: block;
}
.tt-page .tab-intro {
    font-size: 17px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 700px;
}

/* ---- SERVICE TABLE ROWS ---- */
.tt-page .svc-table {
    border-top: 1px solid var(--grey);
}
.tt-page .svc-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--grey);
    position: relative;
}
.tt-page .svc-main {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
}
.tt-page .svc-name {
    font-family: 'Gabarito', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.tt-page .svc-tag {
    font-family: 'Figtree', sans-serif;
    font-size: 13px;
    color: var(--electric-blue);
    font-weight: 500;
}
.tt-page .svc-price {
    font-family: 'Gabarito', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--electric-blue);
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.tt-page .svc-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--grey);
    cursor: pointer;
    font-size: 20px;
    font-weight: 300;
    color: var(--muted);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s;
    flex-shrink: 0;
}
.tt-page .svc-toggle:hover {
    border-color: var(--black);
    color: var(--black);
}
.tt-page .svc-row.open .svc-toggle .icon {
    display: inline-block;
    transform: rotate(45deg);
}
.tt-page .svc-detail {
    grid-column: 1 / -1;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.tt-page .svc-row.open .svc-detail {
    max-height: 300px;
}
.tt-page .svc-detail p {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    padding-bottom: 8px;
    max-width: 700px;
}

/* ---- SEO PAGE RESPONSIVE ---- */
@media (max-width: 960px) {
    .tt-page .editorial-layout,
    .tt-page .editorial-layout.reverse {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .tt-page .editorial,
    .tt-page .keywords-section,
    .tt-page .services-section {
        padding: 100px 0;
    }
    .tt-page .keywords-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .tt-page .kw-card {
        padding: 28px 24px;
    }
    .tt-page .tab-nav {
        gap: 0;
    }
    .tt-page .tab-btn {
        font-size: 13px;
        padding: 14px 16px;
    }
    .tt-page .svc-row {
        grid-template-columns: 1fr auto auto;
        gap: 12px;
    }
    .tt-page .svc-main {
        flex-direction: column;
        gap: 4px;
    }
}

@media (max-width: 600px) {
    .tt-page .keywords-grid {
        grid-template-columns: 1fr;
    }
    .tt-page .svc-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .tt-page .svc-price {
        font-size: 20px;
    }
    .tt-page .svc-toggle {
        position: absolute;
        top: 24px;
        right: 0;
    }
}


/* =========================================
   GRAPHIC DESIGN PAGE - Service Showcase,
   Numbered Blocks, Process Steps
   ========================================= */

/* ---- DESIGN SERVICES SHOWCASE ---- */
.tt-page .design-services {
    padding: 160px 0;
    background: var(--white);
}
.tt-page .design-services .services-header {
    margin-bottom: 80px;
}
.tt-page .design-services .services-header h2 {
    font-size: clamp(40px, 5vw, 64px);
    margin-top: 16px;
    line-height: 1.02;
}

.tt-page .ds-block {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 40px;
    align-items: start;
    padding: 48px 0;
    border-bottom: 1px solid var(--grey);
}
.tt-page .ds-block:first-of-type {
    border-top: 1px solid var(--grey);
}
.tt-page .ds-number {
    font-family: 'Gabarito', sans-serif;
    font-size: 64px;
    font-weight: 900;
    color: var(--lime);
    line-height: 1;
    letter-spacing: -0.04em;
    opacity: 0.4;
}
.tt-page .ds-content h3 {
    font-size: clamp(22px, 2.5vw, 32px);
    margin-bottom: 16px;
    line-height: 1.1;
}
.tt-page .ds-content p {
    font-size: 17px;
    line-height: 1.8;
    color: #555;
    max-width: 700px;
}

/* ---- PROCESS SECTION ---- */
.tt-page .process-section {
    padding: 160px 0;
    background: var(--black);
    color: var(--white);
}
.tt-page .process-header {
    margin-bottom: 80px;
}
.tt-page .process-header .label {
    display: block;
    margin-bottom: 24px;
    color: var(--lime);
}
.tt-page .process-header h2 {
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.02;
}
.tt-page .process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}
.tt-page .process-step {
    padding: 48px 40px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: border-color 0.3s ease;
}
.tt-page .process-step:hover {
    border-color: var(--lime);
}
.tt-page .step-num {
    font-family: 'Gabarito', sans-serif;
    font-size: 48px;
    font-weight: 900;
    color: var(--electric-blue);
    opacity: 0.5;
    display: block;
    margin-bottom: 24px;
    line-height: 1;
}
.tt-page .process-step h4 {
    font-size: 24px;
    margin-bottom: 16px;
    line-height: 1.1;
}
.tt-page .process-step p {
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255,255,255,0.6);
}

/* ---- DESIGN PAGE RESPONSIVE ---- */
@media (max-width: 960px) {
    .tt-page .ds-block {
        grid-template-columns: 60px 1fr;
        gap: 24px;
        padding: 36px 0;
    }
    .tt-page .ds-number {
        font-size: 40px;
    }
    .tt-page .process-steps {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .tt-page .process-step {
        padding: 36px 28px;
    }
    .tt-page .design-services,
    .tt-page .process-section {
        padding: 100px 0;
    }
}

@media (max-width: 600px) {
    .tt-page .ds-block {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .tt-page .ds-number {
        font-size: 32px;
        opacity: 0.25;
    }
}


/* =====================================================
   SOCIAL MEDIA PAGE
   ===================================================== */

/* ---- SM PACKAGES SECTION ---- */
.tt-page .sm-packages {
    padding: 140px 0 80px;
    background: var(--black);
}
.tt-page .sm-packages .services-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 64px;
}
.tt-page .sm-packages .services-header h2 {
    color: var(--white);
}
.tt-page .sm-packages .services-header p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--muted);
    margin-top: 20px;
}

/* ---- PACKAGE BLOCK ---- */
.tt-page .sm-pkg {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 48px;
    margin-bottom: 24px;
    transition: border-color 0.3s ease;
}
.tt-page .sm-pkg:hover {
    border-color: rgba(255,255,255,0.18);
}
.tt-page .sm-pkg.featured {
    border-color: var(--lime);
    background: rgba(163,255,82,0.04);
    position: relative;
}
.tt-page .sm-pkg.featured::before {
    content: 'Most Popular';
    position: absolute;
    top: -13px;
    left: 48px;
    background: var(--lime);
    color: var(--black);
    font-family: 'Gabarito', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 16px;
    border-radius: 100px;
}

/* ---- PACKAGE HEADER ---- */
.tt-page .sm-pkg-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 24px;
}
.tt-page .sm-pkg-title h3 {
    font-size: 28px;
    margin: 8px 0 4px;
    line-height: 1.2;
    color: var(--white);
}
.tt-page .sm-pkg-badge {
    display: inline-block;
    background: rgba(91,108,240,0.12);
    color: var(--electric-blue);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 12px;
    border-radius: 100px;
}
.tt-page .sm-pkg-meta {
    font-size: 14px;
    color: var(--muted);
    margin-top: 4px;
}
.tt-page .sm-pkg-price {
    text-align: right;
    flex-shrink: 0;
}
.tt-page .sm-pkg-price .price {
    font-family: 'Gabarito', sans-serif;
    font-size: 36px;
    font-weight: 900;
    color: var(--electric-blue);
    display: block;
    line-height: 1;
}
.tt-page .sm-pkg.featured .sm-pkg-price .price {
    color: var(--lime);
}
.tt-page .sm-pkg-price .price-note {
    font-size: 14px;
    color: var(--muted);
    display: block;
    margin-top: 4px;
}

/* ---- PACKAGE DESCRIPTION ---- */
.tt-page .sm-pkg-desc {
    font-size: 15px;
    line-height: 1.8;
    color: var(--muted);
    margin-bottom: 32px;
    max-width: 800px;
}

/* ---- INCLUDES LIST ---- */
.tt-page .sm-pkg-includes {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 28px;
}
.tt-page .sm-pkg-includes .includes-title {
    display: block;
    font-family: 'Gabarito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lime);
    margin-bottom: 16px;
}
.tt-page .sm-pkg-includes ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 32px;
}
.tt-page .sm-pkg-includes li {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    padding-left: 20px;
    position: relative;
}
.tt-page .sm-pkg-includes li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lime);
    opacity: 0.5;
}

/* ---- ADD-ON BLOCK ---- */
.tt-page .sm-addon {
    margin-top: 48px;
}
.tt-page .sm-addon-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(163,255,82,0.3);
    border-radius: 16px;
    padding: 48px;
}
.tt-page .sm-addon-left h3 {
    font-size: 24px;
    margin: 12px 0 16px;
    line-height: 1.2;
    color: var(--white);
}
.tt-page .sm-addon-left p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--muted);
}
.tt-page .sm-addon-note {
    font-size: 13px !important;
    font-style: italic;
    opacity: 0.7;
    margin-top: 12px;
}
.tt-page .sm-addon-right {
    flex-shrink: 0;
    text-align: right;
}
.tt-page .sm-addon-right .price {
    font-family: 'Gabarito', sans-serif;
    font-size: 36px;
    color: var(--electric-blue);
    font-weight: 900;
    color: var(--white);
    display: block;
    line-height: 1;
}
.tt-page .sm-addon-right .price-note {
    font-size: 14px;
    color: var(--muted);
    display: block;
    margin-top: 4px;
}

/* ---- COMBO SECTION ---- */
.tt-page .combo-section {
    padding: 100px 0 140px;
    background: #0a0a0a;
}
.tt-page .combo-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 64px;
}
.tt-page .combo-header h2 {
    color: var(--white);
}
.tt-page .combo-header p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--muted);
    margin-top: 20px;
}

/* ---- COMBO GRID ---- */
.tt-page .combo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.tt-page .combo-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 36px 28px;
    transition: border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}
.tt-page .combo-card:hover {
    border-color: rgba(255,255,255,0.18);
}
.tt-page .combo-platforms {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lime);
    margin-bottom: 12px;
}
.tt-page .combo-card h4 {
    font-size: 20px;
    margin-bottom: 8px;
    line-height: 1.2;
    color: var(--white);
}
.tt-page .combo-freq {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: auto;
    padding-bottom: 24px;
}
.tt-page .combo-pricing {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 20px;
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.tt-page .combo-price {
    font-family: 'Gabarito', sans-serif;
    font-size: 28px;
    font-weight: 900;
    color: var(--white);
}
.tt-page .combo-save {
    font-size: 13px;
    font-weight: 600;
    color: var(--electric-blue);
    background: rgba(91,108,240,0.15);
    padding: 3px 10px;
    border-radius: 100px;
}

/* ---- SOCIAL MEDIA PAGE RESPONSIVE ---- */
@media (max-width: 960px) {
    .tt-page .sm-packages {
        padding: 100px 0 60px;
    }
    .tt-page .sm-pkg {
        padding: 36px 28px;
    }
    .tt-page .sm-pkg-header {
        flex-direction: column;
        gap: 16px;
    }
    .tt-page .sm-pkg-price {
        text-align: left;
    }
    .tt-page .sm-pkg-includes ul {
        grid-template-columns: 1fr;
    }
    .tt-page .sm-addon-inner {
        flex-direction: column;
        gap: 32px;
        padding: 36px 28px;
    }
    .tt-page .sm-addon-right {
        text-align: left;
    }
    .tt-page .combo-section {
        padding: 80px 0 100px;
    }
    .tt-page .combo-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .tt-page .sm-pkg {
        padding: 28px 20px;
    }
    .tt-page .sm-pkg-title h3 {
        font-size: 22px;
    }
    .tt-page .sm-pkg-price .price {
        font-size: 28px;
    }
    .tt-page .sm-addon-inner {
        padding: 28px 20px;
    }
    .tt-page .combo-grid {
        grid-template-columns: 1fr;
    }
    .tt-page .combo-card {
        padding: 28px 20px;
    }
    .tt-page .combo-price {
        font-size: 24px;
    }
}


/* =====================================================
   HOMEPAGE
   ===================================================== */

/* ---- HOME HERO ---- */
.tt-page.tt-home .home-hero {
    position: relative;
    overflow: hidden;
    background: var(--off-white);
}
.tt-page.tt-home .home-hero.home-hero-light {
    background: var(--off-white);
}
.tt-page.tt-home .home-hero .hero-full-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.35);
}
.tt-page.tt-home .home-hero.home-hero-light .hero-full-bg,
.tt-page.tt-home .home-hero.home-hero-light .hero-lime-tint {
    display: none;
}
.tt-page.tt-home .home-hero .hero-tiger-bleed {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 55%;
    max-width: 900px;
    background-image: url('https://tigerandtype.com/wp-content/uploads/2026/04/tiger_type_hero_011-scaled.png');
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.55) 65%, rgba(0,0,0,1) 100%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.55) 65%, rgba(0,0,0,1) 100%);
    opacity: 0.7;
    z-index: 1;
    pointer-events: none;
}
@media (max-width: 768px) {
    .tt-page.tt-home .home-hero .hero-tiger-bleed {
        width: 65%;
        opacity: 0.45;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,1) 100%);
        mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,1) 100%);
    }
}

/* ---- HOME JHB BLEED (mirror of hero, light + reversed) ---- */
.tt-page.tt-home .home-jhb {
    position: relative;
    background: var(--off-white);
    overflow: hidden;
    padding: 120px 0;
    min-height: 360px;
    display: flex;
    align-items: center;
}
.tt-page.tt-home .home-jhb .jhb-tiger-bleed {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 55%;
    max-width: 900px;
    background-image: url('https://tigerandtype.com/wp-content/uploads/2026/04/tiger_type_hero_008-scaled.png');
    background-size: cover;
    background-position: center left;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.15) 65%, transparent 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.15) 65%, transparent 100%);
    opacity: 0.7;
    z-index: 1;
    pointer-events: none;
}
.tt-page.tt-home .home-jhb .container {
    position: relative;
    z-index: 2;
    text-align: right;
}
.tt-page.tt-home .home-jhb .quote {
    font-family: 'Gabarito', sans-serif;
    font-size: clamp(28px, 4vw, 56px);
    font-weight: 800;
    color: var(--black);
    line-height: 1.05;
    margin: 0;
    display: inline-block;
}
.tt-page.tt-home .home-jhb .quote .lime {
    position: relative;
    display: inline-block;
    color: var(--black);
    z-index: 0;
}
.tt-page.tt-home .home-jhb .quote .lime::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.08em;
    height: 0.18em;
    background: var(--lime);
    z-index: -1;
    border-radius: 2px;
}
@media (max-width: 768px) {
    .tt-page.tt-home .home-jhb {
        padding: 80px 0;
        min-height: 260px;
    }
    .tt-page.tt-home .home-jhb .jhb-tiger-bleed {
        width: 70%;
        opacity: 0.45;
        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0.1) 60%, transparent 100%);
        mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0.1) 60%, transparent 100%);
    }
    .tt-page.tt-home .home-jhb .container {
        text-align: center;
    }
}

.tt-page.tt-home .home-hero .hero-lime-tint {
    display: none;
}
.tt-page.tt-home .home-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1040px;
    margin: 0 auto;
    padding: 120px 0;
    text-align: center;
}
.tt-page.tt-home .home-hero .hero-eyebrow {
    font-family: 'Figtree', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 40px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.tt-page.tt-home .home-hero .hero-eyebrow::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--muted);
}
.tt-page.tt-home .home-hero h1 {
    font-size: clamp(36px, 5vw, 68px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--black);
    margin: 0 0 28px;
}
.tt-page.tt-home .home-hero h1 .hero-accent {
    position: relative;
    display: inline-block;
    color: var(--black);
}
.tt-page.tt-home .home-hero h1 .hero-accent::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.08em;
    height: 0.18em;
    background: var(--lime);
    z-index: -1;
    border-radius: 2px;
}
.tt-page.tt-home .home-hero .sub {
    font-size: 18px;
    line-height: 1.55;
    color: var(--charcoal) !important;
    max-width: 640px;
    margin: 0 auto 12px;
}
.tt-page.tt-home .home-hero .sub + .sub {
    margin-top: 0;
}
.tt-page.tt-home .home-hero .sub:last-of-type {
    margin-bottom: 36px;
}
.tt-page.tt-home .home-hero .ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.tt-page.tt-home .bottom-cta .ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.tt-page.tt-home .home-hero .btn-lime {
    background: var(--lime);
    color: var(--black) !important;
    border: 1px solid var(--lime);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.tt-page.tt-home .home-hero .btn-lime:hover {
    background: #d4ff70;
}
.tt-page.tt-home .home-hero .btn-lime .btn-arrow {
    display: inline-block;
    transition: transform 0.25s ease;
    font-weight: 700;
}
.tt-page.tt-home .home-hero .btn-lime:hover .btn-arrow {
    transform: translateX(4px);
}
.tt-page.tt-home .home-hero .btn-outline-d {
    border: 1px solid rgba(10,10,10,0.2);
    color: var(--black) !important;
    background: transparent;
}
.tt-page.tt-home .home-hero .btn-outline-d:hover {
    background: var(--black);
    border-color: var(--black);
    color: var(--white) !important;
}
/* Legacy outline-white kept for any remaining dark-bg hero usage */
.tt-page.tt-home .home-hero .btn-outline-w {
    border: 1px solid rgba(255,255,255,0.3);
    color: #ffffff !important;
    background: transparent;
}
.tt-page.tt-home .home-hero .btn-outline-w:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.6);
    color: #ffffff !important;
}

/* ---- HOME SERVICES (smoke grey bg) ---- */
.tt-page.tt-home .home-services {
    padding: 140px 0;
    background: var(--off-white);
}
.tt-page.tt-home .home-services > .container > h2 {
    text-align: center;
    color: var(--black);
    margin-bottom: 64px;
}
.tt-page.tt-home .home-svc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.tt-page.tt-home .home-svc-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 44px 40px;
    text-decoration: none;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.tt-page.tt-home .home-svc-card:hover {
    border-color: var(--black);
    transform: translateY(-4px);
}
.tt-page.tt-home .home-svc-num {
    font-family: 'Gabarito', sans-serif;
    font-size: 72px;
    font-weight: 900;
    color: var(--electric-blue);
    opacity: 1;
    line-height: 1;
    margin-bottom: 20px;
    display: block;
}
.tt-page.tt-home .home-svc-card:nth-child(1) .home-svc-num { color: var(--electric-blue); opacity: 1; }
.tt-page.tt-home .home-svc-card:nth-child(2) .home-svc-num { color: var(--electric-blue); opacity: 1; }
.tt-page.tt-home .home-svc-card:nth-child(3) .home-svc-num { color: var(--electric-blue); opacity: 1; }
.tt-page.tt-home .home-svc-card:nth-child(4) .home-svc-num { color: var(--electric-blue); opacity: 1; }
.tt-page.tt-home .home-svc-card:nth-child(5) .home-svc-num { color: var(--electric-blue); opacity: 1; }
.tt-page.tt-home .home-svc-card h3 {
    font-size: 24px;
    color: var(--black);
    margin-bottom: 16px;
    line-height: 1.2;
}
.tt-page.tt-home .home-svc-card p {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    margin-bottom: auto;
    padding-bottom: 28px;
}
.tt-page.tt-home .home-svc-price {
    display: block;
    font-family: 'Gabarito', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 12px;
}
.tt-page.tt-home .home-svc-link {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    letter-spacing: 0.02em;
}
.tt-page.tt-home .home-svc-card:hover .home-svc-link {
    color: var(--black);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- NUMBERS (coral bg) ---- */
.tt-page.tt-home .home-numbers {
    padding: 100px 0;
    background: var(--off-white);
}
.tt-page.tt-home .numbers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    text-align: center;
}
.tt-page.tt-home .num {
    display: block;
    font-family: 'Gabarito', sans-serif;
    font-size: 80px;
    font-weight: 900;
    color: var(--electric-blue) !important;
    line-height: 1;
    margin-bottom: 16px;
}
.tt-page.tt-home .number-item p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--black) !important;
}

/* ---- LOGO STRIP (white bg) ---- */
.tt-page.tt-home .home-logos {
    padding: 80px 0;
    background: #ffffff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.tt-page.tt-home .logo-label {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    margin-bottom: 40px;
}
.tt-page.tt-home .logo-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}
.tt-page.tt-home .client-logo {
    max-height: 80px;
    width: auto;
    opacity: 1;
    filter: brightness(0.4);
    transition: filter 0.3s ease;
}
.tt-page.tt-home .client-logo:hover {
    filter: brightness(0.6);
}

/* ---- TESTIMONIALS (electric blue bg) ---- */
.tt-page.tt-home .home-testimonials {
    padding: 140px 0;
    background: var(--black);
}
.tt-page.tt-home .home-testimonials > .container > h2 {
    text-align: center;
    color: #ffffff !important;
    margin-bottom: 64px;
}
.tt-page.tt-home .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}
.tt-page.tt-home .test-card {
    background: var(--electric-blue);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 32px 28px;
}
.tt-page.tt-home .test-quote {
    font-family: 'Gabarito', sans-serif;
    font-size: 40px;
    font-weight: 900;
    color: var(--lime);
    line-height: 0.6;
    margin-bottom: 12px;
    opacity: 0.6;
}
.tt-page.tt-home .test-card .test-quote {
    color: var(--lime);
}
.tt-page.tt-home .test-card p {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,0.85) !important;
    margin-bottom: 20px;
}
.tt-page.tt-home .test-card strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff !important;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 16px;
}

/* ---- WHY SECTION (white bg, grey cards) ---- */
.tt-page.tt-home .home-why {
    padding: 140px 0;
    background: #ffffff;
}
.tt-page.tt-home .home-why > .container > h2 {
    text-align: center;
    color: var(--black) !important;
    margin-bottom: 64px;
}
.tt-page.tt-home .why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.tt-page.tt-home .why-block {
    border-left: 3px solid var(--lime);
    padding: 36px 36px 36px 32px;
    background: var(--off-white);
    border-radius: 0 16px 16px 0;
}
.tt-page.tt-home .why-block.why-coral { border-left-color: var(--lime); }
.tt-page.tt-home .why-block.why-blue { border-left-color: var(--lime); }
.tt-page.tt-home .why-block.why-purple { border-left-color: var(--lime); }
.tt-page.tt-home .why-block.why-lime { border-left-color: var(--lime); }
.tt-page.tt-home .why-block h3 {
    font-size: 22px;
    color: var(--black) !important;
    margin-bottom: 14px;
    line-height: 1.2;
}
.tt-page.tt-home .why-block p {
    font-size: 15px;
    line-height: 1.8;
    color: #555 !important;
}

/* ---- HOMEPAGE RESPONSIVE ---- */
@media (max-width: 960px) {
    .tt-page.tt-home .home-hero-content {
        padding: 90px 0;
    }
    .tt-page.tt-home .home-services {
        padding: 100px 0;
    }
    .tt-page.tt-home .home-svc-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .tt-page.tt-home .numbers-grid {
        gap: 32px;
    }
    .tt-page.tt-home .num {
        font-size: 60px;
    }
    .tt-page.tt-home .testimonials-grid {
        grid-template-columns: 1fr 1fr;
    }
    .tt-page.tt-home .home-testimonials,
    .tt-page.tt-home .home-why {
        padding: 100px 0;
    }
    .tt-page.tt-home .why-grid {
        grid-template-columns: 1fr;
    }
    .tt-page.tt-home .bottom-cta {
        padding: 100px 0;
    }
}

/* Homepage bottom CTA - centered, silver grey bg */
.tt-page.tt-home .bottom-cta {
    background: var(--off-white);
    color: #0A0A0A;
    padding: 140px 0;
    text-align: center;
}
.tt-page.tt-home .bottom-cta-bg {
    display: none;
}
.tt-page.tt-home .bottom-cta h2 {
    color: var(--electric-blue) !important;
}
.tt-page.tt-home .bottom-cta p {
    color: #444 !important;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 32px;
}
.tt-page.tt-home .bottom-cta .ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.tt-page.tt-home .bottom-cta .btn-black {
    background: var(--electric-blue);
    color: #ffffff !important;
    border-color: var(--electric-blue);
}
.tt-page.tt-home .bottom-cta .btn-black:hover {
    background: #4a5bd9;
}
.tt-page.tt-home .bottom-cta .btn-outline-b {
    border-color: var(--electric-blue);
    color: var(--electric-blue) !important;
}
.tt-page.tt-home .bottom-cta .btn-outline-b:hover {
    background: var(--electric-blue);
    color: #ffffff !important;
}
.tt-page .btn-black {
    display: inline-block;
    font-family: 'Gabarito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 100px;
    text-decoration: none;
    background: #0A0A0A;
    color: #ffffff !important;
    transition: all 0.3s ease;
}
.tt-page .btn-black:hover {
    background: var(--charcoal);
}
.tt-page .btn-outline-b {
    display: inline-block;
    font-family: 'Gabarito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 100px;
    text-decoration: none;
    background: transparent;
    color: #0A0A0A !important;
    border: 1px solid rgba(10,10,10,0.2);
    transition: all 0.3s ease;
}
.tt-page .btn-outline-b:hover {
    border-color: #0A0A0A;
    background: #0A0A0A;
    color: #ffffff !important;
}

@media (max-width: 600px) {
    .tt-page.tt-home .home-hero-content {
        padding: 70px 0;
    }
    .tt-page.tt-home .ctas {
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
    .tt-page.tt-home .ctas .btn {
        display: flex;
        justify-content: center;
        box-sizing: border-box;
    }
    .tt-page.tt-home .home-svc-card {
        padding: 32px 24px;
    }
    .tt-page.tt-home .numbers-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .tt-page.tt-home .num {
        font-size: 56px;
    }
    .tt-page.tt-home .logo-strip {
        gap: 32px;
    }
    .tt-page.tt-home .testimonials-grid {
        grid-template-columns: 1fr;
    }
    .tt-page.tt-home .why-block {
        padding: 28px 24px 28px 24px;
    }
    .tt-page .img-break-overlay .quote {
        white-space: normal;
        font-size: 24px;
    }
    /* bottom-cta buttons handled by unified .ctas .btn rule above */
}


/* =========================================
   CONTACT PAGE
   ========================================= */

.tt-page.tt-contact .contact-hero {
    background: #ffffff;
    padding: 160px 0 80px;
    text-align: center;
}
.tt-page.tt-contact .contact-hero h1 {
    font-family: 'Gabarito', sans-serif;
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 900;
    line-height: 1;
    color: #0A0A0A;
    margin: 0 0 24px;
}
.tt-page.tt-contact .contact-hero .sub {
    font-family: 'Figtree', sans-serif;
    font-size: 19px;
    color: rgba(10,10,10,0.55);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
}

.tt-page.tt-contact .contact-form-section {
    background: #ffffff;
    padding: 0 0 120px;
}

.tt-page.tt-contact .tt-contact-form {
    max-width: 560px;
    margin: 0 auto;
}

/* Form fields */
.tt-page.tt-contact .form-group {
    margin-bottom: 32px;
}
.tt-page.tt-contact .form-group > label {
    display: block;
    font-family: 'Gabarito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0A0A0A;
    margin-bottom: 10px;
}

.tt-page.tt-contact input[type="text"],
.tt-page.tt-contact input[type="email"],
.tt-page.tt-contact textarea {
    width: 100%;
    padding: 14px 18px;
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    color: #0A0A0A;
    background: #f5f5f3;
    border: 2px solid transparent;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.tt-page.tt-contact input[type="text"]:focus,
.tt-page.tt-contact input[type="email"]:focus,
.tt-page.tt-contact textarea:focus {
    border-color: var(--lime, #a3ff52);
    background: #ffffff;
}
.tt-page.tt-contact input::placeholder,
.tt-page.tt-contact textarea::placeholder {
    color: rgba(10,10,10,0.35);
}
.tt-page.tt-contact textarea {
    resize: vertical;
    min-height: 120px;
}

/* Radio cards (reason selector) */
.tt-page.tt-contact .radio-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.tt-page.tt-contact .radio-card {
    display: block;
    position: relative;
    padding: 20px;
    background: #f5f5f3;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.tt-page.tt-contact .radio-card:hover {
    background: #efefed;
}
.tt-page.tt-contact .radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.tt-page.tt-contact .radio-card input[type="radio"]:checked + .radio-label {
    color: #0A0A0A;
}
.tt-page.tt-contact .radio-card input[type="radio"]:checked ~ .radio-desc {
    color: rgba(10,10,10,0.6);
}
.tt-page.tt-contact .radio-card:has(input:checked) {
    border-color: var(--lime, #a3ff52);
    background: #ffffff;
}
.tt-page.tt-contact .radio-label {
    display: block;
    font-family: 'Gabarito', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0A0A0A;
    margin-bottom: 6px;
}
.tt-page.tt-contact .radio-desc {
    display: block;
    font-family: 'Figtree', sans-serif;
    font-size: 13px;
    color: rgba(10,10,10,0.45);
    line-height: 1.5;
}

/* Checkbox cards (services/packages) */
.tt-page.tt-contact .checkbox-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.tt-page.tt-contact .check-group-label {
    grid-column: 1 / -1;
    font-family: 'Gabarito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(10,10,10,0.4);
    margin: 12px 0 4px;
    padding: 0;
}
.tt-page.tt-contact .check-group-label:first-child {
    margin-top: 0;
}
.tt-page.tt-contact .check-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #f5f5f3;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.tt-page.tt-contact .check-card:hover {
    background: #efefed;
}
.tt-page.tt-contact .check-card:has(input:checked) {
    border-color: var(--lime, #a3ff52);
    background: #ffffff;
}
.tt-page.tt-contact .check-card input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--lime, #a3ff52);
    flex-shrink: 0;
}
.tt-page.tt-contact .check-label {
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0A0A0A;
}

/* Conditional reveal animation */
.tt-page.tt-contact .form-conditional {
    animation: formSlideIn 0.4s ease forwards;
}
@keyframes formSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Submit button full width */
.tt-page.tt-contact .btn-full {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 16px 24px;
    font-size: 15px;
}

/* Form note */
.tt-page.tt-contact .form-note {
    text-align: center;
    font-family: 'Figtree', sans-serif;
    font-size: 13px;
    color: rgba(10,10,10,0.35);
    margin-top: 24px;
}

/* WPForms styling override */
.tt-page.tt-contact .wpforms-container {
    max-width: 560px;
    margin: 0 auto;
}
.tt-page.tt-contact .wpforms-container .wpforms-field {
    width: 100% !important;
}
.tt-page.tt-contact .wpforms-container .wpforms-field-row,
.tt-page.tt-contact .wpforms-container .wpforms-field-medium,
.tt-page.tt-contact .wpforms-container .wpforms-field-large {
    max-width: 100% !important;
    width: 100% !important;
}
.tt-page.tt-contact .wpforms-field-label {
    font-family: 'Gabarito', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0A0A0A !important;
    margin-bottom: 10px !important;
}
.tt-page.tt-contact .wpforms-field input[type="text"],
.tt-page.tt-contact .wpforms-field input[type="email"],
.tt-page.tt-contact .wpforms-field textarea,
.tt-page.tt-contact .wpforms-field select {
    width: 100% !important;
    padding: 14px 18px !important;
    font-family: 'Figtree', sans-serif !important;
    font-size: 16px !important;
    color: #0A0A0A !important;
    background: #f5f5f3 !important;
    border: 2px solid transparent !important;
    border-radius: 10px !important;
    outline: none !important;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.tt-page.tt-contact .wpforms-field input:focus,
.tt-page.tt-contact .wpforms-field textarea:focus,
.tt-page.tt-contact .wpforms-field select:focus {
    border-color: var(--lime, #a3ff52) !important;
    background: #ffffff !important;
}
.tt-page.tt-contact .wpforms-field textarea {
    resize: vertical;
    min-height: 120px;
}
.tt-page.tt-contact .wpforms-submit-container button,
.tt-page.tt-contact .wpforms-submit {
    width: 100% !important;
    background: var(--lime, #a3ff52) !important;
    color: #0A0A0A !important;
    font-family: 'Gabarito', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 16px 24px !important;
    border: none !important;
    border-radius: 100px !important;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.tt-page.tt-contact .wpforms-submit:hover {
    opacity: 0.85 !important;
}
.tt-page.tt-contact .wpforms-field-radio ul,
.tt-page.tt-contact .wpforms-field-checkbox ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.tt-page.tt-contact .wpforms-field-radio li,
.tt-page.tt-contact .wpforms-field-checkbox li {
    margin-bottom: 8px !important;
    padding: 14px 18px !important;
    background: #f5f5f3;
    border: 2px solid transparent;
    border-radius: 10px;
    transition: border-color 0.2s ease;
}
.tt-page.tt-contact .wpforms-field-radio li:has(input:checked),
.tt-page.tt-contact .wpforms-field-checkbox li:has(input:checked) {
    border-color: var(--lime, #a3ff52);
    background: #ffffff;
}
.tt-page.tt-contact .wpforms-field-radio label,
.tt-page.tt-contact .wpforms-field-checkbox label {
    font-family: 'Figtree', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #0A0A0A !important;
}

/* =========================================
   CONTACT MODAL
   ========================================= */

.tt-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,10,10,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
}
.tt-modal-overlay.open {
    display: flex;
}
.tt-modal {
    background: #ffffff;
    border-radius: 16px;
    padding: 48px 40px 40px;
    max-width: 560px;
    width: 100%;
    position: relative;
    animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.tt-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    color: rgba(10,10,10,0.4);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color 0.2s ease;
}
.tt-modal-close:hover {
    color: #0A0A0A;
}
.tt-modal h2 {
    font-family: 'Gabarito', sans-serif;
    font-size: 32px;
    font-weight: 900;
    color: #0A0A0A;
    margin: 0 0 12px;
}
.tt-modal-sub {
    font-family: 'Figtree', sans-serif;
    font-size: 15px;
    color: rgba(10,10,10,0.5);
    line-height: 1.6;
    margin: 0 0 32px;
}
.tt-modal-note {
    font-family: 'Figtree', sans-serif;
    font-size: 13px;
    color: rgba(10,10,10,0.35);
    text-align: center;
    margin-top: 16px;
}

/* WPForms inside modal */
.tt-modal .wpforms-container {
    max-width: 100% !important;
}
.tt-modal .wpforms-field-label {
    font-family: 'Gabarito', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0A0A0A !important;
    margin-bottom: 10px !important;
}
.tt-modal .wpforms-field input[type="text"],
.tt-modal .wpforms-field input[type="email"],
.tt-modal .wpforms-field textarea,
.tt-modal .wpforms-field select {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 18px !important;
    font-family: 'Figtree', sans-serif !important;
    font-size: 16px !important;
    color: #0A0A0A !important;
    background: #f5f5f3 !important;
    border: 2px solid transparent !important;
    border-radius: 10px !important;
    outline: none !important;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.tt-modal .wpforms-field input:focus,
.tt-modal .wpforms-field textarea:focus,
.tt-modal .wpforms-field select:focus {
    border-color: var(--lime, #a3ff52) !important;
    background: #ffffff !important;
}
.tt-modal .wpforms-field textarea {
    resize: vertical;
    min-height: 100px;
}
.tt-modal .wpforms-field {
    width: 100% !important;
}
.tt-modal .wpforms-field-medium,
.tt-modal .wpforms-field-large {
    max-width: 100% !important;
    width: 100% !important;
}
.tt-modal .wpforms-submit-container button,
.tt-modal .wpforms-submit {
    width: 100% !important;
    background: var(--lime, #a3ff52) !important;
    color: #0A0A0A !important;
    font-family: 'Gabarito', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 16px 24px !important;
    border: none !important;
    border-radius: 100px !important;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.tt-modal .wpforms-submit:hover {
    opacity: 0.85 !important;
}
.tt-modal .wpforms-field-radio ul,
.tt-modal .wpforms-field-checkbox ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.tt-modal .wpforms-field-radio li,
.tt-modal .wpforms-field-checkbox li {
    margin-bottom: 8px !important;
    padding: 14px 18px !important;
    background: #f5f5f3;
    border: 2px solid transparent;
    border-radius: 10px;
    transition: border-color 0.2s ease;
}
.tt-modal .wpforms-field-radio li:has(input:checked),
.tt-modal .wpforms-field-checkbox li:has(input:checked) {
    border-color: var(--lime, #a3ff52);
    background: #ffffff;
}
.tt-modal .wpforms-field-radio label,
.tt-modal .wpforms-field-checkbox label {
    font-family: 'Figtree', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #0A0A0A !important;
}

@media (max-width: 600px) {
    .tt-modal {
        padding: 36px 24px 28px;
    }
    .tt-modal h2 {
        font-size: 26px;
    }
}

/* ---- Contact page responsive ---- */
@media (max-width: 960px) {
    .tt-page.tt-contact .contact-hero {
        padding: 140px 0 60px;
    }
    .tt-page.tt-contact .checkbox-group {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .tt-page.tt-contact .contact-hero {
        padding: 120px 0 48px;
    }
    .tt-page.tt-contact .contact-hero h1 {
        font-size: 36px;
    }
    .tt-page.tt-contact .contact-hero .sub {
        font-size: 16px;
    }
    .tt-page.tt-contact .checkbox-group {
        grid-template-columns: 1fr;
    }
    .tt-page.tt-contact .contact-form-section {
        padding: 0 0 80px;
    }
}


/* =========================================
   SERVICES OVERVIEW PAGE
   ========================================= */

.tt-page.tt-services-overview .svc-overview-hero {
    background: var(--lime, #a3ff52);
    padding: 160px 0 80px;
}
.tt-page.tt-services-overview .svc-overview-hero h1 {
    font-family: 'Gabarito', sans-serif;
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 900;
    line-height: 1.05;
    color: #0A0A0A;
    margin: 0 0 24px;
}
.tt-page.tt-services-overview .svc-overview-hero .sub {
    font-family: 'Figtree', sans-serif;
    font-size: 19px;
    color: rgba(10,10,10,0.55);
    max-width: 520px;
    line-height: 1.7;
    margin: 0;
}

.tt-page.tt-services-overview .svc-overview-grid-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}
.tt-page.tt-services-overview .svc-overview-grid-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('https://tigerandtype.com/wp-content/uploads/2026/04/tiger_type_hero_007-scaled.png') center/cover no-repeat;
    filter: brightness(0.45);
    z-index: 0;
}
.tt-page.tt-services-overview .svc-overview-grid-section .container {
    position: relative;
    z-index: 1;
}
.tt-page.tt-services-overview .svc-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.tt-page.tt-services-overview .svc-overview-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease;
}
.tt-page.tt-services-overview .svc-overview-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.tt-page.tt-services-overview .svc-overview-num {
    font-family: 'Gabarito', sans-serif;
    font-size: 56px;
    font-weight: 900;
    color: var(--lime, #a3ff52);
    opacity: 0.5;
    line-height: 1;
    display: block;
    margin-bottom: 16px;
}
.tt-page.tt-services-overview .svc-overview-card h2 {
    font-family: 'Gabarito', sans-serif;
    font-size: 24px;
    font-weight: 900;
    color: #0A0A0A;
    margin: 0 0 12px;
}
.tt-page.tt-services-overview .svc-overview-card p {
    font-family: 'Figtree', sans-serif;
    font-size: 15px;
    color: rgba(10,10,10,0.55);
    line-height: 1.7;
    margin: 0 0 24px;
    flex: 1;
}
.tt-page.tt-services-overview .btn-outline-dark {
    display: inline-block;
    border: 2px solid #0A0A0A;
    color: #0A0A0A;
    font-family: 'Gabarito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 28px;
    border-radius: 100px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    align-self: flex-start;
}
.tt-page.tt-services-overview .btn-outline-dark:hover {
    background: #0A0A0A;
    color: #ffffff;
}

/* -- Hosting section -- */
.tt-page.tt-services-overview .svc-overview-hosting {
    background: #0A0A0A;
    padding: 100px 0;
}
.tt-page.tt-services-overview .hosting-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}
.tt-page.tt-services-overview .svc-overview-label {
    font-family: 'Gabarito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lime, #a3ff52);
    display: block;
    margin-bottom: 16px;
}
.tt-page.tt-services-overview .hosting-text h2 {
    font-family: 'Gabarito', sans-serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.15;
    margin: 0 0 16px;
}
.tt-page.tt-services-overview .hosting-text p {
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    color: rgba(255,255,255,0.6);
    line-height: 1.7;
    margin: 0 0 28px;
}
.tt-page.tt-services-overview .hosting-price {
    margin-bottom: 28px;
}
.tt-page.tt-services-overview .hosting-price .price {
    font-family: 'Gabarito', sans-serif;
    font-size: 48px;
    font-weight: 900;
    color: #ffffff;
}
.tt-page.tt-services-overview .hosting-price .per {
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    color: rgba(255,255,255,0.45);
    margin-left: 4px;
}
.tt-page.tt-services-overview .svc-overview-hosting .btn-outline-dark {
    border-color: #ffffff;
    color: #ffffff;
}
.tt-page.tt-services-overview .svc-overview-hosting .btn-outline-dark:hover {
    background: #ffffff;
    color: #0A0A0A;
}
.tt-page.tt-services-overview .hosting-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tt-page.tt-services-overview .hosting-features li {
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    color: rgba(255,255,255,0.75);
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    line-height: 1.5;
}
.tt-page.tt-services-overview .hosting-features li:first-child {
    border-top: 1px solid rgba(255,255,255,0.1);
}

.tt-page.tt-services-overview .svc-overview-cta {
    background: #ffffff;
    padding: 100px 0;
    text-align: center;
}
.tt-page.tt-services-overview .svc-overview-cta h2 {
    font-family: 'Gabarito', sans-serif;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 900;
    color: #0A0A0A;
    margin: 0 0 16px;
}
.tt-page.tt-services-overview .svc-overview-cta p {
    font-family: 'Figtree', sans-serif;
    font-size: 18px;
    color: rgba(10,10,10,0.6);
    margin: 0 0 32px;
    line-height: 1.6;
}

/* ---- Services overview responsive ---- */
@media (max-width: 960px) {
    .tt-page.tt-services-overview .svc-overview-hero {
        padding: 140px 0 60px;
    }
    .tt-page.tt-services-overview .svc-overview-grid-section {
        padding: 60px 0;
    }
}
@media (max-width: 600px) {
    .tt-page.tt-services-overview .svc-overview-hero {
        padding: 120px 0 48px;
    }
    .tt-page.tt-services-overview .svc-overview-hero h1 {
        font-size: 36px;
    }
    .tt-page.tt-services-overview .svc-overview-grid {
        grid-template-columns: 1fr;
    }
    .tt-page.tt-services-overview .hosting-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .tt-page.tt-services-overview .svc-overview-card h2 {
        font-size: 22px;
    }
    .tt-page.tt-services-overview .svc-overview-cta {
        padding: 80px 0;
    }
}

/* =========================================
   LEGAL PAGES (Privacy Policy, Terms)
   ========================================= */

.tt-page.tt-legal .legal-hero {
    background: #0A0A0A;
    padding: 160px 0 80px;
}
.tt-page.tt-legal .legal-hero h1 {
    font-family: 'Gabarito', sans-serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.1;
    margin: 0 0 16px;
}
.tt-page.tt-legal .legal-hero .sub {
    font-family: 'Figtree', sans-serif;
    font-size: 15px;
    color: rgba(255,255,255,0.4);
    margin: 0;
}

.tt-page.tt-legal .legal-content {
    background: #ffffff;
    padding: 80px 0 100px;
}
.tt-page.tt-legal .legal-content h2 {
    font-family: 'Gabarito', sans-serif;
    font-size: 22px;
    font-weight: 900;
    color: #0A0A0A;
    margin: 48px 0 12px;
}
.tt-page.tt-legal .legal-content h2:first-child {
    margin-top: 0;
}
.tt-page.tt-legal .legal-content p {
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    color: rgba(10,10,10,0.7);
    line-height: 1.8;
    margin: 0 0 16px;
}
.tt-page.tt-legal .legal-content a {
    color: #0A0A0A;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tt-page.tt-legal .legal-content a:hover {
    color: var(--lime, #a3ff52);
}
.tt-page.tt-legal .legal-content strong {
    color: #0A0A0A;
    font-weight: 700;
}

/* ---- Legal responsive ---- */
@media (max-width: 960px) {
    .tt-page.tt-legal .legal-hero {
        padding: 140px 0 60px;
    }
}
@media (max-width: 600px) {
    .tt-page.tt-legal .legal-hero {
        padding: 120px 0 48px;
    }
    .tt-page.tt-legal .legal-hero h1 {
        font-size: 32px;
    }
    .tt-page.tt-legal .legal-content {
        padding: 60px 0 80px;
    }
}

/* =========================================
   ABOUT PAGE
   ========================================= */

/* -- Hero -- */
.tt-page.tt-about .about-hero {
    background: #0A0A0A;
    padding: 180px 0 100px;
    position: relative;
    overflow: hidden;
}
.tt-page.tt-about .about-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('https://tigerandtype.com/wp-content/uploads/2026/04/tiger_type_hero_011-scaled.png') center/cover no-repeat;
    filter: brightness(0.3);
    z-index: 0;
}
.tt-page.tt-about .about-hero .container {
    position: relative;
    z-index: 1;
}
.tt-page.tt-about .about-hero h1 {
    font-family: 'Gabarito', sans-serif;
    font-size: clamp(48px, 8vw, 110px);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -0.04em;
    color: #ffffff;
    margin: 0 0 24px;
}
.tt-page.tt-about .about-hero .sub {
    font-family: 'Figtree', sans-serif;
    font-size: 19px;
    color: rgba(255,255,255,0.45);
    max-width: 520px;
    line-height: 1.7;
    margin: 0;
}

/* -- Shared label style -- */
.tt-page.tt-about .about-label {
    font-family: 'Gabarito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--electric-blue) !important;
    display: block;
}

/* -- The Studio -- */
.tt-page.tt-about .about-studio {
    background: #ffffff;
    padding: 100px 0;
}
.tt-page.tt-about .about-studio-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 60px;
    align-items: start;
}
.tt-page.tt-about .about-studio-body .lead {
    font-family: 'Figtree', sans-serif;
    font-size: 20px;
    color: #0A0A0A !important;
    line-height: 1.7;
    margin: 0 0 24px;
    font-weight: 500;
}
.tt-page.tt-about .about-studio-body p {
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    color: rgba(10,10,10,0.65) !important;
    line-height: 1.8;
    margin: 0 0 20px;
}

/* -- The Drive -- */
.tt-page.tt-about .about-drives {
    background: #ffffff;
    padding: 100px 0;
}
.tt-page.tt-about .about-drives-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 60px;
    align-items: start;
}
.tt-page.tt-about .about-drives-body p {
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    color: rgba(10,10,10,0.65) !important;
    line-height: 1.8;
    margin: 0 0 20px;
}
.tt-page.tt-about .about-drives-body .highlight {
    font-family: 'Gabarito', sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: #0A0A0A !important;
    line-height: 1.4;
    margin: 32px 0 0;
}

/* -- The Approach -- */
.tt-page.tt-about .about-approach {
    background: var(--off-white);
    padding: 100px 0;
}
.tt-page.tt-about .about-approach-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 60px;
    align-items: start;
}
.tt-page.tt-about .about-approach-body p {
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    color: rgba(10,10,10,0.65) !important;
    line-height: 1.8;
    margin: 0 0 20px;
}

/* -- Bottom CTA -- */
.tt-page.tt-about .about-cta {
    padding: 140px 0;
    text-align: center;
    background: #ffffff;
}
.tt-page.tt-about .about-cta::before {
    display: none;
}
.tt-page.tt-about .about-cta::after {
    display: none;
}
.tt-page.tt-about .about-cta h2 {
    font-family: 'Gabarito', sans-serif;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 900;
    color: var(--black) !important;
    margin: 0 0 16px;
}
.tt-page.tt-about .about-cta p {
    font-family: 'Figtree', sans-serif;
    font-size: 18px;
    color: #444;
    line-height: 1.6;
    margin: 0 0 32px;
}
.tt-page.tt-about .about-cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* -- Testimonials -- */
.tt-page.tt-about .about-testimonials {
    padding: 140px 0;
    background: var(--black);
    position: relative;
    overflow: hidden;
}
.tt-page.tt-about .about-testimonials::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('https://tigerandtype.com/wp-content/uploads/2026/04/tiger_type_hero_012-scaled.png') center/cover no-repeat;
    filter: brightness(0.15);
    z-index: 0;
}
.tt-page.tt-about .about-testimonials .container {
    position: relative;
    z-index: 1;
}
.tt-page.tt-about .about-testimonials h2 {
    text-align: center;
    color: #ffffff !important;
    margin-bottom: 64px;
}
.tt-page.tt-about .about-testimonials .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}
.tt-page.tt-about .about-testimonials .test-card {
    background: var(--electric-blue);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 32px 28px;
}
.tt-page.tt-about .about-testimonials .test-quote {
    font-family: 'Gabarito', sans-serif;
    font-size: 40px;
    font-weight: 900;
    color: var(--lime);
    line-height: 0.6;
    margin-bottom: 12px;
    opacity: 0.6;
}
.tt-page.tt-about .about-testimonials .test-card p {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,0.85) !important;
    margin-bottom: 20px;
}
.tt-page.tt-about .about-testimonials .test-card strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff !important;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 16px;
}

/* ---- About responsive ---- */
@media (max-width: 960px) {
    .tt-page.tt-about .about-hero {
        padding: 140px 0 80px;
    }
    .tt-page.tt-about .about-studio-layout,
    .tt-page.tt-about .about-approach-layout,
    .tt-page.tt-about .about-drives-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .tt-page.tt-about .about-studio,
    .tt-page.tt-about .about-drives,
    .tt-page.tt-about .about-approach {
        padding: 80px 0;
    }
    .tt-page.tt-about .about-testimonials .testimonials-grid {
        grid-template-columns: 1fr 1fr;
    }
    .tt-page.tt-about .about-testimonials {
        padding: 80px 0;
    }
}
@media (max-width: 600px) {
    .tt-page.tt-about .about-hero {
        padding: 120px 0 60px;
    }
    .tt-page.tt-about .about-hero h1 {
        font-size: 36px;
    }
    .tt-page.tt-about .about-studio,
    .tt-page.tt-about .about-drives,
    .tt-page.tt-about .about-approach {
        padding: 60px 0;
    }
    .tt-page.tt-about .about-cta {
        padding: 80px 0;
    }
    .tt-page.tt-about .about-testimonials .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   PORTFOLIO PAGE
   ========================================= */

/* -- Hero (blog-style with ::before background) -- */
.tt-page.tt-portfolio .portfolio-hero {
    background: #0A0A0A;
    padding: 180px 0 100px;
    position: relative;
    overflow: hidden;
}
.tt-page.tt-portfolio .portfolio-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('https://tigerandtype.com/wp-content/uploads/2026/04/tiger_type_hero_005.png') center/cover no-repeat;
    filter: brightness(0.3);
    z-index: 0;
}
.tt-page.tt-portfolio .portfolio-hero .container {
    position: relative;
    z-index: 1;
}
.tt-page.tt-portfolio .portfolio-hero h1 {
    font-family: 'Gabarito', sans-serif;
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 900;
    line-height: 1.05;
    color: #ffffff;
    margin: 0 0 24px;
}
.tt-page.tt-portfolio .portfolio-hero .sub {
    font-family: 'Figtree', sans-serif;
    font-size: 19px;
    color: #ffffff;
    max-width: 560px;
    line-height: 1.7;
    margin: 0 0 48px;
}

/* -- Filter bar (inside hero – matches blog pill style) -- */
.tt-page.tt-portfolio .portfolio-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tt-page.tt-portfolio .portfolio-filter-btn {
    font-family: 'Gabarito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 20px;
    border-radius: 100px;
    border: 1px solid rgba(196,255,53,0.3);
    color: var(--lime);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}
.tt-page.tt-portfolio .portfolio-filter-btn:hover {
    border-color: var(--lime);
    background: var(--lime);
    color: var(--black);
}
.tt-page.tt-portfolio .portfolio-filter-btn.active {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--black);
}

/* -- Tile grid section -- */
.tt-page.tt-portfolio .portfolio-tiles {
    background: #ffffff;
    padding: 60px 0 80px;
}
.tt-page.tt-portfolio .portfolio-tile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

/* -- Tile card -- */
.tt-page.tt-portfolio .tile-card {
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 2px;
}

/* Featured tiles span 2 cols + 2 rows */
.tt-page.tt-portfolio .tile-card.tile-featured {
    grid-column: span 2;
    grid-row: span 2;
}

/* Tile image: fill the card, object-fit cover */
.tt-page.tt-portfolio .tile-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.tt-page.tt-portfolio .tile-card:hover img {
    transform: scale(1.04);
}

/* Placeholder when no featured image yet */
.tt-page.tt-portfolio .tile-placeholder {
    width: 100%;
    height: 100%;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Gabarito', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.15);
    text-align: center;
}
.tt-page.tt-portfolio .tile-featured .tile-placeholder {
    min-height: 440px;
}

/* Placeholder gradient backgrounds */
.tt-page.tt-portfolio .tile-bg-web { background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%); }
.tt-page.tt-portfolio .tile-bg-design { background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%); }
.tt-page.tt-portfolio .tile-bg-social { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); }
.tt-page.tt-portfolio .tile-bg-brand { background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); }
.tt-page.tt-portfolio .tile-bg-seo { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); }

/* -- Hover overlay -- */
.tt-page.tt-portfolio .tile-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,10,10,0.8);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}
.tt-page.tt-portfolio .tile-card:hover .tile-overlay {
    opacity: 1;
}
.tt-page.tt-portfolio .tile-tag {
    display: inline-block;
    font-family: 'Gabarito', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--black);
    background: var(--lime);
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 10px;
    width: fit-content;
}
.tt-page.tt-portfolio .tile-title {
    font-family: 'Gabarito', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin: 0 0 6px;
}
.tt-page.tt-portfolio .tile-featured .tile-title {
    font-size: 28px;
}
.tt-page.tt-portfolio .tile-desc {
    font-family: 'Figtree', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    line-height: 1.5;
    margin: 0;
    max-width: 340px;
}
.tt-page.tt-portfolio .tile-arrow {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 22px;
    color: var(--lime);
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: all 0.3s ease;
}
.tt-page.tt-portfolio .tile-card:hover .tile-arrow {
    opacity: 1;
    transform: translate(0, 0);
}

/* ---- Portfolio responsive ---- */
@media (max-width: 960px) {
    .tt-page.tt-portfolio .portfolio-hero {
        padding: 140px 0 80px;
    }
    .tt-page.tt-portfolio .portfolio-tile-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .tt-page.tt-portfolio .tile-featured .tile-title {
        font-size: 22px;
    }
}
@media (max-width: 700px) {
    .tt-page.tt-portfolio .portfolio-tile-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tt-page.tt-portfolio .tile-card.tile-featured {
        grid-column: span 2;
        grid-row: span 1;
    }
    .tt-page.tt-portfolio .tile-featured .tile-placeholder {
        min-height: 280px;
    }
}
@media (max-width: 600px) {
    .tt-page.tt-portfolio .portfolio-hero {
        padding: 120px 0 64px;
    }
    .tt-page.tt-portfolio .portfolio-hero h1 {
        font-size: 36px;
    }
    .tt-page.tt-portfolio .portfolio-hero .sub {
        margin-bottom: 32px;
    }
    .tt-page.tt-portfolio .portfolio-filter-bar {
        gap: 6px;
    }
    .tt-page.tt-portfolio .portfolio-filter-btn {
        font-size: 11px;
        padding: 6px 14px;
    }
    .tt-page.tt-portfolio .portfolio-tile-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }
    .tt-page.tt-portfolio .tile-overlay {
        padding: 16px;
    }
    .tt-page.tt-portfolio .tile-title {
        font-size: 16px;
    }
    .tt-page.tt-portfolio .tile-featured .tile-title {
        font-size: 18px;
    }
    .tt-page.tt-portfolio .tile-desc {
        display: none;
    }
}

/* =========================================
   SINGLE PROJECT (Case Study)
   ========================================= */

/* -- Hero -- */
.tt-project-single .project-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: flex-end;
    background: var(--black);
    overflow: hidden;
}
.tt-project-single .project-hero-img {
    position: absolute;
    inset: 0;
}
.tt-project-single .project-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.45);
}
.tt-project-single .project-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.3) 50%, transparent 100%);
    z-index: 2;
}
.tt-project-single .project-hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 80px 0 64px;
}
.tt-project-single .project-hero-content h1 {
    font-family: 'Gabarito', sans-serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.1;
    margin: 0;
}
.tt-project-single .project-client {
    font-family: 'Figtree', sans-serif;
    font-size: 18px;
    color: rgba(255,255,255,0.6);
    margin: 12px 0 0;
}

/* -- Meta bar -- */
.tt-project-single .project-meta-bar {
    background: #ffffff;
    border-bottom: 1px solid #e8e8e8;
    padding: 32px 0;
}
.tt-project-single .project-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
}
.tt-project-single .project-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tt-project-single .project-meta-label {
    font-family: 'Figtree', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(10,10,10,0.35);
}
.tt-project-single .project-meta-value {
    font-family: 'Figtree', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #0A0A0A;
}
.tt-project-single .project-meta-link {
    font-family: 'Figtree', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--electric-blue);
    text-decoration: none;
    transition: opacity 0.2s;
}
.tt-project-single .project-meta-link:hover {
    opacity: 0.7;
}

/* -- Project body -- */
.tt-project-single .project-body {
    background: #ffffff;
    padding: 80px 0 60px;
}
.tt-project-single .project-content {
    color: rgba(10,10,10,0.7);
    font-family: 'Figtree', sans-serif;
    font-size: 17px;
    line-height: 1.8;
    text-align: left;
}
.tt-project-single .project-content h2,
.tt-project-single .project-content h3 {
    font-family: 'Gabarito', sans-serif;
    color: #0A0A0A;
    margin: 48px 0 16px;
}
.tt-project-single .project-content h2 {
    font-size: 28px;
    font-weight: 800;
}
.tt-project-single .project-content h3 {
    font-size: 22px;
    font-weight: 700;
}
.tt-project-single .project-content p {
    margin: 0 0 24px;
}
.tt-project-single .project-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 32px 0;
}
.tt-project-single .project-content ul,
.tt-project-single .project-content ol {
    padding-left: 24px;
    margin: 0 0 24px;
}
.tt-project-single .project-content li {
    margin-bottom: 8px;
}
.tt-project-single .project-content blockquote {
    border-left: 3px solid var(--electric-blue);
    padding: 16px 24px;
    margin: 32px 0;
    background: rgba(91,108,240,0.04);
    font-style: italic;
    color: rgba(10,10,10,0.5);
}

/* -- Gallery -- */
.tt-project-single .project-gallery {
    background: #ffffff;
    padding: 0 0 80px;
}
.tt-project-single .project-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.tt-project-single .project-gallery-item img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

/* -- Project nav -- */
.tt-project-single .project-nav {
    background: #ffffff;
    border-top: 1px solid #e8e8e8;
    padding: 40px 0;
}
.tt-project-single .project-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.tt-project-single .project-nav-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 280px;
    transition: opacity 0.2s;
}
.tt-project-single .project-nav-link:hover {
    opacity: 0.7;
}
.tt-project-single .project-nav-prev {
    text-align: left;
}
.tt-project-single .project-nav-next {
    text-align: right;
}
.tt-project-single .project-nav-label {
    font-family: 'Figtree', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(10,10,10,0.35);
}
.tt-project-single .project-nav-title {
    font-family: 'Gabarito', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0A0A0A;
}
.tt-project-single .project-nav-all {
    font-family: 'Figtree', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--electric-blue);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: opacity 0.2s;
}
.tt-project-single .project-nav-all:hover {
    opacity: 0.7;
}



/* -- Gallery heading + lightbox -- */
.tt-project-single .project-gallery-heading {
    font-family: 'Gabarito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(10,10,10,0.3);
    margin: 0 0 24px;
}

/* Lightbox */
.tt-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10,10,10,0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.tt-lightbox.active {
    opacity: 1;
    pointer-events: auto;
}
.tt-lightbox img {
    max-width: 90vw;
    max-height: 88vh;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    cursor: default;
}
.tt-lightbox-close {
    position: absolute;
    top: 24px;
    right: 28px;
    font-family: 'Gabarito', sans-serif;
    font-size: 32px;
    font-weight: 300;
    color: #ffffff;
    cursor: pointer;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.2s;
    z-index: 10000;
}
.tt-lightbox-close:hover {
    opacity: 1;
}
.tt-lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 48px;
    color: #ffffff;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    z-index: 10000;
    user-select: none;
    line-height: 1;
    padding: 16px;
}
.tt-lightbox-arrow:hover {
    opacity: 1;
}
.tt-lightbox-prev {
    left: 16px;
}
.tt-lightbox-next {
    right: 16px;
}
@media (max-width: 768px) {
    .tt-lightbox-arrow { font-size: 36px; padding: 12px; }
    .tt-lightbox-prev  { left: 4px; }
    .tt-lightbox-next  { right: 4px; }
}
.tt-project-single .project-gallery-item {
    cursor: zoom-in;
}

/* -- Compact end-page CTA -- */
.tt-project-single .project-cta {
    background: #f0f0f0;
    padding: 56px 0;
}
.tt-project-single .project-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
.tt-project-single .project-cta-text h3 {
    font-family: 'Gabarito', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #0A0A0A;
    margin: 0 0 6px;
}
.tt-project-single .project-cta-text p {
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    color: rgba(10,10,10,0.5);
    margin: 0;
}
.tt-project-single .project-cta-buttons {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}
.tt-project-single .project-cta .btn-dark {
    background: #0A0A0A;
    color: #ffffff;
    font-family: 'Gabarito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 14px 28px;
    border: none;
    border-radius: 2px;
    text-decoration: none;
    transition: opacity 0.2s;
}
.tt-project-single .project-cta .btn-dark:hover {
    opacity: 0.85;
}
.tt-project-single .project-cta .btn-outline {
    background: transparent;
    color: #0A0A0A;
    font-family: 'Gabarito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 14px 28px;
    border: 1px solid rgba(10,10,10,0.2);
    border-radius: 2px;
    text-decoration: none;
    transition: all 0.2s;
}
.tt-project-single .project-cta .btn-outline:hover {
    border-color: #0A0A0A;
}

/* ---- Single project responsive ---- */
@media (max-width: 960px) {
    .tt-project-single .project-hero {
        min-height: 400px;
    }
    .tt-project-single .project-meta-row {
        gap: 32px;
    }
}
@media (max-width: 600px) {
    .tt-project-single .project-hero {
        min-height: 320px;
    }
    .tt-project-single .project-hero-content {
        padding: 60px 0 48px;
    }
    .tt-project-single .project-meta-row {
        gap: 24px;
    }
    .tt-project-single .project-gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .tt-project-single .project-nav-row {
        flex-direction: column;
        gap: 16px;
    }
    .tt-project-single .project-nav-link {
        max-width: 100%;
        text-align: center !important;
    }
    .tt-project-single .project-cta-inner {
        flex-direction: column;
        text-align: center;
    }
    .tt-project-single .project-cta-buttons {
        flex-direction: column;
        width: 100%;
    }
    .tt-project-single .project-cta .btn-dark,
    .tt-project-single .project-cta .btn-outline {
        text-align: center;
    }
}


/* =========================================
   SINGLE POST (Blog)
   ========================================= */

/* -- Hero image -- */
.tt-page.tt-post .post-hero {
    width: 100%;
    max-height: 520px;
    overflow: hidden;
}
.tt-page.tt-post .post-hero-img img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
}

/* -- Article -- */
.tt-page.tt-post .post-article {
    background: #ffffff;
    padding: 80px 0 60px;
}

/* -- Two-column layout: main content + sidebar -- */
.tt-page.tt-post .post-layout {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 268px;
    gap: 0 64px;
    align-items: start;
}
.tt-page.tt-post .post-main {
    min-width: 0; /* prevent grid blowout on long words */
}

/* -- Sidebar -- */
.tt-page.tt-post .post-sidebar {
    position: sticky;
    top: 96px; /* clears the 72px fixed header + breathing room */
}
.tt-page.tt-post .sidebar-widget {
    margin-bottom: 44px;
}
.tt-page.tt-post .sidebar-widget:last-child {
    margin-bottom: 0;
}
.tt-page.tt-post .sidebar-heading {
    font-family: 'Gabarito', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #0A0A0A;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #C4FF35;
    display: block;
}

/* Category list */
.tt-page.tt-post .sidebar-cats {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tt-page.tt-post .sidebar-cats li {
    border-bottom: 1px solid rgba(10,10,10,0.07);
}
.tt-page.tt-post .sidebar-cat-link {
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0A0A0A !important;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    transition: color 0.15s ease;
}
.tt-page.tt-post .sidebar-cat-link:hover {
    color: var(--electric-blue) !important;
}
.tt-page.tt-post .sidebar-cat-count {
    font-family: 'Figtree', sans-serif;
    font-size: 12px;
    color: rgba(10,10,10,0.28) !important;
}

/* Recent articles list */
.tt-page.tt-post .sidebar-recent {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tt-page.tt-post .sidebar-recent-item {
    padding: 16px 0;
    border-bottom: 1px solid rgba(10,10,10,0.07);
}
.tt-page.tt-post .sidebar-recent-item:first-child {
    padding-top: 0;
}
.tt-page.tt-post .sidebar-recent-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.tt-page.tt-post .sidebar-recent-link {
    text-decoration: none;
    display: block;
}
.tt-page.tt-post .sidebar-recent-cat {
    font-family: 'Gabarito', sans-serif;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #0A0A0A !important;
    background: #C4FF35;
    padding: 2px 8px;
    border-radius: 100px;
    display: inline-block;
    margin-bottom: 6px;
}
.tt-page.tt-post .sidebar-recent-title {
    font-family: 'Gabarito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0A0A0A !important;
    line-height: 1.35;
    display: block;
    margin-bottom: 5px;
    transition: color 0.15s ease;
}
.tt-page.tt-post .sidebar-recent-link:hover .sidebar-recent-title {
    color: var(--electric-blue) !important;
}
.tt-page.tt-post .sidebar-recent-date {
    font-family: 'Figtree', sans-serif;
    font-size: 11px;
    color: rgba(10,10,10,0.32) !important;
    display: block;
}

/* -- Meta (category + date) -- */
.tt-page.tt-post .post-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}
.tt-page.tt-post .post-category {
    font-family: 'Gabarito', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0A0A0A !important;
    background: var(--lime, #a3ff52);
    padding: 4px 14px;
    border-radius: 100px;
    text-decoration: none;
}
.tt-page.tt-post .post-date {
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    color: rgba(10,10,10,0.4) !important;
}

/* -- Title -- */
.tt-page.tt-post .post-title {
    font-family: 'Gabarito', sans-serif;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 900;
    color: #0A0A0A !important;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 48px;
}

/* -- Body content -- */
.tt-page.tt-post .post-body {
    font-family: 'Figtree', sans-serif;
    font-size: 17px;
    color: rgba(10,10,10,0.7) !important;
    line-height: 1.85;
}
.tt-page.tt-post .post-body p {
    margin: 0 0 24px;
    color: inherit !important;
}
.tt-page.tt-post .post-body h2 {
    font-family: 'Gabarito', sans-serif;
    font-size: 28px;
    font-weight: 900;
    color: #0A0A0A !important;
    margin: 48px 0 16px;
    line-height: 1.2;
}
.tt-page.tt-post .post-body h3 {
    font-family: 'Gabarito', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #0A0A0A !important;
    margin: 40px 0 12px;
    line-height: 1.25;
}
.tt-page.tt-post .post-body h4 {
    font-family: 'Gabarito', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #0A0A0A !important;
    margin: 32px 0 12px;
}
.tt-page.tt-post .post-body a {
    color: #0A0A0A !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tt-page.tt-post .post-body a:hover {
    color: var(--lime, #a3ff52) !important;
}
.tt-page.tt-post .post-body ul,
.tt-page.tt-post .post-body ol {
    margin: 0 0 24px;
    padding-left: 24px;
    color: inherit !important;
}
.tt-page.tt-post .post-body li {
    margin-bottom: 8px;
    color: inherit !important;
}
.tt-page.tt-post .post-body blockquote {
    border-left: 4px solid var(--lime, #a3ff52);
    margin: 32px 0;
    padding: 16px 24px;
    background: #f5f5f3;
    border-radius: 0 8px 8px 0;
}
.tt-page.tt-post .post-body blockquote p {
    font-size: 18px;
    font-style: italic;
    color: #0A0A0A !important;
    margin: 0;
}
.tt-page.tt-post .post-body img {
    border-radius: 12px;
    margin: 32px 0;
}
.tt-page.tt-post .post-body figure {
    margin: 32px 0;
}
.tt-page.tt-post .post-body figcaption {
    font-size: 13px;
    color: rgba(10,10,10,0.4) !important;
    text-align: center;
    margin-top: 8px;
}

/* -- Post navigation -- */
.tt-page.tt-post .post-nav {
    background: #f5f5f3;
    padding: 48px 0;
}
.tt-page.tt-post .post-nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.tt-page.tt-post .post-nav-link {
    text-decoration: none;
    display: block;
    padding: 24px;
    background: #ffffff;
    border-radius: 12px;
    transition: box-shadow 0.2s ease;
}
.tt-page.tt-post .post-nav-link:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.tt-page.tt-post .post-nav-next {
    text-align: right;
    grid-column: 2;
}
.tt-page.tt-post .post-nav-label {
    font-family: 'Gabarito', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lime, #a3ff52);
    display: block;
    margin-bottom: 8px;
}
.tt-page.tt-post .post-nav-title {
    font-family: 'Gabarito', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #0A0A0A !important;
    line-height: 1.3;
}

/* -- Bottom CTA -- */
.tt-page.tt-post .post-cta {
    background: var(--electric-blue);
    padding: 80px 0;
    text-align: center;
    position: relative;
    z-index: 1;
    margin-bottom: 0;
}
.tt-page.tt-post .post-cta h2 {
    font-family: 'Gabarito', sans-serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 900;
    color: #ffffff !important;
    margin: 0 0 12px;
}
.tt-page.tt-post .post-cta p {
    font-family: 'Figtree', sans-serif;
    font-size: 17px;
    color: rgba(255,255,255,0.5) !important;
    margin: 0 0 28px;
}

/* ---- Single post responsive ---- */
@media (max-width: 960px) {
    .tt-page.tt-post .post-hero-img img {
        height: 360px;
    }
    /* Sidebar moves below main content */
    .tt-page.tt-post .post-layout {
        grid-template-columns: 1fr;
        gap: 56px 0;
        padding: 0 28px;
    }
    .tt-page.tt-post .post-sidebar {
        position: static;
        border-top: 2px solid rgba(10,10,10,0.07);
        padding-top: 48px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 48px;
    }
}
@media (max-width: 600px) {
    .tt-page.tt-post .post-hero-img img {
        height: 240px;
    }
    .tt-page.tt-post .post-article {
        padding: 48px 0 40px;
    }
    .tt-page.tt-post .post-layout {
        padding: 0 20px;
    }
    .tt-page.tt-post .post-title {
        font-size: 28px;
    }
    /* Sidebar stacks to single column on mobile */
    .tt-page.tt-post .post-sidebar {
        grid-template-columns: 1fr;
    }
    .tt-page.tt-post .post-nav-links {
        grid-template-columns: 1fr;
    }
    .tt-page.tt-post .post-nav-next {
        text-align: left;
        grid-column: 1;
    }
    .tt-page.tt-post .post-cta {
        padding: 60px 0;
    }
}

/* =========================================
   BLOG INDEX / ARCHIVE
   ========================================= */

/* -- Hero -- */
.tt-page.tt-blog .blog-hero {
    background: #0A0A0A;
    padding: 180px 0 100px;
    position: relative;
    overflow: hidden;
}
.tt-page.tt-blog .blog-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('https://tigerandtype.com/wp-content/uploads/2026/04/tigertype_inbrief.jpg') center/cover no-repeat;
    filter: brightness(0.3);
    z-index: 0;
}
.tt-page.tt-blog .blog-hero .container {
    position: relative;
    z-index: 1;
}
.tt-page.tt-blog .blog-hero h1 {
    font-family: 'Gabarito', sans-serif;
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 900;
    line-height: 1.05;
    color: #ffffff;
    margin: 0 0 24px;
}
.tt-page.tt-blog .blog-hero .sub {
    font-family: 'Figtree', sans-serif;
    font-size: 19px;
    color: #ffffff;
    max-width: 560px;
    line-height: 1.7;
    margin: 0 0 48px;
}

/* -- Category filter bar (inside hero) -- */
.tt-page.tt-blog .blog-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tt-page.tt-blog .blog-filter-btn {
    font-family: 'Gabarito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 100px;
    border: 1px solid rgba(91,108,240,0.3);
    color: var(--electric-blue) !important;
    background: transparent;
    transition: all 0.2s ease;
}
.tt-page.tt-blog .blog-filter-btn:hover {
    border-color: var(--electric-blue);
    background: var(--electric-blue);
    color: #ffffff !important;
}
.tt-page.tt-blog .blog-filter-btn.active {
    background: var(--electric-blue);
    border-color: var(--electric-blue);
    color: #ffffff !important;
}

/* -- Grid section -- */
.tt-page.tt-blog .blog-grid-section {
    background: #ffffff;
    padding: 72px 0 100px;
}

/* -- 3-column grid with alternating wide-card rows -- */
.tt-page.tt-blog .blog-grid-all {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px 36px;
}

/* Wide card spans 2 of the 3 columns */
.tt-page.tt-blog .blog-card-wide {
    grid-column: span 2;
}

/* -- Card: no box, text sits freely below image -- */
.tt-page.tt-blog .blog-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}
.tt-page.tt-blog .blog-card:hover {
    box-shadow: none;
    transform: none;
}

/* -- Thumbnail -- */
.tt-page.tt-blog .blog-card-thumb {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #f0f0ee;
    flex-shrink: 0;
    border-radius: 4px;
}
.tt-page.tt-blog .blog-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
}
.tt-page.tt-blog .blog-card:hover .blog-card-thumb img {
    transform: scale(1.04);
}
.tt-page.tt-blog .blog-card-thumb-empty {
    background: #e8e8e6;
    border-radius: 4px;
}

/* -- Card info: free text, no box -- */
.tt-page.tt-blog .blog-card-info {
    padding: 18px 0 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* -- Category pill (bright lime, kept as is) -- */
.tt-page.tt-blog .blog-card-cat {
    font-family: 'Gabarito', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #0A0A0A !important;
    background: #C4FF35;
    padding: 4px 12px;
    border-radius: 100px;
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 14px;
}

/* -- Title: big and arty -- */
.tt-page.tt-blog .blog-card-title {
    font-family: 'Gabarito', sans-serif;
    font-size: 22px;
    font-weight: 900;
    color: #0A0A0A !important;
    line-height: 1.18;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}

/* Wide card gets an even bigger, more editorial title */
.tt-page.tt-blog .blog-card-wide .blog-card-title {
    font-size: clamp(26px, 2.6vw, 36px);
    line-height: 1.08;
    margin: 0 0 14px;
}

/* -- Excerpt -- */
.tt-page.tt-blog .blog-card-excerpt {
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    color: rgba(10,10,10,0.55) !important;
    line-height: 1.65;
    margin: 0 0 20px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -- Meta: date + read-on link -- */
.tt-page.tt-blog .blog-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 2px;
}
.tt-page.tt-blog .blog-card-date {
    font-family: 'Figtree', sans-serif;
    font-size: 12px;
    color: rgba(10,10,10,0.35) !important;
    display: block;
}

/* "Read on" link — D&L-style with decorative rule prefix */
.tt-page.tt-blog .blog-card-read-on {
    font-family: 'Gabarito', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0A0A0A !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    transition: gap 0.2s ease;
}
.tt-page.tt-blog .blog-card-read-on::before {
    content: '';
    display: block;
    width: 22px;
    height: 1px;
    background: currentColor;
    flex-shrink: 0;
    transition: width 0.2s ease;
}
.tt-page.tt-blog .blog-card:hover .blog-card-read-on::before {
    width: 34px;
}

/* -- Empty state -- */
.tt-page.tt-blog .blog-empty {
    text-align: center;
    padding: 80px 0;
}
.tt-page.tt-blog .blog-empty p {
    font-family: 'Figtree', sans-serif;
    font-size: 17px;
    color: rgba(10,10,10,0.4) !important;
}

/* -- Pagination -- */
.tt-page.tt-blog .blog-pagination {
    margin-top: 72px;
    text-align: center;
}
.tt-page.tt-blog .blog-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tt-page.tt-blog .blog-pagination li {
    display: inline-block;
}
.tt-page.tt-blog .blog-pagination a,
.tt-page.tt-blog .blog-pagination span {
    font-family: 'Gabarito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 100px;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s ease;
}
.tt-page.tt-blog .blog-pagination a {
    color: #0A0A0A;
    border: 1px solid rgba(10,10,10,0.12);
}
.tt-page.tt-blog .blog-pagination a:hover {
    background: #f5f5f3;
}
.tt-page.tt-blog .blog-pagination .current {
    background: #0A0A0A;
    color: #ffffff;
}

/* ---- Blog index responsive ---- */
@media (max-width: 960px) {
    .tt-page.tt-blog .blog-hero {
        padding: 140px 0 80px;
    }
    /* Collapse to 2-col; wide cards still span 2 */
    .tt-page.tt-blog .blog-grid-all {
        grid-template-columns: repeat(2, 1fr);
        gap: 44px 24px;
    }
}
@media (max-width: 600px) {
    .tt-page.tt-blog .blog-hero {
        padding: 120px 0 60px;
    }
    .tt-page.tt-blog .blog-hero h1 {
        font-size: 36px;
    }
    /* Single column on mobile — all cards equal width */
    .tt-page.tt-blog .blog-grid-all {
        grid-template-columns: 1fr;
        gap: 44px;
    }
    .tt-page.tt-blog .blog-card-wide {
        grid-column: span 1;
    }
    .tt-page.tt-blog .blog-card-wide .blog-card-title {
        font-size: 26px;
    }
    .tt-page.tt-blog .blog-grid-section {
        padding: 48px 0 80px;
    }
    .tt-page.tt-blog .blog-hero .blog-filter-bar {
        margin-top: 32px;
    }
    .tt-page.tt-blog .blog-filter-btn {
        font-size: 12px;
        padding: 6px 14px;
    }
}


/* =========================================
   CATEGORY POSTS SHORTCODE (service pages)
   ========================================= */
.tt-cat-posts {
    padding: 120px 0;
    background: var(--off-white);
}
.tt-cat-posts h2 {
    font-family: 'Gabarito', sans-serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 900;
    color: #0A0A0A;
    margin: 0 0 48px;
    text-align: center;
    line-height: 1.02;
}
.tt-cat-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.tt-cat-post-card {
    display: block;
    text-decoration: none;
    background: #ffffff;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid rgba(10,10,10,0.06);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.tt-cat-post-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    transform: translateY(-4px);
}
.tt-cat-post-thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f5f5f3;
}
.tt-cat-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.tt-cat-post-card:hover .tt-cat-post-thumb img {
    transform: scale(1.03);
}
.tt-cat-post-thumb-empty {
    width: 100%;
    height: 100%;
    background: #e8e8e4;
}
.tt-cat-post-info {
    padding: 24px 28px 28px;
}
.tt-cat-post-cat {
    font-family: 'Gabarito', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--electric-blue);
    background: rgba(91,108,240,0.08);
    padding: 3px 10px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 12px;
}
.tt-cat-post-title {
    font-family: 'Gabarito', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #0A0A0A;
    line-height: 1.25;
    margin: 0 0 8px;
}
.tt-cat-post-excerpt {
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    color: rgba(10,10,10,0.5);
    line-height: 1.6;
    margin: 0 0 16px;
}
.tt-cat-post-date {
    font-family: 'Figtree', sans-serif;
    font-size: 13px;
    color: rgba(10,10,10,0.3);
}
.tt-cat-posts-cta {
    text-align: center;
    margin-top: 48px;
}

/* -- Responsive -- */
@media (max-width: 900px) {
    .tt-cat-posts-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .tt-cat-posts {
        padding: 80px 0;
    }
    .tt-cat-posts-grid {
        grid-template-columns: 1fr;
    }
    .tt-cat-posts h2 {
        margin-bottom: 32px;
    }
}


/* =====================================================
   EMAIL MARKETING PAGE
   ===================================================== */

/* -- Electric blue accents -- */
.tt-email .ds-number {
    color: var(--electric-blue);
    opacity: 0.5;
}
.tt-email .intro-body .pill {
    background: rgba(91,108,240,0.1);
    color: var(--electric-blue);
}
.tt-email .editorial .label {
    color: var(--electric-blue);
}
.tt-email .process-header .label {
    color: var(--electric-blue);
}
.tt-email .process-step:hover {
    border-color: var(--electric-blue);
}


/* =====================================================
   PILLAR PAGES
   -----------------------------------------------------
   Used by top-level evergreen resource pages, e.g.
   /seo-for-south-african-small-businesses
   Wrapper: .tt-page.tt-pillar (+ a topic modifier like
   .tt-pillar-seo for any topic-specific tweaks).
   ===================================================== */

/* ---- Aliases (so pillar HTML can use its own naming) ---- */
.tt-page .container-narrow {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 48px;
}
.tt-page .btn-outline-d {
    background: transparent;
    color: var(--black);
    border: 1px solid var(--black);
}
.tt-page .btn-outline-d:hover {
    background: var(--black);
    color: var(--white);
}

/* ---- Eyebrow + lede shared label patterns ---- */
.tt-pillar .eyebrow {
    display: inline-block;
    font-family: 'Gabarito', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--black);
    background: var(--lime);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 32px;
}
.tt-pillar .lede {
    font-size: clamp(19px, 1.6vw, 24px);
    color: rgba(255,255,255,0.75);
    max-width: 760px;
    margin-top: 32px;
    line-height: 1.6;
    font-weight: 400;
}

/* ---- Anchor scroll offset (header is fixed at 72px) ---- */
.tt-pillar [id] {
    scroll-margin-top: 96px;
}

/* ---- Pillar base ---- */
.tt-pillar {
    background: var(--white);
}

/* ---- HERO (dark, image background, matches site hero treatment) ---- */
.tt-pillar .pillar-hero {
    background: var(--black);
    color: var(--white);
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 180px 0 110px;
    position: relative;
    overflow: hidden;
}
.tt-pillar .pillar-hero-img {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    filter: grayscale(100%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}
.tt-pillar .pillar-hero-gradient {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60%;
    background: linear-gradient(to top, var(--black) 15%, transparent);
    z-index: 1;
}
.tt-pillar .pillar-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
}
.tt-pillar .pillar-hero h1 {
    font-size: clamp(42px, 6.4vw, 92px);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: -0.03em;
    max-width: 1000px;
    color: var(--white);
}

/* ---- INTRO ---- */
.tt-pillar .pillar-intro {
    padding: 100px 0 40px;
}
.tt-pillar .pillar-intro p {
    font-size: 19px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 24px;
}
.tt-pillar .pillar-intro p:last-child {
    margin-bottom: 0;
}

/* ---- TABLE OF CONTENTS ---- */
.tt-pillar .pillar-toc {
    padding: 40px 0 80px;
}
.tt-pillar .toc-box {
    background: var(--off-white);
    border: 1px solid var(--grey);
    border-left: 4px solid var(--lime);
    padding: 36px 40px 40px;
    border-radius: 6px;
}
.tt-pillar .toc-label {
    font-family: 'Gabarito', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--muted);
    margin-bottom: 20px;
}
.tt-pillar .toc-list {
    list-style: none;
    counter-reset: toc;
    padding: 0;
    margin: 0;
    column-count: 2;
    column-gap: 48px;
}
.tt-pillar .toc-list li {
    counter-increment: toc;
    padding: 10px 0;
    break-inside: avoid;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.tt-pillar .toc-list li:last-child {
    border-bottom: none;
}
.tt-pillar .toc-list li::before {
    content: counter(toc, decimal-leading-zero);
    font-family: 'Gabarito', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    margin-right: 12px;
    letter-spacing: 1px;
}
.tt-pillar .toc-list a {
    font-size: 17px;
    font-weight: 500;
    color: var(--black);
    transition: color 0.2s ease;
    line-height: 1.5;
}
.tt-pillar .toc-list a:hover {
    color: var(--charcoal);
    text-decoration: underline;
    text-decoration-color: var(--lime);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

/* ---- PROSE SECTIONS ---- */
.tt-pillar .pillar-section {
    padding: 80px 0;
}
.tt-pillar .pillar-section h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 32px;
    color: var(--black);
}
.tt-pillar .pillar-section h3 {
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 40px;
    margin-bottom: 14px;
    color: var(--black);
}
.tt-pillar .pillar-section p {
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 22px;
}
.tt-pillar .pillar-section p:last-child {
    margin-bottom: 0;
}
.tt-pillar .pillar-section ul,
.tt-pillar .pillar-section ol {
    margin: 0 0 28px 0;
    padding-left: 0;
    list-style: none;
}
.tt-pillar .pillar-section ul li,
.tt-pillar .pillar-section ol li {
    position: relative;
    padding-left: 28px;
    font-size: 18px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 14px;
}
.tt-pillar .pillar-section ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 14px;
    height: 3px;
    background: var(--lime);
}
.tt-pillar .pillar-section ol {
    counter-reset: prose-ol;
}
.tt-pillar .pillar-section ol li {
    counter-increment: prose-ol;
}
.tt-pillar .pillar-section ol li::before {
    content: counter(prose-ol) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-family: 'Gabarito', sans-serif;
    font-weight: 700;
    color: var(--black);
}
.tt-pillar .pillar-section li strong {
    color: var(--black);
    font-weight: 600;
}
.tt-pillar .pillar-section a {
    color: var(--black);
    text-decoration: underline;
    text-decoration-color: var(--lime);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: text-decoration-thickness 0.2s ease;
}
.tt-pillar .pillar-section a:hover {
    text-decoration-thickness: 4px;
}
.tt-pillar .pillar-section code {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
    background: var(--off-white);
    border: 1px solid var(--grey);
    padding: 1px 7px;
    border-radius: 3px;
    color: var(--charcoal);
}
.tt-pillar .pillar-section strong {
    color: var(--black);
    font-weight: 600;
}

/* ---- SECTION MODIFIER: HIGHLIGHT (off-white block) ---- */
.tt-pillar .pillar-section.pillar-highlight {
    background: var(--off-white);
}

/* ---- SECTION MODIFIER: FEATURE (subtle lime-tinted background) ---- */
.tt-pillar .pillar-section.pillar-feature {
    background: linear-gradient(180deg, #FAFFEB 0%, var(--off-white) 100%);
    position: relative;
}

/* ---- SECTION HEAD / LEAD / FOOT ---- */
.tt-pillar .pillar-section-head {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 56px;
}
.tt-pillar .pillar-section-head h2 {
    margin-bottom: 20px;
}
.tt-pillar .pillar-section-lead {
    font-size: clamp(18px, 1.4vw, 21px);
    color: #333;
    line-height: 1.65;
    margin: 0;
}
.tt-pillar .pillar-section-foot {
    text-align: center;
    font-size: 17px;
    color: #555;
    margin-top: 48px;
    font-style: italic;
}

/* ---- PILLAR PROSE WRAPPER (constrains paragraphs in wide sections) ---- */
.tt-pillar .pillar-prose {
    max-width: 820px;
    margin: 0 auto 48px;
}
.tt-pillar .pillar-prose:last-child {
    margin-bottom: 0;
}
.tt-pillar .pillar-prose p {
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 22px;
}
.tt-pillar .pillar-prose p:last-child {
    margin-bottom: 0;
}

/* Centre variant — used around card grids on feature sections */
.tt-pillar .pillar-prose-center {
    text-align: center;
}

/* ---- CARD GRID ---- */
.tt-pillar .pillar-cards {
    display: grid;
    gap: 28px;
    margin: 0 0 48px;
}
.tt-pillar .pillar-cards-3 {
    grid-template-columns: repeat(3, 1fr);
}
.tt-pillar .pillar-cards:last-child {
    margin-bottom: 0;
}
.tt-pillar .pillar-card {
    background: var(--white);
    border: 1px solid var(--grey);
    border-radius: 6px;
    padding: 40px 32px 36px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.tt-pillar .pillar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0,0,0,0.06);
    border-color: var(--lime);
}
.tt-pillar .pillar-card .card-num {
    display: block;
    font-family: 'Gabarito', sans-serif;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    color: var(--lime);
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}
.tt-pillar .pillar-card h3 {
    font-family: 'Gabarito', sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--black);
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}
.tt-pillar .pillar-card p {
    font-size: 16px;
    line-height: 1.7;
    color: #444;
    margin: 0 0 12px;
    padding: 0;
}
.tt-pillar .pillar-card p:last-child {
    margin-bottom: 0;
}
.tt-pillar .pillar-card .card-link {
    margin-top: auto;
    padding-top: 20px;
    font-size: 15px;
    font-weight: 600;
}
.tt-pillar .pillar-card .card-link a {
    color: var(--black);
    text-decoration: none;
    border-bottom: 2px solid var(--lime);
    padding-bottom: 2px;
    transition: border-bottom-width 0.2s ease;
}
.tt-pillar .pillar-card .card-link a:hover {
    border-bottom-width: 3px;
}

/* ---- BOTTOM CTA ---- */
.tt-pillar .pillar-cta {
    background: var(--black);
    color: var(--white);
    padding: 140px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.tt-pillar .pillar-cta h2 {
    font-size: clamp(40px, 6vw, 80px);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.02em;
    max-width: 800px;
    margin: 0 auto 32px;
    color: var(--white);
}
.tt-pillar .pillar-cta p {
    font-size: 19px;
    color: rgba(255,255,255,0.6);
    max-width: 640px;
    margin: 0 auto 48px;
    line-height: 1.7;
}
.tt-pillar .pillar-cta .ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.tt-pillar .pillar-cta .btn-outline-d {
    color: var(--white);
    border-color: rgba(255,255,255,0.3);
}
.tt-pillar .pillar-cta .btn-outline-d:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.6);
    color: var(--white);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .tt-pillar .pillar-cards-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .tt-page .container-narrow {
        padding: 0 24px;
    }
    .tt-pillar .pillar-hero {
        padding: 130px 0 70px;
        min-height: auto;
    }
    .tt-pillar .pillar-intro {
        padding: 60px 0 24px;
    }
    .tt-pillar .pillar-toc {
        padding: 24px 0 50px;
    }
    .tt-pillar .toc-box {
        padding: 28px 24px 30px;
    }
    .tt-pillar .toc-list {
        column-count: 1;
    }
    .tt-pillar .pillar-section {
        padding: 56px 0;
    }
    .tt-pillar .pillar-section-head {
        margin-bottom: 36px;
    }
    .tt-pillar .pillar-cards {
        gap: 20px;
    }
    .tt-pillar .pillar-cards-3 {
        grid-template-columns: 1fr;
    }
    .tt-pillar .pillar-card {
        padding: 32px 26px 28px;
    }
    .tt-pillar .pillar-card .card-num {
        font-size: 34px;
        margin-bottom: 14px;
    }
    .tt-pillar .pillar-cta {
        padding: 90px 0;
    }
    .tt-pillar .pillar-cta .ctas {
        flex-direction: column;
        align-items: stretch;
    }
}


/* =========================================
   MEGA MENU (Header nav dropdowns)
   Scoped to .has-dropdown and .mega-menu only.
   Does not modify existing .site-header / .site-nav / .nav-cta styles.
   ========================================= */

/* Positioning context so all three mega menus open in the same spot */
.header-inner { position: relative; }

/* Override default li position so mega menu can anchor to .header-inner */
.site-nav .nav-menu li.has-dropdown { position: static; }

/* Trigger caret on parent items */
.site-nav .nav-menu li.has-dropdown > .nav-trigger::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid rgba(10, 10, 10, 0.4);
    border-bottom: 1.5px solid rgba(10, 10, 10, 0.4);
    transform: rotate(45deg);
    margin-left: 6px;
    margin-bottom: 2px;
    transition: transform 0.2s ease;
}
.site-nav .nav-menu li.has-dropdown:hover > .nav-trigger::after,
.site-nav .nav-menu li.has-dropdown.is-open > .nav-trigger::after {
    transform: rotate(225deg);
    margin-bottom: -2px;
}

/* Mobile sub-toggle button - hidden on desktop, defensive reset against parent theme button styles */
.site-nav .nav-menu li .nav-sub-toggle,
.nav-sub-toggle {
    display: none !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    position: relative;
    color: inherit;
}
.nav-sub-toggle:focus,
.nav-sub-toggle:focus-visible {
    outline: 2px solid var(--lime) !important;
    outline-offset: 2px;
}

/* Defensive reset on the existing hamburger / cross button to kill the pink leak
   from the Hello Elementor parent theme button styles. Does not change the bars/cross visuals. */
.site-header .nav-toggle,
.site-header .nav-toggle:hover,
.site-header .nav-toggle:focus,
.site-header .nav-toggle:active {
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    color: var(--black);
}
.site-header .nav-toggle:focus-visible {
    outline: 2px solid var(--lime) !important;
    outline-offset: 2px;
}

/* The mega menu panel itself */
.mega-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 880px;
    max-width: calc(100vw - 80px);
    background: var(--white);
    border: 1px solid var(--grey);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(10, 10, 10, 0.10);
    padding: 24px 28px;
    margin-top: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
    z-index: 200;
}
.site-nav .nav-menu li.has-dropdown:hover > .mega-menu,
.site-nav .nav-menu li.has-dropdown:focus-within > .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
}
/* Bridge the gap so hover doesn't drop when crossing from trigger to menu */
.mega-menu::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
}

/* Top bar */
.mega-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--grey);
}
.mega-menu .all-content-link {
    font-family: 'Gabarito', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--black);
    text-decoration: none;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.mega-menu .all-content-link .arrow {
    transition: transform 0.2s;
    display: inline-block;
}
.mega-menu .all-content-link:hover { color: var(--black); opacity: 1; }
.mega-menu .all-content-link:hover .arrow { transform: translateX(4px); }
.mega-menu .all-content-link .accent {
    background: linear-gradient(transparent 68%, var(--lime) 68%, var(--lime) 92%, transparent 92%);
    padding: 0 2px;
}
.mega-eyebrow {
    font-family: 'Figtree', sans-serif;
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Grid */
.mega-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 24px;
}
.mega-col-label {
    font-family: 'Figtree', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin: 0 0 12px;
}

/* Topic cards */
.topics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.mega-menu .topic-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-radius: 10px;
    text-decoration: none;
    color: var(--black);
    transition: border-color 0.22s ease, transform 0.22s ease;
}
.mega-menu .topic-card:hover {
    border-color: var(--black);
    transform: translateY(-2px);
    opacity: 1;
}
.mega-menu .topic-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: var(--lime);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    color: var(--black);
}
.mega-menu .topic-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.mega-menu .topic-title {
    font-family: 'Gabarito', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--black);
    line-height: 1.15;
    letter-spacing: -0.015em;
}
.mega-menu .topic-arrow {
    margin-left: auto;
    color: var(--muted);
    font-size: 14px;
    transition: transform 0.22s ease, color 0.22s ease;
}
.mega-menu .topic-card:hover .topic-arrow {
    color: var(--black);
    transform: translateX(3px);
}

/* Guide card (right column, electric blue accent) */
.mega-menu .guide-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: start;
    padding: 14px 16px 14px 20px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-radius: 10px;
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.mega-menu .guide-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: var(--electric-blue);
}
.mega-menu .guide-card:hover {
    border-color: var(--electric-blue);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(91, 108, 240, 0.18);
    opacity: 1;
}
.mega-menu .guide-title {
    font-family: 'Gabarito', sans-serif;
    font-weight: 800;
    font-size: 16px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--black);
}
.mega-menu .guide-description {
    font-family: 'Figtree', sans-serif;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--charcoal);
}
.mega-menu .guide-cta {
    font-family: 'Figtree', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--electric-blue);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
}
.mega-menu .guide-cta .arrow {
    transition: transform 0.2s;
    display: inline-block;
}
.mega-menu .guide-card:hover .guide-cta .arrow {
    transform: translateX(4px);
}

/* =========================================
   MEGA MENU - MOBILE
   Simple, clean accordion. display:none/block is used throughout
   because it is reliable on Android where max-height/visibility
   combinations can fail.
   ========================================= */
@media (max-width: 768px) {

    /* Nav overlay: full screen, left-aligned, scrollable */
    .site-nav.open {
        justify-content: flex-start !important;
        align-items: stretch !important;
        flex-direction: column !important;
        padding: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Nav list */
    .site-nav .nav-menu {
        flex-direction: column !important;
        gap: 0 !important;
        text-align: left !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 88px 32px 48px !important;
        align-items: stretch !important;
        list-style: none !important;
    }

    /* Each top-level item */
    .site-nav .nav-menu > li {
        position: relative !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Plain parent links (no dropdown) */
    .site-nav .nav-menu > li > a {
        display: block !important;
        padding: 18px 0 !important;
        font-family: 'Gabarito', sans-serif !important;
        font-weight: 700 !important;
        font-size: 20px !important;
        color: rgba(255, 255, 255, 0.88) !important;
        text-transform: none !important;
        letter-spacing: -0.01em !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Dropdown parent triggers */
    .site-nav .nav-menu > li.has-dropdown > .nav-trigger {
        display: block !important;
        padding: 18px 28px 18px 0 !important;
        font-family: 'Gabarito', sans-serif !important;
        font-weight: 700 !important;
        font-size: 20px !important;
        line-height: 1.2 !important;
        color: rgba(255, 255, 255, 0.88) !important;
        text-transform: none !important;
        letter-spacing: -0.01em !important;
        position: relative !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Chevron on the trigger */
    .site-nav .nav-menu > li.has-dropdown > .nav-trigger::after {
        display: block !important;
        content: "" !important;
        position: absolute !important;
        right: 4px !important;
        top: 50% !important;
        width: 7px !important;
        height: 7px !important;
        border-right: 1.5px solid rgba(255, 255, 255, 0.30) !important;
        border-bottom: 1.5px solid rgba(255, 255, 255, 0.30) !important;
        transform: translateY(-55%) rotate(45deg) !important;
        margin: 0 !important;
        transition: transform 0.2s ease !important;
        background: none !important;
        box-shadow: none !important;
    }
    .has-dropdown.is-open > .nav-trigger {
        color: rgba(255, 255, 255, 1) !important;
    }
    .has-dropdown.is-open > .nav-trigger::after {
        transform: translateY(-35%) rotate(-135deg) !important;
    }

    /* Sub-toggle button: not used, hidden */
    .site-nav .nav-menu li .nav-sub-toggle,
    .nav-sub-toggle {
        display: none !important;
    }

    /* ---- MEGA MENU ---- */

    /* Hidden by default. display:none/block is the most reliable
       toggle on Android — no max-height, no visibility tricks. */
    .mega-menu {
        display: none !important;
        position: static !important;
        width: auto !important;
        max-width: none !important;
        background: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 0 16px !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        max-height: none !important;
        overflow: visible !important;
        transition: none !important;
        text-align: left !important;
    }
    .mega-menu::before { display: none !important; }

    /* Reveal on open */
    .has-dropdown.is-open > .mega-menu {
        display: block !important;
    }

    /* Hide: eyebrow, col labels, guide card (Quick Wins), right grid column */
    .mega-eyebrow,
    .mega-col-label,
    .mega-menu .guide-card,
    .mega-grid > div:last-child:not(:first-child) {
        display: none !important;
    }

    /* Mega-top: just the tiny "see all" link, no border */
    .mega-top {
        display: flex !important;
        flex-direction: column !important;
        border: none !important;
        padding: 0 0 2px !important;
        margin: 0 !important;
        gap: 0 !important;
    }
    .mega-menu .all-content-link {
        font-family: 'Figtree', sans-serif !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.25) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        opacity: 1 !important;
        gap: 4px !important;
    }
    .mega-menu .all-content-link:hover,
    .mega-menu .all-content-link:active {
        color: rgba(255, 255, 255, 0.50) !important;
        opacity: 1 !important;
    }
    .mega-menu .all-content-link .accent { background: none !important; padding: 0 !important; }

    /* Grid: simple block layout */
    .mega-grid { display: block !important; }
    .topics-grid { display: block !important; }

    /* Topic cards: plain block links, no card styling at all */
    .mega-menu .topic-card {
        display: block !important;
        background: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 8px 0 !important;
        gap: 0 !important;
        transform: none !important;
        text-transform: none !important;
        text-align: left !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .mega-menu .topic-card:hover,
    .mega-menu .topic-card:focus,
    .mega-menu .topic-card:active {
        background: none !important;
        border: none !important;
        transform: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }

    /* Hide icon and arrow */
    .mega-menu .topic-icon { display: none !important; }
    .mega-menu .topic-arrow { display: none !important; }
    .mega-menu .topic-body { display: block !important; }

    /* Sub-item text: small, regular weight, muted */
    .mega-menu .topic-title {
        font-family: 'Figtree', sans-serif !important;
        font-weight: 400 !important;
        font-size: 15px !important;
        color: rgba(255, 255, 255, 0.58) !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        line-height: 1.4 !important;
    }
    .mega-menu .topic-card:active .topic-title {
        color: rgba(255, 255, 255, 0.88) !important;
    }

    /* Get in Touch CTA */
    .site-header .site-nav a.nav-cta {
        display: block !important;
        margin: 24px 0 0 !important;
        text-align: center !important;
        width: 100% !important;
        padding: 14px 22px !important;
    }
}


/* =========================================
   HOME — DARK HERO
   Dark background with tiger bleed, white text, electric blue eyebrow
   ========================================= */

.tt-page.tt-home .home-hero.home-hero-dark {
    background: var(--black);
}
.tt-page.tt-home .home-hero.home-hero-dark .hero-tiger-bleed {
    opacity: 0.85;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,1) 100%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,1) 100%);
}
@media (max-width: 768px) {
    .tt-page.tt-home .home-hero.home-hero-dark .hero-tiger-bleed {
        opacity: 0.30;
    }
}

/* Text colours */
.tt-page.tt-home .home-hero.home-hero-dark h1 {
    color: #ffffff;
}
.tt-page.tt-home .home-hero.home-hero-dark h1 .hero-accent {
    color: #ffffff;
}
.tt-page.tt-home .home-hero.home-hero-dark .sub {
    color: rgba(255,255,255,0.70);
}
.tt-page.tt-home .home-hero.home-hero-dark .hero-eyebrow {
    color: var(--electric-blue);
}
.tt-page.tt-home .home-hero.home-hero-dark .hero-eyebrow::before {
    background: var(--electric-blue);
}

/* Electric blue underline accent on the hero word */
.tt-page.tt-home .home-hero.home-hero-dark h1 .hero-accent::after {
    background: var(--electric-blue);
}


/* =========================================
   HOME — RESOURCES FEATURED
   Dark section, 2 cards (SEO + Email), after testimonials
   ========================================= */

.tt-page.tt-home .home-resources-featured {
    background: var(--black);
    padding: 80px 0;
}
.tt-page.tt-home .home-resources-featured .hrf-header {
    margin-bottom: 40px;
}
.tt-page.tt-home .home-resources-featured .hrf-eyebrow {
    display: block;
    font-family: 'Figtree', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--electric-blue);
    margin-bottom: 10px;
}
.tt-page.tt-home .home-resources-featured .hrf-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.tt-page.tt-home .home-resources-featured h2 {
    color: #ffffff;
    margin: 0;
    font-size: 40px;
}
.tt-page.tt-home .home-resources-featured .hrf-all {
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}
.tt-page.tt-home .home-resources-featured .hrf-all:hover {
    color: #ffffff;
}

/* Cards grid */
.tt-page.tt-home .home-resources-featured .hrf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.tt-page.tt-home .home-resources-featured .hrf-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-top-width: 3px;
    border-radius: 16px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.tt-page.tt-home .home-resources-featured .hrf-card:hover {
    transform: translateY(-3px);
}
.tt-page.tt-home .home-resources-featured .hrf-card--blue {
    border-top-color: var(--electric-blue);
}
.tt-page.tt-home .home-resources-featured .hrf-card--blue:hover {
    background: rgba(91,108,240,0.08);
    border-color: rgba(91,108,240,0.28);
    border-top-color: var(--electric-blue);
}
.tt-page.tt-home .home-resources-featured .hrf-card--lime {
    border-top-color: var(--lime);
}
.tt-page.tt-home .home-resources-featured .hrf-card--lime:hover {
    background: rgba(196,255,53,0.05);
    border-color: rgba(196,255,53,0.22);
    border-top-color: var(--lime);
}

/* Icon tile */
.tt-page.tt-home .home-resources-featured .hrf-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}
.tt-page.tt-home .home-resources-featured .hrf-card--blue .hrf-card-icon {
    background: rgba(91,108,240,0.16);
    color: var(--electric-blue);
}
.tt-page.tt-home .home-resources-featured .hrf-card--lime .hrf-card-icon {
    background: rgba(196,255,53,0.12);
    color: var(--lime);
}

/* Label */
.tt-page.tt-home .home-resources-featured .hrf-card-label {
    font-family: 'Gabarito', sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.tt-page.tt-home .home-resources-featured .hrf-card--blue .hrf-card-label {
    color: var(--electric-blue);
}
.tt-page.tt-home .home-resources-featured .hrf-card--lime .hrf-card-label {
    color: var(--lime);
}

/* Description */
.tt-page.tt-home .home-resources-featured .hrf-card-desc {
    font-family: 'Figtree', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255,255,255,0.60);
    margin: 0;
    flex: 1;
}

/* Link */
.tt-page.tt-home .home-resources-featured .hrf-card-link {
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin-top: 4px;
    transition: opacity 0.2s;
}
.tt-page.tt-home .home-resources-featured .hrf-card--blue .hrf-card-link {
    color: var(--electric-blue);
}
.tt-page.tt-home .home-resources-featured .hrf-card--lime .hrf-card-link {
    color: var(--lime);
}
.tt-page.tt-home .home-resources-featured .hrf-card:hover .hrf-card-link {
    opacity: 0.85;
}

@media (max-width: 640px) {
    .tt-page.tt-home .home-resources-featured .hrf-grid {
        grid-template-columns: 1fr;
    }
    .tt-page.tt-home .home-resources-featured h2 {
        font-size: 32px;
    }
}


/* =========================================
   HOME — RESOURCES TOPICS
   Light section, 3 cards (Web / Social / Design), before bottom CTA
   ========================================= */

.tt-page.tt-home .home-resources-topics {
    background: var(--off-white);
    padding: 56px 0;
    border-top: 1px solid var(--grey);
    border-bottom: 1px solid var(--grey);
}
.tt-page.tt-home .home-resources-topics .hrt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
    flex-wrap: wrap;
}
.tt-page.tt-home .home-resources-topics h2 {
    font-size: 26px;
    margin: 0;
}
.tt-page.tt-home .home-resources-topics .hrt-all {
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}
.tt-page.tt-home .home-resources-topics .hrt-all:hover {
    color: var(--black);
}
.tt-page.tt-home .home-resources-topics .hrt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}
.tt-page.tt-home .home-resources-topics .hrt-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    background: #ffffff;
    border: 1px solid var(--grey);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.tt-page.tt-home .home-resources-topics .hrt-card:hover {
    border-color: var(--electric-blue);
    box-shadow: 0 4px 18px rgba(91,108,240,0.10);
    transform: translateY(-2px);
}
.tt-page.tt-home .home-resources-topics .hrt-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(91,108,240,0.08);
    color: var(--electric-blue);
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease;
}
.tt-page.tt-home .home-resources-topics .hrt-card:hover .hrt-icon {
    background: var(--electric-blue);
    color: #ffffff;
}
.tt-page.tt-home .home-resources-topics .hrt-label {
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
    flex: 1;
}
.tt-page.tt-home .home-resources-topics .hrt-arrow {
    font-size: 15px;
    color: var(--muted);
    transition: color 0.2s ease, transform 0.2s ease;
}
.tt-page.tt-home .home-resources-topics .hrt-card:hover .hrt-arrow {
    color: var(--electric-blue);
    transform: translateX(3px);
}

@media (max-width: 640px) {
    .tt-page.tt-home .home-resources-topics .hrt-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================
   MOBILE NAV — PINK LEAK + TAP HIGHLIGHT FIXES
   Kills Hello Elementor's pink focus borders and iOS tap flash
   on all interactive elements inside the nav.
   ========================================= */

/* Global: kill iOS tap highlight on all nav links and buttons */
.site-nav a,
.site-nav button,
.site-nav .nav-toggle,
.site-nav .nav-sub-toggle {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

@media (max-width: 768px) {
    /* Kill any pink/blue border or box-shadow on focus/active inside the mobile overlay */
    .site-nav a:focus,
    .site-nav a:active,
    .site-nav a:focus-visible,
    .site-nav button:focus,
    .site-nav button:active,
    .site-nav button:focus-visible,
    .mega-menu .topic-card:focus,
    .mega-menu .topic-card:active,
    .mega-menu .guide-card:focus,
    .mega-menu .guide-card:active,
    .mega-menu .all-content-link:focus,
    .mega-menu .all-content-link:active,
    .site-nav .nav-trigger:focus,
    .site-nav .nav-trigger:active {
        outline: none !important;
        box-shadow: none !important;
        border-color: transparent !important;
    }
    /* Restore a tasteful lime ring for keyboard users (not touch) */
    .site-nav a:focus-visible {
        outline: 2px solid var(--lime) !important;
        outline-offset: 2px !important;
        box-shadow: none !important;
    }
}


/* =========================================
   LOGO — TWO-LOGO SWAP (black desktop / white mobile)
   .logo-default    = black, always shown on desktop
   .logo-white-mobile = white, shown only on mobile when nav overlay is open
   ========================================= */

.site-logo .logo-default,
.site-logo .logo-white-mobile {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.site-logo .logo-default img,
.site-logo .logo-white-mobile img {
    max-width: 160px;
    max-height: 44px;
    height: auto;
    width: auto;
    display: block;
}

/* White logo hidden everywhere except mobile nav-open state */
.site-logo .logo-white-mobile {
    display: none;
}

@media (max-width: 768px) {
    /* Slightly smaller on mobile */
    .site-logo .logo-default img,
    .site-logo .logo-white-mobile img {
        max-width: 120px;
        max-height: 34px;
    }

    /* Swap: hide black, show white when nav overlay is open */
    .site-header.nav-open .site-logo .logo-default {
        display: none !important;
    }
    .site-header.nav-open .site-logo .logo-white-mobile {
        display: flex !important;
    }
}