
/* Cinematic introduction and the church's original visual identity. */
.about-page .about-hero-film{min-height:650px;isolation:isolate;background:#292e23;color:#fff}
.about-film-media,.about-film-shade{position:absolute;inset:0;z-index:-1;overflow:hidden}
.about-film-media{background:#292e23}
.about-film-media video,.about-film-poster{width:100%;height:100%;object-fit:cover;object-position:center;position:absolute;inset:0}
.about-film-media video{opacity:0;transition:opacity 1.2s ease}
.about-hero-film.has-video .about-film-media video{opacity:1}
.about-film-shade{background:linear-gradient(90deg,rgba(17,25,20,.78),rgba(20,28,22,.35) 52%,rgba(25,29,19,.04) 84%),linear-gradient(0deg,rgba(19,27,22,.64),transparent 43%)}
.about-page .about-hero-film .about-hero-inner{min-height:535px;display:flex;align-items:center;gap:0;position:relative;padding-top:38px;padding-bottom:45px}
.about-hero-film .about-hero-copy{max-width:850px;animation:about-film-enter 1s ease both}
.about-page .about-hero-film .about-kicker{font-size:10px;letter-spacing:2.3px;color:#d4e0e4;margin-bottom:29px;gap:16px}
.about-page .about-hero-film .about-kicker>span:first-child{font:11px var(--sans);color:#b4e9ed;letter-spacing:2px}
.about-film-kicker-line{width:36px;height:1px;background:#9dc4ce;display:block}
.about-page .about-hero-film h1{font:400 clamp(46px,5vw,76px)/1.47 var(--serif);letter-spacing:-3px;color:#fff}
.about-page .about-hero-film h1 em{color:#9ce1e5;font:inherit;letter-spacing:inherit}
.about-page .about-hero-film .about-hero-copy>p{font-size:15px;color:#d4e0e4;margin-top:23px;line-height:1.9}
.about-page .about-hero-film .about-hero-link{color:#fff;font-size:12px;margin-top:32px;gap:26px}
.about-page .about-hero-film .about-hero-link>span{width:40px;height:40px;border-color:#a9c9d077;background:#ffffff08}
.about-film-side{position:absolute;right:0;top:50%;writing-mode:vertical-rl;letter-spacing:4px;font-size:10px;color:#d8e7eaa6;transform:translateY(-50%)}
.about-page .about-hero-film .about-hero-verse{min-height:115px;position:relative;padding:25px 0;border-top:1px solid #c8dbe43b;align-items:center}
.about-verse-label{font:8px Georgia;letter-spacing:2px;color:#b8d0d9;display:block;margin-bottom:10px}
.about-page .about-hero-film .about-hero-verse p{font-size:12px;line-height:1.9;color:#e3eaed}
.about-film-toggle{display:flex;align-items:center;gap:12px;color:#eff8fa;background:transparent;border:0;font:11px var(--sans);white-space:nowrap;padding:8px 0 8px 20px;cursor:pointer}
.about-film-toggle>span:first-child{display:grid;place-items:center;width:38px;height:38px;border:1px solid #c0d5dd80;border-radius:50%;font-size:12px;transition:background .3s}
.about-film-toggle:hover>span:first-child{background:#ffffff24}
.about-film-toggle:focus-visible{outline:2px solid #9ce1e5;outline-offset:6px}
.about-page .about-anchor-nav>.wrap{gap:35px}
.about-page section[id]{scroll-margin-top:155px}
.about-identity{padding:95px 0 105px;background:#f1f5f6;border-top:1px solid #e5edef}
.ci-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:stretch}
.ci-stage{min-height:510px;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:27px 30px;background:#fff;border:1px solid #dce6e9;overflow:hidden}
.ci-stage:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#7eabb10a 1px,transparent 1px),linear-gradient(90deg,#7eabb10a 1px,transparent 1px);background-size:35px 35px}
.ci-stage:after{content:"";position:absolute;inset:60px;border:1px solid #d7e8eb;border-radius:50%;pointer-events:none}
.ci-stage-top,.ci-stage-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:1}
.ci-stage-top{color:#7e9ba7;font:8px Georgia;letter-spacing:1.5px}
.ci-stage-bottom{padding-top:22px;border-top:1px solid #e2e9ec;font-size:11px;color:#6b8491}
.ci-stage-bottom>span:last-child{color:#37bbca;font-size:19px}
.ci-logo-composition{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:35px;padding-block:35px}
.ci-symbol{width:190px;height:190px;object-fit:contain;filter:drop-shadow(0 9px 15px #06b5c11a)}
.ci-wordmark{width:230px;max-width:80%;height:auto;object-fit:contain}
.ci-stage.is-revealed .ci-symbol{animation:ci-symbol-enter 1.4s cubic-bezier(.2,.7,.3,1) both}
.ci-eyebrow{font:8px Georgia;letter-spacing:2px;color:#7e9aa8;margin:9px 0 20px}
.ci-story-copy>h3{font:400 38px/1.6 var(--serif);letter-spacing:-1.5px;color:#294d62}
.ci-story-intro{font-size:13px;color:#6f8592;line-height:2;word-break:keep-all;max-width:400px;margin-top:18px}
.ci-meanings{margin-top:27px;border-top:1px solid #cddce2}
.ci-meanings details{border-bottom:1px solid #d6e1e5}
.ci-meanings summary{display:flex;align-items:center;gap:18px;padding:20px 0;cursor:pointer;list-style:none}
.ci-meanings summary::-webkit-details-marker{display:none}
.ci-meanings summary>span{font:11px Georgia;color:#84a8b7}
.ci-meanings h4{font-size:14px;font-weight:500;line-height:1.7;flex:1;color:#496b7f}
.ci-meanings summary i{font-style:normal;font-size:19px;font-weight:300;color:#6d94a7;transition:transform .35s}
.ci-meanings details[open] summary i{transform:rotate(45deg)}
.ci-meanings details[open] h4{color:#007f95}
.ci-meanings details>p{padding:0 22px 23px 35px;color:#647e8c;font-size:12px;line-height:2;word-break:keep-all}
.ci-meanings summary:focus-visible{outline:2px solid #588d9c;outline-offset:3px}
.ci-reference-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:60px}
.ci-reference-grid figure{min-width:0;margin:0}
.ci-reference{aspect-ratio:1.25;background:#fff;border:1px solid #e0e8eb;cursor:zoom-in}
.ci-reference img{width:100%;height:100%;object-fit:contain;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.ci-application img{object-fit:cover}
.ci-reference:hover img{transform:scale(1.025)}
.ci-reference-grid figcaption{display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding-top:20px}
.ci-reference-grid figcaption>span:first-child{font:8px Georgia;letter-spacing:1.5px;color:#82a1b0;width:100%}
.ci-reference-grid figcaption strong{font-size:14px;font-weight:500;color:#4c6c7d}
.ci-expand-hint{margin-left:auto;font-size:10px;color:#7b98a8}
@keyframes about-film-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ci-symbol-enter{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(12px)}to{opacity:1;clip-path:inset(0);transform:none}}
@media(min-width:1600px){.about-page .about-hero-film .about-hero-inner{min-height:590px}}
@media(max-width:1100px){.ci-story-grid{gap:40px}.ci-stage{min-height:490px;padding:25px}.about-page .about-anchor-nav>.wrap{gap:25px}.ci-story-copy>h3{font-size:34px}}
@media(max-width:767px){
 .about-page .about-hero-film{min-height:620px}
 .about-page .about-hero-film .about-hero-inner{min-height:495px;padding-top:55px;padding-bottom:45px;display:flex}
 .about-page .about-hero-film h1{font-size:43px;line-height:1.55;letter-spacing:-2px}
 .about-page .about-hero-film .about-kicker{font-size:7px;gap:12px;letter-spacing:1.1px;margin-bottom:25px}
 .about-page .about-hero-film .about-kicker>span:first-child{font-size:9px}
 .about-film-kicker-line{width:23px}
 .about-page .about-hero-film .about-hero-copy>p{font-size:12px;max-width:270px;margin-top:22px}
 .about-page .about-hero-film .about-hero-link{font-size:11px;margin-top:27px}
 .about-film-side{display:none}
 .about-film-shade{background:linear-gradient(90deg,rgba(17,25,20,.72),rgba(20,28,22,.26)),linear-gradient(0deg,rgba(19,27,22,.64),transparent 65%)}
 .about-page .about-hero-film .about-hero-verse{min-height:125px;padding:21px 0;gap:15px}
 .about-page .about-hero-film .about-hero-verse p{font-size:10px;max-width:245px;word-break:keep-all}
 .about-verse-label{font-size:7px;letter-spacing:1.5px}
 .about-film-toggle{padding-left:0}
 .about-film-toggle-label{display:none}
 .about-film-toggle>span:first-child{width:34px;height:34px}
 .about-page .about-anchor-nav>.wrap{justify-content:flex-start;overflow-x:auto;gap:26px;scrollbar-width:none;padding-inline:22px;width:100%}
 .about-page .about-anchor-nav>.wrap::-webkit-scrollbar{display:none}
 .about-page .about-anchor-nav a{padding:19px 0;font-size:10px;flex-shrink:0}
 .about-page section[id]{scroll-margin-top:145px}
 .about-identity{padding:65px 0}
 .ci-story-grid{grid-template-columns:1fr;gap:35px}
 .ci-stage{min-height:380px;padding:24px}
 .ci-stage:after{inset:48px}
 .ci-logo-composition{gap:26px;padding:28px 0}
 .ci-symbol{width:145px;height:145px}
 .ci-wordmark{width:205px}
 .ci-stage-top{font-size:7px;letter-spacing:1px}
 .ci-stage-bottom{font-size:10px}
 .ci-eyebrow{font-size:7px;margin-top:10px}
 .ci-story-copy>h3{font-size:31px}
 .ci-story-intro{font-size:12px;margin-top:16px}
 .ci-meanings summary{padding:18px 0;gap:15px}
 .ci-meanings h4{font-size:13px}
 .ci-meanings details>p{font-size:12px;padding-left:30px}
 .ci-reference-grid{grid-template-columns:1fr;gap:30px;margin-top:35px}
 .ci-reference-grid figcaption{padding-top:15px}
 .ci-reference-grid figcaption strong{font-size:12px}
 .ci-expand-hint{font-size:9px}
}
@media(max-width:360px){.about-page .about-hero-film h1{font-size:36px}.about-page .about-hero-film .about-kicker{font-size:6px}}
@media(prefers-reduced-motion:reduce){.about-hero-film .about-hero-copy,.ci-stage.is-revealed .ci-symbol{animation:none}.about-film-media video{transition:none}}

@media(max-width:767px){.about-page .about-hero-film .about-hero-verse{display:flex;flex-direction:row}}

.about-film-toggle[hidden]{display:none}

/* Original church CI animation, including its official wordmark. */
.ci-stage:after{display:none}
.ci-stage .ci-logo-composition{flex:1;gap:0;padding:0;justify-content:center;min-height:350px}
.ci-animated-logo,.ci-animation-still{width:100%;height:auto;max-height:410px;object-fit:contain}
.ci-animation-still{display:none}
.ci-logo-composition.is-paused .ci-animated-logo{display:none}
.ci-logo-composition.is-paused .ci-animation-still{display:block}
.ci-animation-toggle{display:flex;align-items:center;gap:7px;background:transparent;border:1px solid #ccdde4;border-radius:20px;padding:5px 11px;font-size:10px;color:#557c8e;cursor:pointer;white-space:nowrap}
.ci-animation-toggle>span:first-child{font-size:10px}
.ci-animation-toggle:hover{background:#edf7f9;border-color:#7eacba}
.ci-animation-toggle:focus-visible{outline:2px solid #588d9c;outline-offset:4px}
@media(max-width:767px){.ci-stage .ci-logo-composition{min-height:270px}.ci-animated-logo,.ci-animation-still{max-height:320px}.ci-stage-bottom{gap:8px}.ci-stage-bottom>span:first-child{font-size:9px}.ci-animation-toggle{font-size:9px;padding:4px 9px}}
@media(prefers-reduced-motion:reduce){.ci-animated-logo{display:none}.ci-animation-still{display:block}.ci-logo-composition.is-playing .ci-animated-logo{display:block}.ci-logo-composition.is-playing .ci-animation-still{display:none}}

/* Keep the sunlit rock visible within the narrow hero crop. */
@media(max-width:767px){.about-film-media video,.about-film-poster{object-position:75% center}}

/* Pen strokes stay in the same source coordinates as the moving rock. */
.about-film-drawing{position:absolute;pointer-events:none;visibility:hidden;color:#fff2d6;filter:drop-shadow(0 1px 2px #18201999);overflow:visible}
.about-hero-film.has-video .about-film-drawing{visibility:visible}
.about-film-drawing path{vector-effect:non-scaling-stroke}

/* Let the introduction film continue behind the navigation, as on the home page. */
.about-page{padding-top:0}
.about-page .about-hero-film{padding-top:90px}
.about-page .site-header:not(.is-scrolled){background:transparent;color:#fff;border-bottom:0;box-shadow:none}
.about-page .site-header:not(.is-scrolled) .header-welcome{border-color:#ffffff70;background:#ffffff08}
.about-film-shade:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#101b1655,transparent 180px)}
@media(max-width:767px){
 .about-page{padding-top:0}
 .about-page .about-hero-film{padding-top:78px}
}

/* Lower the source crop without exposing an empty edge. The SVG shares this position. */
.about-film-media{--about-film-drop:90px}
.about-film-media video,.about-film-poster{object-position:50% var(--about-film-focus-y,50%)}
@media(max-width:767px){.about-film-media{--about-film-drop:0px}.about-film-media video,.about-film-poster{object-position:75% var(--about-film-focus-y,50%)}}

/* Exact anchor landing and a single, explicit image enlargement target. */
.about-page .about-section-heading.is-anchor-target{transform:none!important;translate:none!important;transition:none!important;opacity:1!important}
.about-page .is-static-photo{cursor:default}
.about-page .ci-application:hover img{transform:none}
.about-page .about-anchor-nav{top:var(--about-header-height,78px)}
.about-page section[id]{scroll-margin-top:var(--about-jump-offset,155px)}
/* The real title remains intact beneath a brief, inaccessible scramble overlay. */
.about-page #about-hero-title{position:relative}
.about-page #about-hero-title.is-scrambling>:not(.about-scramble-overlay){visibility:hidden}
.about-scramble-overlay{display:block;position:absolute;inset:0;pointer-events:none}
/* Only the currently open CI meaning receives emphasis. */
.ci-cycle-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px}
.ci-cycle-controls>span{font:9px Georgia;letter-spacing:1.6px;color:#7d9aa7}
#ci-meanings-toggle{border:1px solid #bfd3dc;border-radius:20px;background:transparent;padding:7px 12px;color:#56798b;font:11px var(--sans);cursor:pointer}
#ci-meanings-toggle:focus-visible{outline:2px solid #087e92;outline-offset:3px}
.ci-cycle-controls+.ci-meanings{margin-top:12px;min-height:365px}
.ci-meanings details{position:relative;transition:background .45s,box-shadow .45s}
.ci-meanings details[open]{background:#fff;box-shadow:inset 3px 0 #458f9e}
.ci-meanings details[open] summary{padding-inline:14px}
.ci-meanings details[open]>p{padding-left:49px;animation:ci-meaning-copy .45s ease both}
.ci-meanings details[open]:after{content:"";position:absolute;height:2px;bottom:0;left:0;background:#458f9e;width:0}
.ci-meanings.is-ci-running details[open]:after{animation:ci-reading-progress var(--ci-cycle-duration,4000ms) linear both}
.ci-meanings details::details-content{interpolate-size:allow-keywords;block-size:0;overflow:clip;transition:block-size .45s ease,content-visibility .45s;transition-behavior:allow-discrete}
.ci-meanings details[open]::details-content{block-size:auto}
@keyframes ci-reading-progress{to{width:100%}}
@keyframes ci-meaning-copy{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
.ci-scroll-highlight .ci-highlight-char{--ci-char-fill:0%;background:linear-gradient(90deg,#147e90 0%,#147e90 var(--ci-char-fill),#b7c6cd var(--ci-char-fill),#b7c6cd 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@media(max-width:767px){.ci-cycle-controls+.ci-meanings{min-height:440px}.ci-meanings details[open]>p{padding-left:44px}}
@media(prefers-reduced-motion:reduce){.ci-meanings details,.ci-meanings details::details-content{transition:none}.ci-meanings details[open]>p,.ci-meanings.is-ci-running details[open]:after{animation:none}.ci-scroll-highlight .ci-highlight-char{background:none;color:#147e90;-webkit-text-fill-color:currentColor}}
