/*
 * ORDINARY PAGE
 * ===========================================================================
 * The shell shared by the pages that are neither the homepage nor a library
 * surface. It is deliberately small: an editorial opening, a measured column,
 * and prose typography. Anything a specific page needs beyond that belongs to
 * that page, not here.
 *
 * WHY THE VALUES ARE RESTATED RATHER THAN IMPORTED
 *
 * archive.css and article.css are enqueued only on their own surfaces, so this
 * file cannot lean on them. The numbers below are therefore mirrored from the
 * approved system on purpose, not re-invented:
 *
 *   column   1040px   matches --arch, the archive's functional width
 *   measure   760px   matches --read, the archive's reading width
 *   kicker     12px / 700 / .15em / uppercase / --acc   as .dus-arch__kicker
 *   title      40px / 800 / -.025em / 1.08              as .dus-arch__title
 *   prose    17.5px / 1.88 / --body                     as .dus-article__body
 *
 * If the approved system ever moves, these move with it - they are a quotation,
 * and the comment is here so the quotation can be checked.
 *
 * Tokens (--wrap, --gut, --acc, --ink, --body, --line) come from .dus-home,
 * which the shell puts on its own wrapper.
 */

/*
 * EB Garamond - the editorial serif, for prose-page section headings. Quoted
 * from css/article.css so the simple pages render headings in the same face as
 * an Article; loaded here because article.css is not enqueued on page surfaces.
 */
@font-face {
	font-family: "EB Garamond";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/eb-garamond-700.woff2") format("woff2");
}

.dus-page {
	--page-col: 1040px;
	--page-read: 760px;

	padding: 0 0 80px;
}

.dus-page__wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gut);
}

.dus-page__col {
	max-width: var(--page-col);
}

/* ============================================================ OPENING */

/*
 * The same opening as an archive, minus the archive's instruments. A page has
 * nothing to search or filter, so the search field and subject row are absent
 * rather than emptied - the hairline below does the separating instead.
 */
.dus-page__intro {
	padding: 44px 0 26px;
	border-bottom: 1px solid var(--line);
}

.dus-page__kicker {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--acc);
}

.dus-page__title {
	margin: 10px 0 0;
	font-size: 40px;
	line-height: 1.08;
	letter-spacing: -.025em;
	font-weight: 800;
	color: var(--ink);
}

.dus-page__lede {
	margin: 12px 0 0;
	max-width: 58ch;
	font-size: 16px;
	line-height: 1.6;
	color: var(--body);
}

/* ============================================================ BODY */

/*
 * Editor-authored prose. The measure is narrower than the column above it: the
 * opening may run to the full functional width, but running text should not.
 */
.dus-page__body {
	max-width: var(--page-read);
	margin: 34px 0 0;
	font-size: 17.5px;
	line-height: 1.88;
	color: var(--body);
}

/* The opening already supplies the space above; the first block adds none. */
.dus-page__body--prose > *:first-child {
	margin-top: 0;
}

/*
 * THE LEGACY ELEMENT LADDER HAS TO BE ANSWERED EXPLICITLY.
 *
 * style.css carries a bare `p { font-size: 24px }` (and a responsive ladder
 * below it: 22px at 1439, 20px at 1199, 18px at 767, 16px at 575). A rule that
 * targets `p` directly beats inheritance from this container no matter how
 * specific the container's selector is, so without the line below the prose
 * rendered at 24px against 17.5px list items - and at 390px the paragraphs came
 * out SMALLER than the list beside them.
 *
 * font-size: inherit is the same answer article.css already gives for the same
 * reason; this is a quotation of that fix, not a new one.
 */
.dus-page__body--prose p,
.dus-page__body--prose li {
	font-size: inherit;
	line-height: inherit;
}

.dus-page__body--prose p {
	margin: 0 0 1.35em;
}

.dus-page__body--prose > *:last-child {
	margin-bottom: 0;
}

/* Headings bind to the text beneath them: a large gap above, a small one below. */
.dus-page__body--prose h2 {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.026em;
	line-height: 1.24;
	color: var(--ink);
	margin: 48px 0 14px;
}

.dus-page__body--prose h3 {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.32;
	color: var(--ink);
	margin: 36px 0 10px;
}

