/* Base */
body {
    font-family: var(--sd-font-family-primary);
    font-size: var(--sd-font-size-base);
    font-weight: var(--sd-font-weight-normal);
    line-height: var(--sd-line-height-normal);
    color: var(--sd-color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.sd-h1,
.sd-h2,
.sd-h3,
.sd-h4,
.sd-h5,
.sd-h6 {
    font-family: var(--sd-font-family-heading);
    font-weight: var(--sd-font-weight-bold) !important;
    line-height: var(--sd-line-height-tight);
    color: var(--sd-color-text);
    margin-top: 0;
    margin-bottom: var(--sd-space-4);
    /* letter-spacing: -0.02em !important; */
}

h1,
.sd-h1 {
    font-size: var(--sd-font-size-3xl);
    font-weight: var(--sd-font-weight-bold);
}

h2,
.sd-h2 {
    font-size: var(--sd-font-size-2xl);
    font-weight: var(--sd-font-weight-semibold);
}

h3,
.sd-h3 {
    font-size: var(--sd-font-size-xl);
    font-weight: var(--sd-font-weight-semibold);
}

h4,
.sd-h4 {
    font-size: var(--sd-font-size-lg);
    font-weight: var(--sd-font-weight-medium);
}

h5,
.sd-h5 {
    font-size: var(--sd-font-size-base);
    font-weight: var(--sd-font-weight-medium);
}

h6,
.sd-h6 {
    font-size: var(--sd-font-size-sm);
    font-weight: var(--sd-font-weight-medium);
}

/* Desktop Typography Scale */
@media (min-width: 768px) {

    h1,
    .sd-h1 {
        font-size: var(--sd-font-size-5xl);
    }

    h2,
    .sd-h2 {
        font-size: var(--sd-font-size-4xl);
    }

    h3,
    .sd-h3 {
        font-size: var(--sd-font-size-3xl);
    }

    h4,
    .sd-h4 {
        font-size: var(--sd-font-size-2xl);
    }

    h5,
    .sd-h5 {
        font-size: var(--sd-font-size-xl);
    }

    h6,
    .sd-h6 {
        font-size: var(--sd-font-size-lg);
    }
}

/* Paragraphs */
p {
    margin-top: 0;
    margin-bottom: var(--sd-space-4);
    font-size: 1.1rem;
    font-weight: 400;
}

p a {
    color: #0000EE !important;
}

/* Links */
a {
    text-decoration: underline;
    transition: color var(--sd-transition-fast);
}

/* a:hover {
    color: var(--sd-color-primary-dark);
} */

a:focus-visible {
    outline: 2px solid var(--sd-color-focus);
    outline-offset: 2px;
    text-decoration: none;
}

/* Lists */
ul,
ol {
    margin-top: 0;
    margin-bottom: var(--sd-space-4);
    padding-left: var(--sd-space-6);
}

ul ul,
ul ol,
ol ul,
ol ol {
    margin-bottom: 0;
}

li {
    margin-bottom: var(--sd-space-2);
    font-size: 1.1rem;
    font-weight: 400;
}

/* Text Utilities */
.sd-text--xs {
    font-size: var(--sd-font-size-xs);
}

.sd-text--sm {
    font-size: var(--sd-font-size-sm);
}

.sd-text--base {
    font-size: var(--sd-font-size-base);
}

.sd-text--lg {
    font-size: var(--sd-font-size-lg);
}

.sd-text--xl {
    font-size: var(--sd-font-size-xl);
}

.sd-text--light {
    font-weight: var(--sd-font-weight-light);
}

.sd-text--normal {
    font-weight: var(--sd-font-weight-normal);
}

.sd-text--medium {
    font-weight: var(--sd-font-weight-medium);
}

.sd-text--semibold {
    font-weight: var(--sd-font-weight-semibold);
}

.sd-text--bold {
    font-weight: var(--sd-font-weight-bold);
}

.sd-text--left {
    text-align: left;
}

.sd-text--center {
    text-align: center;
}

.sd-text--right {
    text-align: right;
}

.sd-text--justify {
    text-align: justify;
}

.sd-text--uppercase {
    text-transform: uppercase;
}

.sd-text--lowercase {
    text-transform: lowercase;
}

.sd-text--capitalize {
    text-transform: capitalize;
}

.sd-text--normal-case {
    text-transform: none;
}

.sd-text--primary {
    color: var(--sd-color-primary);
}

.sd-text--secondary {
    color: var(--sd-color-secondary);
}

.sd-text--light {
    color: var(--sd-color-text-light);
}

.sd-text--inverse {
    color: var(--sd-color-text-inverse);
}

/* Blockquotes */
blockquote {
    margin: 0 0 var(--sd-space-4);
    padding: var(--sd-space-4) var(--sd-space-6);
    border-left: 4px solid var(--sd-color-primary);
    font-style: italic;
    color: var(--sd-color-text-light);
}

/* Code */
code {
    font-family: var(--sd-font-family-mono);
    font-size: 0.875em;
    background-color: var(--sd-color-gray-100);
    padding: 0.125em 0.25em;
    border-radius: var(--sd-radius-sm);
}

pre {
    font-family: var(--sd-font-family-mono);
    font-size: var(--sd-font-size-sm);
    background-color: var(--sd-color-gray-100);
    padding: var(--sd-space-4);
    border-radius: var(--sd-radius-base);
    overflow-x: auto;
    margin: 0 0 var(--sd-space-4);
}

pre code {
    background-color: transparent;
    padding: 0;
}
/* In-copy links restored at go-live (wp silo-tg relink). Styled like the
   palette link (forest, lime underline) and specific enough to beat any
   global `p a { color: ... !important }`, without touching other links. */
p a.sd-inline-link,
li a.sd-inline-link,
a.sd-inline-link {
    color: var(--sd-color-primary) !important;
    text-decoration: underline;
    text-decoration-color: var(--sd-color-cta);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.16em;
}

p a.sd-inline-link:hover,
li a.sd-inline-link:hover,
a.sd-inline-link:hover {
    color: var(--sd-color-cta) !important;
}

/* Existing links in service-page body copy get the same look as the restored
   ones, so a paragraph never mixes palette links with browser-blue ones.
   Light-ground body containers only; buttons and inline CTAs excluded. */
:is(.sp-intro__body, .sp-benefits__body, .sp-benefit-card__text, .sp-why__body, .sp-process__text, .sp-faq__answer-inner, .sp-testimonials__body, .sp-guides__body, .sp-split__body) a:not([class*="btn"]):not(.sp-inline-cta) {
    color: var(--sd-color-primary) !important;
    text-decoration: underline;
    text-decoration-color: var(--sd-color-cta);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.16em;
}

:is(.sp-intro__body, .sp-benefits__body, .sp-benefit-card__text, .sp-why__body, .sp-process__text, .sp-faq__answer-inner, .sp-testimonials__body, .sp-guides__body, .sp-split__body) a:not([class*="btn"]):not(.sp-inline-cta):hover {
    color: var(--sd-color-cta) !important;
}

/* The FAQ's "Talk to our team" CTA sits inside a <p>, so the global
   `p a { color: #0000EE !important }` painted it browser-blue. Restore its own colour. */
p a.sp-inline-cta {
    color: var(--sd-color-cta) !important;
    text-decoration: none;
}

/* Related-building card descriptions style their links in service-pro.css,
   but the global `p a` !important won; give them their intended colour back. */
p.sp-ss-card__description a {
    color: var(--sd-color-cta) !important;
}

p.sp-ss-card__description a:hover {
    color: var(--sd-color-primary-dark) !important;
}