/* Reading sizes are shared across pages; smaller screens reflow the layout. */
:root {
    --muted: #55534f;
    --reading-size: 1.125rem;
    --secondary-size: 1rem;
    --label-size: .875rem;
    --on-dark: #d4d0ca;
}

body.ee-body {
    font-size: var(--reading-size);
    line-height: 1.7;
}
h1, h2 { line-height: 1.05; }

/* French prose: justified lines with natural word breaks and a short last line. */
.hero-copy > p,
.section-heading > p,
.solution-info p,
.section-tail p,
.about-copy p,
.steps-grid p,
.project-cta p,
.page-intro p,
.service-hero p,
.detail-grid p,
.faq-layout > div > p,
.faq-list details p,
.editorial-split p,
.qualifications p,
.hase-feature p,
.contact-aside-note p,
.lightbox-caption p,
.prose p,
.not-found p {
    text-align: justify;
    text-align-last: start;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
}

/* Paragraphs: comfortable leading and a reasonable line length. */
.hero-copy > p,
.section-heading > p,
.about-copy p,
.steps-grid p,
.project-cta p,
.page-intro p,
.service-hero p,
.detail-grid p,
.faq-layout > div > p,
.faq-list details p,
.editorial-split p,
.qualifications p,
.hase-feature p,
.prose p,
.prose ul,
.prose ol,
.not-found p {
    font-size: var(--reading-size);
    line-height: 1.75;
    font-weight: 400;
}

.hero-copy > p { max-width: 46ch; }
.section-heading > p { max-width: 42ch; }
.section-heading > p br { display: none; }
.about-copy p { max-width: 52ch; }
.steps-grid p { max-width: 30ch; }
.page-intro p { max-width: 64ch; }
.service-hero p { max-width: 53ch; }
.prose { max-width: 900px; }
.hero-copy > p,
.hero-bottom p,
.about-copy p,
.page-intro p,
.service-hero p,
.footer-brand > span,
.footer-grid > div > p,
.lightbox-caption p { color: var(--on-dark); }