.dus-page__body--prose a {
	color: var(--acc);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.dus-page__body--prose a:hover {
	color: var(--acc-d);
}

/* Emphasis darkens rather than recolours: never a second colour in prose. */
.dus-page__body--prose strong {
	color: var(--ink);
	font-weight: 600;
}

.dus-page__body--prose ul,
.dus-page__body--prose ol {
	margin: 0 0 28px;
	padding-left: 24px;
	list-style-position: outside;
}

.dus-page__body--prose ul {
	list-style: disc;
}

.dus-page__body--prose ol {
	list-style: decimal;
}

.dus-page__body--prose li {
	margin-bottom: 10px;
	padding-left: 4px;
}

/* A quotation is marked by a rule, not a box - as elsewhere in the system. */
.dus-page__body--prose blockquote {
	margin: 32px 0;
	padding-left: 24px;
	border-left: 2px solid var(--line);
}

/* Restated after the inherit rule above, which would otherwise reclaim these. */
.dus-page__body--prose blockquote p {
	margin: 0;
	font-size: 17px;
	line-height: 1.8;
	color: var(--muted);
}

.dus-page__body--prose img {
	max-width: 100%;
	height: auto;
}

.dus-page__body--prose hr {
	margin: 44px 0;
	border: 0;
	border-top: 1px solid var(--line);
}

/*
 * Editor-authored Arabic, matching the correction already approved for
 * articles: prose typed into the editor arrives with no class, so it would
 * otherwise fall back to a face carrying no Arabic glyphs.
 *
 * Size and air are raised the way .dus-arabic-para does in an article - Amiri
 * at the English body size reads small and tight - but more moderately, because
 * this is an ordinary page rather than a work of translation. dir="rtl" on the
 * element already supplies the direction and the right alignment that follows
 * from it; nothing here needs to force either.
 */
.dus-page__body--prose p[lang="ar"]:not([class]),
.dus-page__body--prose [lang="ar"]:not([class]) {
	font-family: "Amiri", serif;
	font-size: 23px;
	line-height: 2;
	color: var(--ink);
	margin: 30px 0;
}

/* ============================================================ NARROW */

@media (max-width: 1023px) {

	.dus-page__title {
		font-size: 36px;
	}
}

@media (max-width: 767px) {

	.dus-page {
		padding: 0 0 56px;
	}

	.dus-page__intro {
		padding: 30px 0 20px;
	}

	.dus-page__title {
		font-size: 30px;
		letter-spacing: -.02em;
	}

	.dus-page__lede {
		font-size: 15px;
	}

	.dus-page__body {
		margin: 26px 0 0;
		font-size: 17px;
		line-height: 1.85;
	}

	.dus-page__body--prose h2 {
		font-size: 23px;
		margin: 38px 0 12px;
	}

	.dus-page__body--prose h3 {
		font-size: 18.5px;
		margin: 30px 0 9px;
	}

	/*
	 * Matched to the base rule's selector shape on purpose. The base rule
	 * carries p[lang="ar"], so a plainer selector here would lose on
	 * specificity and the narrow size would never apply.
	 */
	.dus-page__body--prose p[lang="ar"]:not([class]),
	.dus-page__body--prose [lang="ar"]:not([class]) {
		font-size: 20px;
		line-height: 1.95;
	}
}

/* ============================================================ ARTICLE MATCH
 *
 * The "simple" prose pages (About, Contact, Volunteer, Terms) are brought onto
 * the exact Article reading surface: the editorial serif for section headings,
 * the Article's 728px measure and its tighter 0.8em paragraph rhythm. Scoped to
 * --prose so the specialised / component pages (prayer times, classes, events,
 * visit, donate, fund) keep the shell's own body untouched. Every value is a
 * quotation of .dus-article__body in css/article.css.
 */
.dus-page__body--prose {
	max-width: 728px;
}

.dus-page__body--prose p {
	margin: 0 0 0.8em;
}

.dus-page__body--prose h2 {
	font-family: var(--ft-serif);
	letter-spacing: -.004em;
	line-height: 1.24;
	margin: 48px 0 14px;
}

.dus-page__body--prose h3 {
	font-family: var(--ft-serif);
	letter-spacing: -.003em;
	line-height: 1.3;
	margin: 36px 0 11px;
}

@media (max-width: 767px) {

	.dus-page__body--prose h2 {
		font-size: 23px;
		margin: 36px 0 13px;
	}

	.dus-page__body--prose h3 {
		font-size: 19px;
		margin: 28px 0 10px;
	}
}

/*
 * About Daar us Sunnah uses the Article rail + reading grid.
 * Release the ordinary prose width cap so that the internal
 * 1040px editorial grid can use the shell's available width.
 */
.dus-page__body--about-us {
    max-width: none;
    width: 100%;
}

/* ============================================================ ABOUT — SCHOLARLY APPARATUS
 *
 * About now uses the canonical Article scholarly components:
 * .dus-quran*, .dus-source* and .dus-honorific.
 *
 * No duplicate Arabic, translation or reference typography belongs here.
 * The Article stylesheet is the single source of truth.
 */

/* About — editorial photographs: full reading-column width, minimal framing
   (no card shadow, only a hairline radius); the phone shot is held narrower. */
.dus-page__body--about-us .dus-about__fig {
	margin: 36px 0;
}
.dus-page__body--about-us .dus-about__fig img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
}
.dus-page__body--about-us .dus-about__fig figcaption {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--muted);
	text-align: center;
}
.dus-page__body--about-us .dus-about__fig--portrait img {
	width: auto;
	max-width: 300px;
	margin: 0 auto;
}

