/* Accessibility Assessment & Response — /services/accessibility-assessment/
   Loaded via the PAGE_CSS set in src/_data/eleventyComputed.js.

   Deliberately does not reuse ee-accessibility-auditing.css. There is no
   mechanism for sharing page CSS between pages (base.njk enqueues exactly one
   pages/ee-<pageKey>.css), and copying 472 lines to inherit four selectors
   would be worse than the ~130 here. Colors and type come from the :root
   tokens in style.css so both pages stay visually consistent. */

/* ---- Hero banner -------------------------------------------------------- */

/* This page set the hero background directly instead of copying the sibling
   pages' inert `class="lazyload" data-bg="..."` markup. As of 2026-08-22 the
   siblings were fixed the same way and the solid --ee-blue moved onto the base
   .ee-banner rule in components/ee-banner.css, so nothing is needed here.
   See that file for why a hero photo cannot go back without a scrim panel. */

.accessibility-assessment-intro p,
.accessibility-assessment-fit p,
.accessibility-assessment-scope li,
.accessibility-assessment-full p,
.accessibility-assessment-full li,
.accessibility-assessment-fit li,
.accessibility-assessment-cta p {
    font-family: 'Lato', sans-serif;
    color: var(--ee-black);
}

.accessibility-assessment-intro h2,
.accessibility-assessment-fit h2,
.accessibility-assessment-scope h2,
.accessibility-assessment-full h2,
.accessibility-assessment-cta h2 {
    color: var(--ee-blue);
    margin-bottom: 0.8em;
    line-height: 1.2;
}

.accessibility-assessment-intro {
    padding: 72px 20px 0;
}

/* ---- Inset figures ------------------------------------------------------ */

/* Plain <img> on purpose: the responsiveImages transform in eleventy.config.js
   adds the WebP <source>s, width/height, loading and decoding. Never hand-write
   <picture> or srcset here.

   font-size is stated in px because body resolves to 28.8px sitewide, so an em
   or a bare inherit gives the caption the same size as a heading. */
.ee-assessment-figure {
    margin: 40px 0 0;
}

.ee-assessment-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.ee-assessment-figure figcaption {
    margin-top: 12px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ee-dark-gray);
}

/* ---- The two tiers, side by side from 1024px ----------------------------- */

.accessibility-assessment-fit {
    padding: 72px 20px 0;
}

.accessibility-assessment-fit > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 32px;
}

.accessibility-assessment-fit h3 {
    color: var(--ee-blue);
    margin-bottom: 8px;
}

/* Each tier's deliverables: an ordinary bulleted list inside the grid item. */
.accessibility-assessment-fit > ul > li > ul {
    list-style: disc;
    padding-left: 1.2em;
    margin: 16px 0 0;
    display: grid;
    gap: 12px;
}

.accessibility-assessment-fit li li strong {
    color: var(--ee-blue);
}

.accessibility-assessment-note {
    margin-top: 32px;
}

/* ---- Stages and the two ways to start -------------------------------------- */

.accessibility-assessment-scope {
    padding: 72px 20px 0;
}

.accessibility-assessment-scope ul {
    padding-left: 1.2em;
    display: grid;
    gap: 16px;
}

.accessibility-assessment-scope li strong {
    color: var(--ee-blue);
}

/* ---- Scope and working with an attorney ----------------------------------- */

.accessibility-assessment-full {
    padding: 72px 20px 0;
}

/* ---- CTA ---------------------------------------------------------------- */

.accessibility-assessment-cta {
    padding: 72px 20px 96px;
    text-align: center;
}

.accessibility-assessment-cta .round-btn-container {
    margin-top: 32px;
}

/* style.css:3926 pins .whole_page_text_wrap to a 640px column from 768px up.
   The two-column include grid needs more room, but only once there is room to
   give: widening starts at 1024px so the 768-1023px range keeps the site's
   standard column. This file loads after style.css, so equal specificity
   resolves in its favor. */
@media only screen and (min-width: 1024px) {
    .accessibility-assessment-fit {
        width: 900px;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
    }

    .accessibility-assessment-fit > ul {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}