/* =============================================================
   ARADEL — PAGE MODULES
   File: aradel-page-modules/assets/aradel-page-modules.css

   Covers:
     1.  Shared box-sizing scope
     2.  Page Intro              (.ar-pi-*)
     3.  Feature Split           (.ar-fs-*)
     4.  Dual Feature            (.ar-df-*)
     5.  Card Teaser Pair        (.ar-ctp-*)
     6.  Ornament hooks          (.ar-pm-ornament)
     7.  Reveal animation        (.ar-pm-reveal)
     8.  Accordion Section       (.ar-acc-section)   — uses shared .ar-acc
     9.  Editorial Text Block    (.ar-etb-section)
    10.  CTA Block               (.ar-ctab-section)

   Design tokens used:
     Brand red:    #C1000F
     Sherpa blue:  #01303A
     Green:        #005A4E
     Orange:       #F36417
     Max-width:    1440px
     L/R padding:  112px / 64px / 24px  (desktop / tablet / mobile)
   Intro top padding: 56px / 40px / 32px  (desktop / tablet / mobile)
     Font:         Nunito Sans
     Radius:       20px
   ============================================================= */


/* ── 1. Shared box-sizing scope ──────────────────────────────────────────── */

.ar-pi-section *,
.ar-pi-section *::before,
.ar-pi-section *::after,
.ar-fs-section *,
.ar-fs-section *::before,
.ar-fs-section *::after,
.ar-df-section *,
.ar-df-section *::before,
.ar-df-section *::after,
.ar-ctp-section *,
.ar-ctp-section *::before,
.ar-ctp-section *::after,
.ar-sc-section *,
.ar-sc-section *::before,
.ar-sc-section *::after,
.ar-rp-section *,
.ar-rp-section *::before,
.ar-rp-section *::after,
.ar-hb-section *,
.ar-hb-section *::before,
.ar-hb-section *::after,
.ar-acc-section *,
.ar-acc-section *::before,
.ar-acc-section *::after,
.ar-etb-section *,
.ar-etb-section *::before,
.ar-etb-section *::after,
.ar-ctab-section *,
.ar-ctab-section *::before,
.ar-ctab-section *::after,
.ar-cg-section *,
.ar-cg-section *::before,
.ar-cg-section *::after,
.ar-so-section *,
.ar-so-section *::before,
.ar-so-section *::after {
	box-sizing: border-box;
}


/* ── 2. Shared module typography contract ───────────────────────────────── */

.ar-pm-module-heading {
	font-size: 32px;
	line-height: 44px;
}

.ar-pm-module-heading.ar-pm-module-heading--desktop-lg {
	font-size: 48px;
	line-height: 64px;
}

.ar-pm-module-heading.ar-pm-module-heading--desktop-md {
	font-size: 32px;
	line-height: 44px;
}

.ar-pm-module-body,
.ar-pm-module-body p {
	font-size: 18px;
	line-height: 27px;
}

@media ( max-width: 1024px ) {
	.ar-pm-module-heading,
	.ar-pm-module-heading.ar-pm-module-heading--desktop-lg,
	.ar-pm-module-heading.ar-pm-module-heading--desktop-md {
		font-size: 28px;
		line-height: 38px;
	}
}

@media ( max-width: 640px ) {
	.ar-pm-module-heading,
	.ar-pm-module-heading.ar-pm-module-heading--desktop-lg,
	.ar-pm-module-heading.ar-pm-module-heading--desktop-md {
		font-size: 24px;
		line-height: 34px;
	}

	.ar-pm-module-body,
	.ar-pm-module-body p {
		font-size: 16px;
		line-height: 25px;
	}
}


/* ── 2a. Shared page intro typography contract ───────────────────────────── */

.ar-pm-page-intro-heading {
	font-size: 48px;
	line-height: 64px;
}

.ar-pm-page-intro-heading.ar-pm-page-intro-heading--desktop-38 {
	font-size: 38px;
	line-height: 50px;
}

.ar-pm-page-intro-heading.ar-pm-page-intro-heading--desktop-48 {
	font-size: 48px;
	line-height: 64px;
}

.ar-pm-page-intro-body,
.ar-pm-page-intro-body p {
	font-size: 18px;
	line-height: 27px;
}

@media ( max-width: 1024px ) {
	.ar-pm-page-intro-heading,
	.ar-pm-page-intro-heading.ar-pm-page-intro-heading--desktop-38,
	.ar-pm-page-intro-heading.ar-pm-page-intro-heading--desktop-48 {
		font-size: 32px;
		line-height: 44px;
	}
}

@media ( max-width: 640px ) {
	.ar-pm-page-intro-heading,
	.ar-pm-page-intro-heading.ar-pm-page-intro-heading--desktop-38,
	.ar-pm-page-intro-heading.ar-pm-page-intro-heading--desktop-48 {
		font-size: 24px;
		line-height: 34px;
	}

	.ar-pm-page-intro-body,
	.ar-pm-page-intro-body p {
		font-size: 16px;
		line-height: 25px;
	}
}


/* =============================================================
   8. ACCORDION SECTION
   Full-width section wrapper for the accordion_section layout.
   The accordion component itself (.ar-acc) is styled in aradel-shared.css.
   ============================================================= */

.ar-acc-section {
    width: 100%;
    position: relative;
    overflow-x: clip; /* allow ornament vertical bleed */
}

.ar-acc-section__inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 112px;
    padding-right: 112px;
    padding-top: 80px;
    padding-bottom: 24px;
    box-sizing: border-box;
}

.ar-acc-section__heading {
    margin: 0 0 32px;
    font-family: "Nunito Sans", system-ui, sans-serif;
    font-weight: 400;
    color: var(--ads-brand-blue, #01303A);
}

.ar-acc-section__intro {
    margin-bottom: 40px;
}

.ar-acc-section__intro p {
    margin: 0 0 12px;
    font-family: "Nunito Sans", system-ui, sans-serif;
    color: #000;
}

.ar-acc-section__intro p:last-child {
    margin-bottom: 0;
}

/* ── Responsive — Accordion Section ─────────────────────────────────────── */

@media ( max-width: 1024px ) {
    .ar-acc-section__inner {
        padding-left: 64px;
        padding-right: 64px;
        padding-top: 64px;
    }
}

@media ( max-width: 640px ) {
    .ar-acc-section__inner {
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 48px;
    }
}


/* ── Full-gradient accordion variant (.ar-acc-section--full-gradient) ───────
   The entire section sits on the selected gradient preset.
   All text, icons, borders, and dividers adapt for dark-on-gradient contrast.
   The .ar-acc component's default rules are scoped to this parent so they
   don't affect standard light accordions elsewhere on the page.
   ============================================================= */

/* Heading and intro — white */
.ar-acc-section--full-gradient.ar-acc-section--light-text .ar-acc-section__heading {
    color: #fff;
}

.ar-acc-section--full-gradient.ar-acc-section--light-text .ar-acc-section__intro p,
.ar-acc-section--full-gradient.ar-acc-section--light-text .ar-acc-section__intro--from-band p {
    color: rgba(255, 255, 255, 0.85);
}

/* Accordion item dividers — lighter for gradient contrast */
.ar-acc-section--full-gradient.ar-acc-section--light-text .ar-acc__item {
    border-top-color: rgba(255, 255, 255, 0.15);
}

/* Trigger title */
.ar-acc-section--full-gradient.ar-acc-section--light-text .ar-acc__title {
    color: #fff;
}

/* Open state: slight dim instead of red */
.ar-acc-section--full-gradient.ar-acc-section--light-text .ar-acc__item.is-open .ar-acc__title {
    color: rgba(255, 255, 255, 0.75);
}

/* Icon — white, dimmed when closed */
.ar-acc-section--full-gradient.ar-acc-section--light-text .ar-acc__icon {
    color: rgba(255, 255, 255, 0.55);
}

.ar-acc-section--full-gradient.ar-acc-section--light-text .ar-acc__item.is-open .ar-acc__icon {
    color: rgba(255, 255, 255, 0.90);
}

/* Focus outline — white on gradient */
.ar-acc-section--full-gradient.ar-acc-section--light-text .ar-acc__trigger:focus-visible {
    outline-color: rgba(255, 255, 255, 0.80);
}

/* Body copy — readable white */
.ar-acc-section--full-gradient.ar-acc-section--light-text .ar-acc__body p,
.ar-acc-section--full-gradient.ar-acc-section--light-text .ar-acc__body ul,
.ar-acc-section--full-gradient.ar-acc-section--light-text .ar-acc__body ol {
    color: rgba(255, 255, 255, 0.85);
}

.ar-acc-section--full-gradient.ar-acc-section--light-text .ar-acc__body strong {
    color: #fff;
}

/* Links inside body — white underlined, accessible */
.ar-acc-section--full-gradient.ar-acc-section--light-text .ar-acc__body a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.55);
}

.ar-acc-section--full-gradient.ar-acc-section--light-text .ar-acc__body a:hover {
    color: #fff;
    text-decoration-color: #fff;
}

/* Download links */
.ar-acc-section--full-gradient.ar-acc-section--light-text .ar-acc__download {
    color: rgba(255, 255, 255, 0.90);
}

.ar-acc-section--full-gradient.ar-acc-section--light-text .ar-acc__download:hover {
    color: #fff;
}

/* Extra text link */
.ar-acc-section--full-gradient.ar-acc-section--light-text .ar-acc__extra-link a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ar-acc-section--full-gradient.ar-acc-section--light-text .ar-acc__extra-link a:hover {
    color: #fff;
}


/* =============================================================
   9. EDITORIAL TEXT BLOCK
   Full-width mid-page text block with optional gradient background.
   ============================================================= */

.ar-etb-section {
    width: 100%;
    position: relative;
    overflow-x: clip; /* allow ornament vertical bleed */
}

.ar-etb-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 112px;
    padding-right: 112px;
    padding-top: 80px;
    padding-bottom: 80px;
    box-sizing: border-box;
}

.ar-etb__eyebrow {
    font-family: "Nunito Sans", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 1.28px;
    text-transform: uppercase;
    color: #C1000F;
    margin: 0 0 40px;
}

/* On dark gradient backgrounds, eyebrow shifts to semi-transparent white */
.ar-etb-section--dark .ar-etb__eyebrow {
    color: rgba(255, 255, 255, 0.65);
}