/* About — gently scroll Contents links to their section. */
html {
    scroll-behavior: smooth;
}

.dus-page__body--about-us .dus-article__body h2[id] {
    scroll-margin-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}


/* ============================================================ ABOUT — EDITORIAL V2
 *
 * About follows the Article's typographic rhythm, but has a wider editorial
 * measure and a deliberately unboxed quotation system.
 */

/* Wider reading body: use the full available right-hand article column. */
.dus-page__body--about-us .dus-about__content {
    max-width: none;
    width: 100%;
}

/*
 * The outer About grid may use the full page column. This keeps the rail while
 * allowing the reading body to finish on the same right-hand measure as the
 * page/footer system rather than stopping at the Article's 728px measure.
 */
.dus-page__body--about-us .dus-about.dus-article__grid {
    max-width: var(--page-col);
}

/* Quote system: no cards, backgrounds, radius or decorative boxes. */
.dus-page__body--about-us .dus-about-quote {
    display: block;
    margin: 34px 0 38px;
    padding: 0 0 0 24px;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
}

/*
 * Label is title case as authored — never forced to uppercase.
 * It is the same general text scale as the body, only semibold.
 */
.dus-page__body--about-us .dus-about-quote__label {
    margin: 0 0 12px;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.55;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    text-align: left;
}

/*
 * ALL Arabic on About uses Scheherazade New.
 * Arabic is always RTL and right aligned.
 * Size matches the English body rather than becoming display typography.
 */
.dus-page__body--about-us [lang="ar"],
.dus-page__body--about-us .dus-about-quote__ar {
    font-family: "Amiri", serif;
    font-size: 1.12em;
    line-height: 1.9;
    direction: rtl;
    text-align: right;
    color: var(--ink);
}

.dus-page__body--about-us .dus-about-quote__ar {
    margin: 0 0 12px;
}

/* Translation: same text size, explicitly LTR and left aligned. */
.dus-page__body--about-us .dus-about-quote__tr {
    direction: ltr;
    text-align: left;
    font-size: 1em;
    line-height: 1.75;
    color: var(--body);
    margin: 0;
}

/* Qur'an citation lives at the end of its translation. */
.dus-page__body--about-us .dus-about-quote__qref {
    display: inline;
    white-space: nowrap;
    font-size: .86em;
    line-height: inherit;
    color: var(--muted);
}

/* Footnote number: restrained but unmistakable. */
.dus-page__body--about-us .dus-about-quote .dus-fn {
    margin-left: 2px;
}

