/* =========================================================
New Wakefield Church — Site stylesheet
Design: colours sampled from the New Wakefield crest — purple + gold
Signature: the arch (home hero)
Fonts: Fraunces (display, SOFT 60 / WONK 1) + Hanken Grotesk (UI)
Motion: enhanced by motion.dev (progressive enhancement)
========================================================= */
:root{
/* Brand palette — exactly four colors, sampled off the church's own crest
(purple OKLCH hue 308, gold hue 88) rather than mixed by eye. */
--navy:#38164f; /* Crest purple — deep surface + strongest text */
--snow:#faf6ee; /* Warm stock, tinted off the gold */
--charcoal:#4e3a60; /* Secondary ink */
--cyan:#9b7d29; /* Crest gold — 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
colour 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 colour, 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));
/* Type: Fraunces (display) + Hanken Grotesk (body, labels).
Brief was Chobani. Chobani Serif is bespoke — Berton Hasebe at Commercial
Type, drawn from soft, warm 1960s–70s serifs, owned by Chobani and never
licensed. Fraunces is the closest thing that is free: it carries a SOFT
axis for exactly those blunted, rounded serif ends, and a WONK axis for the
period's slightly off-kilter shapes. Both are pinned in the font request
(SOFT 60, WONK 1) rather than left variable, which keeps the download to
one instance instead of the whole design space. */
--font-display:"Fraunces",Georgia,serif;--font-body:"Hanken Grotesk",system-ui,sans-serif;
--font-serif:"Fraunces",Georgia,serif;
--font-head:"Fraunces",Georgia,serif; /* accent: italic display serif */
--font-accent:"Hanken Grotesk",system-ui,sans-serif; /* labels, eyebrows, buttons */
--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(47,33,69,.07),0 2px 10px rgba(47,33,69,.05);
--shadow-md:0 12px 36px rgba(47,33,69,.13),0 2px 8px rgba(47,33,69,.06);
--shadow-lg:0 28px 70px rgba(47,33,69,.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{
--navy:#2b123e;--snow:#190b25;--charcoal:#c3cad4;--cyan:#b5943f;
--paper:#190b25;--bg:#190b25;--cream:#210f2f;--cream-2:#261037;
--ink:#fbf9f5;--ink-soft:#e3e8ef;--muted:#9aa2ad;
--line:#3f2f4d;--cyan-deep:#c6a44d;
/* 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 colour" got the surface
colour 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:#29113b;
--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 colours 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:#190b25;}
/* --- dark: the calendar ------------------------------------------------------
The month grid colours 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 colour 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:#0c2b34;color:#7fd0e4;}
html.dark body .ev-c2{background:#2b0e40;color:#d095ff;}
html.dark body .ev-c3{background:#35131f;color:#f5a6c2;}
html.dark body .ev-c4{background:#31270f;color:#e0bd64;}
html.dark body .ev-c5{background:#102a19;color:#8ad6a1;}
html.dark body .ev-c6{background:#131f36;color:#a3c1f0;}
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:#190b25;}
/* --- dark: the children's pages ---------------------------------------------
These sections are painted a fixed coral, mint, amber or white, and the
colour 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 colour 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:#3d300e;
--kplainbg:#190b25;
/* Body copy inside the panels is darkened for the light theme; on the deep
ones it has to travel the other way. */
--ink-soft:#dfe6ef;
}
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:#f2dca9;
text-decoration-color:color-mix(in srgb,#f2dca9 45%,transparent);
}
html.dark .kicklabel{
color:#f4f8fc;
background:color-mix(in srgb,var(--kc,var(--cyan)) 24%,#07121e);
border-color:color-mix(in srgb,var(--kc,var(--cyan)) 52%,#07121e);
}
html.dark .ksec .spl{
color:#f2dca9;
text-decoration-color:color-mix(in srgb,#f2dca9 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. */
/* Two faults in one line, both inherited: it was translucent, so the hero read
straight through the menu — the exact bug the light theme was fixed for — and
it was mixed from rgb(9,20,35), a navy from the previous build, sitting blue
against this theme's deep purple paper. Opaque, and from the tokens. */
html.dark:not(.app-mode) .mobmenu{
background:linear-gradient(180deg,var(--paper),var(--cream));
}
/* The drawer is a column of ruled type, not a stack of cards — the light theme
stopped painting a box behind each row and dark should match. Those cards were
load-bearing though: the row text resolves to the light theme's dark purple,
which was only legible because it sat on a pale card. Without the card it has
to be stated, or the menu is purple on purple at about 1:1. */
html.dark:not(.app-mode) .mobmenu .menu>li{background:none;}
html.dark:not(.app-mode) .mobmenu .menu>li>a,
html.dark:not(.app-mode) .mobmenu .menu>li>button,
html.dark:not(.app-mode) .mobmenu .dropdown a{color:oklch(95% 0.012 88)}
html.dark:not(.app-mode) .mobmenu .menu>li>a[aria-current="page"],
html.dark:not(.app-mode) .mobmenu .menu>li>button[aria-current="page"]{color:oklch(82% 0.104 88)}
html.dark:not(.app-mode) .mobmenu .menu>li>a[aria-current="page"]::before,
html.dark:not(.app-mode) .mobmenu .menu>li>button[aria-current="page"]::before{background:oklch(82% 0.104 88)}
html.dark:not(.app-mode) .mobmenu__now-when{color:oklch(95% 0.012 88)}
html.dark:not(.app-mode) .mobmenu__now-when b,
html.dark:not(.app-mode) .mobmenu__now-lab{color:oklch(82% 0.104 88)}
html.dark:not(.app-mode) .mobmenu__now-where,
html.dark:not(.app-mode) .mobmenu__now-call{color:oklch(78% 0.02 88)}
html.dark:not(.app-mode) .mobmenu__now-call b{color:oklch(95% 0.012 88)}
html.dark:not(.app-mode) .mobmenu__minor a{color:oklch(74% 0.026 308)}
html.dark:not(.app-mode) .mobmenu__me{color:oklch(86% 0.018 88)}
html.dark .mobmenu .dropdown li:nth-child(6n+1) a::before{background:oklch(82% 0.104 88)}
html.dark .mobmenu .dropdown li:nth-child(6n+2) a::before{background:oklch(72% 0.104 308)}
html.dark .mobmenu .dropdown li:nth-child(6n+3) a::before{background:oklch(90% 0.062 88)}
html.dark .mobmenu .dropdown li:nth-child(6n+4) a::before{background:oklch(62% 0.126 308)}
html.dark .mobmenu .dropdown li:nth-child(6n+5) a::before{background:oklch(70% 0.116 88)}
html.dark .mobmenu .dropdown li:nth-child(6n+6) a::before{background:oklch(80% 0.086 308)}
/* 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;}
/* Retuned for Fraunces. Vollkorn is a narrow, small-x-height Renaissance face
and wanted 800 with -.02em to hold a line together. Fraunces is wider, with a
much taller x-height and far more weight on the stem at the same number — 800
reads as shouting, and -.02em closes the counters up. 600 with a gentler
track is the same visual weight Vollkorn had at 800, and the extra leading is
what the taller x-height needs to stop lines touching. */
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;font-weight:600;letter-spacing:-.014em;color:var(--ink);}
/* A size for every heading level, because there wasn't one.
The base rule above set family, weight and tracking but no font-size, so any
heading without its own rule fell through to the browser default — h2 at
1.5em. On the home page that put "Three times a week." at 24px next to a
4.3rem hero, which is most of why the page read as unpolished rather than as
a deliberate hierarchy. Steps are ~1.35 apart so each level is unmistakably
a level; anything with its own size (.fsec h2, .head h2, .nwf__h, .pghead h1)
still wins on specificity and is untouched. */
h1{font-size:clamp(2.3rem,5.2vw,3.6rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.3rem,2.1vw,1.65rem);line-height:1.2}
h4{font-size:1.08rem;line-height:1.3}
/* Headings are the display serif, not the UI sans. The scaffold paired a wide
grotesk with a serif accent word; for a small traditional congregation the
serif carries the whole heading and the accent word does its work by going
italic instead. It also stops the hero (Fraunces) and the section headings
(previously Inter 700) from reading as two different sites. */
h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;line-height:1.08;}
/* …and the accent words in the high-contrast display cut */
.serif{font-family:var(--font-head);font-weight:400;font-style:italic;
font-size:1.06em;letter-spacing:0;}
.eyebrow{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.28em;font-size:.7rem;font-weight:700;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(47,33,69,.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(7,20,38,.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(47,33,69,.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(47,33,69,.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(47,33,69,.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(7,20,38,.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(249,250,253,.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(47,33,69,.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(47,33,69,.28),transparent 60%);}
.banner::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(47,33,69,.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(47,33,69,.82),rgba(47,33,69,.6) 55%,rgba(47,33,69,.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(47,33,69,.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(47,33,69,.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(47,33,69,.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(47,33,69,.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(47,33,69,.30) 0%,rgba(47,33,69,.44) 34%,rgba(47,33,69,.62) 58%,rgba(47,33,69,.86) 80%,var(--navy) 100%)}
.mhero__kick{font-size:.7rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:#dfc17a;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(127,214,234,.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:#dfc17a}
.mpage .head h2{color:#fff}
.mpage .head h2 .serif{color:#dfc17a}
.mpage .vidcard{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13)}
.mpage .vidcard:hover{border-color:rgba(127,214,234,.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:#dfc17a}
.mpage .split__copy .eyebrow{color:#dfc17a}
.mpage .split__copy h2{color:#fff}
.mpage .split__copy h2 .serif{color:#dfc17a}
.mpage .split__copy p,.mpage .split__copy .lead{color:rgba(249,250,253,.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:#bfeefb;background:rgba(127,214,234,.13);border-color:rgba(127,214,234,.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(47,33,69,.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,#0a6b86);background:color-mix(in srgb,var(--cyan,#9b7d29) 8%,transparent);border:1px solid color-mix(in srgb,var(--cyan,#9b7d29) 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(47,33,69,.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(7,20,38,.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-coloured:
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:#38164f;}
.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(47,33,69,.55);}
.announce--soft .announce__x:hover{background:rgba(47,33,69,.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,#38164f);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(47,33,69,.30) 0%,rgba(47,33,69,.44) 34%,rgba(47,33,69,.62) 58%,rgba(47,33,69,.86) 80%,var(--navy,#38164f) 100%);}
.smhero__crumb{justify-content:center;display:flex;margin-bottom:14px;}
.smhero__crumb,.smhero__crumb a{color:rgba(249,250,253,.8);}
.smhero__kick{font-size:.7rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:#dfc17a;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,#38164f);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,#6d5f7b);font-weight:600;}
.cmsfaq{margin-top:var(--space-lg,28px);display:flex;flex-direction:column;gap:10px;}
.cmsfaq__it{border:1px solid var(--line,#ebe6ee);border-radius:12px;background:#fff;overflow:hidden;}
.cmsfaq__it summary{cursor:pointer;padding:15px 18px;font-weight:700;color:var(--navy,#38164f);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,#6d5719);transition:transform .2s;}
.cmsfaq__it[open] summary::after{transform:rotate(45deg);}
.cmsfaq__a{padding:0 18px 16px;color:#42505f;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,#38164f);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,#6d5f7b);}
.cmsquote figcaption b{color:var(--navy,#38164f);}
/* --- 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:#e7eefb;}
.cmssec--dark h2,.cmssec--dark h3,.cmssec--dark p,.cmssec--dark li,.cmssec--dark figcaption,.cmssec--dark blockquote{color:#e7eefb;}
.cmssec--dark .eyebrow{color:#9db4e0;}
.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:#c6d3e6;}
.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);}
.section.cmpos--free{min-height:var(--secmh,45vh);}
.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 */
.cmpos--free > .wrap,.cmpos--flow > .wrap{position:static;left:auto;top:auto;transform:none;margin-inline:auto;}
.section.cmpos--free{min-height:0;}
}
/* =========================================================
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,122,42,.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(47,33,69,.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,#26354a,#38164f);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 30px 5px rgba(180,210,255,.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:#38164f;}
.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,122,42,.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