/* Original reference artwork is displayed only in text-free decorative windows.
   Source: Web Design/About/Layout/Our Story Aug 25.png (1536 × 1024).
   No reference text, portrait or icon pixels are used as interactive content. */
.page-about .site-header,.page-about .site-footer{background-color:#02386f}
.page-about .about-hero{min-height:360px}
.page-about .about-hero::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,#02386ff5,#02386fb0 28%,transparent 65%);pointer-events:none}
.page-about .ref-hero-text{max-width:460px;text-shadow:none}
.page-about .ref-hero-text>em{color:#79d5ee}
.about-story-surface{position:relative;isolation:isolate;padding:0 0 30px;background:#eef9fd url('assets/about-waves.svg') center bottom / 100% 260px no-repeat}
.about-story-surface::before,.about-story-surface::after,.about-lower-coral{content:"";position:absolute;pointer-events:none;z-index:-1;background-image:url('assets/layouts/about-story.png');background-repeat:no-repeat}
.about-story-surface::before,.about-story-surface::after{top:0;width:70px;height:186px;background-size:1536px 1024px}
.about-story-surface::before{left:0;background-position:left -383px}
.about-story-surface::after{right:0;background-position:right -383px}
.about-lower-coral{right:0;bottom:0;width:250px;height:210px;background-size:1536px 1024px;background-position:right -574px}
.page-about .ref-icon-row{grid-template-columns:repeat(6,minmax(0,1fr));padding:26px max(74px,calc((100% - 1320px)/2));background:transparent;align-items:start}
.page-about .ref-icon-row>details{padding:0 16px}
.page-about .ref-icon-row h3{font-size:19px;color:#02386f}
.page-about .ref-icon-row summary p{font-size:14px;line-height:1.45;min-height:80px}
.page-about .icon{color:#027198;background:none;border:0;border-radius:0}
.page-about .icon svg{stroke:currentColor}
.page-about .read-more{display:inline-block;color:#027198;font-size:13px;font-weight:700}
.page-about .when-open{display:none}
.page-about details[open]>summary .when-closed{display:none}
.page-about details[open]>summary .when-open{display:inline}
.page-about .disclosure{border:0;margin:0 auto}
.page-about .more-text{text-align:left;overflow-wrap:break-word}
.page-about .more-text h4{margin:16px 0 6px;font-size:15px;color:#02386f;line-height:1.4}
.page-about .more-text p{font-size:14px;line-height:1.65}
.about-story-surface>.ref-founder{display:flex;align-items:center;gap:28px;max-width:940px;margin:8px auto 0;padding:24px 32px;background:#c9edf8cc;border-radius:22px}
.page-about .ref-founder img{width:180px;height:180px;border:3px solid #027198}
.page-about .ref-founder span{font-size:23px;border-bottom:2px solid #027198}
.page-about .ref-media{background:#02386f}
.page-about .ref-media-grid>a{background:#075982;border-color:#79d5ee}
.media-thumbnail{display:block;position:relative}
.media-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border:2px solid white;border-radius:50%;background:#02386fcc;display:grid;place-items:center}
.media-play svg{width:25px;height:25px;fill:white}
.page-about .ref-media-grid a:hover .media-play,.page-about .ref-media-grid a:focus-visible .media-play{background:#027198;transform:translate(-50%,-50%) scale(1.08)}
@media(max-width:1100px){.page-about .ref-icon-row{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}.page-about .ref-icon-row>details:nth-child(3n){border-right:0}.about-story-surface>.ref-founder{margin:12px 36px 0}}
@media(max-width:760px){.page-about .about-hero{min-height:500px}.page-about .about-hero::before{background:linear-gradient(90deg,#02386feb,#02386f66)}.page-about .ref-icon-row{grid-template-columns:1fr;padding:28px 34px;gap:24px}.page-about .ref-icon-row>details{border-right:0;border-bottom:1px solid #b2dce9;padding-bottom:20px}.page-about .ref-icon-row summary p{min-height:0;max-width:330px;margin-left:auto;margin-right:auto}.about-story-surface>.ref-founder{flex-direction:column;margin:12px 20px 0;padding:24px}.page-about .ref-media-grid .media-thumbnail{grid-row:1/3}.page-about .ref-media-grid .media-thumbnail img{height:100%;object-fit:cover}.page-about .ref-media-grid .play-label{grid-column:2}.about-lower-coral{width:130px}}
/* Blend the reference's pale background into the live surface. */
.about-story-surface::before,.about-story-surface::after,.about-lower-coral{mix-blend-mode:multiply}
/* Keep supplied partner marks legible without altering their brand colors. */
.page-about .partner-logo-grid a{background:#fff;padding:12px;border-radius:6px}
/* I.CARE supplies a white mark, which needs its original dark backdrop. */
.page-about .partner-logo-grid a[aria-label="I.CARE"]{background:#02386f;border:1px solid #79d5ee}

/* Fade only the text-free crop boundaries, keeping the reference coral shapes. */
.about-story-surface::before{mask-image:linear-gradient(to right,#000 65%,transparent),linear-gradient(to bottom,transparent,#000 14%,#000 78%,transparent);mask-composite:intersect}
.about-story-surface::after{mask-image:linear-gradient(to left,#000 65%,transparent),linear-gradient(to bottom,transparent,#000 14%,#000 78%,transparent);mask-composite:intersect}
.about-lower-coral{mask-image:linear-gradient(to left,#000 55%,transparent),linear-gradient(to top,#000 65%,transparent);mask-composite:intersect}
.page-about .carousel-pause-only{left:auto;right:20px;bottom:16px;transform:none;padding:4px;background:#02386f99}
.page-about .carousel-pause-only button{width:30px;height:30px}

.page-about .about-story-surface{background:#fff url('assets/client-backgrounds/CARES_bg_01_both_sides.png') center / 100% 100% no-repeat}
@media(max-width:760px){.page-about .about-story-surface{background-size:100% 760px;background-repeat:repeat-y}}