/* References use the canonical Article apparatus. */
.dus-page__body--about-us .dus-about__references {
    margin-top: 64px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.dus-page__body--about-us .dus-about__references h2 {
    scroll-margin-top: 90px;
}

.dus-page__body--about-us .dus-about__backref {
    text-decoration: none;
    color: var(--muted);
    font-size: .9em;
}

/*
 * About's old Article Qur'an/source classes must never visually reintroduce
 * boxes if stale cached markup is encountered during deployment.
 */
.dus-page__body--about-us figure.dus-quran,
.dus-page__body--about-us figure.dus-source {
    background: transparent;
    border-radius: 0;
}

/* Smooth Contents + footnote navigation. */
.dus-page__body--about-us h2[id],
.dus-page__body--about-us [id^="about-ref-"] {
    scroll-margin-top: 90px;
}

@media (max-width: 767px) {

    .dus-page__body--about-us .dus-about-quote {
        margin: 28px 0 32px;
        padding-left: 16px;
    }

    .dus-page__body--about-us [lang="ar"],
    .dus-page__body--about-us .dus-about-quote__ar {
        font-size: 1.12em;
    }

    .dus-page__body--about-us .dus-about-quote__tr {
        font-size: 1em;
    }
}

/* ============================================================
   ABOUT — SMALL PORTRAIT IMAGE WRAP
   Small editorial images sit within the prose on desktop.
   ============================================================ */

@media (min-width: 768px) {
    .dus-page__body--about-us .dus-about__fig--portrait {
        float: right;
        width: min(300px, 38%);
        margin: 8px 0 24px 32px;
    }

    .dus-page__body--about-us .dus-about__fig--portrait img {
        display: block;
        width: 100%;
        height: auto;
    }

    .dus-page__body--about-us .dus-about__fig--portrait figcaption {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .dus-page__body--about-us .dus-about__fig--portrait {
        float: none;
        width: 100%;
        max-width: 300px;
        margin: 28px auto;
    }
}


/* ============================================================
   ABOUT — CLOSING CTA

   Editorial closing action area:
   large Masjid support panel + two restrained secondary actions.
   ============================================================ */

.dus-page__body--about-us .dus-about-cta {
    clear: both;
    width: 100%;
    margin: 72px 0 0;
}

.dus-page__body--about-us .dus-about-cta__rule {
    width: 100%;
    height: 1px;
    margin: 0 0 54px;
    background: var(--line);
}

.dus-page__body--about-us .dus-about-cta__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, .82fr);
    gap: 34px;
    align-items: stretch;
}


/* ------------------------------------------------------------
   PRIMARY — MASJID SUPPORT
   ------------------------------------------------------------ */

.dus-page__body--about-us .dus-about-cta__primary {
    position: relative;
    display: flex;
    min-height: 430px;
    padding: 42px;
    overflow: hidden;

    color: #fff;
    text-decoration: none;

    background:
        linear-gradient(
            90deg,
            rgba(16, 20, 18, .88) 0%,
            rgba(16, 20, 18, .72) 47%,
            rgba(16, 20, 18, .30) 100%
        ),
        url("/wp-content/uploads/2026/10/masjid-lesson.webp")
        center / cover no-repeat;

    border-radius: var(--r);
}

.dus-page__body--about-us .dus-about-cta__primary-content {
    position: relative;
    z-index: 1;

    align-self: flex-end;
    max-width: 650px;
}

.dus-page__body--about-us .dus-about-cta__eyebrow {
    display: block;
    margin: 0 0 14px;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: .02em;

    color: inherit;
}

.dus-page__body--about-us .dus-about-cta__primary h2 {
    max-width: 620px;
    margin: 0 0 16px;

    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.04;
    letter-spacing: -.035em;

    color: #fff;
}

.dus-page__body--about-us .dus-about-cta__primary p {
    max-width: 560px;
    margin: 0 0 28px;

    font-size: 18px;
    line-height: 1.55;

    color: rgba(255,255,255,.88);
}

.dus-page__body--about-us .dus-about-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    min-width: 205px;
    padding: 15px 18px;

    font-size: 16px;
    line-height: 1;
    font-weight: 600;

    color: var(--ink);
    background: #fff;
    border-radius: var(--r);
}

.dus-page__body--about-us .dus-about-cta__primary:hover
.dus-about-cta__button span {
    transform: translateX(4px);
}

.dus-page__body--about-us .dus-about-cta__button span {
    transition: transform .18s ease;
}


/* ------------------------------------------------------------
   SECONDARY ACTIONS
   ------------------------------------------------------------ */

.dus-page__body--about-us .dus-about-cta__secondary {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 18px;
}

