/* A gray header band defines the services (as on /blog/ and /our-work/), then
   the cards sit on white (2026-10-19). The page was gray throughout. */
.services-cards-section {
    padding-block: 64px 32px;
}

/* The cards line up with the band's gutter at every width (Thomas,
   2026-10-20): the same 1200px box with 20px sides as .category-masthead-inner
   in ee-blog-index.css, instead of .whole_page_text_wrap, which is 640px
   below 1280px and 1440px from 1920px. The two must change together. */
.services .services-cards-section {
    width: auto;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 20px;
}

.services #main_columns {
    margin: 0 auto;
}

/* Where the screen has room, the cards' text lines up with the band's
   gutter and each card's box reaches 30px into the margin, the inset of the
   icon, title, text and "Learn more" (Thomas, 2026-10-20). From 1300px a card
   still keeps 20px from the screen edge; below that the box sits on the
   gutter instead. */
@media only screen and (min-width: 1300px) {
    .services #main_columns {
        margin-inline: -30px;
    }
}

/* Two cards a row until the three-column layout starts at 1280px, so a
   card is not stretched across a tablet screen. */
@media only screen and (min-width: 768px) and (max-width: 1279px) {
    .services #main_columns {
        grid-template-columns: 1fr 1fr;
    }
}

/* Each card is one link. The card itself marks it, as on the home page
   (ee-home.css turns the underline off there for every link), so the title
   and text are not underlined; focus still gets the outline from style.css. */
.services #main_columns a {
    text-decoration: none;
}

/* The cards use the home page's card style (#main_columns in style.css).
   Their titles are h2 here, under the page's hidden h1, where the home page
   uses h3 under its own section heading, so size them the same. */
.services .services-card-header h2 {
    padding: 0;
    font-size: 1.75rem;
    line-height: normal;
}

/* The title sits in .services-card-title, beside the icon on phones and
   under it from 1280px. */
@media only screen and (min-width: 1280px) {
    .services .services-card-title {
        padding: 0 30px;
    }
}

/* Below 1280px the title sits beside the icon, so it needs its own space
   above and to its right. */
@media only screen and (max-width: 1279px) {
    .services .services-card-title {
        margin: 24px 30px 24px 0;
    }
}

/* Each card is one link to its service page (Thomas, 2026-10-20). "Learn
   more" with an arrow at the foot of the card says so; it is part of the
   link's text, so voice control can follow "click Learn more". The column
   layout pins it to the bottom of every card in a row. */
.services #main_columns .main_column {
    display: flex;
    flex-direction: column;
    transition: box-shadow 180ms ease-out, background-color 180ms ease-out;
}

.services .services-card-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: auto 30px 0;
    padding-top: 16px;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--ee-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.services .services-card-more svg {
    flex: none;
    transition: transform 180ms ease-out;
}

/* Hover and keyboard focus get the same lift: up 4px, a deeper shadow, a
   faint blue tint and the arrow 4px to the right. Focus also keeps the 3px
   brand blue outline from style.css, so a focused card still looks different
   from a hovered one. The lift is on the link, so the outline moves with
   the card. */
.services #main_columns > a {
    transition: transform 180ms ease-out;
}

.services #main_columns > a:hover,
.services #main_columns > a:focus-visible {
    transform: translateY(-4px);
}

.services #main_columns > a:hover .main_column,
.services #main_columns > a:focus-visible .main_column {
    background-color: #F4F6FC;
    box-shadow: 10px 14px 24px rgba(41, 60, 143, 0.12);
}

.services #main_columns > a:hover .services-card-more svg,
.services #main_columns > a:focus-visible .services-card-more svg {
    transform: translateX(4px);
}

/* Reduced motion: no lift and no arrow movement; the tint and the shadow
   still mark the card. */
@media (prefers-reduced-motion: reduce) {
    .services #main_columns > a,
    .services .services-card-more svg {
        transition: none;
    }

    .services #main_columns > a:hover,
    .services #main_columns > a:focus-visible,
    .services #main_columns > a:hover .services-card-more svg,
    .services #main_columns > a:focus-visible .services-card-more svg {
        transform: none;
    }
}

/* The contact section under the cards: a link to /contact/ on the gray
   band the old inline form sat on (2026-10-20). Sizes are in px because
   body resolves to 28.8px sitewide. */
/* Left-aligned on the header's side inset, so it lines up with the logo and
   the cards above (2026-10-26); it was centered. */
.services-contact {
    padding: 48px var(--ee-header-inset, 20px) 56px;
    background-color: var(--bg-light-gray);
    text-align: left;
}

.services-contact h2 {
    margin: 0 0 12px;
    color: var(--ee-blue);
}

.services-contact p {
    max-width: 52ch;
    margin: 0 0 24px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--ee-black);
}