/* Labels stay legible instead of becoming miniature decorative text. */
.eyebrow,
.hero-copy > .eyebrow,
.agency-card .eyebrow,
.project-cta .eyebrow,
.page-intro .eyebrow,
.service-hero .eyebrow,
.card-tag,
.project-meta > span,
.photo-label,
.contact-aside-note > span,
.footer-grid h2,
.contact-agency h3 {
    font-size: var(--label-size);
    line-height: 1.6;
    letter-spacing: .075em;
    font-weight: 700;
}
.eyebrow b { font-size: 1rem; }
.agency-card .eyebrow { color: #bc0060; }
.card-tag { padding: 8px 11px; max-width: calc(100% - 34px); }
.hero-copy > .eyebrow,
.about-copy > .eyebrow,
.page-intro .eyebrow { color: #d4d0ca; }
.hero-caption { display: none; }
.hero-since span { font-size: .8125rem; max-width: 16ch; line-height: 1.5; }
.hero-since { max-width: 205px; }

/* Navigation, actions and small reading text. */
.button,
.button-small,
.main-nav nav > .button,
.hero-actions .button,
.project-cta .button,
.service-hero .button,
.contact-form .button,
.text-link,
.hero-actions .text-link,
.hero-bottom > .text-link,
.section-tail .text-link,
.agency-card .text-link,
.contact-layout aside .text-link,
.menu-toggle,
.filter-bar button,
.breadcrumb,
.service-hero .breadcrumb {
    font-size: var(--secondary-size);
    line-height: 1.5;
    font-weight: 700;
}
.button { min-height: 52px; gap: 18px; }
.text-link { gap: 16px; }
.hero-actions { flex-wrap: wrap; gap: 16px 24px; }
.hero-actions .text-link { max-width: none; }
.main-nav { gap: 28px; }
.main-nav nav { gap: 25px; }
.main-nav nav > a:not(.button) { font-size: 1rem; line-height: 1.5; }
.main-nav nav > .button { padding: 15px 18px; }
.main-nav nav > a { white-space: nowrap; }
.topbar,
.topbar .wrap > span,
.topbar .wrap > div > a { font-size: .875rem; line-height: 1.6; }
.topbar > .wrap { min-height: 42px; gap: 18px; }
.topbar .wrap > div { gap: 24px; }
.hero-bottom { padding-block: 26px; gap: 28px; flex-wrap: wrap; }
.hero-bottom p { font-size: var(--secondary-size); line-height: 1.6; }
.hero-bottom > div { gap: 16px; }
.metric-number span { font-size: 1.25rem; color: var(--on-dark); }

/* Cards and contact details. */
.solution-info h3,
.project-meta h3,
.steps-grid h3,
.detail-grid h3,
.lightbox-caption h2 {
    font-size: 1.375rem;
    line-height: 1.35;
    letter-spacing: -.015em;
}
.solution-info { gap: 16px; align-items: flex-start; }
.solution-info > div { min-width: 0; }
.solution-info p,
.section-tail p,
.visit-note,
.agency-card p,
.agency-card a:not(.text-link),
.contact-agency p,
.contact-agency > a.mail-link,
.contact-aside-note p,
.lightbox-caption p {
    font-size: var(--secondary-size);
    line-height: 1.7;
}
.solution-info p { display: block; margin-top: 9px; }
.circle-arrow { width: 36px; height: 36px; margin-top: 1px; }
.circle-arrow svg { width: 18px; }
.agency-card h3 { font-size: 1.625rem; line-height: 1.35; }
.agency-card a.agency-phone { font-size: 1.75rem; }
.contact-agency > a { font-size: 1.875rem; }
.agency-card a,
.contact-agency a { overflow-wrap: anywhere; }
.faq-list summary { font-size: 1.125rem; line-height: 1.6; }
.qualification-list > span { font-size: 1.125rem; }

/* Form labels, hints and entered text have distinct but readable sizes. */
.contact-form label { font-size: 1rem; line-height: 1.6; }
.contact-form input:not([type=checkbox]),
.contact-form select,
.contact-form textarea {
    font-size: 1.0625rem;
    line-height: 1.6;
    min-height: 52px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { font-size: 1rem; color: #6a6660; opacity: 1; }
.contact-form .consent,
.form-intro,
.demo-note,
.form-status { font-size: .9375rem; line-height: 1.7; }
.consent input { width: 19px; height: 19px; }
.form-row > label { min-width: 0; }

/* Footer links and addresses are useful information, not fine print. */
.footer-brand > span,
.footer-grid > div > p,
.footer-grid > div:not(.footer-brand) > a,
.footer-grid > div:nth-child(2) > a,
.footer-grid a.footer-directions {
    font-size: .9375rem;
    line-height: 1.75;
}
.footer-grid > div:not(.footer-brand) > a { color: #d4d0ca; }
.footer-grid > div:not(.footer-brand) > a.footer-phone { font-size: 1.5rem; color: #fff; }
.footer-brand p { font-size: 1.375rem; line-height: 1.3; }
.footer-grid a { overflow-wrap: anywhere; }
.footer-bottom { font-size: .875rem; line-height: 1.7; color: #c0bcb6; flex-wrap: wrap; }
.footer-bottom > div { flex-wrap: wrap; gap: 14px 24px; }
.footer-directions svg { margin-left: 7px; }

@media (max-width: 1150px) {
    /* Keep the menu comfortable rather than squeezing its type. */
    .main-nav { height: 94px; }
    .menu-toggle {
        display: flex;
        align-items: center;
        gap: 15px;
        border: 1px solid #777;
        background: transparent;
        color: #fff;
        padding: 12px 16px;
        z-index: 35;
    }
    .menu-bars { width: 20px; height: 13px; position: relative; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
    .menu-bars::after { content: ''; position: absolute; inset: 5px 0 auto; height: 1px; background: #fff; }
    .main-nav nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 20px 36px 30px; background: #151515; box-shadow: 0 20px 30px #0004; flex-direction: column; align-items: stretch; gap: 0; }
    .main-nav nav.is-open { display: flex; }
    .main-nav nav > a:not(.button) { font-size: 1.125rem; padding: 17px 0; border-bottom: 1px solid #454545; }
    .main-nav nav > .button { margin-top: 22px; white-space: normal; }
    .topbar > .wrap { flex-wrap: wrap; justify-content: center; padding-block: 8px; gap: 4px 25px; }
    .hero-copy > p { max-width: 46ch; }
    .hero-actions { align-items: flex-start; flex-direction: column; }
    .hero-bottom { display: grid; grid-template-columns: repeat(3, 1fr); }
    .hero-bottom > div { align-items: flex-start; }
    .section-heading { align-items: flex-start; }
    .section-heading > p { max-width: 36ch; }
    .solutions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .solution-image { height: 270px; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 55px; }
    .footer-grid > div { min-width: 0; }
    .footer-brand img { width: 192px; }
    .contact-layout { gap: 45px; grid-template-columns: .8fr 1.2fr; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px; }
    .steps-grid p { max-width: none; }
}

@media (max-width: 900px) {
    .topbar .wrap > div { display: none; }
    .hero-main { gap: 24px; }
    .hero-bottom { gap: 22px; }
    .hero-bottom p { font-size: .9375rem; }
    .hero-bottom > div { flex-wrap: wrap; gap: 10px; }
    .section-heading { display: block; }
    .section-heading > p { max-width: 60ch; margin-top: 24px; }
    .section-heading > .text-link { margin-top: 20px; }
    .about-feature { grid-template-columns: 1fr; }
    .about-copy { padding: 60px 36px; }
    .about-copy p { max-width: 65ch; }
    .about-photo { min-height: 360px; }
    .detail-grid { grid-template-columns: 1fr; }
    .detail-grid h3 { max-width: none; }
    .faq-layout { grid-template-columns: 1fr; gap: 36px; }
    .contact-layout { grid-template-columns: 1fr; }
    .contact-layout aside { order: 2; }
    .contact-form { order: 1; }
    .form-row { grid-template-columns: 1fr 1fr; gap: 22px; }
    .section-tail { align-items: flex-start; flex-direction: column; gap: 12px; }
    .section-tail .text-link { flex-shrink: 0; }
}

@media (max-width: 640px) {
    :root { --reading-size: 1.0625rem; --secondary-size: 1rem; --label-size: .875rem; }
    .topbar > .wrap { min-height: 40px; padding-block: 7px; }
    .topbar strong { margin-left: 4px; }
    .main-nav { height: 88px; }
    .main-nav nav { padding-inline: 20px; }
    .hero-copy { padding-top: 32px; }
    .hero-copy > .eyebrow { letter-spacing: .04em; font-size: .8125rem; }
    .hero-copy > p { max-width: none; }
    .hero-actions { gap: 18px; align-items: stretch; }
    .hero-actions .button { padding: 17px 20px; }
    .hero-actions .text-link { align-self: flex-start; max-width: none; }
    .hero-actions .text-link .arrow { width: 20px; }
    .hero-bottom { grid-template-columns: 1fr 1fr; }
    .hero-bottom > div { flex-wrap: nowrap; align-items: center; }
    .hero-bottom p { font-size: .9375rem; }
    .hero-bottom > .hero-promise { align-items: flex-start; }
    .hero-since span { font-size: .75rem; }
    .hero-since { max-width: 172px; padding: 12px 15px; }
    .solutions-grid { grid-template-columns: 1fr; gap: 32px; }
    .solution-image { height: auto; aspect-ratio: 4 / 3; }
    .card-tag { left: 14px; top: 14px; }
    .solution-info { padding-top: 20px; padding-bottom: 22px; }
    .solution-info h3,
    .project-meta h3,
    .steps-grid h3,
    .detail-grid h3 { font-size: 1.3125rem; }
    .about-copy { padding: 56px 20px; }
    .about-copy p { max-width: none; }
    .photo-label { left: 20px; right: 20px; font-size: .8125rem; }
    .agency-card { padding: 28px 24px; }
    .agency-card h3 { font-size: 1.5rem; letter-spacing: -.025em; }
    .agency-card a.agency-phone { font-size: 1.75rem; }
    .agency-dept { opacity: .7; }
    .project-cta .eyebrow { letter-spacing: .055em; }
    .project-cta h2 { font-size: clamp(48px, 13vw, 63px); line-height: 1.05; }
    .footer-grid { grid-template-columns: 1fr; gap: 34px; }
    .footer-brand { display: block; }
    .footer-brand p { margin: 18px 0; font-size: 1.375rem; }
    .footer-brand > span { display: block; }
    .footer-grid > div:nth-child(2) { gap: 14px 22px; }
    .footer-grid h2 { margin-bottom: 18px; }
    .footer-bottom { gap: 19px; }
    .filter-bar button { min-height: 46px; padding: 10px 15px; }
    .service-hero .eyebrow,
    .page-intro .eyebrow { font-size: .8125rem; letter-spacing: .06em; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .contact-layout { flex-direction: column; }
    .contact-form { padding: 28px 21px; }
    .contact-form label { margin-bottom: 25px; }
    .contact-form input::placeholder,
    .contact-form textarea::placeholder { font-size: 1rem; }
    .contact-aside-note p { font-size: 1rem; }
    .lightbox-caption h2 { font-size: 1.125rem; }
    .lightbox-caption p { font-size: .9375rem; }
}

@media (max-width: 420px) {
    .topbar .wrap > span { font-size: .8125rem; }
    .steps-grid { grid-template-columns: 1fr; gap: 30px; }
    .hero-bottom { grid-template-columns: 1fr; }
    .hero-bottom > div { gap: 18px; }
    .hero-bottom p br { display: none; }
    .hero-since { max-width: 148px; right: 13px; }
}