/* =========================================================
JK Photography — Site stylesheet
Design: "Warm Editorial" · Jonah & Kayla Bolton
Fonts: Cormorant Garamond (display) + DM Sans (UI/body), self-hosted
Motion: enhanced by motion.dev (progressive enhancement)
★ PER-PROJECT THEME ★
Four brand colors and two typefaces; everything below derives from them.
Their photography is warm, bright and true-to-color, and the logo is a
high-contrast serif monogram in black. So the page is ivory rather than
white (white turns warm skin tones yellow by comparison), the ink is a warm
espresso rather than black, and the single accent is the taupe already
sitting in the olive sprigs of their monogram.
========================================================= */
/* ---- self-hosted variable fonts: latin + latin-ext, no external requests ---- */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;
src:url(/assets/fonts/CormorantGaramond-normal-300-latin-e99b45.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;
src:url(/assets/fonts/CormorantGaramond-normal-300-latin-ext-211149.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;
src:url(/assets/fonts/CormorantGaramond-italic-300-latin-fe99e3.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;
src:url(/assets/fonts/CormorantGaramond-italic-300-latin-ext-0365c5.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
src:url(/assets/fonts/DMSans-normal-300-latin-b9df62.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
src:url(/assets/fonts/DMSans-normal-300-latin-ext-33d679.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
:root{
/* Brand palette — exactly four colors */
--navy:#22201d; /* Espresso — dark surface AND strongest text */
--snow:#faf7f2; /* Ivory */
--charcoal:#4e483f; /* Warm slate */
--cyan:#a08a6f; /* Taupe — the one accent */
/* Semantic tokens derived only from the four above */
/* Navy does two jobs: it is a dark surface, and it is the strongest text
color on a light one. Compline is the one dark theme, and it remaps
--navy to near-black so the surfaces stay right - which left every
heading and label that used it as text invisible. Text asks for this
token instead, so the two jobs can part company where they must. */
--ink-strong:var(--navy);
/* The mirror of the same problem: text that sits ON a dark surface asks
for a light color, and in Compline the surface tokens went dark too. */
--ink-invert:var(--paper);
--ink-invert-soft:var(--cream);
/* Card surfaces asked for var(--card,#fff) and nothing ever defined it, so
they were white in every theme including the dark one. */
--card:#fff;
--slate:var(--charcoal);
--paper:var(--snow);
--cream:color-mix(in srgb,var(--navy) 4%,var(--snow));
--cream-2:color-mix(in srgb,var(--navy) 8%,var(--snow));
--teal:var(--cyan);
--cyan-deep:color-mix(in srgb,var(--cyan) 60%,var(--navy));
--bg:var(--cream);--ink:var(--navy);--ink-soft:color-mix(in srgb,var(--navy) 80%,white);
/* 66%, not 52%. At 52% this landed on 3.20:1 against the page — below AA —
and it is the color of every caption, date, byline and helper line on the
site, so it was the single most-read failing thing here. 66% clears 4.9:1
on the page and 4.7:1 on a cream panel while still reading as secondary. */
--muted:color-mix(in srgb,var(--navy) 70%,white);--line:color-mix(in srgb,var(--navy) 14%,var(--snow));
/* DM Sans carries the interface — nav, buttons, labels, body copy.
Cormorant Garamond carries every heading and the italic accent words. */
--font-display:"DM Sans",system-ui,sans-serif; /* UI: nav, buttons, labels, h4 */
--font-body:"DM Sans",system-ui,sans-serif; /* body copy */
--font-serif:"Cormorant Garamond",Georgia,serif;
--font-head:"Cormorant Garamond",Georgia,serif; /* accent: italic display serif */
--font-accent:"Cormorant Garamond",Georgia,serif;/* headings h1–h3 */
--space-2xs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--space-4xl:96px;
--radius:18px;--radius-sm:10px;--radius-lg:28px;
/* The Invites card set the pair the rest of the site now follows: the card
corner, and the corner of anything sitting inset within it. The 8px
difference is the padding between them - concentric corners look wrong
when the inner one is not tightened by exactly the gap. */
--radius-card:30px;--radius-inset:22px;--maxw:1240px;
--shadow-sm:0 1px 2px rgba(34,32,29,.07),0 2px 10px rgba(34,32,29,.05);
--shadow-md:0 12px 36px rgba(34,32,29,.13),0 2px 8px rgba(34,32,29,.06);
--shadow-lg:0 28px 70px rgba(34,32,29,.22);
--ease-out:cubic-bezier(.22,1,.36,1);--ease-in-out:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box;}*{margin:0;}
/* Fluid base type: locked at 16px on anything ≥ ~389px wide (all normal phones,
tablets, desktop are unchanged), then eases down to ~14px on small handsets so
the whole rem-based UI scales to fit instead of overflowing. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:light;font-size:clamp(14px,3.6vw + 2px,16px);}
/* ---------------------------------------------------------------- dark mode
Chosen, never assumed: the switch lives in the member's profile and this
class is written before first paint, so the app never flashes white on the
way to being dark.
Only the signed-in surfaces follow it — the installed app and the members'
area. The public pages are built on full-bleed photography and the brand
navy, and inverting them would fight the artwork rather than help anybody.
Defaults here are the Sanctuary dark ramp; picking a theme overrides them
further down the file. */
html.dark{color-scheme:dark;}
html.dark body{
/* Warm dark, not cold: the same espresso the light theme uses as ink,
dropped to a surface, so client photographs sit on a neutral that does
not tint them blue. */
--navy:#1a1815;--snow:#100e0c;--charcoal:#cfc7bb;--cyan:#c2a684;
--paper:#100e0c;--bg:#100e0c;--cream:#191612;--cream-2:#211d18;
--ink:#f6f2ec;--ink-soft:#e2dbd1;--muted:#a89e91;
--line:#3a342d;--cyan-deep:#c9ab86;
/* These four are derived tokens, and deriving them was the bug: --ink-strong
is var(--navy), --ink-invert is var(--paper), and both of those move dark
in this block. Text asking for "the strongest color" got the surface
color and vanished. They have to be restated here, pointing the other way. */
--ink-strong:var(--ink);--ink-invert:var(--ink);--ink-invert-soft:var(--ink-soft);
/* Cards are a raised surface, so on a dark page they sit above the page
rather than below it. Nothing defined this before and they stayed white. */
--card:#1c1915;
--shadow-sm:0 1px 2px rgba(0,0,0,.5),0 2px 10px rgba(0,0,0,.4);
--shadow-md:0 12px 36px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
--shadow-lg:0 28px 70px rgba(0,0,0,.65);
background:var(--paper);color:var(--ink);
}
/* --- dark: the components that name light and dark directly -----------------
Most of the site colors itself from the tokens above and follows without
being asked. What does not follow is anything that spelled out "light fill,
dark text": both halves invert together and the thing disappears into
itself. The fix is always the same shape - the surface and the label have
to move in opposite directions - and the components already expose the two
variables that decide it, so only values change here, never structure.
Measured rather than guessed: the primary button shipped at 1.13:1 in dark
before this block existed, which is to say the label was not there. */
html.dark body .btn{--bg:var(--ink);--fg:var(--paper);}
html.dark body .btn--light{--bg:var(--ink);--fg:var(--paper);}
html.dark body .btn--member{--bg:var(--ink);--fg:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink);}
html.dark body .btn--ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 34%,transparent);}
html.dark body .btn--ondark.btn--ghost{--fg:var(--ink);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 40%,transparent);}
/* White on the brand cyan needs the fill darkened to clear 4.5:1, which is
what the light theme does. On a dark page the fill can go the other way
instead - full-strength cyan with near-black on top reads 6.8:1, and a
bright button is the right thing on a dark page anyway. */
html.dark body .btn--accent{--bg:var(--cyan);--fg:#17120c;}
/* --- dark: the calendar ------------------------------------------------------
The month grid colors events two ways, and both of them broke the same way.
The six category chips are a pale tint with saturated type on it. Neither
half is a token, so in the dark both stayed exactly as they were: bright
blocks on a dark page. Each pair is restated here with the roles swapped -
a deep tint of the same hue, and the type lightened to sit on it. Every one
measures above 7.7:1; the palest of them measured 4.36:1 before.
The chips taken from an event poster get their color inline from the
artwork, so the tint follows the page down but the type cannot. The app
theme already solved this one; the same answer applies here. */
html.dark body .ev-c1{background:#282118;color:#c5b49e;}
html.dark body .ev-c2{background:#312923;color:#dbcbbf;}
html.dark body .ev-c3{background:#35131f;color:#f5a6c2;}
html.dark body .ev-c4{background:#33260f;color:#e9b866;}
html.dark body .ev-c5{background:#102a19;color:#8ad6a1;}
html.dark body .ev-c6{background:#2c241d;color:#d8cabb;}
html.dark body .cal__ev--photo{color:var(--ink) !important;}
/* Today's date sits on the brand cyan. White on it measured 2.81:1 once the
cyan brightened for the dark palette - the fill is light now, so what sits
on it has to be dark. */
html.dark body .cal__cell.is-today .cal__num{color:#17120c;}
/* --- dark: the children's pages ---------------------------------------------
These sections are painted a fixed coral, mint, amber or white, and the
color is the design rather than a surface. The first attempt pinned the
whole page to its light values so it would at least be correct - but that
left one page glowing white in the middle of a dark site, which is its own
kind of wrong.
So the paints go deep instead. Every section color is a custom property and
the waves between them take the same property through currentColor, so one
set of values moves the panels and the joins together. Near-white type
measures 12.9:1 or better on all four. */
html.dark .khero, html.dark .ksec, html.dark .kinvite{
--kcoralbg:#4a1a15;
--kmintbg:#0f3527;
--ksunbg:#3f2f0e;
--kplainbg:#100e0c;
/* Body copy inside the panels is darkened for the light theme; on the deep
ones it has to travel the other way. */
--ink-soft:#ebe7e3;
}
html.dark .khero a:not(.btn):not(.spl),
html.dark .ksec a:not(.btn):not(.spl),
html.dark .kinvite a:not(.btn):not(.spl){
color:#d8cab9;
text-decoration-color:color-mix(in srgb,#d8cab9 45%,transparent);
}
html.dark .kicklabel{
color:#faf8f6;
background:color-mix(in srgb,var(--kc,var(--cyan)) 24%,#17130e);
border-color:color-mix(in srgb,var(--kc,var(--cyan)) 52%,#17130e);
}
html.dark .ksec .spl{
color:#d8cab9;
text-decoration-color:color-mix(in srgb,#d8cab9 45%,transparent);
}
/* --- dark: the mobile menu ---------------------------------------------------
The browser menu is a frosted sheet, and frost is built from literals: a pale
gradient with white cards floating on it. The type on those cards asks for
--ink-strong, which in the dark is near-white, so the menu arrived as white
text on white cards and could not be read at all. Only the frost was wrong.
The dots beside the folder items cycle through the brand blues, and two of
those are navy - invisible on a dark card - so that cycle lightens too. */
html.dark:not(.app-mode) .mobmenu{
background:linear-gradient(180deg,rgba(9,20,35,.76),rgba(4,10,18,.88));
}
html.dark .mobmenu .menu>li{background:rgba(255,255,255,.07);}
html.dark .mobmenu .dropdown li:nth-child(6n+1) a::before{background:#c9ab86;}
html.dark .mobmenu .dropdown li:nth-child(6n+2) a::before{background:#b9ada0;}
html.dark .mobmenu .dropdown li:nth-child(6n+3) a::before{background:#d9c4a8;}
html.dark .mobmenu .dropdown li:nth-child(6n+4) a::before{background:#c5b29f;}
html.dark .mobmenu .dropdown li:nth-child(6n+5) a::before{background:#b6a895;}
html.dark .mobmenu .dropdown li:nth-child(6n+6) a::before{background:#cdbdaa;}
/* Photographs and logos shouldn't be dimmed — only the chrome around them. */
html.dark img,html.dark video,html.dark .fill{filter:none;}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);line-height:1.6;font-size:1.02rem;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
/* Smooth cross-page transitions (View Transitions API — auto-ignored where unsupported).
The page content fades + lifts; the nav/footer stay put via a quick root cross-fade. */
@view-transition{navigation:auto;}
/* installed app: view transitions stay OFF (they hard-cut on iOS home-screen apps).
Instead the app uses its own JS push: the page slides out on tap and the next
one slides in. Transform + opacity only — fully GPU-composited, no snapshots. */
@media (display-mode: standalone),(display-mode: fullscreen){
@view-transition{navigation:none;}
}
/* will-change was here as a compositing hint, and it cost more than it bought:
it makes `main` a permanent containing block for fixed-position descendants,
so anything position:fixed inside a page — the giving modal, a loader — is
positioned against the whole scrollable page rather than the viewport. That
put people at the bottom of the giving iframe in the installed app.
The animation is 0.3s at page load; the browser composites it perfectly well
without being told to, and the moment it finishes there's no transform left
to trap anything. */
html.app-mode main{animation:appPageIn .3s var(--ae-out,cubic-bezier(.16,1,.3,1)) both;}
html.app-mode.page-exit main{animation:appPageOut .13s ease both;}
@keyframes appPageIn{from{opacity:0;transform:translateY(16px);}}
/* Was fading all the way to 0, which uncovered the white body for a beat
before the next page painted — clearly visible going into Documents. It now
lifts and dims only part way, so there's never a fully blank frame. */
@keyframes appPageOut{to{opacity:.55;transform:translateY(-8px);}}
/* returning to a page this session: no dashboard cascade — just the quick page slide */
html.app-revisit .appdash>*,html.app-revisit .appdash .applist__row,html.app-revisit .appdash .appms__t{animation:none !important;}
@media(prefers-reduced-motion:reduce){
html.app-mode main,html.app-mode.page-exit main{animation:none;}
}
main{view-transition-name:page-main;}
/* The fixed chrome stays part of the root surface (no view-transition-name). A
view-transition-name isolates an element into its own snapshot surface, and a
backdrop-filter inside that surface has no page content to sample — which makes the
nav's frosted blur render against nothing. Keeping it in root lets the blur work. */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal;}
::view-transition-old(page-main){animation:ptOut .26s var(--ease-out) both;}
::view-transition-new(page-main){animation:ptIn .38s var(--ease-out) both;}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;}
@keyframes ptOut{to{opacity:0;transform:translateY(-8px);}}
@keyframes ptIn{from{opacity:0;transform:translateY(14px);}}
@media(prefers-reduced-motion:reduce){
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important;}
}
img{max-width:100%;display:block;}a{color:inherit;text-decoration:none;}button{font:inherit;cursor:pointer;}
/* h4 and below stay in the interface face — they are labels, not display. */
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.2;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
/* h1–h3 are the editorial voice: a light, large, high-contrast serif. Cormorant
is drawn for display sizes, so it wants a low weight and near-zero tracking —
the grotesk's 800/-.02em would tighten it into a smear. */
h1,h2,h3{font-family:var(--font-accent);font-weight:300;letter-spacing:-.012em;line-height:1.04;}
/* …and the accent words in the same family, italic */
.serif{font-family:var(--font-head);font-weight:400;font-style:italic;
font-size:1.02em;letter-spacing:0;color:var(--cyan-deep);}
.eyebrow{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.26em;font-size:.66rem;font-weight:500;color:var(--cyan-deep);}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,52px);}
.section{padding-block:clamp(48px,6.5vw,92px);}
.section--tight{padding-block:clamp(40px,6vw,72px);}
/* when two same-tone sections stack, trim the seam so spacing stays even */
.section + .section,.band + .band,.band--cream + .band--cream{padding-top:clamp(8px,2vw,24px);}
.band + .band,.band--cream + .band--cream{padding-top:clamp(28px,5vw,68px);}
.lead{font-size:clamp(1.05rem,.97rem + .4vw,1.22rem);color:var(--ink-soft);max-width:62ch;line-height:1.65;}
.center{text-align:center;}.center .lead{margin-inline:auto;}
/* keyboard focus — consistent, visible ring for every interactive element (mouse clicks stay clean) */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
outline:2.5px solid var(--cyan);outline-offset:3px;border-radius:6px;
}
/* on cyan/navy-filled controls a white ring reads better against the fill */
.btn--accent:focus-visible,.btn--cyan:focus-visible,.mobtop__burger:focus-visible,
.botbar__item--give:focus-visible{outline-color:#fff;outline-offset:2px;}
/* form fields already show a soft inner ring — don't double it */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;}
/* buttons */
.btn{--bg:var(--navy);--fg:var(--paper);display:inline-flex;align-items:center;gap:.55em;background:var(--bg);color:var(--fg);padding:.9em 1.6em;border:none;border-radius:100px;font-family:var(--font-display);font-weight:600;font-size:.95rem;position:relative;overflow:hidden;transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);box-shadow:var(--shadow-sm);}
.btn::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 140% at 50% 120%,rgba(255,255,255,.22),transparent 60%);opacity:0;transition:opacity .4s;}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}.btn:hover::after{opacity:1;}
.btn:active{transform:translateY(0) scale(.97);box-shadow:var(--shadow-sm);transition-duration:.1s;}
.btn .arrow{transition:transform .4s var(--ease-out);}.btn:hover .arrow{transform:translateX(4px);}
/* "Watch this message" is too long for a phone: it pushes the button beside it
onto its own line. Below 560px the label shortens to "Watch", which is clear
enough sitting directly under the sermon's title. The full wording stays on
the element as aria-label, so a screen reader still hears all of it. */
@media (max-width:560px){ .btn__long{display:none;} }
/* White on the brand cyan measures 3.62:1 - under the 4.5 that normal-sized
text needs to stay legible, and this is the primary call to action on every
page ("Give", "Plan Your Visit", "Watch a Message"). Taken down to 88% of
the same hue it measures 4.54:1 and passes. Mixed rather than hard-coded so
each theme darkens its OWN accent instead of every theme inheriting this
one's. The difference is close to invisible side by side; the difference in
sunlight, on a phone, at arm's length, is not. */
.btn--accent{--bg:color-mix(in srgb,var(--cyan) 88%,#000);--fg:#fff;}
.btn--member{--bg:var(--navy);--fg:#fff;box-shadow:inset 0 0 0 1.5px var(--navy);}
.btn--member:hover{--bg:var(--cyan-deep);box-shadow:inset 0 0 0 1.5px var(--cyan-deep);}
.btn--ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--navy) 30%,transparent);}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--cyan);color:var(--cyan-deep);}
.btn--light{--bg:var(--paper);--fg:var(--navy);}
.btn--ondark.btn--ghost{--fg:var(--paper);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);}
.btn--ondark.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px #fff;color:#fff;}
/* =========================================================
IMAGE FIGURE (image-forward placeholder w/ hover zoom)
========================================================= */
.img{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--slate);box-shadow:var(--shadow-sm);isolation:isolate;}
.img>.fill{position:absolute;inset:0;background:linear-gradient(155deg,var(--c1,var(--teal)),var(--c2,var(--cyan-deep)));transition:transform .6s var(--ease-out);}
.img>.fill::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 45% at 28% 22%,color-mix(in srgb,var(--cyan) 50%,transparent),transparent 60%),repeating-linear-gradient(125deg,rgba(255,255,255,.05) 0 3px,transparent 3px 13px);}
.img:hover>.fill{transform:scale(1.06);}
.img .tag{position:absolute;bottom:12px;left:12px;z-index:2;background:rgba(34,32,29,.55);color:var(--ink-invert-soft);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:5px 11px;border-radius:100px;backdrop-filter:blur(6px);}
.img .ico{position:absolute;top:12px;right:12px;z-index:2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(4px);}
.img.v-navy>.fill{background:linear-gradient(155deg,var(--slate),var(--navy));}
.img.v-cyan>.fill{background:linear-gradient(155deg,var(--cyan),var(--cyan-deep));}
.img.v-teal>.fill{background:linear-gradient(155deg,var(--teal),var(--cyan-deep));}
.img.v-deep>.fill{background:linear-gradient(155deg,var(--cyan-deep),var(--navy));}
.img.has-photo{background:var(--navy);}
.img.has-photo>.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out);}
.img.has-photo:hover>.ph{transform:scale(1.06);}
.hero__right>.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ar-43{aspect-ratio:4/3;}.ar-11{aspect-ratio:1;}.ar-169{aspect-ratio:16/9;}.ar-34{aspect-ratio:3/4;}.ar-32{aspect-ratio:3/2;}
/* =========================================================
HEADER / NAV
========================================================= */
/* Floating frosted "pill" nav — fixed overlay so header images reach the very top */
.navshell{position:fixed;left:0;right:0;top:14px;z-index:200;display:flex;justify-content:center;padding-inline:14px;pointer-events:none;transition:transform .5s var(--ease-out),opacity .4s ease;}
.navshell.hide{transform:translateY(-185%);} /* slide only — fading opacity makes the backdrop blur snap */
.pillnav{pointer-events:auto;position:relative;display:flex;align-items:center;gap:4px;max-width:100%;background:transparent;border:0;border-radius:100px;padding:8px 9px;box-shadow:0 20px 50px rgba(20,18,16,.40),inset 0 1px 0 rgba(255,255,255,.09);}
/* Blur lives on a pseudo-element (not the pill itself) so the pill isn't a backdrop-filter
ancestor of the dropdowns — that would stop each dropdown's own blur from sampling the page. */
.pillnav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(34,32,29,.70);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);}
/* brand (base styles also used by footer) */
.brand{display:flex;align-items:center;gap:.7em;flex-shrink:0;color:var(--ink-strong);}
.brand__mark{width:46px;height:46px;flex-shrink:0;object-fit:contain;transition:transform .5s var(--ease-out);}
.brand:hover .brand__mark{transform:rotate(-4deg) scale(1.05);}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:1.02rem;line-height:1.05;letter-spacing:-.01em;}
.brand__name span{display:block;font-family:var(--font-body);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:2px;}
/* pill-scoped brand */
.pillnav .brand{color:#fff;}
/* Circular knockout badge: navy circle, white mark, monogram shows the navy through */
.brand__logo{width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--navy);flex-shrink:0;display:grid;place-items:center;box-shadow:0 2px 8px rgba(34,32,29,.22);transition:transform .5s var(--ease-out);}
.brand:hover .brand__logo{transform:rotate(-4deg) scale(1.05);}
.brand__logo img{width:100%;height:100%;object-fit:contain;}
.pillnav .brand__name{display:none;}
.menu{position:relative;display:flex;align-items:center;gap:0;list-style:none;padding:0;margin:0 2px;}
.menu>li{position:relative;}
.menu>li>a,.menu>li>button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.32em;padding:.62em .92em;border-radius:100px;font-family:var(--font-display);font-weight:600;font-size:.9rem;color:rgba(244,238,225,.78);background:none;border:none;white-space:nowrap;transition:color .3s ease;}
.menu>li>a:hover,.menu>li>button:hover,.menu>li>a[aria-current="page"],.menu>li>button[aria-current="page"]{color:#fff;}
.menu .caret{width:9px;height:9px;opacity:.7;transition:transform .35s var(--ease-out);}
.menu>li:hover .caret,.menu>li:focus-within .caret{transform:rotate(180deg);}
.menu__pill{position:absolute;left:0;top:0;height:0;width:0;background:rgba(255,255,255,.16);border-radius:100px;z-index:0;opacity:0;pointer-events:none;}
.dropdown{position:absolute;top:calc(100% + 16px);left:50%;translate:-50% 0;min-width:230px;list-style:none;padding:8px;margin:0;background:rgba(34,32,29,.70);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border:0;border-radius:var(--radius);box-shadow:0 20px 50px rgba(20,18,16,.40),inset 0 1px 0 rgba(255,255,255,.09);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .28s var(--ease-out),transform .28s var(--ease-out),visibility .28s;}
.dropdown::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px;}
/* Pointer devices only. On a touch screen Safari invents a hover on the first
tap, and tapping a link inside the item also satisfies :focus-within - either
one opened this desktop dropdown over the mobile UI and swallowed the tap, so
you had to tap again to get anywhere. The mobile overlay opens its folders by
a different route (.mobmenu .has-dropdown.open, driven by a real button and
max-height), so it is unaffected by this guard. */
@media (hover: hover) {
.menu>li:hover .dropdown,.menu>li:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
}
.dropdown a{display:block;padding:.6em .85em;border-radius:var(--radius-sm);font-size:.9rem;font-weight:500;color:rgba(250,247,242,.86);transition:background .2s,color .2s,padding-left .25s var(--ease-out);}
.dropdown a:hover{background:rgba(255,255,255,.10);color:#fff;padding-left:1.15em;}
.nav__links{display:flex;align-items:center;gap:6px;}
.nav__actions{display:flex;align-items:center;gap:6px;}
.nav__actions .btn{padding:.7em 1.25em;font-size:.88rem;box-shadow:none;}
.hamburger{display:none;width:42px;height:42px;border:none;background:rgba(255,255,255,.10);border-radius:50%;position:relative;flex-shrink:0;}
.hamburger span{position:absolute;left:12px;right:12px;height:2px;background:#fff;border-radius:2px;transition:transform .4s var(--ease-out),opacity .3s,top .3s;}
.hamburger span:nth-child(1){top:15px;}.hamburger span:nth-child(2){top:20px;}.hamburger span:nth-child(3){top:25px;}
body.menu-open .hamburger span:nth-child(1){top:20px;transform:rotate(45deg);}
body.menu-open .hamburger span:nth-child(2){opacity:0;}
body.menu-open .hamburger span:nth-child(3){top:20px;transform:rotate(-45deg);}
/* =========================================================
HOME — HERO split
========================================================= */
.hero{position:relative;}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(520px,78vh,760px);}
.hero__left{display:flex;flex-direction:column;justify-content:center;padding:clamp(104px,13vh,128px) clamp(20px,5vw,72px) clamp(28px,5vw,64px);}
.hero__left .eyebrow{margin-bottom:var(--space-lg);}
.hero h1{font-size:clamp(2.6rem,1.7rem + 3.6vw,4.6rem);font-weight:800;line-height:1.0;letter-spacing:-.03em;}
.hero h1 .serif{color:var(--cyan);font-weight:400;}
.hero__sub{margin-top:var(--space-lg);color:var(--ink-soft);max-width:42ch;}
.hero__cta{margin-top:var(--space-xl);display:flex;gap:var(--space-md);flex-wrap:wrap;}
.hero__quick{margin-top:var(--space-2xl);display:flex;gap:var(--space-xl);flex-wrap:wrap;}
.hero__quick div{display:flex;flex-direction:column;}
.hero__quick dt{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;}
.hero__quick dd{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink-strong);}
.hero__right{position:relative;background:linear-gradient(150deg,var(--teal),var(--cyan-deep));overflow:hidden;}
.hero__right .fill{position:absolute;inset:0;transition:transform 1s var(--ease-out);}
.hero__right .fill::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 50% at 70% 20%,color-mix(in srgb,var(--cyan) 55%,transparent),transparent 60%),repeating-linear-gradient(125deg,rgba(255,255,255,.05) 0 3px,transparent 3px 13px);}
.hero__photo-tag{position:absolute;top:20px;right:20px;z-index:2;background:rgba(34,32,29,.5);color:var(--ink-invert-soft);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:6px 12px;border-radius:100px;backdrop-filter:blur(6px);}
.hero__card{position:absolute;bottom:26px;left:26px;right:26px;max-width:380px;z-index:2;background:var(--paper);border-radius:var(--radius);padding:var(--space-lg);box-shadow:var(--shadow-lg);display:flex;gap:var(--space-md);align-items:center;}
.hero__card .thumb{width:74px;height:74px;border-radius:var(--radius-sm);flex-shrink:0;background:linear-gradient(150deg,var(--cyan),var(--navy));}
.hero__card h3{font-size:1.05rem;}.hero__card p{font-size:.84rem;color:var(--muted);margin-top:2px;}
.hero__card .when{color:var(--cyan-deep);font-weight:700;font-size:.82rem;margin-top:4px;}
/* =========================================================
INNER PAGE BANNER (image-forward hero)
========================================================= */
.banner{position:relative;overflow:hidden;color:var(--ink-invert);isolation:isolate;background:var(--navy);}
/* Shorter banner for pages that are mostly a form — the hero shouldn't be the
tallest thing on a page whose job is to be filled in. */
.banner--short .banner__inner{padding-block:clamp(56px,9vw,96px);}
.banner--short .banner__card{max-width:640px;}
html.app-mode .banner--short .banner__inner{padding-top:calc(env(safe-area-inset-top,0px) + clamp(40px,8vw,64px));}
.banner .fill{position:absolute;inset:0;z-index:-2;background:linear-gradient(150deg,var(--c1,var(--slate)),var(--c2,var(--navy)));}
.banner .fill::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 75% 15%,color-mix(in srgb,var(--teal) 50%,transparent),transparent 60%),radial-gradient(60% 55% at 12% 95%,color-mix(in srgb,var(--cyan) 45%,transparent),transparent 55%),repeating-linear-gradient(125deg,rgba(255,255,255,.04) 0 3px,transparent 3px 13px);}
/* real photos don't get the placeholder texture — only the gradient placeholders do */
.banner .fill[style*="background-image"]::after,
.img>.fill[style*="background-image"]::after,
.hero__right .fill[style*="background-image"]::after{background:linear-gradient(to top,rgba(34,32,29,.28),transparent 60%);}
.banner::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(34,32,29,.5),transparent 70%);}
.banner__inner{padding-top:clamp(120px,15vw,190px);padding-bottom:clamp(56px,9vw,104px);max-width:760px;}
.banner__photo{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;}
.banner__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,rgba(34,32,29,.82),rgba(34,32,29,.6) 55%,rgba(34,32,29,.86));}
.banner .crumb{margin-bottom:var(--space-md);}
.banner h1{color:var(--ink-invert);font-size:clamp(2.4rem,1.6rem + 3.6vw,4.4rem);line-height:1.0;letter-spacing:-.02em;}
.banner h1 .serif{color:var(--teal);}
.banner p{margin-top:var(--space-lg);color:rgba(244,238,225,.9);font-size:clamp(1.05rem,1rem + .4vw,1.25rem);max-width:54ch;}
.banner .btn{margin-top:var(--space-xl);}
.crumb{display:flex;gap:.5em;align-items:center;font-size:.78rem;font-weight:600;letter-spacing:.04em;color:rgba(244,238,225,.7);flex-wrap:wrap;}
.crumb a{color:rgba(244,238,225,.7);}.crumb a:hover{color:var(--teal);}
.crumb .sep{opacity:.5;}
/* =========================================================
PROSE
========================================================= */
.prose{max-width:70ch;}
.prose h2{font-size:clamp(1.7rem,1.3rem + 1.8vw,2.5rem);margin-top:var(--space-2xl);margin-bottom:var(--space-md);}
.prose h2:first-child{margin-top:0;}
.prose h2 .serif{color:var(--cyan);}
.prose h3{font-size:1.3rem;margin-top:var(--space-xl);margin-bottom:var(--space-xs);}
.prose p{margin-bottom:var(--space-md);color:var(--ink-soft);}
.prose ul{margin:0 0 var(--space-md) 1.1em;color:var(--ink-soft);display:grid;gap:8px;}
.prose strong{color:var(--ink);}
.prose a:not(.btn){color:var(--cyan-deep);font-weight:600;border-bottom:1.5px solid color-mix(in srgb,var(--cyan) 40%,transparent);}
/* section heading block */
.head{margin-bottom:var(--space-2xl);}
.head h2{font-size:clamp(1.9rem,1.4rem + 2.2vw,3rem);max-width:18ch;}
.head h2 .serif{color:var(--cyan);}
.head.center h2{margin-inline:auto;}
.head p{margin-top:var(--space-md);}
.head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-lg);flex-wrap:wrap;}
/* =========================================================
SPLIT (image + text)
========================================================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;}
.split + .split{margin-top:clamp(40px,6vw,80px);}
.split .img{aspect-ratio:4/3;width:100%;}
.split.rev .split__media{order:2;}
.split__copy h2{font-size:clamp(1.7rem,1.3rem + 1.8vw,2.6rem);margin-bottom:var(--space-md);}
.split__copy h2 .serif{color:var(--cyan);}
.split__copy p{color:var(--ink-soft);}.split__copy p+p{margin-top:var(--space-md);}
.split__copy .btn{margin-top:var(--space-lg);}
.split__copy .eyebrow{margin-bottom:var(--space-sm);}
/* =========================================================
GALLERY
========================================================= */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);grid-auto-rows:1fr;}
.gallery .img{aspect-ratio:1;}
.gallery .img.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;}
.gallery .img.wide{grid-column:span 2;aspect-ratio:auto;}
.gallery--3{grid-template-columns:repeat(3,1fr);}
/* A placeholder tile that has had a photo uploaded to it shows the photo (and hides the gradient/icon). */
.img[style*="background-image"]{background-size:cover;background-position:center;}
.img[style*="background-image"]>.fill,.img[style*="background-image"]>.ico,.img[style*="background-image"]>.tag{display:none;}
/* photos set as figure backgrounds get the same hover zoom as photos */
.img[style*="background-image"]::before{content:"";position:absolute;inset:0;background:inherit;background-size:cover;background-position:center;transition:transform .6s var(--ease-out);}
.img[style*="background-image"]:hover::before{transform:scale(1.06);}
/* Polaroid filmstrip — drag/swipe through photos (e.g. Our History) */
.filmstrip{position:relative;margin-top:clamp(28px,5vw,52px);}
/* overflow-x:auto clips the other axis too, and the polaroids' drop-shadow
reaches 38px below the image (0 16px 22px) against 34px of padding — so the
soft edge was being sliced off in a hard line just above the next section.
The extra room is padding, pulled back by a negative margin, so the strip
has somewhere to cast into without moving anything on the page. */
.filmstrip__track{display:flex;gap:clamp(18px,3vw,36px);overflow-x:auto;scroll-snap-type:x proximity;padding:18px clamp(20px,5vw,52px) 58px;margin-bottom:-24px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;cursor:grab;}
.filmstrip__track.is-drag{cursor:grabbing;scroll-snap-type:none;}
.filmstrip__track.is-drag .polaroid{pointer-events:none;}
.polaroid{flex:none;scroll-snap-align:center;width:clamp(200px,26vw,280px);transform:rotate(var(--r,0deg));transition:transform .3s var(--ease-out);}
.polaroid:nth-child(odd){--r:-1.7deg;}
.polaroid:nth-child(even){--r:1.5deg;}
.polaroid:nth-child(3n){--r:.7deg;}
.polaroid:nth-child(5n){--r:-2.4deg;}
.polaroid img{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 22px rgba(34,32,29,.28));transition:filter .3s var(--ease-out);}
.polaroid::after{display:none;}
.polaroid:hover{transform:rotate(0deg) translateY(-6px) scale(1.03);position:relative;z-index:2;}
.polaroid:hover img{filter:drop-shadow(0 24px 34px rgba(34,32,29,.34));}
.filmstrip__nav{position:absolute;top:calc(50% - 6px);transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px rgba(34,32,29,.16);color:var(--navy);font-size:1.7rem;line-height:1;display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s;}
.filmstrip__nav:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
.filmstrip__nav--prev{left:max(8px,calc(50% - 620px));}
.filmstrip__nav--next{right:max(8px,calc(50% - 620px));}
@media(max-width:680px){.filmstrip__nav{display:none;}}
/* Scroll-velocity image marquee (legacy, unused) */
.velo-sec{overflow:hidden;}
.velo{display:flex;flex-direction:column;gap:clamp(12px,1.8vw,20px);margin-top:clamp(28px,5vw,52px);width:100%;}
.velo__row{overflow:hidden;}
.velo__track{display:flex;gap:clamp(12px,1.8vw,20px);width:max-content;will-change:transform;}
.velo__item{flex:none;height:clamp(150px,21vw,290px);margin:0;border-radius:var(--radius-card);overflow:hidden;background:var(--cream-2);box-shadow:var(--shadow-sm);}
.velo__item img{height:100%;width:auto;display:block;object-fit:cover;}
/* If motion is reduced, fall back to a normal swipeable strip with no auto-animation */
@media(prefers-reduced-motion:reduce){
.velo__row{overflow-x:auto;scrollbar-width:thin;}
.velo__track{transform:none !important;}
}
/* =========================================================
FEATURE CARDS (image-top)
========================================================= */
/* Card rows: max 3 across, balanced so the last row is never a lone card (5→3+2, 4→2+2). */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg);}
.cards:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr));} /* exactly 2 */
.cards:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr));} /* exactly 4 → 2+2 */
@media(max-width:900px){
.cards,.cards:has(> :nth-child(2):last-child),.cards:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr));}
.cards > :last-child:nth-child(odd){grid-column:1 / -1;} /* lone trailing card spans the row instead of sitting alone */
}
@media(max-width:560px){
.cards,.cards:has(> :nth-child(2):last-child),.cards:has(> :nth-child(4):last-child){grid-template-columns:1fr;}
.cards > :last-child:nth-child(odd){grid-column:auto;}
}
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.card .img{aspect-ratio:16/10;border-radius:0;box-shadow:none;}
.card__body{padding:var(--space-lg);display:flex;flex-direction:column;flex:1;}
.card .kicker{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--cyan-deep);}
.card h3{font-size:1.25rem;margin-top:4px;}
.card p{color:var(--ink-soft);font-size:.94rem;margin-top:var(--space-xs);}
.card .go{margin-top:var(--space-md);font-family:var(--font-display);font-weight:700;font-size:.88rem;color:var(--cyan-deep);display:inline-flex;gap:.4em;align-items:center;transition:gap .3s var(--ease-out);}
.card:hover .go{gap:.75em;}
/* YouTube video grid (real thumbnails) */
.vidgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-lg);}
.vidcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);}
.vidcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.vidcard__thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy);}
.vidcard__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out);}
.vidcard:hover .vidcard__thumb img{transform:scale(1.06);}
.vidcard__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(34,32,29,.66);color:#fff;display:grid;place-items:center;backdrop-filter:blur(2px);transition:background .3s,transform .3s var(--ease-out);}
.vidcard:hover .vidcard__play{background:var(--cyan);transform:translate(-50%,-50%) scale(1.08);}
.vidcard__play svg{margin-left:3px;}
.vidcard__title{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink);padding:var(--space-md) var(--space-lg) 4px;line-height:1.3;}
.vidcard__date{padding:0 var(--space-lg) var(--space-lg);color:var(--muted);font-size:.82rem;}
.vidcard{cursor:pointer;}
/* ═══ media pages (Testimonies & Music): highlighted-video hero melting into navy,
whole page carries the dark blue — same treatment as the Sermons page ═══ */
.mpage{background:var(--navy)}
.mpage .section{background:var(--navy)}
.mhero{position:relative;isolation:isolate;background:var(--navy);color:#fff;overflow:hidden;
padding:clamp(96px,12vw,138px) 0 clamp(56px,8vw,92px);text-align:center}
.mhero__bg{position:absolute;inset:-50px;z-index:-2;background-size:cover;background-position:center 30%;
filter:blur(42px) saturate(1.25) brightness(.85);transform:scale(1.12)}
.mhero__fade{position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,rgba(34,32,29,.30) 0%,rgba(34,32,29,.44) 34%,rgba(34,32,29,.62) 58%,rgba(34,32,29,.86) 80%,var(--navy) 100%)}
.mhero__kick{font-size:.7rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:#d9c4a8;margin-bottom:16px}
.mhero__player{max-width:740px;margin-inline:auto}
.mhero__player .vidcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:var(--radius);padding:0;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.mhero__player .vidcard:hover{border-color:rgba(217,196,168,.5)}
.mhero__player .vidcard__thumb{border-radius:0;box-shadow:none}
.mhero__title{font-size:clamp(1.6rem,3.4vw,2.6rem);letter-spacing:-.025em;line-height:1.08;color:#fff;max-width:26ch;margin:20px auto 0}
.mhero__cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
/* dark content below the fade */
.mpage .head .eyebrow{color:#d9c4a8}
.mpage .head h2{color:#fff}
.mpage .head h2 .serif{color:#d9c4a8}
.mpage .vidcard{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13)}
.mpage .vidcard:hover{border-color:rgba(217,196,168,.5)}
.mpage .vidcard__title{color:#fff}
.mpage .vidcard__date{color:rgba(244,238,225,.62)}
.mpage .quote blockquote{color:#fff}
.mpage .quote cite{color:rgba(244,238,225,.7)}
.mpage .quote .hl{color:#d9c4a8}
.mpage .split__copy .eyebrow{color:#d9c4a8}
.mpage .split__copy h2{color:#fff}
.mpage .split__copy h2 .serif{color:#d9c4a8}
.mpage .split__copy p,.mpage .split__copy .lead{color:rgba(250,247,242,.85)}
html.app-mode .mhero{padding-top:calc(env(safe-area-inset-top,0px) + clamp(52px,9vw,80px))}
/* In-site video player (lightbox) */
body.vplayer-open{overflow:hidden;}
.vplayer{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:clamp(14px,4vw,40px);}
.vplayer.open{display:flex;}
.vplayer__backdrop{position:absolute;inset:0;background:rgba(7,18,33,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:vfade .25s var(--ease-out) both;}
.vplayer__box{position:relative;width:min(1040px,100%);animation:vrise .35s var(--ease-out) both;}
.vplayer__frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.55);}
.vplayer__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.vplayer__title{margin-top:14px;color:var(--ink-invert);font-family:var(--font-display);font-weight:600;font-size:1.05rem;text-align:center;text-shadow:0 1px 12px rgba(0,0,0,.5);}
.vplayer__tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px;}
.vplayer__tags:empty{display:none;}
.vplayer__tags .vtag{color:#e8ded2;background:rgba(217,196,168,.13);border-color:rgba(217,196,168,.34);}
/* Close button floats on top of the video, top-right corner */
.vplayer__x{position:absolute;top:12px;right:12px;z-index:5;width:40px;height:40px;border-radius:50%;border:none;background:rgba(34,32,29,.55);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4);box-shadow:0 6px 20px rgba(0,0,0,.4);transition:transform .25s var(--ease-out),background .25s;}
.vplayer__x:hover{transform:scale(1.08) rotate(90deg);background:var(--cyan);}
/* Sermon tag chips (used on cards and in the player) */
.vidcard__tags{display:flex;flex-wrap:wrap;gap:6px;padding:0 var(--space-lg) var(--space-lg);margin-top:auto;}
.vidcard:has(.vidcard__tags) .vidcard__date{padding-bottom:12px;}
.vidcard:has(.vidcard__tags):not(:has(.vidcard__date)) .vidcard__tags{padding-top:12px;}
.vtag{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--cyan-deep,#5f4a31);background:color-mix(in srgb,var(--cyan,#a08a6f) 8%,transparent);border:1px solid color-mix(in srgb,var(--cyan,#a08a6f) 18%,transparent);border-radius:100px;padding:.44em .85em;line-height:1;white-space:nowrap;}
@keyframes vfade{from{opacity:0}to{opacity:1}}
@keyframes vrise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.vplayer__backdrop,.vplayer__box{animation:none;}}
/* =========================================================
HORIZONTAL RAIL
========================================================= */
.railwrap{position:relative;}
.rail{display:flex;gap:var(--space-lg);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--space-sm);scrollbar-width:none;cursor:grab;}
.rail::-webkit-scrollbar{display:none;}
.rail.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;}
.rail.is-drag a{pointer-events:none;}
.rail__arrow{position:absolute;top:42%;transform:translateY(-50%);z-index:4;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 26px rgba(34,32,29,.18);transition:transform .2s var(--ease-out),opacity .25s var(--ease-out),background .2s,color .2s;}
.rail__arrow:hover{background:var(--navy);color:#fff;transform:translateY(-50%) scale(1.07);}
.rail__arrow--prev{left:-10px;}
.rail__arrow--next{right:-10px;}
.rail__arrow[disabled]{opacity:0;pointer-events:none;}
@media(hover:none){.rail__arrow{display:none;}}
.rcard{scroll-snap-align:start;flex:0 0 clamp(240px,30vw,300px);}
.rcard .img{aspect-ratio:1.08;}
.rcard h3{margin-top:var(--space-md);font-size:1.15rem;}
.rcard .meta{color:var(--muted);font-size:.86rem;margin-top:2px;}
.rcard .meta b{color:var(--cyan-deep);}
/* =========================================================
VLIST (sermons / events rows)
========================================================= */
.vlist{display:grid;gap:var(--space-md);}
.vrow{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-lg);align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-md);transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);}
.vrow:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.vrow .img{width:clamp(96px,14vw,150px);aspect-ratio:16/10;}
.vrow .play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;color:#fff;}
.vrow .play svg{filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));}
.vrow h3{font-size:1.12rem;}
.vrow .meta{color:var(--muted);font-size:.85rem;margin-top:2px;}
.vrow .tagline{color:var(--cyan-deep);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;}
.vrow .when{text-align:center;font-family:var(--font-display);}
.vrow .when .d{font-size:1.6rem;font-weight:800;color:var(--ink-strong);line-height:1;}
.vrow .when .m{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--cyan-deep);font-weight:700;}
@media(max-width:620px){.vrow{grid-template-columns:auto 1fr;}.vrow .when{display:none;}}
/* =========================================================
ACCORDION (beliefs / FAQ)
========================================================= */
.acc{display:grid;gap:var(--space-sm);max-width:860px;}
.acc__item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.acc__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-lg);font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink-strong);background:none;border:none;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.acc__q .pm{flex-shrink:0;width:24px;height:24px;position:relative;transition:transform .4s var(--ease-out);}
.acc__q .pm::before,.acc__q .pm::after{content:"";position:absolute;background:var(--cyan);border-radius:2px;}
.acc__q .pm::before{top:11px;left:3px;right:3px;height:2px;}
.acc__q .pm::after{left:11px;top:3px;bottom:3px;width:2px;transition:transform .4s var(--ease-out);}
.acc__item.open .pm::after{transform:scaleY(0);}
.acc__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-out);}
.acc__item.open .acc__a{grid-template-rows:1fr;}
.acc__a>div{overflow:hidden;transform:translateY(-10px);transition:transform .42s var(--ae-out,cubic-bezier(.16,1,.3,1));}
.acc__item.open .acc__a>div{transform:translateY(0);}
@media(prefers-reduced-motion:reduce){.acc__a>div{transition:none;transform:none;}}
.acc__a p{padding:0 var(--space-lg) var(--space-lg);color:var(--ink-soft);}
.acc__a a{color:var(--cyan-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:color .2s;}
.acc__a a:hover{color:var(--cyan);}
/* =========================================================
TEAM
========================================================= */
/* Fixed-width people so every photo is the same size in every section, centered rows. */
.team{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-lg);}
.team .person{flex:0 1 260px;max-width:260px;width:100%;}
.person .img{aspect-ratio:3/4;}
.person h3{font-size:1.12rem;margin-top:var(--space-md);}
.person .role{color:var(--cyan-deep);font-weight:600;font-size:.88rem;}
.person .bio{margin-top:8px;color:var(--ink-soft);font-size:.88rem;line-height:1.55;}
.team--bio .person{flex-basis:290px;max-width:290px;}
/* cap a section to 3 across so rows stay even (e.g. 6 pastors → 3 + 3) */
.team--cap3{max-width:calc(290px * 3 + var(--space-lg) * 2);margin-inline:auto;}
/* =========================================================
STAT BAND / QUOTE
========================================================= */
.band{background:var(--navy);color:var(--ink-invert-soft);}
.band h2,.band h3{color:var(--ink-invert);}
.band--cream{background:var(--cream-2);color:var(--ink);}
.band--cream h2{color:var(--ink-strong);}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-lg);text-align:center;}
.stat .n{font-family:var(--font-serif);font-style:italic;font-size:clamp(2.6rem,2rem + 2vw,4rem);color:var(--teal);line-height:1;}
.stat .l{margin-top:var(--space-xs);font-size:.85rem;color:rgba(244,238,225,.8);text-transform:uppercase;letter-spacing:.1em;font-weight:600;}
.quote{text-align:center;max-width:900px;margin-inline:auto;}
.quote blockquote{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.7rem,1.2rem + 2.2vw,2.8rem);line-height:1.26;color:var(--ink-strong);}
.band .quote blockquote{color:var(--ink-invert);}
.quote .hl{color:var(--cyan);}.band .quote .hl{color:var(--teal);}
.quote cite{display:block;margin-top:var(--space-lg);font-family:var(--font-display);font-style:normal;font-weight:700;font-size:.9rem;letter-spacing:.06em;color:var(--muted);}
.band .quote cite{color:rgba(244,238,225,.7);}
/* times list */
/* contained navy gradient card (e.g. home "Plan your first Sunday") */
.homecard--navy{position:relative;overflow:hidden;color:var(--ink-invert-soft);border-radius:clamp(22px,3vw,32px);
background:linear-gradient(145deg,var(--cyan-deep),var(--navy) 62%);
padding:clamp(30px,5vw,60px);box-shadow:0 26px 64px rgba(20,18,16,.28);}
.homecard--navy h2{color:var(--ink-invert);}
.homecard--navy .btn{margin-top:var(--space-lg);}
.times__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;}
.times__list{display:grid;gap:var(--space-sm);}
.times__list li{list-style:none;display:flex;justify-content:space-between;gap:var(--space-md);padding:var(--space-md) 0;border-bottom:1px solid rgba(255,255,255,.14);font-family:var(--font-display);}
.times__list .lab{color:var(--ink-invert-soft);font-weight:600;}
.times__list .val{color:var(--teal);font-weight:700;white-space:nowrap;}
/* find (search moment) */
.find{background:var(--paper);text-align:center;}
.find h2{font-size:clamp(2.2rem,1.6rem + 4vw,4.6rem);font-weight:800;color:color-mix(in srgb,var(--navy) 32%,var(--cream));letter-spacing:-.03em;}
.find h2 .serif{color:var(--cyan);-webkit-text-stroke:0;}
.find__bar{margin:var(--space-xl) auto 0;max-width:560px;display:flex;gap:var(--space-sm);background:var(--cream);border:1px solid var(--line);border-radius:100px;padding:8px 8px 8px 22px;align-items:center;box-shadow:var(--shadow-sm);}
.find__bar span{color:var(--muted);font-size:.95rem;text-align:left;flex:1;}
.findtags{margin-top:var(--space-lg);display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap;}
.findtags a{font-size:.86rem;font-weight:600;padding:.5em 1.1em;border-radius:100px;background:var(--cream);border:1px solid var(--line);color:var(--ink-soft);transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
.findtags a:hover{background:var(--navy);color:var(--ink-invert);border-color:var(--navy);transform:translateY(-2px);}
/* CTA / invite */
.invite{background:var(--cream-2);text-align:center;}
.invite h2{font-size:clamp(2.2rem,1.6rem + 3vw,4rem);max-width:18ch;margin-inline:auto;}
.invite h2 .serif{color:var(--cyan);}
.invite p{margin-top:var(--space-lg);color:var(--ink-soft);font-size:1.18rem;max-width:44ch;margin-inline:auto;}
.invite__cta{margin-top:var(--space-2xl);display:flex;gap:var(--space-md);justify-content:center;flex-wrap:wrap;}
.invite--navy{background:var(--navy);}
.invite--navy h2{color:var(--ink-invert);}.invite--navy h2 .serif{color:var(--teal);}
.invite--navy p{color:rgba(244,238,225,.88);}
/* =========================================================
FOOTER
========================================================= */
.footer{--footer-head:color-mix(in srgb,var(--cyan) 84%,#fff);background:var(--navy);color:rgba(244,238,225,.72);padding-block:var(--space-3xl) var(--space-xl);}
.footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--space-2xl) var(--space-lg);}
.footer__brand .brand,.footer__brand .brand__mark{color:var(--ink-invert-soft);}
.footer__brand .brand__name{color:var(--ink-invert);}
.footer p{font-size:.94rem;margin-top:var(--space-md);max-width:32ch;line-height:1.6;}
.footer h4{color:var(--footer-head);font-family:var(--font-display);font-size:1.02rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--space-md);font-weight:700;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px;}
.footer ul{list-style:none;padding:0;display:grid;gap:10px;}
.footer a{font-size:.94rem;transition:color .25s;}
.footer li a{display:inline-block;transition:color .25s,transform .25s var(--ease-out);}
.footer li a:hover{transform:translateX(4px);}
.footer__contact a{display:block;}
.footer__contact li a{display:block;}
.socials{display:flex;gap:var(--space-sm);margin-top:var(--space-lg);}
.socials a{width:40px;height:40px;display:inline-flex;border-radius:50%;transition:transform .3s var(--ease-out),filter .3s;}
.socials a img{width:100%;height:100%;display:block;}
.socials a:hover{transform:translateY(-3px) scale(1.05);filter:drop-shadow(0 5px 12px rgba(0,0,0,.35));}
.footer__bottom{margin-top:var(--space-3xl);padding-top:var(--space-lg);border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-sm);font-size:.84rem;color:rgba(244,238,225,.62);}
/* =========================================================
ANNOUNCEMENT BAR
========================================================= */
/* ---- service alert -------------------------------------------------------
A Sunday that is not going ahead as usual. Deliberately NOT brand-colored:
it has to read as an exception to the normal chrome rather than part of it,
and the cyan announcement bar directly below is the thing it must not be
mistaken for. Amber rather than red - the service has changed, it is not an
emergency, and a congregation that sees red for a bit of snow will discount
red when it matters. Navy on this amber is about 8.7:1, so it holds up in
sun on a phone in a car park, which is exactly where it gets read. */
.svcalert{background:#f2c14e;color:#22201d;}
.svcalert__in{display:flex;align-items:flex-start;justify-content:center;gap:10px;
padding:11px clamp(16px,4vw,28px);text-align:left;font-size:.92rem;line-height:1.45;}
.svcalert__ic{flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:1px;}
.svcalert__ic svg{width:20px;height:20px;display:block;}
.svcalert__tx b{font-weight:800;}
.svcalert__note{opacity:.78;}
@media (max-width:640px){ .svcalert__in{font-size:.86rem;padding:10px 16px;} }
.announce{background:var(--cyan-deep);color:var(--ink-invert-soft);font-size:.92rem;}
.announce__in{display:flex;align-items:center;justify-content:center;gap:var(--space-md);padding:10px clamp(40px,5vw,52px);text-align:center;position:relative;flex-wrap:wrap;}
.announce a{font-weight:700;color:#fff;border-bottom:1.5px solid rgba(255,255,255,.5);}
.announce a:hover{border-color:#fff;}
.announce__x{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(255,255,255,.8);width:30px;height:30px;border-radius:50%;font-size:1.1rem;line-height:1;display:grid;place-items:center;}
.announce__x:hover{background:rgba(255,255,255,.15);color:#fff;}
/* announcement bar designs (base .announce = the classic solid bar) */
.announce--bold{font-size:1.02rem;font-weight:700;letter-spacing:.01em;background:var(--navy);}
.announce--bold .announce__in{padding-top:14px;padding-bottom:14px;text-transform:none;}
.announce--soft{background:color-mix(in srgb,var(--cyan) 13%,#fff);color:var(--navy);}
.announce--soft a{color:var(--cyan-deep);border-bottom-color:color-mix(in srgb,var(--cyan-deep) 45%,transparent);}
.announce--soft a:hover{border-color:var(--cyan-deep);}
.announce--soft .announce__x{color:rgba(34,32,29,.55);}
.announce--soft .announce__x:hover{background:rgba(34,32,29,.1);color:var(--ink-strong);}
.announce--gradient{background:linear-gradient(90deg,var(--navy),var(--cyan-deep) 55%,var(--cyan));color:#fff;}
/* announcement bar fonts */
.announce--fserif{font-family:var(--font-display,Georgia,serif);}
.announce--frounded{font-family:'Trebuchet MS','Segoe UI',sans-serif;}
/* ===== Blurred-artwork hero — shared by Messages, series pages, and the CMS "hero" header type.
(The sermons/series pages add their own extras inline; this is the reusable base.) ===== */
/* --- Adaptive header sizing wrapper (page-builder banners) --- */
.bnrbox{position:relative;--bnr-h:60vh;--bnr-w:100%;--bnr-r:0px;}
.bnrbox--h > .banner,.bnrbox--h > .smhero{min-height:var(--bnr-h);}
.bnrbox--inset{padding:clamp(12px,3vw,34px);}
.bnrbox--inset > .banner,.bnrbox--inset > .smhero{width:var(--bnr-w);max-width:100%;margin-inline:auto;border-radius:var(--bnr-r);overflow:hidden;}
@media(max-width:640px){.bnrbox--inset{padding:10px;}.bnrbox--inset > .banner,.bnrbox--inset > .smhero{width:100%;}}
/* header title/text alignment overrides */
.bnr-al-left .smhero,.bnr-al-left .smhero__wrap,.bnr-al-left .banner__inner,.bnr-al-left .banner__card{text-align:left;}
.bnr-al-left .smhero__crumb,.bnr-al-left .smhero__cta,.bnr-al-left .banner__cta{justify-content:flex-start;}
.bnr-al-center .smhero,.bnr-al-center .smhero__wrap,.bnr-al-center .banner__inner,.bnr-al-center .banner__card{text-align:center;}
.bnr-al-center .smhero__crumb,.bnr-al-center .smhero__cta,.bnr-al-center .banner__cta{justify-content:center;}
.bnr-al-center .banner__inner .eyebrow,.bnr-al-center .banner__card .eyebrow{margin-inline:auto;}
.bnr-al-right .smhero,.bnr-al-right .smhero__wrap,.bnr-al-right .banner__inner,.bnr-al-right .banner__card{text-align:right;}
.bnr-al-right .smhero__crumb,.bnr-al-right .smhero__cta,.bnr-al-right .banner__cta{justify-content:flex-end;}
.bnr-al-right .banner__inner .eyebrow,.bnr-al-right .banner__card .eyebrow{margin-left:auto;}
.smhero{position:relative;isolation:isolate;background:var(--navy,#22201d);color:#fff;overflow:hidden;padding:clamp(96px,12vw,138px) 0 clamp(48px,7vw,72px);text-align:center;}
.smhero__bg{position:absolute;inset:-50px;z-index:-2;background-size:cover;background-position:center 30%;filter:blur(42px) saturate(1.25) brightness(.85);transform:scale(1.12);}
.smhero__fade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(34,32,29,.30) 0%,rgba(34,32,29,.44) 34%,rgba(34,32,29,.62) 58%,rgba(34,32,29,.86) 80%,var(--navy,#22201d) 100%);}
.smhero__crumb{justify-content:center;display:flex;margin-bottom:14px;}
.smhero__crumb,.smhero__crumb a{color:rgba(250,247,242,.8);}
.smhero__kick{font-size:.7rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:#d9c4a8;margin-bottom:14px;}
.smhero__title{font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.025em;line-height:1.08;color:#fff;max-width:22ch;margin:0 auto;}
.smhero__meta{color:rgba(244,238,225,.78);font-size:clamp(.92rem,1.2vw,1.04rem);margin:12px auto 0;max-width:54ch;}
.smhero__cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px;}
/* "Crisp top" variant: a sharp copy of the photo layered over the blurred one, masked so it
fades out as it nears the transition line — the image starts sharp and gradually blurs down. */
.smhero--sharp .smhero__bg{z-index:-3;}
.smhero__sharp{position:absolute;inset:-50px;z-index:-2;background-size:cover;background-position:center 30%;transform:scale(1.12);
-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 30%,rgba(0,0,0,.4) 55%,transparent 74%);
mask-image:linear-gradient(to bottom,#000 0%,#000 30%,rgba(0,0,0,.4) 55%,transparent 74%);}
@media(max-width:700px){.smhero--cms{padding-top:clamp(84px,20vw,104px);}.smhero--cms .smhero__title{font-size:1.6rem;}}
/* ===== CMS page sections: stat row, FAQ accordion, pull quote ===== */
.cmsstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;text-align:center;margin-top:var(--space-lg,28px);}
.cmsstat__n{display:block;font-family:var(--font-display,inherit);font-weight:800;font-size:clamp(2rem,4.5vw,3rem);color:var(--navy,#22201d);line-height:1;letter-spacing:-.02em;}
.cmsstat__l{display:block;margin-top:8px;font-size:.84rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted,#6e6459);font-weight:600;}
.cmsfaq{margin-top:var(--space-lg,28px);display:flex;flex-direction:column;gap:10px;}
.cmsfaq__it{border:1px solid var(--line,#ece9e5);border-radius:12px;background:#fff;overflow:hidden;}
.cmsfaq__it summary{cursor:pointer;padding:15px 18px;font-weight:700;color:var(--navy,#22201d);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.cmsfaq__it summary::-webkit-details-marker{display:none;}
.cmsfaq__it summary::after{content:"+";font-size:1.5rem;font-weight:400;line-height:1;color:var(--cyan-deep,#7d6a52);transition:transform .2s;}
.cmsfaq__it[open] summary::after{transform:rotate(45deg);}
.cmsfaq__a{padding:0 18px 16px;color:#5a5147;line-height:1.6;}
.cmsquote{max-width:760px;margin-inline:auto;text-align:center;}
.cmsquote blockquote{font-family:var(--font-display,Georgia,serif);font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.32;color:var(--navy,#22201d);margin:0;font-style:italic;}
.cmsquote blockquote::before{content:"\201C";}
.cmsquote blockquote::after{content:"\201D";}
.cmsquote figcaption{margin-top:16px;font-size:.92rem;color:var(--muted,#6e6459);}
.cmsquote figcaption b{color:var(--navy,#22201d);}
/* --- Universal CMS section layout modifiers (alignment / spacing / width / dark band) --- */
.cmssec--al-center{text-align:center;}
.cmssec--al-center .wrap > *{margin-inline:auto;}
.cmssec--al-right{text-align:right;}
.cmssec--compact{padding-block:clamp(28px,4vw,52px);}
.cmssec--roomy{padding-block:clamp(72px,9vw,140px);}
.cmssec--narrow .wrap{max-width:760px;}
.cmssec--wide .wrap{max-width:1240px;}
.cmssec--dark{background:var(--navy)!important;color:#f5f1ed;}
.cmssec--dark h2,.cmssec--dark h3,.cmssec--dark p,.cmssec--dark li,.cmssec--dark figcaption,.cmssec--dark blockquote{color:#f5f1ed;}
.cmssec--dark .eyebrow{color:#ccbeb1;}
.cmssec--dark .cmsstat b,.cmssec--dark .cmsstat span{color:#fff;}
.cmssec--dark .cmsfaq__it{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);}
.cmssec--dark .cmsfaq__it summary{color:#fff;}
.cmssec--dark .cmsfaq__a{color:#ddd6cf;}
.cmssec--dark a:not(.btn){color:#fff;text-decoration:underline;}
/* --- Free grid positioning of a block's content (opt-in; shared by sections + header) --- */
.cmpos--free{position:relative;}
.cmpos--free > .wrap{position:absolute;left:var(--px,50%);top:var(--py,50%);transform:translate(calc(var(--px,50%) * -1),calc(var(--py,50%) * -1));margin:0;width:fit-content;max-width:100%;}
.cmpos--flow{position:relative;}
.cmpos--flow > .wrap{position:relative;left:var(--px,50%);transform:translateX(calc(var(--px,50%) * -1));width:fit-content;max-width:100%;}
.section.cmpos-mh{min-height:var(--secmh,auto);}
.section.cmpos--free{min-height:var(--secmh,45vh);}
/* A block's free-positioned text sits in the flow rather than floating on top
of it. Floating (position:absolute) had two faults: the text got squeezed
narrower the further right it went, and when it was taller than the block -
always the case on a phone, where lines wrap - it spilled out of the top.
In the flow the same numbers put it in the same place when it fits, and the
block simply grows when it does not: the space above and below the text is
shared out by --pyn, and left/right works the way .cmpos--flow always has. */
.section.cmpos--free{display:flex;flex-direction:column;}
.section.cmpos--free::before{content:"";flex:var(--pyn,.5) 1 0;}
.section.cmpos--free::after{content:"";flex:calc(1 - var(--pyn,.5)) 1 0;}
.section.cmpos--free > .wrap{position:relative;flex:none;top:auto;left:var(--px,50%);
transform:translateX(calc(var(--px,50%) * -1));margin:0;width:fit-content;max-width:100%;}
/* Shrink-to-fit is right for a few lines of text, and wrong for a gallery or a
row of cards: a grid of flexible columns has no natural width, so it shrank
to nothing and the photos vanished. Those keep the full width and move up
and down only. */
.section.cmpos--free > .wrap:has(.cmsgal,.cmscards,.cmsstats,.cmspeople,.cmssteps,.cmsfaq,.split,form,iframe){width:100%;left:0;transform:none;}
.cmpos--free.banner,.cmpos--free.smhero{min-height:var(--bnr-h,45vh);}
@media(max-width:640px){
/* keep positioned content readable on phones: recentre and return to normal flow -
unless the block has a height someone set (cmpos--sized). Then there is
room to place the text, and it stays where it was put. */
.cmpos--free:not(.cmpos--sizedm) > .wrap,.section.cmpos--free:not(.cmpos--sizedm) > .wrap,.cmpos--flow > .wrap{position:static;left:auto;top:auto;transform:none;margin-inline:auto;}
/* A height someone chose still holds on a phone; the 45vh default for a
free-positioned block does not, because the text drops back into flow.
A phone height or position set in the phone view (--secmhm, --pxm, --pym)
wins; until then the phone uses the desktop numbers. */
.section.cmpos--free{min-height:var(--secmhm,var(--secmh,0));}
.section.cmpos-mh{min-height:var(--secmhm,var(--secmh,auto));}
.section.cmpos--free::before{flex-grow:var(--pynm,var(--pyn,.5));}
.section.cmpos--free::after{flex-grow:calc(1 - var(--pynm,var(--pyn,.5)));}
.section.cmpos--free > .wrap{left:var(--pxm,var(--px,50%));transform:translateX(calc(var(--pxm,var(--px,50%)) * -1));}
/* ...and with no height of its own, back to an ordinary block. */
.section.cmpos--free:not(.cmpos--sizedm){display:block;}
.section.cmpos--free:not(.cmpos--sizedm)::before,.section.cmpos--free:not(.cmpos--sizedm)::after{content:none;}
}
/* =========================================================
FORMS
========================================================= */
/* Full-screen image stage behind the form */
.formstage{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(64px,13vh,150px);display:grid;place-items:center;}
/* opt-in multi-step forms — one section at a time, waiver-style */
.fwiz__bar{display:none;height:6px;border-radius:100px;background:rgba(255,255,255,.18);overflow:hidden;margin-bottom:24px}
.fwiz__fill{display:block;height:100%;width:0;border-radius:inherit;background:var(--cyan);transition:width .45s var(--ease-out)}
.fwiz__nav{display:none}
.fwiz-on .fwiz__bar{display:block}
.fwiz-on .fwslide{display:none}
.fwiz-on .fwslide.is-on{display:block;animation:fwIn .4s var(--ease-out) both}
@keyframes fwIn{from{opacity:0;transform:translateX(18px)}}
.fwiz-on .fwiz__nav{display:flex;gap:10px;justify-content:space-between;margin-top:22px}
.formstage__bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;}
/* Placeholder "photo" gradients — replace with a real photo via background-image */
.formstage__bg--a{background:linear-gradient(150deg,var(--charcoal),var(--navy) 60%,var(--navy));}
.formstage__bg--b{background:linear-gradient(150deg,var(--navy),var(--charcoal) 70%,var(--navy));}
.formstage__bg--c{background:linear-gradient(150deg,color-mix(in srgb,var(--navy) 78%,var(--cyan)),var(--navy));}
.formstage__bg--d{background:linear-gradient(150deg,var(--charcoal),color-mix(in srgb,var(--navy) 82%,var(--cyan)));}
.formstage__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(75% 55% at 50% 0%,rgba(160,138,111,.20),transparent 60%),radial-gradient(70% 70% at 82% 100%,rgba(88,157,166,.18),transparent 60%),repeating-linear-gradient(125deg,rgba(255,255,255,.025) 0 2px,transparent 2px 26px),linear-gradient(to bottom,rgba(6,18,31,.5),rgba(6,18,31,.74));}
.formstage .wrap{width:100%;display:flex;justify-content:center;}
/* Frosted glass form card */
.form{width:100%;max-width:560px;display:grid;gap:var(--space-md);text-align:left;position:relative;color:#fff;
background:rgba(34,32,29,.55);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-card);padding:clamp(24px,4vw,46px);
box-shadow:0 40px 90px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.10);}
.form::before{content:"";position:absolute;inset:0;border-radius:var(--radius-card);background:radial-gradient(120% 55% at 50% 0%,rgba(255,255,255,.06),transparent 60%);pointer-events:none;}
.form__badge{width:62px;height:62px;border-radius:18px;margin:0 auto 4px;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,#41382f,#22201d);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 30px 5px rgba(214,196,170,.32),inset 0 1px 0 rgba(255,255,255,.28);}
.form__title{text-align:center;color:#fff;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);}
.form__title .serif{color:var(--teal);}
.form__sub{text-align:center;color:rgba(244,238,225,.72);font-size:.95rem;margin:-2px auto 4px;max-width:42ch;line-height:1.5;}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);}
.field{display:grid;gap:6px;}
.field.full{grid-column:1/-1;}
.field label{font-family:var(--font-display);font-weight:600;font-size:.82rem;color:rgba(244,238,225,.92);}
.field .req{color:var(--cyan);}
.field input,.field select,.field textarea{font:inherit;font-size:.95rem;color:#fff;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);border-radius:14px;padding:.85em 1em;transition:border-color .25s,box-shadow .25s,background .25s;width:100%;}
.field input::placeholder,.field textarea::placeholder{color:rgba(244,238,225,.45);}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a9c0d6' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1em center;padding-right:2.4em;}
.field select option{color:#22201d;}
.field textarea{min-height:128px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(160,138,111,.3);background:rgba(255,255,255,.10);}
/* Multi-select options render as toggle pills */
.checks{display:flex;flex-wrap:wrap;gap:9px;}
/* Checkbox groups are a