.ar-etb__heading {
    margin: 0 0 32px;
    font-family: "Nunito Sans", system-ui, sans-serif;
    font-weight: 400;
    color: var(--ads-brand-blue, #01303A);
}

.ar-etb-section--dark .ar-etb__heading {
    color: #fff;
}

.ar-etb__body {
    font-family: "Nunito Sans", system-ui, sans-serif;
    color: #000;
}

.ar-etb-section--dark .ar-etb__body,
.ar-etb-section--dark .ar-etb__body p {
    color: rgba(255, 255, 255, 0.85);
}

.ar-etb__body p {
    margin: 0 0 16px;
}

.ar-etb__body p:last-child {
    margin-bottom: 0;
}

.ar-etb__cta {
    margin-top: 40px;
    text-align: left;
}

/* ── Responsive — Editorial Text Block ───────────────────────────────────── */

@media ( max-width: 1024px ) {
    .ar-etb-inner {
        padding-left: 64px;
        padding-right: 64px;
        padding-top: 64px;
        padding-bottom: 64px;
    }
}

@media ( max-width: 640px ) {
    .ar-etb-inner {
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .ar-etb__eyebrow {
        margin-bottom: 28px;
    }
    .ar-etb__cta {
        margin-top: 32px;
    }
}


/* =============================================================
   10. CTA BLOCK
   Full-width gradient CTA. Supports text-only and image-split modes.
   ============================================================= */

.ar-ctab-section {
    width: 100%;
    position: relative;
    overflow-x: clip; /* allow ornament vertical bleed */
}

.ar-ctab-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 112px;
    padding-right: 112px;
    padding-top: 96px;
    padding-bottom: 96px;
    box-sizing: border-box;
}

/* ── Text-only mode ──────────────────────────────────────────────────────── */

.ar-ctab__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ar-ctab__heading {
    margin: 0;
    font-family: "Nunito Sans", system-ui, sans-serif;
    font-weight: 400;
    color: #fff;
}

/* On muted / no-gradient backgrounds, heading uses dark colour */
.ar-ctab-section:not([data-gradient]),
.ar-ctab-section[data-gradient="none"] {
    background: transparent;
}

.ar-ctab-section--light-surface .ar-ctab__heading {
    color: var(--ads-brand-blue, #01303A);
}

.ar-ctab__body {
    margin: 0;
    font-family: "Nunito Sans", system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.85);
}

.ar-ctab-section--light-surface .ar-ctab__body {
    color: #000;
}

/* CTA button — align self so it sits flush left */
.ar-ctab__content .ar-action {
    align-self: flex-start;
}

/* ── Split mode (with image) ─────────────────────────────────────────────── */

.ar-ctab-section--split .ar-ctab__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* Image on right: swap columns */
.ar-ctab-section--img-right .ar-ctab__grid {
    direction: rtl;
}

.ar-ctab-section--img-right .ar-ctab__image-wrap,
.ar-ctab-section--img-right .ar-ctab__content {
    direction: ltr;
}

.ar-ctab__image-wrap {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: rgba(255, 255, 255, 0.08);
}

.ar-ctab__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Responsive — CTA Block ──────────────────────────────────────────────── */

@media ( max-width: 1024px ) {
    .ar-ctab-inner {
        padding-left: 64px;
        padding-right: 64px;
        padding-top: 72px;
        padding-bottom: 72px;
    }
    .ar-ctab-section--split .ar-ctab__grid {
        gap: 56px;
    }
}

@media ( max-width: 900px ) {
    /* Stack image above content on tablet/mobile */
    .ar-ctab-section--split .ar-ctab__grid {
        grid-template-columns: 1fr;
        gap: 32px;
        direction: ltr;
    }
    .ar-ctab__image-wrap {
        aspect-ratio: 16 / 9;
    }
}

@media ( max-width: 640px ) {
    .ar-ctab-inner {
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 56px;
        padding-bottom: 56px;
    }
}


/* =============================================================
   2. PAGE INTRO
   ============================================================= */

/* ── Section wrapper ─────────────────────────────────────────────────────── */

.ar-pi-section {
	padding-top: 56px;
	background: transparent;
}

/* ── Inner container ─────────────────────────────────────────────────────── */

.ar-pi-inner {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 112px;
	padding-right: 112px;
}

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */

.ar-pi__eyebrow {
	font-family: "Nunito Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 1.28px;
	text-transform: uppercase;
	color: #C1000F; /* default — red */
	margin: 0 0 48px;
}

/* Eyebrow colour modifiers */
.ar-pi__eyebrow--red    { color: #C1000F; }
.ar-pi__eyebrow--sherpa { color: #01303A; }
.ar-pi__eyebrow--white  { color: #ffffff; }
.ar-pi__eyebrow--black  { color: #000000; }

/* ── Title ───────────────────────────────────────────────────────────────── */

.ar-pi__title {
	font-family: "Nunito Sans", sans-serif;
	font-weight: 400;
	letter-spacing: 0.014px;
	color: #000000;
	margin: 0 0 35px;
}

/* ── Body ────────────────────────────────────────────────────────────────── */

.ar-pi__body {
	margin: 0 0 39px;
}

.ar-pi__body p {
	font-family: "Nunito Sans", sans-serif;
	font-weight: 400;
	color: #000000;
	margin: 0 0 18px;
}

.ar-pi__body p:last-child {
	margin-bottom: 0;
}

/* ── CTA ─────────────────────────────────────────────────────────────────── */

.ar-pi__cta {
	/* spacing handled by ar-pi__body margin-bottom: 39px */
}

/* ── Colour variants ─────────────────────────────────────────────────────── */

/* dark = default, no override needed */

.ar-pi--colour-white .ar-pi__eyebrow {
	color: rgba(255,255,255,0.7);
}

.ar-pi--colour-white .ar-pi__title,
.ar-pi--colour-white .ar-pi__body p {
	color: #ffffff;
}

.ar-pi--colour-sherpa .ar-pi__eyebrow {
	color: #C1000F; /* eyebrow always red regardless of text colour */
}

.ar-pi--colour-sherpa .ar-pi__title,
.ar-pi--colour-sherpa .ar-pi__body p {
	color: #01303A;
}

/* ── Responsive — Page Intro ─────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.ar-pi-inner {
		padding-left: 64px;
		padding-right: 64px;
	}

	.ar-pi-section {
		padding-top: 40px;
	}

	.ar-pi__eyebrow {
		margin-bottom: 36px;
	}

	.ar-pi__body {
		margin-bottom: 32px;
	}
}

/* Grid collapses at 900px — same breakpoint as feature_split stacking */

@media (max-width: 768px) {
	.ar-pi-section {
		padding-top: 32px;
		padding-bottom: 72px;
	}

	.ar-pi-inner {
		padding-left: 24px;
		padding-right: 24px;
	}

	.ar-pi__eyebrow {
		margin-bottom: 24px;
	}

	.ar-pi__title {
		margin-bottom: 20px;
	}

	.ar-pi__body {
		margin-bottom: 28px;
	}
}

@media (max-width: 480px) {
	.ar-pi-section {
		padding-bottom: 48px;
	}
}




/* =============================================================
   3. FEATURE SPLIT
   ============================================================= */

/* ── Section wrapper ─────────────────────────────────────────────────────── */
/*
   No top/bottom padding here — vertical spacing is set on the outer
   Bricks section wrapper, not on the module itself.
   Background and overflow are the only section-level concerns.
*/

.ar-fs-section {
	position: relative;
	overflow-x: clip; /* contain ornaments horizontally; allow vertical bleed into adjacent rows */
}

/* When no gradient preset is active, section background is transparent (default).
   [data-gradient] backgrounds from aradel-shared.css must not be overridden here. */
.ar-fs-section.ar-fs--bg-default:not([data-gradient]) {
	background: transparent;
}

/* ── Background style variants ───────────────────────────────────────────── */

.ar-fs--bg-default { background: transparent; }
.ar-fs--bg-muted   { background: #EFEFEF; }
.ar-fs--bg-green   { background: #005A4E; }
.ar-fs--bg-red     { background: #C1000F; }
.ar-fs--bg-dark    { background: #012F39; }

/* Coloured variants need outer separation to read as distinct sections.
   Transparent (default) has no margin-top — spacing comes from 96px inner padding. */
.ar-fs--has-surface {
	margin-top: 96px;
}

/* When a background colour is set, increase bottom padding for visual breathing room */
.ar-fs--has-surface .ar-fs-inner {
	padding-bottom: 120px;
}

/* ── Light text override (applied on dark backgrounds) ───────────────────── */

.ar-fs--light-text .ar-fs__eyebrow {
	color: rgba(255,255,255,0.65);
}

.ar-fs--light-text .ar-fs__title,
.ar-fs--light-text .ar-fs__body,
.ar-fs--light-text .ar-fs__body p {
	color: #ffffff;
}

/* ── Inner container ─────────────────────────────────────────────────────── */

.ar-fs-inner {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 96px;
	padding-bottom: 96px;
	padding-left: 112px;
	padding-right: 112px;
	position: relative;
	z-index: 1;
}

/* ── Grid — two columns, 50/50 ───────────────────────────────────────────── */
/*
   Bricks overrides flex/grid inside shortcode output — !important required.
   align-items: start prevents grid from stretching the media col to text height,
   which was overriding aspect-ratio on the image wrap.
*/

.ar-fs__grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 64px !important;
	align-items: center !important;
}

/* Image LEFT: swap column order */
.ar-fs--img-left .ar-fs__grid {
	direction: rtl;
}

.ar-fs--img-left .ar-fs__text-col,
.ar-fs--img-left .ar-fs__media-col {
	direction: ltr;
}

.ar-fs--img-left .ar-fs__text-col {
	text-align: left;
}

/* ── Text column ─────────────────────────────────────────────────────────── */

.ar-fs__text-col {
	display: flex;
	flex-direction: column;
	gap: clamp(1.75rem, 0.9434rem + 3.3962vw, 4rem);
}

/* Tighten individual spacing to match spec */
.ar-fs__eyebrow  { margin: 0; }
.ar-fs__title    { margin: 0; }
.ar-fs__body     { margin: 0; }
.ar-fs__cta      { margin-top: calc(49px - clamp(1.75rem, 0.9434rem + 3.3962vw, 4rem)); }

/* ── Media column ────────────────────────────────────────────────────────── */

/* ── Media column ────────────────────────────────────────────────────────── */

.ar-fs__media-col {
	align-self: center !important;
	width: 100%;
}

.ar-fs__media-wrap {
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
	background: #e8e8e8;
}

/* Inner ratio container — padding-bottom trick is immune to grid/flex stretch */
.ar-fs__media-ratio {
	position: relative !important;
	width: 100% !important;
	padding-bottom: 100% !important; /* 1:1 square — matches Porsche */
	height: 0 !important;
	display: block !important;
}

.ar-fs__image {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */

.ar-fs__eyebrow {
	font-family: "Nunito Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 1.28px;
	text-transform: uppercase;
	color: #C1000F; /* default */
}

/* Eyebrow colour modifiers — ACF-driven per row */
.ar-fs__eyebrow--red    { color: #C1000F; }
.ar-fs__eyebrow--sherpa { color: #01303A; }
.ar-fs__eyebrow--white  { color: #ffffff; }
.ar-fs__eyebrow--black  { color: #000000; }

/* Eyebrow above image (img-left variant) — renders in media col, above the image */
.ar-fs__eyebrow--above-image {
	display: block;
	margin-bottom: 24px;
}

.ar-fs__title {
	font-family: "Nunito Sans", sans-serif;
	font-weight: 400;
	color: #000000;
}

.ar-fs--title-lg .ar-fs__title { letter-spacing: 0.014px; }
.ar-fs--title-md .ar-fs__title { letter-spacing: 0.01px; }

/* ── Body ────────────────────────────────────────────────────────────────── */

.ar-fs__body {
	font-family: "Nunito Sans", sans-serif;
	font-weight: 400;
	color: #000000;
}

.ar-fs__body p {
	margin: 0 0 16px;
}

.ar-fs__body p:last-child {
	margin-bottom: 0;
}

/* ── Responsive — Feature Split ──────────────────────────────────────────── */

@media (max-width: 1024px) {
	.ar-fs--has-surface {
		margin-top: 64px;
	}

	.ar-fs-inner {
		padding-top: 72px;
		padding-bottom: 72px;
		padding-left: 64px;
		padding-right: 64px;
	}

	.ar-fs--has-surface .ar-fs-inner {
		padding-bottom: 96px;
	}

	.ar-fs__grid {
		gap: 40px !important;
	}

}

/* Tablet — stack below 900px, before full mobile */
@media (max-width: 900px) {
	.ar-fs__grid {
		grid-template-columns: 1fr !important;
		gap: 40px !important;
	}

	/* Reset RTL direction trick — stacked layout doesn't need it */
	.ar-fs--img-left .ar-fs__grid {
		direction: ltr;
	}

	/* On tablet/mobile image always appears above text */
	.ar-fs__media-col { order: -1; }
	.ar-fs__text-col  { order: 1; }

}

@media (max-width: 768px) {
	.ar-fs--has-surface {
		margin-top: 48px;
	}

	.ar-fs-inner {
		padding-top: 56px;
		padding-bottom: 56px;
		padding-left: 24px;
		padding-right: 24px;
	}

	.ar-fs--has-surface .ar-fs-inner {
		padding-bottom: 72px;
	}

	.ar-fs__grid {
		gap: 32px !important;
	}

	.ar-fs__text-col {
		gap: clamp(1rem, 0.75rem + 1.5vw, 1.75rem);
	}

	.ar-fs__cta {
		margin-top: 0;
	}

}


/* =============================================================
   4. DUAL FEATURE
   Two-column editorial text block. No media. Calmer rhythm
   than feature_split — designed for paired statements such
   as Mission / Vision, dual editorial messages, etc.

   Scope:  .ar-df-section  /  .ar-df-inner  /  .ar-df__*
   ============================================================= */

/* ── Section wrapper ─────────────────────────────────────────────────────── */

.ar-df-section {
	position: relative;
	overflow-x: clip; /* allow ornament vertical bleed */
}

.ar-df-section.ar-df--bg-default:not([data-gradient]) {
	background: transparent;
}

/* ── Background style variants — mirrors feature_split tokens ────────────── */

.ar-df--bg-default { background: transparent; }
.ar-df--bg-muted   { background: #EFEFEF; }
.ar-df--bg-green   { background: #005A4E; }
.ar-df--bg-red     { background: #C1000F; }
.ar-df--bg-dark    { background: #012F39; }

/* Coloured variants need top separation to read as distinct sections */
.ar-df--has-surface {
	margin-top: 96px;
}

/* ── Inner container ─────────────────────────────────────────────────────── */

.ar-df-inner {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 96px;
	padding-bottom: 96px;
	padding-left: 112px;
	padding-right: 112px;
	position: relative;
	z-index: 1;
}

/* Coloured backgrounds: bump bottom padding for visual breathing room */
.ar-df--has-surface .ar-df-inner {
	padding-bottom: 120px;
}

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */
/*
   Sits above the grid, flush-left above the left column.
   Spacing below (32px) creates clear separation before the content columns.
*/

.ar-df__eyebrow {
	font-family: "Nunito Sans", sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 13px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #C1000F;
	margin: 0 0 32px;
}

/* Light text on dark backgrounds */
.ar-df--light-text .ar-df__eyebrow {
	color: rgba(255,255,255,0.65);
}

/* ── Two-column grid ─────────────────────────────────────────────────────── */
/*
   Equal columns, 64px gap. No RTL tricks — this is a pure content grid.
   !important guards against Bricks flex override.
*/

.ar-df__grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 64px !important;
	align-items: start !important; /* columns top-aligned — text-only layout */
}

/* ── Individual content column ───────────────────────────────────────────── */

.ar-df__col {
	display: flex;
	flex-direction: column;
}

/* ── Column title ────────────────────────────────────────────────────────── */

.ar-df__title {
	font-family: "Nunito Sans", sans-serif;
	font-weight: 400;
	letter-spacing: 0.01px;
	color: #000000;
	margin: 0 0 34px; /* title → body spacing per spec */
	max-width: 480px;  /* comfortable reading width per column */
}

/* ── Column body ─────────────────────────────────────────────────────────── */

.ar-df__body {
	font-family: "Nunito Sans", sans-serif;
	font-weight: 400;
	color: #000000;
	max-width: 520px;  /* prevent overly wide lines in large viewports */
}

.ar-df__body p {
	margin: 0 0 16px;
}

.ar-df__body p:last-child {
	margin-bottom: 0;
}

/* ── Light text override ─────────────────────────────────────────────────── */

.ar-df--light-text .ar-df__title,
.ar-df--light-text .ar-df__body,
.ar-df--light-text .ar-df__body p {
	color: #ffffff;
}

/* ── Responsive — Dual Feature ───────────────────────────────────────────── */

/* Tablet ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.ar-df--has-surface {
		margin-top: 64px;
	}

	.ar-df-inner {
		padding-top: 72px;
		padding-bottom: 72px;
		padding-left: 64px;
		padding-right: 64px;
	}

	.ar-df--has-surface .ar-df-inner {
		padding-bottom: 96px;
	}

	.ar-df__grid {
		gap: 40px !important;
	}

	.ar-df__title { margin-bottom: 28px; }
}

/* Stack below 768px ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.ar-df--has-surface {
		margin-top: 48px;
	}

	.ar-df-inner {
		padding-top: 56px;
		padding-bottom: 56px;
		padding-left: 24px;
		padding-right: 24px;
	}

	.ar-df--has-surface .ar-df-inner {
		padding-bottom: 72px;
	}

	/* Stack to single column — left block first, right block second */
	.ar-df__grid {
		grid-template-columns: 1fr !important;
		gap: 40px !important; /* vertical gap between the two stacked blocks */
	}

	.ar-df__eyebrow {
		margin-bottom: 24px;
	}

	.ar-df__title {
		margin-bottom: 20px;
		max-width: none;
	}

	.ar-df__body { max-width: none; }
}


/* =============================================================
   5. CARD TEASER PAIR
   Premium two-card editorial teaser section.
   Image on top, content beneath, CTA at card bottom.
   Designed for paired content entries of equal visual weight —
   leadership teasers, featured sections, content-entry pairs.

   Scope:  .ar-ctp-section  /  .ar-ctp-inner  /  .ar-ctp__*
   Image ratio: 575×339 → 58.96% padding-bottom trick
   ============================================================= */

/* ── Section wrapper ─────────────────────────────────────────────────────── */

.ar-ctp-section {
	position: relative;
	overflow-x: clip; /* allow ornament vertical bleed */
}

.ar-ctp-section.ar-ctp--bg-default:not([data-gradient]) {
	background: transparent;
}

/* ── Background style variants — mirrors existing module tokens ───────────── */

.ar-ctp--bg-default { background: transparent; }
.ar-ctp--bg-muted   { background: #EFEFEF; }
.ar-ctp--bg-green   { background: #005A4E; }
.ar-ctp--bg-red     { background: #C1000F; }
.ar-ctp--bg-dark    { background: #012F39; }

/* Coloured variants: top separation to read as distinct sections */
.ar-ctp--has-surface {
	margin-top: 96px;
}

/* ── Inner container ─────────────────────────────────────────────────────── */

.ar-ctp-inner {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 96px;
	padding-bottom: 96px;
	padding-left: 112px;
	padding-right: 112px;
	position: relative;
	z-index: 1;
}

/* Coloured backgrounds: bump bottom padding */
.ar-ctp--has-surface .ar-ctp-inner {
	padding-bottom: 120px;
}

/* ── Section header — eyebrow + optional section title ───────────────────── */

.ar-ctp__header {
	margin-bottom: 32px;
}

.ar-ctp__eyebrow {
	font-family: "Nunito Sans", sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 13px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #C1000F;
	margin: 0 0 16px;
}

/* When section title follows, eyebrow margin is smaller */
.ar-ctp__eyebrow + .ar-ctp__section-title {
	margin-top: 0;
}

.ar-ctp__section-title {
	font-family: "Nunito Sans", sans-serif;
	font-weight: 400;
	letter-spacing: 0.01px;
	color: #000000;
	margin: 0;
}

/* ── Two-card grid ───────────────────────────────────────────────────────── */
/*
   Bricks overrides flex/grid inside shortcode output — !important required.
   align-items: stretch keeps both cards the same height within a row.
*/

.ar-ctp__grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 64px !important;
	align-items: stretch !important;
}

/* ── Individual card ─────────────────────────────────────────────────────── */

.ar-ctp__card {
	display: flex;
	flex-direction: column;
}

/* ── Card image ──────────────────────────────────────────────────────────── */

.ar-ctp__card-image-wrap {
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
	background: #e8e8e8;
	flex-shrink: 0;
}

/* Ratio container: 575×339 → 339/575 = 58.9565...% */
.ar-ctp__card-image-ratio {
	position: relative !important;
	width: 100% !important;
	padding-bottom: 58.957% !important;
	height: 0 !important;
	display: block !important;
}

.ar-ctp__card-image {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* ── Card body — text content area ──────────────────────────────────────── */

.ar-ctp__card-body {
	display: flex;
	flex-direction: column;
	flex: 1; /* stretches to fill card height — keeps CTA aligned at bottom */
	padding-top: 0;
}

/* ── Card title ──────────────────────────────────────────────────────────── */

.ar-ctp__card-title {
	font-family: "Nunito Sans", sans-serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 48px;
	letter-spacing: 0.01px;
	color: #000000;
	margin: 49px 0 0; /* image → title spacing */
}

/* ── Card body text ──────────────────────────────────────────────────────── */

.ar-ctp__card-text {
	font-family: "Nunito Sans", sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 27px;
	color: #000000;
	margin-top: 49px; /* title → body spacing */
	flex: 1; /* pushes CTA to bottom */
}

.ar-ctp__card-text p {
	margin: 0 0 16px;
}

.ar-ctp__card-text p:last-child {
	margin-bottom: 0;
}

/* ── Card CTA ────────────────────────────────────────────────────────────── */

.ar-ctp__card-cta {
	margin-top: 49px; /* body → CTA spacing */
}

/* ── Light text override — dark backgrounds ──────────────────────────────── */

.ar-ctp--light-text .ar-ctp__eyebrow {
	color: rgba(255,255,255,0.65);
}

.ar-ctp--light-text .ar-ctp__section-title,
.ar-ctp--light-text .ar-ctp__card-title,
.ar-ctp--light-text .ar-ctp__card-text,
.ar-ctp--light-text .ar-ctp__card-text p {
	color: #ffffff;
}

/* ── Responsive — Card Teaser Pair ──────────────────────────────────────── */

/* Tablet ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.ar-ctp--has-surface {
		margin-top: 64px;
	}

	.ar-ctp-inner {
		padding-top: 72px;
		padding-bottom: 72px;
		padding-left: 64px;
		padding-right: 64px;
	}

	.ar-ctp--has-surface .ar-ctp-inner {
		padding-bottom: 96px;
	}

	.ar-ctp__grid {
		gap: 40px !important;
	}

	.ar-ctp__card-title {
		font-size: 26px;
		line-height: 38px;
		margin-top: 36px;
	}

	.ar-ctp__card-text {
		font-size: 16px;
		line-height: 25px;
		margin-top: 36px;
	}

	.ar-ctp__card-cta {
		margin-top: 36px;
	}
}

/* Stack below 768px ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.ar-ctp--has-surface {
		margin-top: 48px;
	}

	.ar-ctp-inner {
		padding-top: 56px;
		padding-bottom: 56px;
		padding-left: 24px;
		padding-right: 24px;
	}

	.ar-ctp--has-surface .ar-ctp-inner {
		padding-bottom: 72px;
	}

	/* Stack to single column */
	.ar-ctp__grid {
		grid-template-columns: 1fr !important;
		gap: 56px !important; /* comfortable vertical gap between stacked cards */
	}

	.ar-ctp__header {
		margin-bottom: 24px;
	}

	.ar-ctp__eyebrow {
		margin-bottom: 12px;
	}

	.ar-ctp__card-title {
		font-size: 22px;
		line-height: 32px;
		margin-top: 28px;
	}

	.ar-ctp__card-text {
		font-size: 16px;
		line-height: 25px;
		margin-top: 28px;
	}

	.ar-ctp__card-cta {
		margin-top: 28px;
	}
}

@media (max-width: 480px) {
	.ar-ctp__card-title {
		font-size: 22px;
		line-height: 32px;
	}
}



/* =============================================================
   6. ORNAMENT SYSTEM
   IntersectionObserver drives .is-ornament-assembled / .is-ornament-dispersed.
   CSS transitions handle smooth animation between states.

   Horizontal animation and vertical positioning co-exist via CSS custom
   properties: --orn-tx (animated) and --orn-ty (static, set by vp class).
   This keeps the two concerns cleanly separated.
   ============================================================= */

/* ── Ornament container ──────────────────────────────────────────────────── */

.ar-pm-ornament {
	position: absolute;
	top: 0;
	pointer-events: none;
	z-index: 0;
	width: var(--ornament-width, 52%);
	height: auto;
	/* Hidden until JS runs */
	opacity: 0;
	/* --orn-tx: animated by assembled/dispersed state classes
	   --orn-ty: set by vertical-position modifier, never animated */
	--orn-tx: 0px;
	--orn-ty: 0px;
	transform: translateX(var(--orn-tx)) translateY(var(--orn-ty));
	transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1),
	            transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ── Size modifiers ──────────────────────────────────────────────────────── */

.ar-pm-ornament--sm { --ornament-width: 38%; }
.ar-pm-ornament--md { --ornament-width: 52%; }
.ar-pm-ornament--lg { --ornament-width: 64%; }

/* ── Horizontal placement ────────────────────────────────────────────────── */

.ar-pm-ornament--left  { left: 0; }
.ar-pm-ornament--right { right: 0; }

/* ── Vertical placement ──────────────────────────────────────────────────── */
/*
   top    — anchored near the section's upper edge (default, no override needed)
   middle — centred in the section; emerges from the side as a decorative accent
   bottom — anchored near the section's lower edge
*/

.ar-pm-ornament--vp-top {
	top: 0;
	bottom: auto;
	/*
	  Shift most of the ornament ABOVE the section top edge.
	  overflow:hidden on the host section clips the hidden portion.
	  Only the lower ~40% peeks in — the ornament feels like it is
	  emerging from the top-side corner, not sitting inside the layout.
	  -58% keeps the visible tail safely above the section's content
	  padding (~96px) on standard desktop viewports.
	*/
	--orn-ty: -58%;
}

.ar-pm-ornament--vp-middle {
	top: 50%;
	bottom: auto;
	--orn-ty: -50%; /* centres the ornament on its own height */
}

.ar-pm-ornament--vp-bottom {
	top: auto;
	bottom: 0;
	/*
	  Mirror of top: shift most of the ornament BELOW the section bottom
	  edge. Only the upper ~40% peeks up from the bottom-side corner.
	*/
	--orn-ty: 58%;
}

/* ── SVG ─────────────────────────────────────────────────────────────────── */

.ar-pm-ornament__svg {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Line and dot opacity ────────────────────────────────────────────────── */
/*
   Coloured ornament rule: dots/nodes are strong (near full opacity),
   connectors/strokes are lighter and subtle.
   This preserves the "readable dots, quiet lines" treatment on flat ornaments.
*/

.ar-pm-ornament .ornament-lines {
	opacity: var(--ornament-line-opacity, 0.30);
}

.ar-pm-ornament .ornament-dots {
	opacity: var(--ornament-dot-opacity, 0.88);
}

/* ── JS ready — removes initial opacity:0 ───────────────────────────────── */

.ar-pm-ornament.is-ornament-ready {
	/* opacity now controlled by assembled/dispersed states */
}

/* ── Dispersed state (out of view) ──────────────────────────────────────── */

.ar-pm-ornament.is-ornament-dispersed {
	opacity: 0;
}

.ar-pm-ornament--left.is-ornament-dispersed  { --orn-tx: -30%; }
.ar-pm-ornament--right.is-ornament-dispersed { --orn-tx: 30%; }

/* ── Assembled state (in view) ───────────────────────────────────────────── */

.ar-pm-ornament.is-ornament-assembled {
	opacity: 1;
}

.ar-pm-ornament--left.is-ornament-assembled  { --orn-tx: -20%; }
.ar-pm-ornament--right.is-ornament-assembled { --orn-tx: 20%; }

/* ── Gradient ornament mode ──────────────────────────────────────────────── */
/*
   When .ar-pm-ornament--gradient is present the SVG fill comes from an
   inline <linearGradient> injected by PHP. The JS still sets el.style.color
   to the first stop colour (used as a colour-hint data attribute) but the
   fill itself is not driven by currentColor — it uses url(#grad-id) instead.
   We neutralise the JS colour override so it does not bleed through:
*/

.ar-pm-ornament--gradient {
	color: transparent !important;
}

/* Gradient ornament opacity rule: lines stay subtle; dots are strong.
   Same philosophy as flat ornaments — connectors quiet, nodes readable.
   Dot opacity raised to near-full so gradient circles read clearly. */
.ar-pm-ornament--gradient .ornament-lines {
	opacity: var(--ornament-line-opacity, 0.28);
}

.ar-pm-ornament--gradient .ornament-dots {
	opacity: var(--ornament-dot-opacity, 0.92);
}

/* ── Legibility setting — hide all ornaments ─────────────────────────────── */

body.ar-ornaments-off .ar-pm-ornament {
	display: none !important;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.ar-pm-ornament {
		transition: none !important;
	}
	.ar-pm-ornament.is-ornament-assembled {
		opacity: 1 !important;
	}
	/* Assembled positions — custom props still apply cleanly */
	.ar-pm-ornament--left.is-ornament-assembled  { --orn-tx: -20%; }
	.ar-pm-ornament--right.is-ornament-assembled { --orn-tx: 20%; }
}

body.ar-motion-off .ar-pm-ornament {
	transition: none !important;
}
body.ar-motion-off .ar-pm-ornament.is-ornament-assembled {
	opacity: 1 !important;
}

/* ── XL / ultra-wide screens: restrain ornaments toward their edge ───────── */
/*
   On truly extra-large / ultra-wide monitors (≥1920px) all ornament sizes
   are capped at the medium width value. 1920px is the Full HD ceiling —
   standard laptops (including 16-inch MacBook Pro at ~1728px logical pixels)
   and common desktop resolutions below 1920px are deliberately excluded so
   the selected size is respected on those screens.
   The medium value (42%) is the visual ceiling — small gets promoted, large
   gets restrained, medium stays. Ornaments also tuck further back so they
   remain edge-led accents rather than dominating the layout.
*/

@media (min-width: 1920px) {
	/* All sizes → medium width on XL (system rule, not a one-off patch) */
	.ar-pm-ornament--sm,
	.ar-pm-ornament--md,
	.ar-pm-ornament--lg { --ornament-width: 42%; }

	/* Shift further toward the originating edge — less intrusion into layout */
	.ar-pm-ornament--left.is-ornament-assembled  { --orn-tx: -28%; }
	.ar-pm-ornament--right.is-ornament-assembled { --orn-tx: 28%; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.ar-pm-ornament {
		--ornament-width: 45%;
		--ornament-line-opacity: 0.22;
		--ornament-dot-opacity: 0.75;
	}
	.ar-pm-ornament--lg { --ornament-width: 55%; }
	.ar-pm-ornament--sm { --ornament-width: 32%; }
}

@media (max-width: 768px) {
	.ar-pm-ornament {
		--ornament-width: 45%;
		--ornament-line-opacity: 0.16;
		--ornament-dot-opacity: 0.60;
	}
}

/* Prevent ornament horizontal bleed from causing page scroll at all viewport sizes */
html { overflow-x: hidden; }

@media (max-width: 480px) {
	.ar-pm-ornament {
		display: none !important;
	}
}

/* ── Feature split: ornament on media side ───────────────────────────────── */
/*
   When the ornament is placed on the same side as the image column,
   the media column is explicitly raised above the ornament so the image
   appears to float over the ornament edge — reinforcing depth.
   Text column is raised further to stay fully readable above both.
*/

.ar-fs--ornament-on-media-side .ar-fs__media-col {
	position: relative;
	z-index: 2;
}

.ar-fs--ornament-on-media-side .ar-fs__text-col {
	position: relative;
	z-index: 3;
}

/* ── Section containment for new ornament hosts ──────────────────────────── */
/*
   Sections that gained ornament support need position:relative + overflow:hidden
   to contain absolutely-positioned ornaments correctly.
*/

.ar-pi-section {
	position: relative;
	overflow-x: clip; /* allow ornament vertical bleed */
}

.ar-sc-section {
	overflow-x: clip; /* allow ornament vertical bleed */
}

/* Inner containers for new ornament hosts raised above ornament layer */

.ar-pi-inner {
	position: relative;
	z-index: 1;
}

.ar-sc-inner {
	position: relative;
	z-index: 1;
}

.ar-rp-inner {
	position: relative;
	z-index: 1;
}

/* =============================================================
   7. MOTION TOGGLE
   Global motion preference. Toggle button in .aradel-footer__bottom.
   body.ar-motion-off disables all decorative motion site-wide.
   ============================================================= */

/* Ensure footer bottom bar is flex so margin-left:auto works */
.aradel-footer__bottom {
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
}

.aradel-footer__motion-btn {
	margin-left: auto; /* push to far right */
}

.ar-motion-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: "Nunito Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: inherit;
	opacity: 0.7;
	transition: opacity 0.2s ease;
	line-height: 1;
	text-decoration: none;
	letter-spacing: inherit;
	white-space: nowrap;
}

.ar-motion-toggle__icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	display: block;
}

.ar-motion-toggle__label {
	font-size: 14px;
	font-weight: 400;
}

.ar-motion-toggle:hover {
	opacity: 1;
}

.ar-motion-toggle:focus-visible {
	opacity: 1;
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

/* When motion is off — reduce opacity to signal inactive state */
body.ar-motion-off .ar-motion-toggle {
	opacity: 0.45;
}

/* Hide legibility settings on mobile — ornaments don't show on mobile */
@media (max-width: 480px) {
	.aradel-footer__motion-btn {
		display: none !important;
	}
}


/* =============================================================
   8. MODULE REVEAL ANIMATION
   Applied to .ar-pm-reveal elements.
   JS adds .is-visible via IntersectionObserver.
   Disabled when prefers-reduced-motion or body.ar-motion-off.
   ============================================================= */

.ar-pm-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1),
	            transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.ar-pm-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.ar-pm-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

body.ar-motion-off .ar-pm-reveal {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* ── Staggered item reveal (.ar-pm-reveal-group / .ar-pm-reveal-item) ───── */
/* JS adds .is-visible to the group; items cascade in via --reveal-delay.    */

.ar-pm-reveal-item {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.65s cubic-bezier(0.25, 1, 0.5, 1),
	            transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
	transition-delay: var(--reveal-delay, 0ms);
}

.ar-pm-reveal-group.is-visible .ar-pm-reveal-item {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.ar-pm-reveal-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

body.ar-motion-off .ar-pm-reveal-item {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}


/* =============================================================
   9. SHAREHOLDER CENTRE  (.ar-sc-*)

   Two-column investor-support layout:
     Left  (~62%) — editorial intro, manage shareholding,
                    action links, upcoming events
     Right (~38%) — registrar rail (multiple entries)

   Mobile stacking order:
     1. intro heading/copy
     2. manage + links
     3. upcoming events
     4. registrars
   ============================================================= */


/* ── Section wrapper ─────────────────────────────────────────────────────── */

.ar-sc-section {
	position: relative;
}

.ar-sc-section.ar-sc--bg-default:not([data-gradient]) {
	background: transparent;
}

.ar-sc--bg-default { background: transparent; }
.ar-sc--bg-muted   { background: #EFEFEF; }
.ar-sc--bg-green   { background: #005A4E; }
.ar-sc--bg-red     { background: #C1000F; }
.ar-sc--bg-dark    { background: #012F39; }

.ar-sc--has-surface {
	margin-top: 96px;
}


/* ── Inner container ─────────────────────────────────────────────────────── */

.ar-sc-inner {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 96px;
	padding-bottom: 96px;
	padding-left: 112px;
	padding-right: 112px;
}

.ar-sc--has-surface .ar-sc-inner {
	padding-bottom: 120px;
}


/* ── Two-column grid — 62 / 38 ───────────────────────────────────────────── */

.ar-sc__grid {
	display: grid !important;
	grid-template-columns: 62fr 38fr !important;
	gap: 80px !important;
	align-items: start !important;
}


/* ── LEFT COLUMN — main editorial ───────────────────────────────────────── */

.ar-sc__main {
	display: flex;
	flex-direction: column;
	gap: 0;
}


/* ── Intro heading ───────────────────────────────────────────────────────── */

.ar-sc__intro-heading {
	font-family: "Nunito Sans", sans-serif;
	font-weight: 400;
	letter-spacing: 0.014px;
	color: #000000;
	margin: 0 0 35px; /* Page Intro title → body spacing */
}


/* ── Intro body ──────────────────────────────────────────────────────────── */

.ar-sc__intro-body {
	margin: 0 0 48px; /* section → section spacing */
}

.ar-sc__intro-body p {
	font-family: "Nunito Sans", sans-serif;
	font-weight: 400;
	color: #000000;
	margin: 0 0 16px;
}

.ar-sc__intro-body p:last-child {
	margin-bottom: 0;
}


/* ── Manage shareholding block ───────────────────────────────────────────── */

.ar-sc__manage-block {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 48px; /* section → section spacing */
}

.ar-sc__manage-heading {
	font-family: "Nunito Sans", sans-serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 38px;
	letter-spacing: 0.01px;
	color: #000000;
	margin: 0 0 34px; /* Dual Feature title → body spacing */
}

.ar-sc__manage-intro {
	font-family: "Nunito Sans", sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 27px;
	color: #000000;
	margin: 0 0 8px;
}


/* ── Action links list ───────────────────────────────────────────────────── */

.ar-sc__action-list {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.ar-sc__action-item {
	display: flex;
	flex-direction: column;
	border-top: 1px solid #e2e2e2;
}

.ar-sc__action-item:last-child {
	border-bottom: 1px solid #e2e2e2;
}

.ar-sc--light-text .ar-sc__intro-heading,
.ar-sc--light-text .ar-sc__intro-body p,
.ar-sc--light-text .ar-sc__manage-heading,
.ar-sc--light-text .ar-sc__manage-intro,
.ar-sc--light-text .ar-sc__events-heading,
.ar-sc--light-text .ar-sc__event-title,
.ar-sc--light-text .ar-sc__rail-heading,
.ar-sc--light-text .ar-sc__rail-intro p,
.ar-sc--light-text .ar-sc__reg-name,
.ar-sc--light-text .ar-sc__reg-address,
.ar-sc--light-text .ar-sc__reg-contact {
	color: #ffffff;
}

.ar-sc--light-text .ar-sc__event-date,
.ar-sc--light-text .ar-sc__action-note,
.ar-sc--light-text .ar-sc__reg-label,
.ar-sc--light-text .ar-sc__reg-note {
	color: rgba(255, 255, 255, 0.72);
}

.ar-sc--light-text .ar-sc__action-item,
.ar-sc--light-text .ar-sc__event-item,
.ar-sc--light-text .ar-sc__registrar--divider {
	border-color: rgba(255, 255, 255, 0.16);
}

.ar-sc--light-text a.ar-sc__event-title:hover,
.ar-sc--light-text .ar-sc__reg-contact a,
.ar-sc--light-text .ar-sc__reg-website a,
.ar-sc--light-text .ar-sc__event-ics {
	color: rgba(255, 255, 255, 0.9);
}

.ar-sc--light-text .ar-sc__event-ics:hover,
.ar-sc--light-text .ar-sc__reg-contact a:hover,
.ar-sc--light-text .ar-sc__reg-website a:hover {
	color: #ffffff;
}

/* Action button inherits ar_action styles — padding nudge to align in list context */
.ar-sc__action-item .ar-action {
	width: 100%;
	padding-top: 14px;
	padding-bottom: 14px;
	justify-content: space-between;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
}

.ar-sc__action-item .ar-action:hover {
	background: rgba(1, 48, 58, 0.04) !important;
}

.ar-sc--light-text .ar-sc__action-item .ar-action:hover {
	background: rgba(255, 255, 255, 0.08) !important;
}

.ar-sc__action-note {
	font-family: "Nunito Sans", sans-serif;
	font-size: 13px;
	color: #888;
	padding: 0 0 10px;
}


/* ── Upcoming events block ───────────────────────────────────────────────── */

.ar-sc__events-block {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.ar-sc__events-heading {
	font-family: "Nunito Sans", sans-serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 38px;
	letter-spacing: 0.01px;
	color: #000000;
	margin: 0 0 34px; /* Dual Feature title → body spacing */
}

.ar-sc__events-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.ar-sc__event-item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 0;
	border-top: 1px solid #e2e2e2;
}

.ar-sc__event-item:last-child {
	border-bottom: 1px solid #e2e2e2;
}

/* Past events shown as fallback — muted so they read as historical */
.ar-sc__event-item--past .ar-sc__event-title,
.ar-sc__event-item--past .ar-sc__event-date {
	opacity: 0.5;
}

.ar-sc__event-item--past .ar-sc__event-ics {
	display: none; /* no point adding a past event to your calendar */
}

.ar-sc__event-title {
	font-family: "Nunito Sans", sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 26px;
	color: #000000;
	text-decoration: none;
}

a.ar-sc__event-title:hover {
	color: #C1000F;
	text-decoration: underline;
}

.ar-sc__event-date {
	font-family: "Nunito Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #666666;
}

.ar-sc__event-ics {
	font-family: "Nunito Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #01303A;
	text-decoration: none;
	margin-top: 4px;
	align-self: flex-start;
}

.ar-sc__event-ics:hover {
	text-decoration: underline;
}

.ar-sc__events-cta {
	margin-top: 20px;
}


/* ── RIGHT COLUMN — registrar rail ──────────────────────────────────────── */

.ar-sc__rail {
	display: flex;
	flex-direction: column;
	gap: 0;
	/* Sticky so the rail stays visible while scrolling through the left column */
	position: sticky;
	top: 32px;
}

.ar-sc__rail-heading {
	font-family: "Nunito Sans", sans-serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 38px;
	letter-spacing: 0.01px;
	color: #000000;
	margin: 0 0 14px; /* reduced — registrar entries carry their own 20px top-padding */
}

.ar-sc__rail-intro {
	margin: 0 0 14px;
}

.ar-sc__rail-intro p {
	font-family: "Nunito Sans", sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 27px;
	color: #333333;
	margin: 0 0 16px;
}

.ar-sc__rail-intro p:last-child {
	margin-bottom: 0;
}


/* ── Registrar entries ───────────────────────────────────────────────────── */

.ar-sc__registrar {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 0;
}

.ar-sc__registrar--divider {
	border-top: 1px solid #e2e2e2;
}

.ar-sc__reg-label {
	font-family: "Nunito Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: #888888;
	margin: 0;
}

.ar-sc__reg-name {
	font-family: "Nunito Sans", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 22px;
	color: #01303A;
	margin: 0;
}

.ar-sc__reg-address {
	font-family: "Nunito Sans", sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 27px;
	color: #333333;
	font-style: normal;
	margin: 4px 0 0;
}

.ar-sc__reg-contact {
	font-family: "Nunito Sans", sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 27px;
	color: #333333;
	margin: 0;
}

.ar-sc__reg-contact a {
	color: #01303A;
	text-decoration: none;
}

.ar-sc__reg-contact a:hover {
	color: #C1000F;
	text-decoration: underline;
}

.ar-sc__reg-website a {
	color: #01303A;
}

.ar-sc__reg-website a:hover {
	color: #C1000F;
}

.ar-sc__reg-note {
	font-family: "Nunito Sans", sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 19px;
	color: #777777;
	margin: 4px 0 0;
	font-style: italic;
}


/* ── Responsive — Shareholder Centre ────────────────────────────────────── */

/* Tablet: narrow the gap, keep two columns if still readable */

@media (max-width: 1100px) {
	.ar-sc--has-surface {
		margin-top: 64px;
	}

	.ar-sc-inner {
		padding-left: 64px;
		padding-right: 64px;
		padding-top: 72px;
		padding-bottom: 72px;
	}

	.ar-sc--has-surface .ar-sc-inner {
		padding-bottom: 96px;
	}

	.ar-sc__grid {
		gap: 48px !important;
	}

}

/* Tablet narrow: stack at 860px */

@media (max-width: 860px) {
	.ar-sc__grid {
		grid-template-columns: 1fr !important;
		gap: 56px !important;
	}

	/* On stacked layout, rail loses sticky */
	.ar-sc__rail {
		position: static;
	}
}

/* Mobile */

@media (max-width: 768px) {
	.ar-sc--has-surface {
		margin-top: 48px;
	}

	.ar-sc-inner {
		padding-left: 24px;
		padding-right: 24px;
		padding-top: 48px;
		padding-bottom: 56px;
	}

	.ar-sc--has-surface .ar-sc-inner {
		padding-bottom: 72px;
	}

	.ar-sc__event-title {
		font-size: 16px;
		line-height: 22px;
	}

	.ar-sc__event-date {
		font-size: 14px;
		line-height: 21px;
	}

	.ar-sc__event-ics {
		font-size: 13px;
	}
}


/* =============================================================
   10. RELATED PAGES  (.ar-rp-*)

   Image-led 3-column card grid linking to related pages.
   Supports manual, auto, and hybrid selection modes.
   Full card is clickable via <a> wrapper.

   Background styles mirror the rest of the page modules system:
     default | muted | green | red | dark
   Dark backgrounds auto-switch heading text to white.
   ============================================================= */


/* ── Section wrapper ─────────────────────────────────────────────────────── */

.ar-rp-section {
	position: relative;
	overflow-x: clip; /* allow ornament vertical bleed */
}

/* ── Background styles ───────────────────────────────────────────────────── */

.ar-rp--bg-default { background: transparent; }
.ar-rp--bg-muted   { background: #EFEFEF; }
.ar-rp--bg-green   { background: #005A4E; }
.ar-rp--bg-red     { background: #C1000F; }
.ar-rp--bg-dark    { background: #012F39; }

.ar-rp--has-surface {
	margin-top: 96px;
}

/* ── Inner container ─────────────────────────────────────────────────────── */

.ar-rp-inner {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 96px;
	padding-bottom: 96px;
	padding-left: 112px;
	padding-right: 112px;
	position: relative;
	z-index: 1;
}

/* Coloured backgrounds: extra bottom padding for breathing room */
.ar-rp--has-surface .ar-rp-inner {
	padding-bottom: 120px;
}

/* ── Section header ──────────────────────────────────────────────────────── */

.ar-rp__header {
	margin-bottom: 48px;
}

.ar-rp__header--center {
	text-align: center;
}

.ar-rp__section-title {
	font-family: "Nunito Sans", sans-serif;
	font-weight: 600;
	letter-spacing: 0.014px;
	color: #000000;
	margin: 0;
}

/* Dark section backgrounds: switch heading to white */
.ar-rp--light-text .ar-rp__section-title {
	color: #ffffff;
}

/* ── Grid ────────────────────────────────────────────────────────────────── */

.ar-rp__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.ar-rp__grid--count-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: min(100%, 980px);
}

/* ── Card — the <a> element ──────────────────────────────────────────────── */
/*
   The card is a block-level <a> so the entire surface is clickable.
   Position relative + overflow hidden contains the image, overlay, and body.
   aspect-ratio keeps cards consistent height regardless of title length.
*/

.ar-rp__card {
	position: relative;
	display: block;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	aspect-ratio: 1.1 / 1;
	background: #01303A; /* sherpa — visible during image load and on placeholder */
	transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.ar-rp__card:hover {
	transform: translateY(-6px);
	text-decoration: none;
}

.ar-rp__card:focus-visible {
	outline: 3px solid #C1000F;
	outline-offset: 4px;
}

/* ── Card image ──────────────────────────────────────────────────────────── */

.ar-rp__card-img-wrap {
	position: absolute;
	inset: 0;
}

.ar-rp__card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.ar-rp__card:hover .ar-rp__card-img {
	transform: scale(1.04);
}

/* ── Placeholder (no image available) ───────────────────────────────────── */

.ar-rp__card-img-placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		145deg,
		#01303A 0%,
		#012F39 60%,
		#011E24 100%
	);
}

/* ── Dark gradient overlay ───────────────────────────────────────────────── */
/*
   Bottom-weighted so the title area (lower third) reads at white.
   Top is near-transparent so the image reads through clearly.
   Uses dark neutral tones — not green — per spec.
*/

.ar-rp__card-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(1, 10, 14, 0.90) 0%,
		rgba(1, 15, 20, 0.65) 38%,
		rgba(1, 15, 20, 0.20) 70%,
		rgba(1, 15, 20, 0.04) 100%
	);
	transition: background 0.4s ease;
}

.ar-rp__card:hover .ar-rp__card-overlay {
	background: linear-gradient(
		to top,
		rgba(1, 10, 14, 0.95) 0%,
		rgba(1, 15, 20, 0.75) 38%,
		rgba(1, 15, 20, 0.30) 70%,
		rgba(1, 15, 20, 0.08) 100%
	);
}

/* ── Card body — title anchored to bottom ────────────────────────────────── */

.ar-rp__card-body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: 28px;
}

/* ── Card title ──────────────────────────────────────────────────────────── */

.ar-rp__card-title {
	font-family: "Nunito Sans", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 30px;
	letter-spacing: -0.01em;
	color: #ffffff;
	margin: 0;
}

/* Underline — hidden by default, revealed on card hover */
.ar-rp__card-title::after {
	content: '';
	display: block;
	width: 32px;
	height: 2px;
	background: rgba(255, 255, 255, 0.50);
	margin-top: 12px;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.ar-rp__card:hover .ar-rp__card-title::after {
	opacity: 1;
	transform: translateX(0);
}

/* ── Entrance animation ──────────────────────────────────────────────────── */
/*
   .ar-pm-reveal on the section: section fades+slides in as a unit.
   The existing ar-pm-reveal system handles this — no per-card animation needed.
   Hover transform is separate and always active once section is visible.
*/

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.ar-rp--has-surface {
		margin-top: 64px;
	}

	.ar-rp-inner {
		padding-top: 72px;
		padding-bottom: 72px;
		padding-left: 64px;
		padding-right: 64px;
	}

	.ar-rp--has-surface .ar-rp-inner {
		padding-bottom: 96px;
	}

	.ar-rp__header {
		margin-bottom: 40px;
	}
}

@media (max-width: 768px) {
	.ar-rp--has-surface {
		margin-top: 48px;
	}

	.ar-rp-inner {
		padding-top: 56px;
		padding-bottom: 64px;
		padding-left: 24px;
		padding-right: 24px;
	}

	.ar-rp--has-surface .ar-rp-inner {
		padding-bottom: 72px;
	}

	.ar-rp__header {
		margin-bottom: 32px;
	}

	/* Tablet: 2-column grid */
	.ar-rp__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.ar-rp__grid--count-2 {
		max-width: none;
	}

	.ar-rp__card-body {
		padding: 20px;
	}

	.ar-rp__card-title {
		font-size: 20px;
		line-height: 28px;
	}
}

@media (max-width: 480px) {
	.ar-rp-inner {
		padding-top: 48px;
		padding-bottom: 56px;
	}

	.ar-rp--has-surface .ar-rp-inner {
		padding-bottom: 64px;
	}

	/* Mobile: single column */
	.ar-rp__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.ar-rp__card-title {
		font-size: 18px;
		line-height: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ar-rp__card,
	.ar-rp__card-img {
		transition: none;
	}
}


/* =============================================================
   8. HERITAGE BLOCK
   Two-column editorial content block for narrative sections
   such as "Our Heritage". Left column anchors with a large
   heading; right column carries body copy and an optional
   compact call-out facts strip.

   The call-out strip is a sub-part of this block — NOT a
   standalone stats module. Keep it restrained and editorial:
   2–4 items, no coloured boxes, no dashboard weight.

   Scope:  .ar-hb-section  /  .ar-hb-inner  /  .ar-hb__*
   ============================================================= */

/* ── Section wrapper ─────────────────────────────────────────────────────── */

.ar-hb-section {
	position: relative;
	overflow-x: clip; /* allow ornament vertical bleed */
}

.ar-hb-section.ar-hb--bg-default:not([data-gradient]) {
	background: transparent;
}

/* ── Background style variants ───────────────────────────────────────────── */

.ar-hb--bg-default { background: transparent; }
.ar-hb--bg-muted   { background: #EFEFEF; }
.ar-hb--bg-green   { background: #005A4E; }
.ar-hb--bg-red     { background: #C1000F; }
.ar-hb--bg-dark    { background: #012F39; }

.ar-hb--has-surface {
	margin-top: 96px;
}

/* ── Inner container ─────────────────────────────────────────────────────── */

.ar-hb-inner {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 96px;
	padding-bottom: 96px;
	padding-left: 112px;
	padding-right: 112px;
	position: relative;
	z-index: 1;
}

.ar-hb--has-surface .ar-hb-inner {
	padding-bottom: 120px;
}

/* ── Two-column grid ─────────────────────────────────────────────────────── */
/*
   Asymmetric split: heading column narrower (2fr), content column wider (3fr).
   The heading acts as a structural anchor; body and callouts need room to breathe.
   !important guards against Bricks flex override.
*/

.ar-hb__grid {
	display: grid !important;
	grid-template-columns: 2fr 3fr !important;
	gap: 80px !important;
	align-items: start !important;
}

/* ── Column base ─────────────────────────────────────────────────────────── */

.ar-hb__col {
	display: flex;
	flex-direction: column;
}

/* ── Eyebrow (left column, above heading) ───────────────────────────────── */

.ar-hb__eyebrow {
	font-family: "Nunito Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 1.28px;
	text-transform: uppercase;
	color: #C1000F; /* default */
	margin: 0 0 16px;
}

/* Eyebrow colour modifiers — ACF-driven per row */
.ar-hb__eyebrow--red    { color: #C1000F; }
.ar-hb__eyebrow--sherpa { color: #01303A; }
.ar-hb__eyebrow--white  { color: #ffffff; }
.ar-hb__eyebrow--black  { color: #000000; }

.ar-hb--light-text .ar-hb__eyebrow {
	color: rgba(255, 255, 255, 0.65);
}

/* ── Section heading (left column) ──────────────────────────────────────── */

.ar-hb__heading {
	font-family: "Nunito Sans", sans-serif;
	font-weight: 400;
	letter-spacing: 0.01px;
	color: #01303A; /* Sherpa blue — editorial anchor */
	margin: 0;
}

/* ── Body copy (right column) ────────────────────────────────────────────── */

.ar-hb__body {
	font-family: "Nunito Sans", sans-serif;
	font-weight: 400;
	color: #000000;
	text-align: justify;
	text-justify: inter-word;
	hyphens: manual;
}

.ar-hb__body p {
	margin: 0 0 16px;
	text-align: justify;
	text-justify: inter-word;
	hyphens: manual;
}

.ar-hb__body p:last-child {
	margin-bottom: 0;
}

.ar-hb--light-text .ar-hb__heading,
.ar-hb--light-text .ar-hb__body,
.ar-hb--light-text .ar-hb__body p,
.ar-hb--light-text .ar-hb__callout-value {
	color: #ffffff;
}

/* ── Callout facts strip ─────────────────────────────────────────────────── */
/*
   Compact editorial highlight. NOT a full dashboard or KPI strip.
   Sits below body copy, anchored by a top rule. Items are a horizontal
   grid, dividers between items formed by border-left treatment.
*/

.ar-hb__callouts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 0;
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid rgba(1, 48, 58, 0.18); /* Sherpa at low opacity */
}

.ar-hb--light-text .ar-hb__callouts {
	border-top-color: rgba(255, 255, 255, 0.18);
}

.ar-hb__callout-item {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-right: 24px;
}

.ar-hb__callout-item + .ar-hb__callout-item {
	padding-left: 24px;
	padding-right: 24px;
	border-left: 1px solid rgba(1, 48, 58, 0.12);
}

.ar-hb--light-text .ar-hb__callout-item + .ar-hb__callout-item {
	border-left-color: rgba(255, 255, 255, 0.14);
}

.ar-hb__callout-item:last-child {
	padding-right: 0;
}

/* ── Callout value — the prominent editorial fact ────────────────────────── */

.ar-hb__callout-value {
	display: block;
	font-family: "Nunito Sans", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: 0;
	color: #01303A; /* Sherpa blue */
}

/* ── Callout label ───────────────────────────────────────────────────────── */

.ar-hb__callout-label {
	display: block;
	font-family: "Nunito Sans", sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 15px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: #C1000F;
}

.ar-hb--light-text .ar-hb__callout-label {
	color: rgba(255, 255, 255, 0.72);
}

/* ── Callout meta (optional secondary line) ──────────────────────────────── */

.ar-hb__callout-meta {
	display: block;
	font-family: "Nunito Sans", sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 18px;
	color: #AAAAAA;
	margin-top: 2px;
}

.ar-hb--light-text .ar-hb__callout-meta {
	color: rgba(255, 255, 255, 0.62);
}

/* ── Responsive — Heritage Block ─────────────────────────────────────────── */

/* Tablet ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.ar-hb--has-surface {
		margin-top: 64px;
	}

	.ar-hb-inner {
		padding-top: 72px;
		padding-bottom: 72px;
		padding-left: 64px;
		padding-right: 64px;
	}

	.ar-hb--has-surface .ar-hb-inner {
		padding-bottom: 96px;
	}

	.ar-hb__grid {
		gap: 48px !important;
	}

}

/* Stack below 768px ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.ar-hb--has-surface {
		margin-top: 48px;
	}

	.ar-hb-inner {
		padding-top: 56px;
		padding-bottom: 56px;
		padding-left: 24px;
		padding-right: 24px;
	}

	.ar-hb--has-surface .ar-hb-inner {
		padding-bottom: 72px;
	}

	/* Stack to single column — heading first, then body + callouts */
	.ar-hb__grid {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	/* Callouts: 2-column grid on tablet-portrait / mobile-landscape */
	.ar-hb__callouts {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 28px;
		padding-top: 20px;
	}

	/* Reset inline dividers — rely on row spacing in the 2-col grid */
	.ar-hb__callout-item + .ar-hb__callout-item {
		border-left: none;
		padding-left: 0;
	}

	.ar-hb__callout-item {
		padding-right: 0;
		padding-bottom: 16px;
	}
}

@media (max-width: 640px) {
	.ar-hb__body,
	.ar-hb__body p {
		text-align: left;
		hyphens: manual;
	}
}

@media (max-width: 480px) {
	/* Single column callouts on small phones */
	.ar-hb__callouts {
		grid-template-columns: 1fr;
	}

	.ar-hb__callout-value {
		font-size: 20px;
		line-height: 26px;
	}
}


/* =============================================================
   11. CARD GRID
   Reusable responsive card grid layout.
   Variants: detail (corporate/info) and highlight (short callout).
   ============================================================= */

.ar-cg-section {
    width: 100%;
    position: relative;
    overflow-x: clip; /* allow ornament vertical bleed */
}

/* ── Background modifiers ─────────────────────────────────────────────────── */

.ar-cg--bg-muted {
    background: #EFEFEF;
}

.ar-cg--bg-green {
    background: #005A4E;
}

.ar-cg--bg-red {
    background: #C1000F;
}

.ar-cg--bg-dark {
    background: #012F39;
}

/* ── Inner rail ──────────────────────────────────────────────────────────── */

.ar-cg-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 112px;
    padding-right: 112px;
    padding-top: 80px;
    padding-bottom: 80px;
    box-sizing: border-box;
}

/* ── Section header ──────────────────────────────────────────────────────── */

.ar-cg__header {
    margin-bottom: 56px;
}

.ar-cg__eyebrow {
    font-family: var(--ads-font, "Nunito Sans", system-ui, sans-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 1.28px;
    text-transform: uppercase;
    color: #C1000F;
    margin: 0 0 24px;
}

.ar-cg--light-text .ar-cg__eyebrow {
    color: rgba(255, 255, 255, 0.65);
}

.ar-cg__title {
    margin: 0 0 24px;
    font-family: var(--ads-font, "Nunito Sans", system-ui, sans-serif);
    font-weight: 400;
    color: var(--ads-brand-blue, #01303A);
}

.ar-cg--title-lg .ar-cg__title { letter-spacing: 0.014px; }
.ar-cg--title-md .ar-cg__title { letter-spacing: 0.01px; }

.ar-cg--light-text .ar-cg__title {
    color: #fff;
}

.ar-cg__intro {
    font-family: var(--ads-font, "Nunito Sans", system-ui, sans-serif);
    font-weight: 400;
    color: var(--ads-text, #000000);
    max-width: 720px;
}

.ar-cg__intro p {
    margin: 0 0 16px;
}

.ar-cg__intro p:last-child {
    margin-bottom: 0;
}

.ar-cg--light-text .ar-cg__intro,
.ar-cg--light-text .ar-cg__intro p {
    color: rgba(255, 255, 255, 0.85);
}

/* ── Grid ────────────────────────────────────────────────────────────────── */

.ar-cg__grid {
    display: grid;
    gap: 24px;
}

/* Desktop column counts */
.ar-cg--cols-2 .ar-cg__grid {
    grid-template-columns: repeat(2, 1fr);
}

.ar-cg--cols-3 .ar-cg__grid {
    grid-template-columns: repeat(3, 1fr);
}

/* ── Cards — shared ──────────────────────────────────────────────────────── */

.ar-cg__card {
    border-radius: 20px;
    padding: 32px;
}

/* Equal height: cards stretch to match the tallest in each row */
.ar-cg--height-equal .ar-cg__grid {
    align-items: stretch;
}

.ar-cg--height-equal .ar-cg__card {
    display: flex;
    flex-direction: column;
}

/* Push body copy down so CTA stays at the bottom of equal-height cards */
.ar-cg--height-equal .ar-cg__card-body {
    flex: 1;
}

/* ── Cards — detail variant ──────────────────────────────────────────────── */

.ar-cg--variant-detail .ar-cg__card {
    background: #fff;
    border: 1px solid rgba(1, 48, 58, 0.1);
    box-shadow: 0 2px 16px rgba(1, 48, 58, 0.06);
}

/* On dark/gradient section backgrounds, flip to frosted glass */
.ar-cg--variant-detail.ar-cg--light-text .ar-cg__card {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: none;
}

/* ── Cards — highlight variant ───────────────────────────────────────────── */

.ar-cg--variant-highlight .ar-cg__card {
    background: #F0F0F0;
    border: none;
}

.ar-cg--variant-highlight.ar-cg--light-text .ar-cg__card {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

/* ── Card eyebrow ────────────────────────────────────────────────────────── */

.ar-cg__card-eyebrow {
    font-family: var(--ads-font, "Nunito Sans", system-ui, sans-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.04px;
    text-transform: uppercase;
    color: #C1000F;
    margin: 0 0 12px;
    line-height: 1;
}

.ar-cg--light-text .ar-cg__card-eyebrow {
    color: rgba(255, 255, 255, 0.60);
}

/* ── Card title ──────────────────────────────────────────────────────────── */

.ar-cg__card-title {
    font-family: var(--ads-font, "Nunito Sans", system-ui, sans-serif);
    font-size: 28px;
    line-height: 32px;
    font-weight: 600;
    letter-spacing: 0.006em;
    color: var(--ads-brand-blue, #01303A);
    margin: 0 0 12px;
}

.ar-cg--light-text .ar-cg__card-title {
    color: #fff;
}

/* ── Card meta ───────────────────────────────────────────────────────────── */

.ar-cg__card-meta {
    font-family: var(--ads-font, "Nunito Sans", system-ui, sans-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0;
    color: #C1000F;
    margin: 0 0 20px;
}

.ar-cg--light-text .ar-cg__card-meta {
    color: rgba(255, 255, 255, 0.70);
}

/* ── Card body ───────────────────────────────────────────────────────────── */

.ar-cg__card-body {
    font-family: var(--ads-font, "Nunito Sans", system-ui, sans-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #333;
}

.ar-cg__card-body p {
    margin: 0 0 16px;
}

.ar-cg__card-body p:last-child {
    margin-bottom: 0;
}

.ar-cg--light-text .ar-cg__card-body,
.ar-cg--light-text .ar-cg__card-body p {
    color: rgba(255, 255, 255, 0.80);
}

/* ── Card CTA ────────────────────────────────────────────────────────────── */

.ar-cg__card-cta {
    margin-top: 24px;
}

/* ── Responsive — Card Grid ──────────────────────────────────────────────── */

@media ( max-width: 1024px ) {
    .ar-cg-inner {
        padding-left: 64px;
        padding-right: 64px;
        padding-top: 64px;
        padding-bottom: 64px;
    }

    /* Tablet column layout — controlled by section field */
    .ar-cg--tablet-2 .ar-cg__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ar-cg--tablet-1 .ar-cg__grid {
        grid-template-columns: 1fr;
    }
}

@media ( max-width: 640px ) {
    .ar-cg-inner {
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .ar-cg__header {
        margin-bottom: 40px;
    }

    .ar-cg__eyebrow {
        margin-bottom: 16px;
    }

    /* Mobile always 1 column */
    .ar-cg__grid {
        grid-template-columns: 1fr !important;
    }

    .ar-cg__card {
        padding: 24px;
    }

    .ar-cg__card-title {
        font-size: 24px;
        line-height: 32px;
    }

    .ar-cg__card-meta {
        font-size: 15px;
        line-height: 22px;
    }

    .ar-cg__card-body {
        font-size: 16px;
        line-height: 25px;
    }
}


/* =============================================================
   SUSTAINABILITY OVERVIEW  (.ar-so-*)
   Layout: sustainability_overview
   Renderer: aradel_pm_render_sustainability_overview
   File: layouts/sustainability-overview.php

   Palette:
     Earth Green  #005A4E
     Sherpa Blue  #01303A
     Light Gray   #F0F0F0
     White        #ffffff
     Aradel Red   #C1000F  restrained accent only
   ============================================================= */

.ar-so-section {
    --ar-so-band-inline-padding: max(24px, calc((100vw - 1440px) / 2 + 112px));
    width: 100%;
    position: relative;
    overflow-x: clip;
    background: #ffffff;
    color: #01303A;
}

.ar-so-section.ar-so--bg-muted {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 320px),
        #F0F0F0;
}

.ar-so-section.ar-so--bg-green { background-color: #005A4E; }
.ar-so-section.ar-so--bg-dark { background-color: #01303A; }
.ar-so-section.ar-so--bg-red { background-color: #C1000F; }

.ar-so-section.ar-so--dark,
.ar-so-section.ar-so--dark p,
.ar-so-section.ar-so--dark h2,
.ar-so-section.ar-so--dark h3,
.ar-so-section.ar-so--dark h4 {
    color: #ffffff;
}

.ar-so-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 96px 112px;
}

.ar-so__header {
    display: grid;
    grid-template-columns: minmax(260px, 0.68fr) minmax(420px, 1fr);
    column-gap: clamp(56px, 7vw, 112px);
    align-items: start;
    margin: 0 0 80px;
}

.ar-so__eyebrow,
.ar-so__approach-eyebrow,
.ar-so__ns-eyebrow,
.ar-so__cs-eyebrow {
    margin: 0 0 16px;
    font-family: "Nunito Sans", system-ui, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #005A4E;
}

.ar-so__heading {
    grid-column: 1;
    margin: 0;
    font-family: "Nunito Sans", system-ui, sans-serif;
    font-weight: 400;
    color: #01303A;
}

.ar-so__header .ar-so__eyebrow {
    grid-column: 1;
}

.ar-so__intro-body {
    grid-column: 2;
    grid-row: 1 / span 2;
    max-width: 710px;
    color: rgba(1, 48, 58, 0.78);
}

.ar-so__intro-body,
.ar-so__intro-body p,
.ar-so__approach-body,
.ar-so__approach-body p,
.ar-so__ns-body,
.ar-so__ns-body p,
.ar-so__sub-body,
.ar-so__sub-body p,
.ar-so__cs-intro,
.ar-so__cs-intro p {
    font-size: 18px;
    line-height: 1.55;
}

.ar-so__intro-body p,
.ar-so__approach-body p,
.ar-so__ns-body p,
.ar-so__sub-body p,
.ar-so__cs-intro p {
    margin: 0 0 16px;
}

.ar-so__intro-body p:last-child,
.ar-so__approach-body p:last-child,
.ar-so__ns-body p:last-child,
.ar-so__sub-body p:last-child,
.ar-so__cs-intro p:last-child {
    margin-bottom: 0;
}

.ar-so--dark .ar-so__eyebrow,
.ar-so--dark .ar-so__approach-eyebrow,
.ar-so--dark .ar-so__ns-eyebrow,
.ar-so--dark .ar-so__cs-eyebrow {
    color: rgba(255, 255, 255, 0.68);
}

.ar-so--dark .ar-so__heading,
.ar-so--dark .ar-so__approach-heading,
.ar-so--dark .ar-so__ns-heading,
.ar-so--dark .ar-so__cs-heading {
    color: #ffffff;
}

.ar-so--dark .ar-so__intro-body,
.ar-so--dark .ar-so__intro-body p,
.ar-so--dark .ar-so__approach-body,
.ar-so--dark .ar-so__approach-body p,
.ar-so--dark .ar-so__ns-body,
.ar-so--dark .ar-so__ns-body p,
.ar-so--dark .ar-so__sub-body,
.ar-so--dark .ar-so__sub-body p,
.ar-so--dark .ar-so__cs-intro,
.ar-so--dark .ar-so__cs-intro p {
    color: rgba(255, 255, 255, 0.82);
}

/* Our Approach */

.ar-so__approach {
    margin: 0 0 88px;
    padding: 76px 0;
    background: transparent;
}

.ar-so__approach-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
    gap: clamp(72px, 7vw, 96px);
    align-items: start;
}

.ar-so__approach-left {
    max-width: 760px;
}

.ar-so__approach-heading {
    margin: 0 0 24px;
    font-family: "Nunito Sans", system-ui, sans-serif;
    font-size: 32px;
    line-height: 44px;
    font-weight: 400;
    color: #01303A;
}

.ar-so__approach-body {
    color: rgba(1, 48, 58, 0.76);
}

.ar-so__approach-right {
    align-self: center;
}

.ar-so__materiality-callout {
    padding: 42px;
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 56%),
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.13) 0, rgba(255, 255, 255, 0) 34%),
        linear-gradient(135deg, #01303A 0%, #005A4E 112%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 24px 58px rgba(1, 48, 58, 0.14);
}

.ar-so__materiality-heading {
    margin: 0 0 24px;
    font-family: "Nunito Sans", system-ui, sans-serif;
    font-size: 22px;
    line-height: 30px;
    font-weight: 600;
    color: #ffffff;
}

.ar-so__materiality-principles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0 0 24px;
}

.ar-so__materiality-principle {
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ar-so__materiality-principle-label {
    margin: 0 0 6px;
    font-family: "Nunito Sans", system-ui, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.96);
}

.ar-so__materiality-principle-copy {
    margin: 0;
    font-size: 15px;
    line-height: 23px;
    color: rgba(255, 255, 255, 0.88);
}

.ar-so__materiality-body,
.ar-so__materiality-body p {
    margin: 0 0 18px;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.90);
}

.ar-so__materiality-closing {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.ar-so__materiality-body p:last-child {
    margin-bottom: 0;
}

/* Narrative rows */

.ar-so__narrative-list {
    display: flex;
    flex-direction: column;
}

.ar-so__narrative-section {
    position: relative;
    margin: 0;
    padding: 72px 0;
    border-top: 0;
}

.ar-so__narrative-section:last-child {
    border-bottom: 0;
}

.ar-so__ns-inner {
    width: 100%;
}

.ar-so__ns-grid {
    display: grid;
    align-items: start;
}

.ar-so__ns-grid--no-image {
    grid-template-columns: minmax(220px, 0.48fr) minmax(0, 1.52fr);
    gap: clamp(56px, 6vw, 96px);
}

.ar-so__ns-grid--with-image {
    grid-template-columns: minmax(220px, 0.48fr) minmax(0, 1.52fr);
    gap: clamp(56px, 6vw, 96px);
}

.ar-so__ns-media {
    margin: 0 0 52px;
}

.ar-so__ns-media-inner {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(1, 48, 58, 0.08);
    box-shadow: 0 26px 62px rgba(1, 48, 58, 0.11);
}

.ar-so__ns-kicker-col {
    position: relative;
}

.ar-so__ns-heading {
    margin: 0;
    font-family: "Nunito Sans", system-ui, sans-serif;
    font-size: 32px;
    line-height: 44px;
    font-weight: 400;
    color: #01303A;
}

.ar-so__ns-body {
    color: rgba(1, 48, 58, 0.76);
}

.ar-so__ns--has-subsections .ar-so__ns-body {
    margin-bottom: 48px;
}

.ar-so__ns--has-subsections .ar-so__ns-body > p:first-child {
    font-size: 20px;
    line-height: 1.55;
    color: rgba(1, 48, 58, 0.88);
}

.ar-so__ns--style-dark_band.ar-so__ns--has-subsections .ar-so__ns-body > p:first-child,
.ar-so__ns--style-highlight_panel.ar-so__ns--has-subsections .ar-so__ns-body > p:first-child {
    color: rgba(255, 255, 255, 0.92);
}

.ar-so__ns-image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 6.6;
    object-fit: cover;
}

.ar-so__readmore {
    display: flex;
    flex-direction: column;
    margin-top: 22px;
}

.ar-so__sub-body .ar-so__readmore {
    margin-top: 20px;
}

.ar-so__readmore summary {
    order: 1;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 44px;
    padding: 0;
    font-family: "Nunito Sans", system-ui, sans-serif;
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    color: #005A4E;
    cursor: pointer;
    list-style: none;
}

.ar-so__readmore summary::-webkit-details-marker {
    display: none;
}

.ar-so__readmore summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.18s ease;
}

.ar-so__readmore[open] summary::after {
    transform: rotate(225deg) translateY(-1px);
}

.ar-so__readmore summary:focus-visible {
    outline: 2px solid #005A4E;
    outline-offset: 5px;
    border-radius: 4px;
}

.ar-so__readmore[open] summary {
    order: 2;
    margin-top: 14px;
}

.ar-so__readmore-less {
    display: none;
}

.ar-so__readmore[open] .ar-so__readmore-more {
    display: none;
}

.ar-so__readmore[open] .ar-so__readmore-less {
    display: inline;
}

.ar-so__readmore-content {
    order: 1;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}

.ar-so__readmore[open] .ar-so__readmore-content {
    opacity: 1;
    transform: translateY(0);
}

@supports (interpolate-size: allow-keywords) {
    .ar-so__readmore {
        interpolate-size: allow-keywords;
    }

    .ar-so__readmore::details-content {
        block-size: 0;
        overflow: hidden;
        transition:
            block-size 0.24s ease,
            content-visibility 0.24s ease allow-discrete;
    }

    .ar-so__readmore[open]::details-content {
        block-size: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ar-so__readmore summary::after,
    .ar-so__readmore-content,
    .ar-so__readmore::details-content {
        transition: none;
    }

    .ar-so__readmore-content {
        transform: none;
    }
}

/* Narrative variants */

.ar-so__ns--style-standard {
    background: transparent;
}

.ar-so__ns--style-feature {
    margin: 0;
    padding: 72px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.ar-so__ns--style-feature + .ar-so__narrative-section {
    border-top: 0;
}

.ar-so__ns--style-dark_band,
.ar-so__ns--style-highlight_panel {
    width: 100vw;
    max-width: none;
    margin: 0 calc(50% - 50vw);
    padding: 88px var(--ar-so-band-inline-padding);
    border: 0;
    border-radius: 0;
    color: #ffffff;
    overflow: hidden;
}

.ar-so__ns--style-dark_band {
    background:
        radial-gradient(circle at 92% 12%, rgba(255, 255, 255, 0.10) 0, rgba(255, 255, 255, 0) 30%),
        linear-gradient(135deg, #01303A 0%, #02242C 58%, #005A4E 140%);
}

.ar-so__ns--style-highlight_panel {
    background:
        radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.13) 0, rgba(255, 255, 255, 0) 32%),
        linear-gradient(135deg, #005A4E 0%, #01303A 118%);
}

.ar-so__ns--style-dark_band + .ar-so__narrative-section,
.ar-so__ns--style-highlight_panel + .ar-so__narrative-section {
    border-top: 0;
    padding-top: 88px;
}

.ar-so__ns--style-dark_band .ar-so__ns-eyebrow,
.ar-so__ns--style-highlight_panel .ar-so__ns-eyebrow {
    color: rgba(255, 255, 255, 0.70);
}

.ar-so__ns--style-dark_band .ar-so__ns-heading,
.ar-so__ns--style-dark_band .ar-so__sub-heading,
.ar-so__ns--style-dark_band .ar-so__kp-title,
.ar-so__ns--style-highlight_panel .ar-so__ns-heading,
.ar-so__ns--style-highlight_panel .ar-so__sub-heading,
.ar-so__ns--style-highlight_panel .ar-so__kp-title {
    color: #ffffff;
}

.ar-so__ns--style-dark_band .ar-so__ns-body,
.ar-so__ns--style-dark_band .ar-so__ns-body p,
.ar-so__ns--style-dark_band .ar-so__sub-body,
.ar-so__ns--style-dark_band .ar-so__sub-body p,
.ar-so__ns--style-dark_band .ar-so__kp-body,
.ar-so__ns--style-highlight_panel .ar-so__ns-body,
.ar-so__ns--style-highlight_panel .ar-so__ns-body p,
.ar-so__ns--style-highlight_panel .ar-so__sub-body,
.ar-so__ns--style-highlight_panel .ar-so__sub-body p,
.ar-so__ns--style-highlight_panel .ar-so__kp-body {
    color: rgba(255, 255, 255, 0.82);
}

.ar-so__ns--style-dark_band .ar-so__ns-media-inner,
.ar-so__ns--style-highlight_panel .ar-so__ns-media-inner {
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.24);
}

.ar-so__ns--style-dark_band .ar-so__readmore summary,
.ar-so__ns--style-highlight_panel .ar-so__readmore summary {
    color: rgba(255, 255, 255, 0.92);
}

.ar-so__ns--style-dark_band .ar-so__readmore summary:focus-visible,
.ar-so__ns--style-highlight_panel .ar-so__readmore summary:focus-visible {
    outline-color: rgba(255, 255, 255, 0.86);
}

/* Slug-led Sustainability page rhythm */

.ar-so__narrative-section--environmental-stewardship {
    width: 100vw;
    max-width: none;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding: 92px var(--ar-so-band-inline-padding);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.34)),
        #F0F0F0;
}

.ar-so__narrative-section--social-impact,
.ar-so__narrative-section--energy-access {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 88px 0;
    background: transparent;
    color: #01303A;
    overflow: visible;
}

.ar-so__narrative-section--governance {
    width: 100vw;
    max-width: none;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding: 92px var(--ar-so-band-inline-padding);
    background:
        radial-gradient(circle at 88% 10%, rgba(255, 255, 255, 0.13) 0, rgba(255, 255, 255, 0) 34%),
        linear-gradient(135deg, #01303A 0%, #005A4E 118%);
    color: #ffffff;
    overflow: hidden;
}

.ar-so__narrative-section--governance + .ar-so__narrative-section--energy-access {
    padding-top: 92px;
}

.ar-so__narrative-section--governance .ar-so__ns-eyebrow,
.ar-so__narrative-section--governance .ar-so__ns-heading,
.ar-so__narrative-section--governance .ar-so__sub-heading,
.ar-so__narrative-section--governance .ar-so__kp-title {
    color: #ffffff;
}

.ar-so__narrative-section--governance .ar-so__ns-body,
.ar-so__narrative-section--governance .ar-so__ns-body p,
.ar-so__narrative-section--governance .ar-so__sub-body,
.ar-so__narrative-section--governance .ar-so__sub-body p,
.ar-so__narrative-section--governance .ar-so__kp-body,
.ar-so__narrative-section--governance.ar-so__ns--has-subsections .ar-so__ns-body > p:first-child {
    color: rgba(255, 255, 255, 0.84);
}

.ar-so__narrative-section--governance .ar-so__sub-sections {
    border-top-color: rgba(255, 255, 255, 0.20);
}

.ar-so__narrative-section--governance .ar-so__sub-section {
    border-bottom-color: rgba(255, 255, 255, 0.16);
}

.ar-so__narrative-section--governance .ar-so__readmore summary {
    color: rgba(255, 255, 255, 0.94);
}

.ar-so__narrative-section--governance .ar-so__readmore summary:focus-visible {
    outline-color: rgba(255, 255, 255, 0.88);
}

.ar-so__governance-cta {
    margin-top: 36px;
}

.ar-so__narrative-section--social-impact .ar-so__ns-eyebrow,
.ar-so__narrative-section--energy-access .ar-so__ns-eyebrow {
    color: #005A4E;
}

.ar-so__narrative-section--social-impact .ar-so__ns-heading,
.ar-so__narrative-section--social-impact .ar-so__sub-heading,
.ar-so__narrative-section--social-impact .ar-so__kp-title,
.ar-so__narrative-section--energy-access .ar-so__ns-heading,
.ar-so__narrative-section--energy-access .ar-so__sub-heading,
.ar-so__narrative-section--energy-access .ar-so__kp-title {
    color: #01303A;
}

.ar-so__narrative-section--social-impact .ar-so__ns-body,
.ar-so__narrative-section--social-impact .ar-so__ns-body p,
.ar-so__narrative-section--social-impact .ar-so__sub-body,
.ar-so__narrative-section--social-impact .ar-so__sub-body p,
.ar-so__narrative-section--social-impact .ar-so__kp-body,
.ar-so__narrative-section--energy-access .ar-so__ns-body,
.ar-so__narrative-section--energy-access .ar-so__ns-body p,
.ar-so__narrative-section--energy-access .ar-so__sub-body,
.ar-so__narrative-section--energy-access .ar-so__sub-body p,
.ar-so__narrative-section--energy-access .ar-so__kp-body {
    color: rgba(1, 48, 58, 0.76);
}

.ar-so__narrative-section--social-impact.ar-so__ns--has-subsections .ar-so__ns-body > p:first-child,
.ar-so__narrative-section--energy-access.ar-so__ns--has-subsections .ar-so__ns-body > p:first-child {
    color: rgba(1, 48, 58, 0.88);
}

/* Sub-sections */

.ar-so__sub-sections {
    margin-top: 40px;
    border-top: 1px solid rgba(1, 48, 58, 0.14);
}

.ar-so__sub-section {
    padding: 28px 0;
    border-bottom: 1px solid rgba(1, 48, 58, 0.10);
}

.ar-so__sub-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ar-so__sub-heading {
    margin: 0 0 12px;
    font-family: "Nunito Sans", system-ui, sans-serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: #01303A;
}

.ar-so__sub-body {
    color: rgba(1, 48, 58, 0.74);
}

.ar-so__ns--style-dark_band .ar-so__sub-sections,
.ar-so__ns--style-highlight_panel .ar-so__sub-sections {
    border-top-color: rgba(255, 255, 255, 0.20);
}

.ar-so__ns--style-dark_band .ar-so__sub-section,
.ar-so__ns--style-highlight_panel .ar-so__sub-section {
    border-bottom-color: rgba(255, 255, 255, 0.16);
}

.ar-so__narrative-section--social-impact .ar-so__sub-sections,
.ar-so__narrative-section--energy-access .ar-so__sub-sections {
    border-top-color: rgba(1, 48, 58, 0.14);
}

.ar-so__narrative-section--social-impact .ar-so__sub-section,
.ar-so__narrative-section--energy-access .ar-so__sub-section {
    border-bottom-color: rgba(1, 48, 58, 0.10);
}

.ar-so__narrative-section--social-impact .ar-so__readmore summary,
.ar-so__narrative-section--energy-access .ar-so__readmore summary {
    color: #005A4E;
}

.ar-so__narrative-section--social-impact .ar-so__readmore summary:focus-visible,
.ar-so__narrative-section--energy-access .ar-so__readmore summary:focus-visible {
    outline-color: #005A4E;
}

/* Proof points */

.ar-so__key-points-wrap {
    margin-top: 44px;
}

.ar-so__key-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ar-so__key-point {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 24px 24px 24px 30px;
    border: 1px solid rgba(1, 48, 58, 0.08);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78)),
        rgba(240, 240, 240, 0.36);
    box-shadow: 0 16px 34px rgba(1, 48, 58, 0.045);
}

.ar-so__key-point::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 16px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #005A4E, rgba(0, 90, 78, 0.30));
}

.ar-so__key-point::after {
    content: counter(proof-point, decimal-leading-zero);
    align-self: flex-start;
    order: -1;
    font-family: "Nunito Sans", system-ui, sans-serif;
    font-size: 12px;
    line-height: 18px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: rgba(0, 90, 78, 0.76);
}

.ar-so__key-points {
    counter-reset: proof-point;
}

.ar-so__key-point {
    counter-increment: proof-point;
}

.ar-so__kp-title {
    font-family: "Nunito Sans", system-ui, sans-serif;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: #01303A;
}

.ar-so__kp-body {
    font-size: 16px;
    line-height: 25px;
    color: rgba(1, 48, 58, 0.70);
}

.ar-so__ns--style-feature .ar-so__key-point {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.84)),
        #ffffff;
}

.ar-so__ns--style-dark_band .ar-so__key-point,
.ar-so__ns--style-highlight_panel .ar-so__key-point {
    border-color: rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.08)),
        rgba(255, 255, 255, 0.06);
    box-shadow: none;
    backdrop-filter: blur(10px);
}

.ar-so__ns--style-dark_band .ar-so__key-point::before,
.ar-so__ns--style-highlight_panel .ar-so__key-point::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.26));
}

.ar-so__ns--style-dark_band .ar-so__key-point::after,
.ar-so__ns--style-highlight_panel .ar-so__key-point::after {
    color: rgba(255, 255, 255, 0.72);
}

.ar-so__narrative-section--environmental-stewardship .ar-so__key-point,
.ar-so__narrative-section--social-impact .ar-so__key-point,
.ar-so__narrative-section--energy-access .ar-so__key-point {
    border-color: rgba(1, 48, 58, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.84)),
        #ffffff;
    box-shadow: 0 16px 34px rgba(1, 48, 58, 0.045);
    backdrop-filter: none;
}

.ar-so__narrative-section--environmental-stewardship .ar-so__key-point::before,
.ar-so__narrative-section--social-impact .ar-so__key-point::before,
.ar-so__narrative-section--energy-access .ar-so__key-point::before {
    background: linear-gradient(180deg, #005A4E, rgba(0, 90, 78, 0.30));
}

.ar-so__narrative-section--environmental-stewardship .ar-so__key-point::after,
.ar-so__narrative-section--social-impact .ar-so__key-point::after,
.ar-so__narrative-section--energy-access .ar-so__key-point::after {
    color: rgba(0, 90, 78, 0.76);
}

/* Case studies */

.ar-so__case-studies {
    margin-top: 88px;
    padding-top: 64px;
    border-top: 1px solid rgba(1, 48, 58, 0.14);
}

.ar-so__cs-header {
    display: grid;
    grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1fr);
    column-gap: clamp(48px, 6vw, 88px);
    align-items: start;
    margin: 0 0 44px;
}

.ar-so__cs-eyebrow {
    grid-column: 1;
}

.ar-so__cs-heading {
    grid-column: 1;
    margin: 0;
    font-family: "Nunito Sans", system-ui, sans-serif;
    font-size: 32px;
    line-height: 44px;
    font-weight: 400;
    color: #01303A;
}

.ar-so__cs-intro {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: rgba(1, 48, 58, 0.74);
}

.ar-so__cs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.ar-so__cs-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 32px;
    border: 1px solid rgba(1, 48, 58, 0.12);
    border-radius: 20px;
    background-color: #ffffff;
    box-shadow: 0 18px 42px rgba(1, 48, 58, 0.06);
}

.ar-so__cs-card-meta {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #005A4E;
}

.ar-so__cs-card-title {
    margin: 0 0 12px;
    font-family: "Nunito Sans", system-ui, sans-serif;
    font-size: 22px;
    line-height: 30px;
    font-weight: 600;
    color: #01303A;
}

.ar-so__cs-card-details {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 20px;
    color: rgba(1, 48, 58, 0.58);
}

.ar-so__cs-card-summary {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 25px;
    color: rgba(1, 48, 58, 0.72);
}

.ar-so__cs-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    color: #005A4E;
    text-decoration: none;
}

.ar-so__cs-card-link:hover { color: #01303A; }

.ar-so__cs-card-link:focus-visible {
    outline: 2px solid #005A4E;
    outline-offset: 3px;
    border-radius: 4px;
}

.ar-so__cs-card-arrow {
    transition: transform 0.16s ease;
}

.ar-so__cs-card-link:hover .ar-so__cs-card-arrow {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .ar-so__cs-card-arrow { transition: none; }
    .ar-so__cs-card-link:hover .ar-so__cs-card-arrow { transform: none; }
}

/* Closing CTA */

.ar-so__cta-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
    gap: clamp(48px, 7vw, 96px);
    align-items: center;
    width: 100vw;
    margin: 104px calc(50% - 50vw) -96px;
    padding: 84px max(24px, calc((100vw - 1440px) / 2 + 112px));
    min-height: 260px;
    border-radius: 0;
    background:
        radial-gradient(circle at 88% 0%, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0) 32%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0) 44%),
        linear-gradient(135deg, #01303A 0%, #005A4E 112%);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.ar-so__cta-block--green {
    background:
        radial-gradient(circle at 88% 0%, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0) 32%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0) 44%),
        linear-gradient(135deg, #005A4E 0%, #01303A 112%);
}

.ar-so__cta-block--white {
    background:
        radial-gradient(circle at 88% 0%, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0) 32%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0) 44%),
        linear-gradient(135deg, #01303A 0%, #005A4E 112%);
    color: #ffffff;
}

.ar-so__cta-content {
    max-width: 820px;
}

.ar-so__cta-heading {
    margin: 0 0 12px;
    font-family: "Nunito Sans", system-ui, sans-serif;
    font-size: 32px;
    line-height: 44px;
    font-weight: 400;
    color: inherit;
}

.ar-so__cta-body {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    max-width: 700px;
}

.ar-so__cta-block--white .ar-so__cta-body {
    color: rgba(255, 255, 255, 0.82);
}

.ar-so__cta-action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.ar-so__narrative-list + .ar-so__cta-block {
    margin-top: 16px;
}

/* Responsive */

@media (max-width: 1024px) {
    .ar-so-section {
        --ar-so-band-inline-padding: 64px;
    }

    .ar-so-inner {
        padding: 72px 64px;
    }

    .ar-so__header,
    .ar-so__cs-header {
        grid-template-columns: 1fr;
        row-gap: 24px;
        margin-bottom: 64px;
    }

    .ar-so__intro-body,
    .ar-so__cs-intro {
        grid-column: 1;
        grid-row: auto;
        max-width: 820px;
    }

    .ar-so__approach {
        margin-bottom: 72px;
        padding: 64px 0;
    }

    .ar-so__approach-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ar-so__approach-left {
        max-width: none;
        width: 100%;
    }

    .ar-so__materiality-callout {
        max-width: none;
        width: 100%;
    }

    .ar-so__narrative-section {
        padding: 64px 0;
    }

    .ar-so__ns-grid,
    .ar-so__ns-grid--no-image,
    .ar-so__ns-grid--with-image {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .ar-so__ns-media {
        margin-bottom: 36px;
    }

    .ar-so__ns-image {
        aspect-ratio: 16 / 9;
    }

    .ar-so__ns--style-feature,
    .ar-so__ns--style-dark_band,
    .ar-so__ns--style-highlight_panel {
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .ar-so__ns--style-feature {
        padding-top: 64px;
        padding-right: 0;
        padding-bottom: 64px;
        padding-left: 0;
    }

    .ar-so__ns--style-dark_band,
    .ar-so__ns--style-highlight_panel {
        margin-top: 32px;
        margin-bottom: 32px;
        padding-right: var(--ar-so-band-inline-padding);
        padding-left: var(--ar-so-band-inline-padding);
    }

    .ar-so__ns--style-dark_band + .ar-so__narrative-section,
    .ar-so__ns--style-highlight_panel + .ar-so__narrative-section {
        padding-top: 72px;
    }

    .ar-so__narrative-section--environmental-stewardship,
    .ar-so__narrative-section--governance {
        margin-top: 0;
        margin-right: calc(50% - 50vw);
        margin-bottom: 0;
        margin-left: calc(50% - 50vw);
        padding: 68px var(--ar-so-band-inline-padding);
    }

    .ar-so__narrative-section--social-impact,
    .ar-so__narrative-section--energy-access {
        margin: 0;
        padding: 72px 0;
        background: transparent;
    }

    .ar-so__narrative-section--governance + .ar-so__narrative-section--energy-access {
        padding-top: 76px;
    }

    .ar-so__key-points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ar-so__cs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ar-so__cta-block {
        grid-template-columns: 1fr;
        gap: 28px;
        min-height: 0;
        margin-bottom: -72px;
        padding: 64px;
    }

    .ar-so__cta-content {
        max-width: none;
        width: 100%;
    }

    .ar-so__cta-body {
        max-width: none;
        width: 100%;
    }

    .ar-so__cta-action {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .ar-so__approach-heading,
    .ar-so__ns-heading,
    .ar-so__cs-heading,
    .ar-so__cta-heading {
        font-size: 28px;
        line-height: 38px;
    }

    .ar-so__key-points,
    .ar-so__cs-grid {
        grid-template-columns: 1fr;
    }

    .ar-so__key-point {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .ar-so-section {
        --ar-so-band-inline-padding: 24px;
    }

    .ar-so-inner {
        padding: 56px 24px;
    }

    .ar-so__header {
        margin-bottom: 48px;
    }

    .ar-so__eyebrow,
    .ar-so__approach-eyebrow,
    .ar-so__ns-eyebrow,
    .ar-so__cs-eyebrow {
        margin-bottom: 12px;
        font-size: 13px;
        line-height: 20px;
    }

    .ar-so__intro-body,
    .ar-so__intro-body p,
    .ar-so__approach-body,
    .ar-so__approach-body p,
    .ar-so__ns-body,
    .ar-so__ns-body p,
    .ar-so__sub-body,
    .ar-so__sub-body p,
    .ar-so__materiality-body,
    .ar-so__materiality-body p,
    .ar-so__cs-intro,
    .ar-so__cs-intro p,
    .ar-so__cta-body {
        font-size: 16px;
        line-height: 25px;
    }

    .ar-so__approach {
        margin-bottom: 48px;
        padding: 48px 0;
    }

    .ar-so__approach-grid {
        gap: 32px;
    }

    .ar-so__approach-heading,
    .ar-so__ns-heading,
    .ar-so__cs-heading,
    .ar-so__cta-heading {
        font-size: 24px;
        line-height: 32px;
    }

    .ar-so__materiality-callout {
        padding: 28px 24px;
        border-radius: 20px;
    }

    .ar-so__materiality-heading {
        font-size: 20px;
        line-height: 28px;
    }

    .ar-so__narrative-section {
        padding: 48px 0;
    }

    .ar-so__ns-grid,
    .ar-so__ns-grid--no-image,
    .ar-so__ns-grid--with-image {
        gap: 24px;
    }

    .ar-so__ns-media {
        margin-bottom: 28px;
    }

    .ar-so__ns--style-feature,
    .ar-so__ns--style-dark_band,
    .ar-so__ns--style-highlight_panel {
        margin-top: 24px;
        margin-bottom: 24px;
        padding-top: 52px;
        padding-bottom: 52px;
    }

    .ar-so__ns--style-feature {
        margin: 0;
        padding-top: 48px;
        padding-right: 0;
        padding-bottom: 48px;
        padding-left: 0;
        border-radius: 0;
    }

    .ar-so__ns--style-dark_band,
    .ar-so__ns--style-highlight_panel {
        margin-right: calc(50% - 50vw);
        margin-left: calc(50% - 50vw);
        padding-right: var(--ar-so-band-inline-padding);
        padding-left: var(--ar-so-band-inline-padding);
    }

    .ar-so__ns--style-dark_band + .ar-so__narrative-section,
    .ar-so__ns--style-highlight_panel + .ar-so__narrative-section {
        padding-top: 56px;
    }

    .ar-so__narrative-section--environmental-stewardship,
    .ar-so__narrative-section--governance {
        margin-top: 0;
        margin-right: calc(50% - 50vw);
        margin-bottom: 0;
        margin-left: calc(50% - 50vw);
        padding: 52px var(--ar-so-band-inline-padding);
    }

    .ar-so__narrative-section--social-impact,
    .ar-so__narrative-section--energy-access {
        margin: 0;
        padding: 56px 0;
        background: transparent;
    }

    .ar-so__narrative-section--governance + .ar-so__narrative-section--energy-access {
        padding-top: 60px;
    }

    .ar-so__governance-cta {
        margin-top: 28px;
    }

    .ar-so__sub-sections,
    .ar-so__key-points-wrap {
        margin-top: 32px;
    }

    .ar-so__sub-section {
        padding: 24px 0;
    }

    .ar-so__sub-heading {
        font-size: 20px;
        line-height: 28px;
    }

    .ar-so__key-point {
        padding: 22px 20px 22px 28px;
    }

    .ar-so__kp-title {
        font-size: 17px;
        line-height: 25px;
    }

    .ar-so__cs-header {
        margin-bottom: 32px;
    }

    .ar-so__case-studies {
        margin-top: 56px;
        padding-top: 44px;
    }

    .ar-so__cs-card {
        padding: 26px 24px;
    }

    .ar-so__cs-card-title {
        font-size: 20px;
        line-height: 28px;
    }

    .ar-so__cta-block {
        margin-top: 72px;
        margin-bottom: -56px;
        padding: 52px 24px;
    }
}

@media (max-width: 375px) {
    .ar-so-inner {
        padding-right: 24px;
        padding-left: 24px;
    }

    .ar-so__ns--style-feature {
        padding-right: 0;
        padding-left: 0;
    }

    .ar-so__cta-block {
        padding-right: 24px;
        padding-left: 24px;
    }
}