.dus-page__body--about-us .dus-about-cta__card {
    display: flex;
    flex-direction: column;

    min-height: 0;
    padding: 30px;

    color: var(--ink);
    text-decoration: none;

    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r);

    transition:
        background-color .18s ease,
        border-color .18s ease;
}

.dus-page__body--about-us .dus-about-cta__card:hover {
    background: var(--acc-t);
}

.dus-page__body--about-us .dus-about-cta__card
.dus-about-cta__eyebrow {
    color: var(--muted);
}

.dus-page__body--about-us .dus-about-cta__card h3 {
    margin: 0 0 10px;

    font-size: 25px;
    line-height: 1.12;
    letter-spacing: -.025em;

    color: var(--ink);
}

.dus-page__body--about-us .dus-about-cta__card p {
    margin: 0 0 24px;

    font-size: 16px;
    line-height: 1.65;

    color: var(--body);
}

.dus-page__body--about-us .dus-about-cta__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-top: auto;
    padding-top: 18px;

    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;

    border-top: 1px solid var(--line);
}

.dus-page__body--about-us .dus-about-cta__link span {
    transition: transform .18s ease;
}

.dus-page__body--about-us .dus-about-cta__card:hover
.dus-about-cta__link span {
    transform: translateX(4px);
}


/* ------------------------------------------------------------
   TABLET / MOBILE
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .dus-page__body--about-us .dus-about-cta__grid {
        grid-template-columns: 1fr;
    }

    .dus-page__body--about-us .dus-about-cta__secondary {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
}

@media (max-width: 767px) {

    .dus-page__body--about-us .dus-about-cta {
        margin-top: 52px;
    }

    .dus-page__body--about-us .dus-about-cta__rule {
        margin-bottom: 36px;
    }

    .dus-page__body--about-us .dus-about-cta__grid {
        gap: 18px;
    }

    .dus-page__body--about-us .dus-about-cta__primary {
        min-height: 390px;
        padding: 28px 24px;

        background-position: center;
    }

    .dus-page__body--about-us .dus-about-cta__primary h2 {
        font-size: 31px;
    }

    .dus-page__body--about-us .dus-about-cta__primary p {
        font-size: 17px;
    }

    .dus-page__body--about-us .dus-about-cta__secondary {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .dus-page__body--about-us .dus-about-cta__card {
        padding: 24px;
    }

    .dus-page__body--about-us .dus-about-cta__card h3 {
        font-size: 23px;
    }
}


/* ============================================================
   ABOUT — CTA WIDE BREAKOUT

   The editorial body keeps its normal reading measure.
   Only the closing CTA expands beyond it on desktop.
   ============================================================ */

