/* Global typography controls — update these variables to change headings site-wide */

:root {
    /* Dongguan Punjabi logo palette: deep teal, sky blue and signature orange. */
    --ink: #073b4c;
    --teal: #075f73;
    --mint: #dceff2;
    --sand: #fff8ed;
    --coral: #ff8400;
    --muted: #55717a;
    --teal-dark: #043f50;
    --sky: #a8dce8;
    --orange-dark: #d96700;
    --orange-soft: #fff0db;
    --white: #ffffff;
    --surface: #ffffff;
    --surface-tint: #f3faf9;
    --line: #c8dce0;

    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-heading: 'DM Serif Display', Georgia, serif;
    --heading-weight: 400;
    --section-heading-size: clamp(2.35rem, 4.2vw, 4.25rem);
    --page-heading-size: clamp(3rem, 3.5vw, 3.4rem);
    --card-heading-size: clamp(1.55rem, 2.2vw, 2rem);
    --heading-line-height: 1.08;
    --heading-letter-spacing: -.035em;
    --section-space: clamp(4.5rem, 8vw, 6.6rem);
    --content-width: 62ch;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    color: var(--ink);
    line-height: 1.7;
    background: #fff
}

a {
    text-decoration: none;
    color: inherit
}

body {
    font-family: var(--font-body);
}

h1,
h2,
h3,
.navbar-brand {
    font-family: var(--font-heading);
    font-weight: var(--heading-weight);
    letter-spacing: var(--heading-letter-spacing);
}

/* Reusable global utilities: g-section, g-heading, g-text, g-btn */
.g-section,
.section {
    padding-block: var(--section-space);
}

.g-heading,
.section-heading>h2 {
    margin: 0 0 1.15rem;
    font-family: var(--font-heading);
    font-size: var(--section-heading-size);
    font-weight: var(--heading-weight);
    line-height: var(--heading-line-height);
    letter-spacing: var(--heading-letter-spacing);
}

.g-heading--page {
    font-size: var(--page-heading-size);
}

.g-heading--card {
    font-size: var(--card-heading-size);
}

.g-text {
    max-width: var(--content-width);
    color: var(--muted);
}

.g-text--center {
    margin-inline: auto;
    text-align: center;
}

.g-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    padding: .82rem 1.2rem;
    border: 1px solid var(--teal);
    border-radius: 2px;
    background: var(--teal);
    color: #fff;
    font: 700 .85rem/1 var(--font-body);
    transition: transform .2s, background .2s, color .2s;
}

.g-btn:hover {
    color: #fff;
    background: var(--teal-dark);
    transform: translateY(-2px);
}

.g-btn--outline {
    background: transparent;
    color: var(--ink);
    border-color: #b8c8c9;
}

.g-btn--outline:hover {
    color: var(--teal);
    background: transparent;
    border-color: var(--teal);
}

@media (max-width: 575px) {
    :root {
        --section-space: 4.5rem;
    }
}

/* Logo-led colour application: teal is the foundation, orange is the action accent. */
.topbar,
.numbers,
footer { background: var(--ink); }

.nav-cta,
.button-primary,
.btn-brand,
.g-btn { background: var(--teal); border-color: var(--teal); }

.nav-cta:hover,
.button-primary:hover,
.btn-brand:hover,
.g-btn:hover { background: var(--teal-dark); border-color: var(--teal-dark); }

.button-light { background: var(--coral); color: var(--white) !important; }
.button-light:hover { background: var(--orange-dark); color: var(--white) !important; }

.eyebrow,
.text-link,
.contact-details a { color: var(--teal); }

.section-tint,
.page-hero-rich { background: linear-gradient(120deg, var(--orange-soft), var(--surface-tint)); }

.hero-modern { background: linear-gradient(118deg, #fffaf3 0%, #fffaf3 58%, var(--mint) 100%); }
.hero-visual:before { background: var(--teal); }
.hero-visual img { box-shadow: 18px 20px 0 var(--coral); }

.service-feature-image span,
.purpose-icon { background: var(--coral); color: var(--white); }
.service-feature-content li:before,
.service-card > span,
.value-grid span { color: var(--coral); }

.contact-form input,
.contact-form textarea,
.quote-modal input,
.quote-modal textarea { border-color: var(--line); }