/* Foundations design system • 2026.11.03.17
 * Real photos from the church, bold type with an italic serif accent, color cards with oversized marks in the
 * spirit of the social tiles, and a little motion. Brand colors only: ink, olive, cream, gold, and stone.
 * Gold never sits on olive, and olive text never sits on gold.
 */
:root{--accent:'Instrument Serif',Georgia,'Times New Roman',serif;--olive:#616526;--olive-text:#5a5f22;--olive-soft:#e9ebd6;--stone:#d5d9c8}
:root[data-theme=dark]{--olive-text:#c8ce8d;--olive-soft:#2c3528}
#main{overflow-x:clip}

/* Icons: a soft tinted fill under a rounded line. */
.icon{stroke-width:1.8}
.icon .d{fill:currentColor;stroke:none;opacity:.2}

/* Headings everywhere get the accent: <em> words turn into an italic serif. */
h1 em,h2 em,h3 em,.pc-copy em,.tc-copy em{font-family:var(--accent);font-style:italic;font-weight:400;letter-spacing:-.01em}
.page-head h1{font-size:clamp(36px,9.6vw,58px);line-height:.98;letter-spacing:-1.8px;font-weight:850}
.section-title{align-items:flex-end;margin-bottom:18px}
.section-title>div::before{content:'';display:block;width:30px;height:3px;margin-bottom:12px;border-radius:3px;background:var(--olive)}
:root[data-theme=dark] .section-title>div::before{background:var(--olive-text)}
.section-title h2{font-size:clamp(28px,7.4vw,40px);line-height:1;letter-spacing:-1.2px;font-weight:850}
.section-title h2 em{color:var(--olive-text)}
.sheet-header h2 em{color:var(--olive-text)}

/* A section heading: a small label with a dash, a big title, and a line underneath. */
.hd{margin:0 0 18px}
.hd-kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:10px;color:var(--olive-text);font-size:11.5px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase}
.hd-kicker::before{content:'';width:22px;height:2px;border-radius:2px;background:currentColor}
.hd-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.hd h2{font-size:clamp(32px,8.8vw,50px);line-height:.98;letter-spacing:-1.7px;font-weight:850;text-wrap:balance}
.hd h2 em{color:var(--olive-text)}
.hd p{max-width:52ch;margin-top:10px;color:var(--muted);font-size:16px;line-height:1.5}
.hd .text-link{flex:none;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font-size:13.5px}
.fx-section{margin-top:46px}

/* Page heroes: a real photo, slowly drifting, with the headline over it. */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:min(560px,76vh);margin:0 0 34px;padding:26px 22px 26px;border-radius:30px;overflow:hidden;color:#fffcf2;background:#1c2628;box-shadow:0 26px 36px -26px #1c262899}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;transform-origin:60% 40%;animation:fx-drift 24s ease-in-out infinite alternate}
@keyframes fx-drift{from{transform:scale(1.04)}to{transform:scale(1.16) translate3d(-2%,1%,0)}}
.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#1c262826 0%,#1c262800 28%,#1c2628c7 70%,#1c2628f5 100%),radial-gradient(120% 60% at 0% 100%,#1c2628cc,transparent 62%)}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-bottom:14px;padding:7px 12px;border:1px solid #fffcf24d;border-radius:999px;background:#fffcf21f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase}
.hero-kicker .icon{width:14px;height:14px}
.hero h1{font-size:clamp(42px,11.4vw,78px);line-height:.94;letter-spacing:-2.4px;font-weight:850;text-wrap:balance}
.hero h1 em{letter-spacing:-.6px}
.hero p{max-width:34ch;margin-top:14px;color:#fffcf2e6;font-size:17px;line-height:1.45}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.hero-actions .btn{min-height:48px;padding:0 20px;border-radius:999px;font-size:15px}
/* Home's rotating photo: two layers, the new one fading in over the old. The folder's photos are portraits, so
   wide screens keep the upper middle, where faces usually are. */
.hero-media .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.hero-media .hero-slide.on{opacity:1}
.hero-home .hero-media img{object-position:50% 32%}
.hero-media picture{display:block;width:100%;height:100%}
.hero-grow .hero-media img{object-position:50% 6%}
@media(min-width:700px){.hero-grow .hero-media img{object-position:30% 40%}}
.hero .cc-socials{margin:18px 0 0}
.hero .cc-social{box-shadow:0 0 0 1px #fffcf259}
.btn-glass{border:1px solid #fffcf259;background:#fffcf21f;color:#fffcf2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-glass:hover{background:#fffcf233}

/* Photo cards, like the social tiles but with real photos. */
.pcard{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;min-height:250px;padding:16px;border-radius:24px;overflow:hidden;color:#fffcf2;text-align:left;background:#1c2628;box-shadow:0 18px 28px -20px #1c262880;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pc-media{position:absolute;inset:0;z-index:-2}
.pc-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pcard:hover .pc-media img{transform:scale(1.06)}
.pcard:active{transform:scale(.98)}
/* The label sits just above the title, so the top of every photo, where faces usually are, stays clear. */
.pc-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#1c262800 26%,#1c2628b3 64%,#1c2628f0)}
.pc-media.pc-rotate img{position:absolute;inset:0;animation:fx-swap 15s infinite both;animation-delay:calc(var(--i)*5s - 1s)}
@keyframes fx-swap{0%{opacity:0}6%,33%{opacity:1}39%,100%{opacity:0}}
.pc-kicker{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;max-width:100%;margin-bottom:10px;padding:6px 10px;border:1px solid #ffffff40;border-radius:999px;background:#1c262859;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap}
.pc-kicker .icon{flex:none;width:14px;height:14px}
.pc-kicker>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pc-copy strong{display:block;font-size:25px;line-height:1.02;letter-spacing:-.8px;font-weight:850;text-wrap:balance}
.pc-copy small{display:block;margin-top:6px;color:#fffcf2d9;font-size:14px;line-height:1.4}
.pc-cta{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:14px;padding:9px 14px;border-radius:999px;background:#fffcf2;color:#1c2628;font-size:13.5px;font-weight:750}
.pc-cta .icon{width:15px;height:15px}

/* Color cards with a giant mark behind the words. */
.tcard{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;min-height:230px;padding:16px;border-radius:24px;overflow:hidden;text-align:left;box-shadow:0 12px 30px #1c26281a;transition:transform .35s var(--ease)}
.tcard:active{transform:scale(.98)}
.tc-mark{position:absolute;z-index:-1;right:-38px;top:-30px;width:190px;height:190px;opacity:.15;transform:rotate(-12deg);transition:transform .6s var(--ease)}
.tc-mark .icon{width:100%;height:100%;stroke-width:1.1}
.tcard:hover .tc-mark{transform:rotate(-4deg) scale(1.06)}
.tc-badge{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:#ffffff26;box-shadow:inset 0 0 0 1px #ffffff40}
.tc-badge .icon{width:25px;height:25px}
.tc-kicker{margin-top:auto;padding-top:18px;font-size:10.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;opacity:.8}
.tc-copy strong{display:block;margin-top:4px;font-size:23px;line-height:1.05;letter-spacing:-.6px;font-weight:850;text-wrap:balance}
.tc-kicker+.tc-copy strong{margin-top:4px}
.tc-badge+.tc-copy{margin-top:auto;padding-top:18px}
.tc-copy small{display:block;margin-top:6px;font-size:14px;line-height:1.4;opacity:.85}
.tc-cta{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13.5px;font-weight:750}
.tc-cta .icon{width:15px;height:15px}
.tone-ink{background:radial-gradient(130% 100% at 100% 0%,#3a4b4e 0%,#1c2628 62%);color:#fffcf2}
.tone-olive{background:radial-gradient(130% 100% at 100% 0%,#8a8f3c 0%,#616526 52%,#454919 100%);color:#fffcf2}
.tone-gold{background:radial-gradient(130% 100% at 100% 0%,#f4dc45 0%,#dfbe02 55%,#c9aa00 100%);color:#1c2628}
.tone-cream{background:linear-gradient(155deg,#fffef9,#f1efe2);color:#1c2628;box-shadow:inset 0 0 0 1px var(--line),0 12px 30px #1c262812}
.tone-stone{background:radial-gradient(130% 100% at 100% 0%,#eef0e5 0%,#d5d9c8 70%);color:#1c2628}
.tone-gold .tc-badge,.tone-cream .tc-badge,.tone-stone .tc-badge{background:#1c262812;box-shadow:inset 0 0 0 1px #1c262824}
:root[data-theme=dark] .tone-cream{background:linear-gradient(155deg,#27353a,#1f2b2d);color:#fffcf2;box-shadow:inset 0 0 0 1px var(--line)}
:root[data-theme=dark] .tone-cream .tc-badge{background:#fffcf214;box-shadow:inset 0 0 0 1px #fffcf226}
:root[data-theme=dark] .tone-stone{background:radial-gradient(130% 100% at 100% 0%,#4a585a 0%,#33403f 70%);color:#fffcf2}
:root[data-theme=dark] .tone-stone .tc-badge{background:#fffcf214;box-shadow:inset 0 0 0 1px #fffcf226}

/* Grids for cards. The first card in a bento grid gets the big spot. */
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pgrid>.wide{grid-column:1/-1}
.pgrid>.pcard,.pgrid>.tcard{min-height:220px}
.pgrid>.wide.pcard{min-height:280px}

/* The "You matter to God" band. */
.marquee{overflow:hidden;margin:44px calc(var(--gutter)*-1) 8px;padding:14px 0;transform:rotate(-1.6deg);color:#fffcf2;box-shadow:0 14px 30px #1c262826}
.marquee.tone-olive{background:var(--olive)}
.marquee.tone-ink{background:#1c2628}
:root[data-theme=dark] .marquee.tone-ink{background:#fffcf2;color:#1c2628}
.marquee-track{display:flex;align-items:center;gap:22px;width:max-content;animation:fx-marquee 46s linear infinite;font-family:var(--display);font-size:22px;font-weight:850;letter-spacing:-.3px;text-transform:uppercase;white-space:nowrap}
.marquee-track i{font-style:normal;font-size:16px;opacity:.75}
.marquee-track span:nth-of-type(even){font-family:var(--accent);font-style:italic;font-weight:400;font-size:27px;text-transform:none;letter-spacing:0}
@keyframes fx-marquee{to{transform:translateX(-50%)}}

/* This weekend: the person's campus, a live countdown, and the service times. On phones the building fills a
   band across the top and the details sit below it; on wider screens the building sits to the right of them. */
.svc{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:14px;min-height:560px;margin-top:18px;padding:18px;border-radius:28px;overflow:hidden;color:#fffcf2;background:#1c2628;box-shadow:0 24px 34px -24px #1c262899}
.svc-media{position:absolute;inset:0 0 auto;height:250px;z-index:-2;overflow:hidden}
.svc-media img{width:100%;height:100%;object-fit:cover;animation:fx-drift 26s ease-in-out infinite alternate}
.svc-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#1c262873 0,#1c262800 70px,#1c262800 140px,#1c2628e6 225px,#1c2628 250px)}
.svc-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.svc-kicker{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid #fffcf24d;border-radius:999px;background:#fffcf21f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:10.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase}
.svc-kicker .icon{width:14px;height:14px}
.svc-switch{color:#fffcf2;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.svc-count{margin-top:auto}
.svc-count small{display:block;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;opacity:.8}
.svc-count strong{display:block;margin-top:2px;font-size:clamp(46px,13vw,64px);line-height:1;letter-spacing:-2px;font-weight:850;font-variant-numeric:tabular-nums}
.svc-count span{display:block;margin-top:4px;font-family:var(--accent);font-style:italic;font-size:24px}
.svc-times{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.svc-times div{padding:10px 12px;border:1px solid #fffcf233;border-radius:14px;background:#fffcf21a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.svc-times b{display:block;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;opacity:.85}
.svc-times span{display:block;margin-top:2px;font-size:15.5px;font-weight:700}
.svc-notes{font-size:13px;line-height:1.4;opacity:.85}
.svc-actions{display:flex;flex-wrap:wrap;gap:8px}
.svc-actions .btn{min-height:44px;padding:0 16px;border-radius:999px;font-size:14px}
.svc-address{font-size:12.5px;opacity:.75}

/* Home: the quick links are soft tinted tiles. The color lives in each small icon chip. */
.home-page .quick-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.home-page .quick-link{display:grid;justify-items:start;align-content:start;gap:12px;min-height:118px;padding:14px;border:1px solid var(--line);border-radius:20px;text-align:left;color:var(--ink);background:var(--tile,var(--card));transition:transform .25s var(--ease),border-color .25s}
.home-page .quick-link:active{transform:scale(.97)}
.home-page .quick-link>.icon{width:38px;height:38px;padding:9px;border-radius:12px;color:var(--chip-ink,#fffcf2);background:var(--chip,#616526)}
.home-page .quick-link strong{display:block;font-size:16px;font-weight:800;letter-spacing:-.2px}
.home-page .quick-link small{display:block;margin-top:2px;color:var(--muted);font-size:12.5px}
.home-page .quick-link:nth-child(1){--tile:#f1f2e4;--chip:#616526}
.home-page .quick-link:nth-child(2){--tile:#eef0ed;--chip:#1c2628}
.home-page .quick-link:nth-child(3){--tile:#faf4da;--chip:#dfbe02;--chip-ink:#1c2628}
.home-page .quick-link:nth-child(4){--tile:#f2f3ec;--chip:#d5d9c8;--chip-ink:#1c2628}
:root[data-theme=dark] .home-page .quick-link:nth-child(1){--tile:#262d22}
:root[data-theme=dark] .home-page .quick-link:nth-child(2){--tile:#1f2b2d;--chip:#fffcf2;--chip-ink:#1c2628}
:root[data-theme=dark] .home-page .quick-link:nth-child(3){--tile:#2f2b1b}
:root[data-theme=dark] .home-page .quick-link:nth-child(4){--tile:#273032}
:root[data-theme=dark] .home-page .quick-link>.icon{color:var(--chip-ink,#fffcf2)}

/* Home: the prayer card beside "Take a moment," at the same size as the rest of the page. */
.home-page .prayer-mini{margin:24px 0 0;padding:26px 24px;border:1px solid var(--line);border-radius:26px;background:var(--card)}
.home-page .prayer-mini .eyebrow{font-size:11px;letter-spacing:1.4px}
.home-page .prayer-mini h3{margin-top:10px;font-size:clamp(30px,8vw,38px);line-height:1.02;letter-spacing:-1.2px;font-weight:850;text-wrap:balance}
.home-page .prayer-mini h3 em{color:var(--olive-text)}
.home-page .prayer-mini>p{margin-top:10px;color:var(--muted);font-size:16px;line-height:1.5}
.home-page .prayer-mini .text-link{margin-top:16px;font-size:15px}

/* The live sheet's picture: the latest full service's own thumbnail, which plays it. */
.sheet-hero-play{position:relative;display:block;width:100%;margin-bottom:22px;border-radius:16px;overflow:hidden;background:#1c2628;text-align:left}
.sheet-hero-play .sheet-hero{display:block;width:100%;height:auto;aspect-ratio:16/9;margin:0;border-radius:0;object-fit:cover}
.sheet-play-mark{position:absolute;left:50%;top:44%;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#fffcf2;color:#1c2628;box-shadow:0 12px 30px #00000059;transform:translate(-50%,-50%);transition:transform .25s var(--ease)}
.sheet-play-mark .icon{width:24px;height:24px;margin-left:3px}
.sheet-hero-play:hover .sheet-play-mark{transform:translate(-50%,-50%) scale(1.06)}
.sheet-play-caption{position:absolute;inset:auto 0 0;padding:30px 14px 12px;background:linear-gradient(180deg,#1c262800,#1c2628d9);color:#fffcf2d9;font-size:12.5px}
.sheet-play-caption b{display:block;color:#fffcf2;font-size:15px;font-weight:750}

/* Next steps: three photo cards, then a clean list with even spacing. */
.steps-top{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.steps-top .pcard{min-height:310px}
.steps-list{display:grid;grid-template-columns:minmax(0,1fr);margin-top:14px;border-top:1px solid var(--line)}
.step-row{display:grid;grid-template-columns:46px minmax(0,1fr) 18px;align-items:center;gap:14px;width:100%;min-height:74px;padding:12px 2px;border-bottom:1px solid var(--line);color:var(--ink);text-align:left}
.step-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--olive-soft);color:var(--olive-text)}
.step-ic .icon{width:22px;height:22px}
.step-row strong{display:block;font-size:16.5px;font-weight:750;letter-spacing:-.2px}
.step-row small{display:block;margin-top:2px;color:var(--muted);font-size:13.5px;line-height:1.35}
.step-row>.icon{width:16px;height:16px;color:var(--muted)}
.step-row:hover .step-ic{background:var(--olive);color:#fffcf2}

/* Ministries: a bento of photos and color, the first one big. */
.min-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.min-grid>*{min-height:210px}
.min-grid>:not(:first-child) .pc-copy strong,.min-grid>:not(:first-child) .tc-copy strong{font-size:22px}
.min-grid>:not(:first-child) .pc-kicker .icon{display:none}
.min-grid>:not(:first-child) .pc-kicker{letter-spacing:.9px}
.min-grid>:first-child{grid-column:1/-1;min-height:300px}
/* In two columns the small ministry tiles keep just a label and a name, so the words never cover the people. */
@container (max-width:599px){.min-grid>.pcard:not(:first-child) .pc-copy small{display:none}}
.min-sheet .min-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:18px 0 0}
.min-facts div{min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.min-facts dt{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
.min-facts dd{margin:3px 0 0;font-size:15px;font-weight:650;line-height:1.35}
.min-sheet .cc-hero{aspect-ratio:4/3}
.min-points{display:grid;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.min-points li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:start}
.min-points li>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--olive-soft);color:var(--olive-text)}
.min-points li>span .icon{width:19px;height:19px}
.min-points strong{display:block;font-size:15.5px}
.min-points small{display:block;margin-top:2px;color:var(--muted);font-size:14px;line-height:1.45}

/* Ministry pull-ups. */
.min-line{margin:2px 0 0;font-family:var(--accent);font-size:24px;line-height:1.2;color:var(--olive-text)}
.min-line em{font-style:italic}
.min-about{margin-top:16px}
.min-tone{min-height:200px;margin-bottom:18px;box-shadow:none}

/* Serve teams: tall enough that the two lines sit below the faces. Kinds of groups: tall tiles, so Rooted's
   handwritten signs stay readable above the words. */
.pgrid.team-grid>.pcard,.pgrid.team-grid>.tcard{min-height:250px}
.team-grid .pc-copy strong,.team-grid .tc-copy strong{font-size:20px}
.team-grid .pc-copy small,.team-grid .tc-copy small{font-size:13px}
@media(max-width:699px){.team-grid .pc-copy small{display:none}.team-grid .pc-kicker .icon{display:none}}
.pgrid.type-grid>.pcard{min-height:300px}
.type-grid .pc-copy strong{font-size:22px}
.type-grid .pc-copy small b{color:#fffcf2;font-weight:750}
.team-grid .tc-badge{width:42px;height:42px;border-radius:13px}
.team-grid .tc-badge .icon{width:21px;height:21px}
.team-grid .pc-kicker{font-size:10px}

/* The connect card: a real photo under an olive wash. */
.cc-connect{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:440px;margin-top:46px;padding:24px;border-radius:28px;box-shadow:0 24px 34px -24px #1c262899}
.cc-connect-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.cc-connect::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#61652633 0%,#616526b3 42%,#616526f5 70%,#4b4f1c)}
.cc-connect h2{font-size:clamp(36px,10vw,52px);line-height:.96;letter-spacing:-1.4px}
.cc-connect h2 em{color:#fffcf2}
.cc-connect .btn{align-self:flex-start}

/* Rows that drift glide freely (snapping would pull them back to a card every frame). On wider screens
   they're grids, so the copies hide. */
[data-drift]{scroll-snap-type:none}
@media(min-width:700px){[data-drift] [data-copy]{display:none}}

/* Cards rise in as they scroll into view. */
.rv{transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rv.pre:not(.in){opacity:0;transform:translateY(24px) scale(.985)}

@media(min-width:700px){
  .hero{min-height:560px;padding:40px}
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .pgrid>.pcard,.pgrid>.tcard{min-height:290px}
  .pgrid>.wide{grid-column:span 2}
  .steps-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
}
/* The ministry bento and the kinds of groups follow their section's width: two columns on phones, then three
   or four as room allows. */
.fx-section{container-type:inline-size}
@container (min-width:600px){
  .min-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .min-grid>*{min-height:240px}
  .min-grid>:first-child{grid-column:span 2;grid-row:span 2;min-height:496px}
}
.pgrid.type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:860px){
  .min-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pgrid.type-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Home's main column is narrower than the screen when the side rail shows (tablets), so its tiles, cards, and
   the weekend card follow the column's width rather than the screen's. */
.home-primary{container-type:inline-size}
@container (max-width:599px){
  .home-primary .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-primary .pgrid>.wide{grid-column:1/-1}
}
@container (min-width:600px){
  .home-page .quick-links{grid-template-columns:repeat(4,minmax(0,1fr))}
  .svc{min-height:420px;padding:26px}
  .svc-media{inset:0 0 0 40%;height:auto}
  .svc-shade{background:linear-gradient(90deg,#1c2628 40%,#1c2628b3 50%,#1c262800 68%),linear-gradient(180deg,#1c262859,#1c262800 30%)}
  .svc-count,.svc-times,.svc-notes,.svc-actions,.svc-address{max-width:min(54%,420px)}
}
@media(prefers-reduced-motion:reduce){
  .rv{transition:none}.rv.pre:not(.in){opacity:1;transform:none}
  .hero-media img,.svc-media img,.marquee-track{animation:none}
  .hero-media .hero-slide{transition:none}
  .pc-media.pc-rotate img{animation:none;opacity:0}.pc-media.pc-rotate img:first-child{opacity:1}
}