@media (min-width: 901px) {

    .dus-page__body--about-us .dus-about-cta {
        /*
         * Break out equally from the reading column while remaining
         * centred on that column. Keep a safe viewport gutter.
         */
        width: min(
            calc(100vw - 64px),
            var(--page-col)
        );

        max-width: none;

        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    .dus-page__body--about-us .dus-about-cta__grid {
        grid-template-columns:
            minmax(0, 1.75fr)
            minmax(300px, .75fr);

        gap: 28px;
    }

    .dus-page__body--about-us .dus-about-cta__primary {
        min-height: 460px;
    }
}

/* Tablet/mobile stays inside the normal page gutter. */
@media (max-width: 900px) {

    .dus-page__body--about-us .dus-about-cta {
        width: 100%;
        max-width: none;
        left: auto;
        transform: none;
    }
}

/* ABOUT — CTA BACKGROUND ROBUST FIX */
.dus-page__body--about-us .dus-about-cta__primary {
    background-image:
        linear-gradient(
            90deg,
            rgba(16, 20, 18, .88) 0%,
            rgba(16, 20, 18, .72) 47%,
            rgba(16, 20, 18, .30) 100%
        ),
        url("/wp-content/uploads/2026/10/masjid-lesson.webp");

    background-position: center, center;
    background-size: auto, cover;
    background-repeat: no-repeat, no-repeat;
}

/* ============================================================
   ABOUT — CTA DESKTOP RIGHT BREAKOUT

   Keep the CTA anchored to the article's left edge.
   Expand only towards the right so it never overlaps the
   contents/navigation rail.
   ============================================================ */

@media (min-width: 901px) {

    .dus-page__body--about-us .dus-about-cta {
        /*
         * Cancel the earlier centred breakout.
         */
        position: relative;
        left: auto;
        transform: none;

        /*
         * Start exactly where the article starts and use the
         * remaining viewport width, with a safe right gutter.
         */
        width: calc(100vw - 32px - var(--dus-about-cta-left, 0px));
        max-width: 1135px;

        /*
         * --dus-about-cta-left is supplied below from the element's
         * actual viewport position.
         */
    }

    .dus-page__body--about-us .dus-about-cta__primary {
        min-height: 380px;
    }

    .dus-page__body--about-us .dus-about-cta__primary h2 {
        font-size: clamp(32px, 2.5vw, 40px);
        max-width: 600px;
    }
}



/* ==========================================================================
   ABOUT — QUR'ANIC ARABIC OPEN / CLOSE MARKS

   Mirrors the canonical Article Qur'an treatment.
   Scoped specifically to Qur'an figures so hadith, athar and other Arabic
   quotations remain untouched.
   ========================================================================== */

.dus-page__body--about-us
.dus-about-quote--quran
.dus-about-quote__ar::before {
    content: "﴿";
    display: inline;
    margin-inline-end: .22em;
}

.dus-page__body--about-us
.dus-about-quote--quran
.dus-about-quote__ar::after {
    content: "﴾";
    display: inline;
    margin-inline-start: .22em;
}

/* ================= END ABOUT QUR'ANIC ARABIC MARKS ======================= */


/* ==========================================================================
   ABOUT — COMPACT CLOSING CTA
   Desktop treatment only. Converts the oversized closing campaign feature
   into a shorter horizontal editorial strip.
   ========================================================================== */

@media (min-width: 901px) {

    .dus-page__body--about-us .dus-about-cta {
        margin-top: 54px;
    }

    .dus-page__body--about-us .dus-about-cta__rule {
        margin-bottom: 28px;
    }

    .dus-page__body--about-us .dus-about-cta__grid {
        gap: 22px;
    }

    .dus-page__body--about-us .dus-about-cta__primary {
        min-height: 220px;
        padding: 26px 30px;
    }

    .dus-page__body--about-us .dus-about-cta__primary-content {
        max-width: 610px;
    }

    .dus-page__body--about-us .dus-about-cta__eyebrow {
        margin-bottom: 8px;
        font-size: 13px;
    }

    .dus-page__body--about-us .dus-about-cta__primary h2 {
        max-width: 570px;
        margin-bottom: 9px;
        font-size: clamp(27px, 2.15vw, 34px);
        line-height: 1.06;
    }

    .dus-page__body--about-us .dus-about-cta__primary p {
        max-width: 540px;
        margin-bottom: 17px;
        font-size: 16px;
        line-height: 1.45;
    }

    .dus-page__body--about-us .dus-about-cta__button {
        min-width: 180px;
        padding: 12px 15px;
        font-size: 14px;
    }

    .dus-page__body--about-us .dus-about-cta__card {
        padding: 20px 22px;
    }

    .dus-page__body--about-us .dus-about-cta__card h3 {
        margin-bottom: 5px;
        font-size: 21px;
    }

    .dus-page__body--about-us .dus-about-cta__card p {
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 1.45;
    }

    .dus-page__body--about-us .dus-about-cta__link {
        padding-top: 10px;
        font-size: 14px;
    }
}

/* ================= END ABOUT COMPACT CLOSING CTA ========================= */


/* ==========================================================================
   ABOUT — ORGANISATION IDENTITY
   Keep the closing identity closely attached to the compact CTA.
   Scoped to About only; ordinary Article author components are untouched.
   ========================================================================== */

.dus-page__body--about-us .dus-author--organisation {
    margin-top: 22px;
    padding-top: 20px;
}

@media (min-width: 901px) {
    .dus-page__body--about-us .dus-author--organisation {
        margin-top: 18px;
        padding-top: 18px;
    }
}

/* ================= END ABOUT ORGANISATION IDENTITY ======================= */

/* ============================================================
   ABOUT CTA PRIMARY IMAGE — UNIVERSAL ROUNDED EDGES
   ============================================================ */

.dus-page__body--about-us .dus-about-cta__primary {
    border-radius: 16px !important;
    overflow: hidden;
}