/* The American Community School case study: the rules the shared case-study*.css does not cover. Scoped under .cs-acs (data 'class'). */
.cs-acs .acs-logo { width: 220px !important; height: auto !important; }
.cs-acs .acs-client > span { display: block; }
.cs-acs .cs-tile__num--word { font-size: clamp(28px, 3vw, 40px) !important; }
.cs-acs .acs-who { margin-top: 2px; color: #5f6b66; }

/* the paragraph under the facts */
.cs-acs .acs-bridge { margin: 20px 0 0; padding: 16px 20px; border-radius: 16px; background: #F6F9F7; border: 1px solid rgba(0, 0, 0, .08); max-width: 56rem; }

/* the quote with its video */
.cs-acs .acs-quote { display: grid; gap: 24px; align-items: start; }
@media (max-width: 1023px) { .cs-acs .acs-video { max-width: 360px; } }   /* a card the width of the quote's avatar row, not the full column */
@media (min-width: 1024px) { .cs-acs .acs-quote { grid-template-columns: minmax(0, 1fr) clamp(300px, 30%, 360px); gap: 40px; align-items: center; } }   /* same layout at 1024 and 1440: the card keeps its share and sits level with the quote */
.cs-acs .acs-video { position: relative; display: block; border-radius: 16px; overflow: hidden; background: #000; color: #fff; text-decoration: none; }
.cs-acs .acs-video img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; opacity: .9; transition: opacity .2s; }
.cs-acs .acs-video:hover img, .cs-acs .acs-video:focus-visible img { opacity: 1; }
.cs-acs .acs-video__play { position: absolute; z-index: 1; left: 16px; bottom: 14px; width: 52px; height: 52px; border-radius: 50%; background: #00B26B; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.cs-acs .acs-video__play::after { content: ""; position: absolute; left: 20px; top: 16px; border-left: 16px solid #04150D; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.cs-acs .acs-video__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 16px 82px; background: linear-gradient(to top, rgba(0, 0, 0, .92) 60%, transparent); font-weight: 600; font-size: 15px; line-height: 1.3; }
.cs-acs .acs-video__cap small { display: block; font-weight: 400; font-size: 13px; color: rgba(255, 255, 255, .9); }
.cs-acs .acs-video--sm .acs-video__play { width: 40px; height: 40px; left: 10px; bottom: 10px; }
.cs-acs .acs-video--sm .acs-video__play::after { left: 15px; top: 12px; border-left-width: 13px; border-top-width: 8px; border-bottom-width: 8px; }

/* the route and the phases */

/* "Also built for the school" */
.cs-acs .acs-also { margin-top: 32px; padding: 20px; border-radius: 20px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); }
@media (min-width: 768px) { .cs-acs .acs-also { padding: 28px; } }
.cs-acs .acs-also__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 768px) { .cs-acs .acs-also__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 768px) { .cs-acs .acs-also__list--one { grid-template-columns: minmax(0, 1fr); } }
.cs-acs .acs-also__list li { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.55; color: #333; }
.cs-acs .acs-also__list b, .cs-acs .acs-also__list h4 { font-size: 17px; color: #000; }
.cs-acs .acs-also__list .tw7-link { display: inline-block; margin-top: 4px; }   /* ≥768: 24px hit area, see case-study-sections.css */
@media (max-width: 767px) { .cs-acs .acs-also__list .tw7-link { padding: 1px 0; margin: 3px 0 -1px; } }   /* 23px line -> 25px hit area, same layout */
.cs-acs .acs-also__quote { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid rgba(0, 0, 0, .08); display: grid; gap: 16px; align-items: center; }
@media (min-width: 768px) { .cs-acs .acs-also__quote { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; } }
.cs-acs .acs-also__quote blockquote { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 500; color: #111; }
.cs-acs .acs-also__quote figcaption { margin-top: 8px; font-size: 14px; line-height: 1.45; color: #555; }
.cs-acs .acs-also__quote figcaption b { display: block; color: #000; }
.cs-acs .acs-also__quote figcaption small { display: block; font-size: 13px; color: #5f6b66; }

/* the payment pages gallery */
.cs-acs .acs-gal { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cs-acs .acs-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.cs-acs .acs-gal li { border-radius: 16px; }
.cs-acs .acs-gal figure { margin: 0; }
.cs-acs .acs-gal__frame { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; border: 1px solid rgba(0, 0, 0, .1); background: #fff; box-shadow: 0 20px 40px -30px rgba(0, 0, 0, .45); }
.cs-acs .acs-gal__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cs-acs .acs-gal__frame--fit img { object-fit: contain; background: #EBEBEB; }
.cs-acs .acs-gal__frame--rows { display: flex; align-items: center; background: #EBEBEB; }   /* the short exam screenshot sits centred in the same 4:3 frame as the others */
.cs-acs .acs-gal__frame--rows img { height: auto; object-fit: contain; }
.cs-acs .acs-gal figcaption { margin-top: 10px; font-size: 15px; font-weight: 600; color: #000; }

/* closing CTA: the link on the dark card; read-next is four across on desktop */
.cs-acs .tw2-carry .tw7-link { color: #fff !important; text-decoration-color: rgba(255, 255, 255, .6); display: inline-block; padding: 12px 0; margin: -12px 0; }