:root {

    /* Typography */ 
    --font-heading: "Kdam Thmor Pro", sans-serif;
    --font-body: "Inter", sans-serif; 
    --font-lineheight-body: 1.6;

    /* Brand Colors */
    --heading-color: #000000;
    --body-color: #333333;

}

body {
    line-height: 1.5;
}

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

h1 {
    font-family: var(--font-heading);
    color: var(--heading-color);
    font-size: 3rem;
    letter-spacing: 2px;
}

h2 {
    font-family: var(--font-heading);
    color: var(--heading-color);
    font-size: 2.5rem;
    letter-spacing: 2px
}

h3 {
    font-family: var(--font-heading);
    color: var(--heading-color);
    font-size: 1.5rem;
    letter-spacing: 2px;
}

p {
    font-family: var(--font-body);
    color: var(--body-color);
    line-height: var(--font-lineheight-body);
}

a {
    font-family: var(--font-body);
    color: var(--heading-color);
}

strong {
    color: var(--heading-color);
}

label {
    font-family: var(--font-body);
    color: var(--heading-color);
    font-size: 1.25rem;
}

input {
    font-family: var(--font-body);
    color: var(--heading-color);
    font-size: 1rem;
}

textarea {
    font-family: var(--font-body);
    color: var(--heading-color);
    font-size: 1rem;
}

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

/* Styling for main heading */

.section-heading {
    margin: 0;
    padding-top: 100px;
    margin-bottom: 25px;
}


/* Styling for subheading  */

.section-subheading {
    font-size: 1.25rem;
    font-family: var(--font-body);
    color: var(--body-color);
    max-width: 750px;
    padding-bottom: 20px;
}

@media (max-width: 1024px) {

    h2 {
        font-size: 36px;
    }

    .section-heading {
        margin: 0;
        padding-top: 60px;
        margin-bottom: 20px;
    }
    
    .section-subheading {
        font-size: 20px;
        padding-bottom: 40px;
    }
}

@media (max-width: 640px) {  

    h2 {
        font-size: 24px;
    }

    .section-heading {
        margin: 0;
        padding-top: 40px;
        margin-bottom: 20px;
    }

    .section-subheading {
        font-size: 16px;
        padding-bottom: 30px;
    }
}

/* Blog posts */

.single h2 {
    margin-top: 10px !important;
    margin-bottom: 30px !important;
    padding: 0px !important;
}

.single h3 {
    margin-top: 10px !important;
    margin-bottom: 20px !important;
    padding: 0px !important;
}

.single p {
    font-size: 16px;        /* ~18px — above the 16px comfort floor */
    line-height: 1.6;           /* WCAG 1.4.12: min 1.5× — this exceeds it */
    margin-bottom: 30px !important;         /* WCAG 1.4.12: paragraph spacing ≥ 2× font-size */
    word-spacing: 0.16em;       /* WCAG 1.4.12: word spacing ≥ 0.16em */ 
    max-width: 68ch;            /* Optimal reading line length (45–85ch) */
    overflow-wrap: break-word;  /* Prevents overflow on narrow viewports */
}

/* Case studies */

.single-reference .hero-section {
    margin-bottom: 50px;
}

.single-reference h2 {
    margin-top: 20px;
    margin-bottom: 30px;
}

.single-reference h3 {
    margin-top: 20px;
    margin-bottom: 30px;
}

.single-reference p {
    font-size: 16px;        /* ~18px — above the 16px comfort floor */
    line-height: 1.6;           /* WCAG 1.4.12: min 1.5× — this exceeds it */
    margin-bottom: 2em;         /* WCAG 1.4.12: paragraph spacing ≥ 2× font-size */
    word-spacing: 0.16em;       /* WCAG 1.4.12: word spacing ≥ 0.16em */ 
    max-width: 68ch;            /* Optimal reading line length (45–85ch) */
    overflow-wrap: break-word;  /* Prevents overflow on narrow viewports */
}

.single-reference img {
    margin-bottom: 30px;
}

/* Alignment Classes for heading and subheading block */

.align-left {
    text-align: left;
}
.align-left .section-subheading {
    margin: 0; 
}

.align-center {
    text-align: center;
}
.align-center .section-subheading {
    margin: 0 auto; 
}

.align-right {
    text-align: right;
}
.align-right .section-subheading {
    margin: 0 0 0 auto; 
}