/* =========================================================================
   Garden City Church — site stylesheet
   From the church's own slides and merch: sage, forest, gold, terracotta and
   cream on a paper grain; Lato Black headlines; a blackletter first letter
   ("Rooted", "New Here?"); Cinzel for the small labels, echoing the logo;
   capsule photo frames and pill-shaped value cards. Roots are the mark.
   ========================================================================= */
:root{
  --sage:#6E8B63; --sage-2:#5F7B55; --sage-tint:#E4EADF;
  --forest:#1C2B25; --forest-2:#24362F; --moss:#4F5E55;
  --gold:#C9A35A; --gold-deep:#A9853F;
  --clay:#A65C3A; --clay-deep:#8B4A2D;
  --cream:#F3ECE2; --paper:#F7F3EC; --sand:#E8DDCD; --ink:#16211C; --ink-2:#3E4A43; --muted:#6B7169; --line:#DCD2C3;
  --display:'Lato',system-ui,sans-serif; --sans:'Lato',system-ui,sans-serif; --label:'Cinzel',Georgia,serif; --bl:'UnifrakturMaguntia',Georgia,serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:1220px; --gut:clamp(18px,5vw,56px); --sec:clamp(76px,10vw,136px);
  --r:26px; --pill:999px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:100px}
body{background:var(--paper);color:var(--ink);font:400 1.05rem/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--forest);color:#fff;padding:10px 14px;border-radius:8px}
.skip:focus{top:12px}
.hp,.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
/* the paper grain from the slides */
.grain{position:relative;isolation:isolate}
.grain::before{content:"";position:absolute;inset:0;background:var(--grain);mix-blend-mode:soft-light;opacity:.55;pointer-events:none;z-index:0}
.grain>*{position:relative;z-index:1}

h1,h2,h3{font-family:var(--display);font-weight:900;letter-spacing:-.02em;line-height:.98;text-wrap:balance}
h2{font-size:clamp(2.3rem,1.4rem + 3.4vw,4rem)}
h3{font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem);line-height:1.1;letter-spacing:-.01em}
p{text-wrap:pretty}
.bl{font-family:var(--bl);font-weight:400;letter-spacing:0;font-size:1.06em;line-height:0;display:inline-block;transform:translateY(.03em)}
.kicker{font:600 .78rem/1.4 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--clay)}
.lede{font-size:clamp(1.08rem,1rem + .4vw,1.28rem);color:var(--ink-2);max-width:54ch}
.em{font-style:italic;font-weight:700}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 1.6em;border-radius:var(--pill);font:900 .95rem/1 var(--sans);letter-spacing:.01em;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .2s var(--ease),box-shadow .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--clay{background:var(--clay);color:var(--cream)}
.btn--clay:hover{background:var(--clay-deep);box-shadow:0 12px 26px -12px rgba(139,74,45,.7)}
.btn--forest{background:var(--forest);color:var(--cream)}
.btn--forest:hover{background:var(--forest-2)}
.btn--cream{background:var(--cream);color:var(--forest)}
.btn--cream:hover{background:#fff}
.btn--ghost{border-color:currentColor;background:transparent}
.btn--ghost:hover{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.btn--sm{min-height:42px;padding:0 1.2em;font-size:.88rem}
.btn span[aria-hidden],.tlink span{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover span[aria-hidden],.tlink:hover span{transform:translateX(4px)}
.tlink{display:inline-flex;gap:8px;align-items:center;font-weight:900;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:3px}

.pv{background:var(--forest);color:#CDD7CF;text-align:center;font-size:.76rem;padding:7px 16px;letter-spacing:.02em}
.pv b{color:#fff}
.pvnote{margin-top:24px;font-size:.86rem;color:var(--ink-2);background:var(--sand);border:1px dashed var(--line);border-radius:14px;padding:12px 16px;max-width:72ch}
.ribbon{display:block;background:var(--gold);color:var(--forest);text-align:center;text-decoration:none;font:700 .92rem/1.3 var(--sans);padding:10px 16px}
.ribbon .bl{font-size:1.2em;margin-right:1px}
.ribbon:hover{background:#D3AE66}

/* ---------- nav */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.is-scrolled{border-color:var(--line)}
.nav__in{max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut);height:80px;display:flex;align-items:center;gap:20px}
.logo{display:block;flex-shrink:0}
.logo img{height:54px;width:auto}
.nav__links{margin-left:auto}
.nav__links>ul{display:flex;align-items:center;gap:2px;list-style:none;padding:0}
.nav__links a,.dd__btn{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;border:0;background:none;cursor:pointer;text-decoration:none;font:700 .95rem/1 var(--sans);color:var(--ink-2);border-radius:10px;transition:color .2s,background .2s}
.nav__links a:hover,.dd__btn:hover,.dd.is-open .dd__btn{color:var(--forest);background:var(--sage-tint)}
.nav__links a.is-on,.dd.is-on>.dd__btn{color:var(--clay)}
.dd{position:relative}
.dd__btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .3s var(--ease)}
.dd.is-open .dd__btn svg{transform:rotate(180deg)}
.dd__menu{position:absolute;top:calc(100% + 8px);left:-6px;min-width:220px;list-style:none;padding:8px;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 22px 44px -22px rgba(28,43,37,.4);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s}
.dd.is-open .dd__menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dd__menu a{display:block;padding:11px 12px}
.nav__cta{margin-left:8px}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--forest);transition:transform .35s var(--ease),top .35s var(--ease)}
.burger span:first-child{top:18px}.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{top:21.5px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:21.5px;transform:rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:55;background:var(--paper);padding:var(--mnav-top,120px) var(--gut) 40px;overflow-y:auto;opacity:0;transform:translateY(-10px);transition:opacity .32s var(--ease),transform .42s var(--ease)}
.mnav.is-open{opacity:1;transform:none}
.mnav__in{display:flex;flex-direction:column;max-width:520px;margin:0 auto}
.mnav__in>*{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease);transition-delay:calc(var(--i,0) * 45ms + 60ms)}
.mnav.is-open .mnav__in>*{opacity:1;transform:none}
.mnav__top,.mnav__grp summary{display:flex;justify-content:space-between;align-items:center;font:900 2rem/1.15 var(--display);letter-spacing:-.02em;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer;list-style:none;user-select:none;-webkit-user-select:none}
.mnav__grp summary::-webkit-details-marker{display:none}
.mnav__grp summary::after{content:"";width:16px;height:16px;background:linear-gradient(var(--clay),var(--clay)) center/16px 2px no-repeat,linear-gradient(var(--clay),var(--clay)) center/2px 16px no-repeat;transition:transform .35s var(--ease)}
.mnav__grp[open] summary::after{transform:rotate(135deg)}
.mnav__grp.is-closing summary::after{transform:none}
.mnav__sub{overflow:hidden}
.mnav__sub a{display:block;padding:11px 2px;font-weight:700;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--sand)}
.mnav__sub a:last-child{border-bottom:0}
.mnav__cta{margin-top:26px}.mnav__cta2{margin-top:10px;color:var(--forest)}
.mnav__tel{margin-top:16px;text-align:center;font-size:.9rem;color:var(--muted)}
@media (max-width:1040px){.nav__links,.nav__cta{display:none}.burger{display:block}.logo img{height:46px}}

/* ---------- reveal */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal-group]>*{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-reveal-group].in>*{opacity:1;transform:none}
.js [data-reveal-group].in>*:nth-child(2){transition-delay:.08s}.js [data-reveal-group].in>*:nth-child(3){transition-delay:.16s}.js [data-reveal-group].in>*:nth-child(4){transition-delay:.24s}.js [data-reveal-group].in>*:nth-child(5){transition-delay:.32s}.js [data-reveal-group].in>*:nth-child(n+6){transition-delay:.4s}

/* ---------- HOME HERO: "You Are Welcome Here" */
.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);min-height:min(88vh,860px);background:var(--sage);color:var(--cream)}
.hero__main{position:relative;padding:clamp(40px,6vw,90px) var(--gut) clamp(44px,6vw,80px);display:flex;flex-direction:column;justify-content:space-between;gap:40px;overflow:hidden}
.hero__main::after{content:"";position:absolute;right:-6%;top:6%;width:62%;aspect-ratio:1;background:url('/assets/brand/roots-white.png') center/contain no-repeat;opacity:.08;pointer-events:none}
.hero__top{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font:700 .95rem/1.3 var(--sans)}
.hero__top .kicker{color:var(--cream);opacity:.9}
.hero h1{font-size:clamp(3.6rem,1.6rem + 8.4vw,9rem);line-height:.9;letter-spacing:-.035em;color:var(--cream)}
.hero__sub{font-size:clamp(1.1rem,1rem + .5vw,1.4rem);max-width:34ch;color:#F1EDE3;margin-top:22px}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero__acts .btn--ghost{color:var(--cream)}
.hero__acts .btn--ghost:hover{background:var(--cream);color:var(--forest);border-color:var(--cream)}
.words{background:var(--cream);position:relative;overflow:hidden;padding:clamp(28px,4vw,48px) clamp(18px,3vw,40px)}
.words__col{display:flex;flex-direction:column;align-items:flex-end;gap:.05em;font:900 clamp(1.25rem,.9rem + 1vw,2.05rem)/1.12 var(--display);letter-spacing:-.01em;text-align:right;color:var(--sage-2)}
.words__col span:nth-child(odd) b{color:var(--gold-deep)}
.words__col b{font-weight:900}
.words__track{animation:drift 60s linear infinite;animation-play-state:paused}
.words.is-on .words__track{animation-play-state:running}
.words::before,.words::after{content:"";position:absolute;left:0;right:0;height:60px;z-index:2;pointer-events:none}
.words::before{top:0;background:linear-gradient(var(--cream),transparent)}
.words::after{bottom:0;background:linear-gradient(transparent,var(--cream))}
@keyframes drift{to{transform:translateY(-50%)}}
@media (max-width:900px){.hero{grid-template-columns:1fr;min-height:0}.words{height:260px}.words__col{align-items:center;text-align:center}}

/* ---------- where-we-gather strip */
.gather{background:var(--forest);color:var(--cream)}
.gather__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.gather__in>div{padding:26px 22px;border-left:1px solid rgba(243,236,226,.14)}
.gather__in>div:first-child{border-left:0;padding-left:0}
.gather dt{font:600 .72rem/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.gather dd{margin:10px 0 0;font:900 1.25rem/1.2 var(--display)}
.gather dd small{display:block;font:400 .9rem/1.4 var(--sans);color:#BFC9C1;margin-top:4px}
.gather a{color:inherit}
@media (max-width:860px){.gather__in{grid-template-columns:1fr 1fr}.gather__in>div:nth-child(3){border-left:0;padding-left:0}.gather__in>div{border-top:1px solid rgba(243,236,226,.14)}}

/* ---------- sections */
.sec{padding-block:var(--sec)}
.sec--cream{background:var(--cream)}
.sec--sand{background:var(--sand)}
.sec--sage{background:var(--sage);color:var(--cream)}
.sec--forest{background:var(--forest);color:var(--cream)}
.sec--clay{background:var(--clay);color:var(--cream)}
.sec--gold{background:var(--gold);color:var(--forest)}
.sec--sage h2,.sec--forest h2,.sec--clay h2{color:var(--cream)}
.sec--forest .kicker,.sec--sage .kicker,.sec--clay .kicker{color:var(--gold)}
.sec--sage .kicker{color:#F4E3B8}
.shead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px 60px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.shead h2{margin-top:14px}
.shead p{color:var(--ink-2);max-width:46ch}
.sec--forest .shead p,.sec--sage .shead p,.sec--clay .shead p{color:#E3E0D6}
@media (max-width:820px){.shead{grid-template-columns:1fr}}

/* ---------- love statement (home) */
.love{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center}
.love h2{font-size:clamp(3rem,1.6rem + 5.6vw,6.6rem);line-height:.92}
.love h2 span{display:block}
.love h2 span:nth-child(2){color:var(--sage)}
.love h2 span:nth-child(3){color:var(--clay)}
.love p{margin-top:22px;color:var(--ink-2);max-width:44ch}
.caps{display:flex;gap:14px;justify-content:center}
.caps figure{flex:1;max-width:190px;aspect-ratio:1/2.55;border-radius:var(--pill);overflow:hidden;background:var(--sand)}
.caps figure:nth-child(2){transform:translateY(-8%)}
.caps img{width:100%;height:100%;object-fit:cover}
@media (max-width:820px){.love{grid-template-columns:1fr}.caps{max-width:520px}}

/* ---------- values pills */
.vals{display:grid;gap:16px}
.val{display:grid;grid-template-columns:minmax(0,.9fr) auto minmax(0,1.3fr);gap:22px;align-items:center;padding:22px 34px;border-radius:var(--pill);color:var(--cream)}
.val:nth-child(even){margin-left:clamp(0px,6vw,90px)}
.val:nth-child(odd){margin-right:clamp(0px,6vw,90px)}
.val h3{font-size:clamp(2rem,1.3rem + 2.4vw,3.2rem);letter-spacing:-.02em}
.val h3 .bl{font-size:1.1em}
.val__arrow{font-size:1.8rem;line-height:1}
.val p{font-weight:700;font-size:1.05rem;line-height:1.35}
.val--forest{background:#56655C}.val--sage{background:var(--sage)}.val--gold{background:var(--gold);color:var(--forest)}.val--clay{background:var(--clay)}.val--ink{background:var(--forest)}
@media (max-width:760px){.val{grid-template-columns:1fr;border-radius:28px;padding:22px 24px;gap:6px}.val__arrow{display:none}.val:nth-child(n){margin:0}}
.valx{display:grid;gap:18px;margin-top:40px}
.valx details{background:var(--paper);border-radius:22px;padding:4px 24px;border:1px solid var(--line)}
.valx summary{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;cursor:pointer;list-style:none;font:900 1.4rem/1.2 var(--display)}
.valx summary::-webkit-details-marker{display:none}
.valx summary em{font:italic 700 1rem/1.3 var(--sans);color:var(--muted);margin-left:10px}
.valx .acc-body p{padding-bottom:10px;color:var(--ink-2)}
.valx .acc-body small{display:block;padding-bottom:20px;color:var(--clay);font-weight:700}

/* ---------- story band */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center}
.story__ph{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.story__ph img{width:100%;height:100%;object-fit:cover}
.story blockquote{font:900 clamp(1.8rem,1.2rem + 2vw,2.8rem)/1.15 var(--display);letter-spacing:-.02em}
.story blockquote em{font-style:normal;color:var(--gold)}
.story p{margin-top:20px;max-width:46ch}
.sec--forest .story p{color:#D8DDD6}
@media (max-width:820px){.story{grid-template-columns:1fr}}

/* ---------- messages */
.msgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.msg{text-decoration:none;display:block}
.msg__th{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--forest)}
.msg__th img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.msg:hover .msg__th img{transform:scale(1.04)}
.msg__play{position:absolute;left:14px;bottom:14px;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--cream);color:var(--forest);transition:transform .3s var(--ease),background .3s}
.msg__play svg{width:18px;height:18px;margin-left:3px;fill:currentColor}
.msg:hover .msg__play{transform:scale(1.08);background:var(--gold)}
.msg h3{margin-top:14px;font-size:1.35rem}
.msg p{font-size:.92rem;color:var(--muted);margin-top:4px}
.sec--forest .msg p{color:#AEB9B1}
.msg--lead{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:28px;align-items:end}
.msg--lead .msg__th{aspect-ratio:16/9}
.msg--lead h3{font-size:clamp(1.8rem,1.3rem + 1.8vw,2.8rem);margin-top:10px}
@media (max-width:900px){.msgs{grid-template-columns:1fr 1fr}.msg--lead{grid-template-columns:1fr}}
@media (max-width:560px){.msgs{grid-template-columns:1fr}}
.vlb{position:fixed;inset:0;z-index:95;background:rgba(16,24,20,.94);display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s .3s}
.vlb.is-open{opacity:1;visibility:visible;transition-delay:0s}
.vlb__in{width:min(1100px,100%)}
.vlb__frame{aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden}
.vlb__frame iframe{width:100%;height:100%;border:0}
.vlb__t{color:var(--cream);font-weight:900;margin-top:14px}
.vlb__x{position:absolute;top:16px;right:16px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;font-size:1.5rem;cursor:pointer}
.player{aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#000}
.player iframe{width:100%;height:100%;border:0}

/* ---------- get involved: pray / give / go */
.pgg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pgg a{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:320px;padding:30px;border-radius:var(--r);text-decoration:none;color:var(--cream);overflow:hidden;transition:transform .4s var(--ease)}
.pgg a:hover{transform:translateY(-4px)}
.pgg a:nth-child(1){background:var(--forest)}.pgg a:nth-child(2){background:var(--gold);color:var(--forest)}.pgg a:nth-child(3){background:var(--clay)}
.pgg h3{font-size:clamp(3rem,2rem + 3vw,4.6rem)}
.pgg p{font-weight:700;max-width:30ch}
.pgg span.go{font-weight:900}
@media (max-width:860px){.pgg{grid-template-columns:1fr}.pgg a{min-height:220px}}

/* ---------- events */
.evs{display:grid;gap:0;border-top:2px solid var(--forest)}
.ev{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none}
.ev__d{text-align:center;background:var(--sage-tint);border-radius:18px;padding:10px 6px}
.ev__d b{display:block;font:900 2rem/1 var(--display);color:var(--forest)}
.ev__d span{font:600 .7rem/1 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--clay)}
.ev h3{font-size:1.45rem}
.ev p{color:var(--muted);font-size:.95rem;margin-top:4px}
.ev--launch .ev__d{background:var(--gold)}
@media (max-width:620px){.ev{grid-template-columns:80px minmax(0,1fr)}.ev .btn{grid-column:1/-1}}

/* ---------- page hero (inner pages) */
.phero{padding:clamp(44px,7vw,100px) 0 clamp(50px,7vw,90px)}
.phero--sage{background:var(--sage);color:var(--cream)}
.phero--forest{background:var(--forest);color:var(--cream)}
.phero--clay{background:var(--clay);color:var(--cream)}
.phero--gold{background:var(--gold);color:var(--forest)}
.phero__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,6vw,90px);align-items:center}
.phero h1{font-size:clamp(3rem,1.6rem + 5.6vw,6.8rem);line-height:.92;letter-spacing:-.035em;margin-top:14px}
.phero .lede{margin-top:24px}
.phero--sage .lede,.phero--forest .lede,.phero--clay .lede{color:#EDE7DB}
.phero--sage .kicker,.phero--clay .kicker{color:#F4E3B8}.phero--forest .kicker{color:var(--gold)}
.phero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.phero__ph{display:flex;gap:12px;justify-content:flex-end}
.phero__ph figure{flex:1;max-width:170px;aspect-ratio:1/2.5;border-radius:var(--pill);overflow:hidden;background:rgba(0,0,0,.1)}
.phero__ph figure:nth-child(2){transform:translateY(10%)}
.phero__ph img{width:100%;height:100%;object-fit:cover}
.phero__one{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;max-width:440px;justify-self:end;width:100%}
.phero__one img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.phero__in{grid-template-columns:1fr}.phero__ph{justify-content:flex-start}.phero__ph figure{max-width:120px}.phero__one{justify-self:start;max-width:360px}}

/* ---------- prose + split */
.prose{max-width:720px}
.prose p{margin-top:18px;color:var(--ink-2);font-size:1.12rem}
.prose h2{margin-bottom:6px}
.big{font:900 clamp(1.9rem,1.2rem + 2.4vw,3.2rem)/1.08 var(--display);letter-spacing:-.02em;text-transform:none}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center}
.split__ph{border-radius:var(--r);overflow:hidden;aspect-ratio:5/4}
.split__ph img{width:100%;height:100%;object-fit:cover}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.scripture{font-weight:700;color:var(--clay)}

/* ---------- team */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.person figure{aspect-ratio:3/4;border-radius:180px 180px 22px 22px;overflow:hidden;background:var(--sand)}
.person img{width:100%;height:100%;object-fit:cover}
.person h3{margin-top:14px;font-size:1.3rem}
.person p{color:var(--muted);font-size:.93rem;line-height:1.45;margin-top:4px}
.lead{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,80px);align-items:center}
.lead figure{border-radius:var(--pill) var(--pill) var(--r) var(--r);overflow:hidden;aspect-ratio:4/5;max-width:420px}
.lead figure img{width:100%;height:100%;object-fit:cover}
.lead p{margin-top:16px;color:var(--ink-2)}
@media (max-width:900px){.team{grid-template-columns:1fr 1fr}.lead{grid-template-columns:1fr}}

/* ---------- visit */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fact{padding:26px;border-radius:var(--r);background:var(--cream)}
.fact dt{font:600 .72rem/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--clay)}
.fact dd{margin:10px 0 0;font:900 1.5rem/1.15 var(--display)}
.timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--forest)}
.timeline div{padding:26px 26px 26px 0}
.timeline div+div{padding-left:26px;border-left:1px solid var(--line)}
.timeline b{display:block;font:900 2.2rem/1 var(--display);color:var(--sage)}
.timeline h3{margin-top:12px;font-size:1.3rem}
.timeline p{margin-top:8px;color:var(--ink-2)}
@media (max-width:820px){.facts,.timeline{grid-template-columns:1fr}.timeline div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
.where{background:var(--paper);color:var(--ink);border-radius:var(--r);padding:30px;box-shadow:0 30px 60px -34px rgba(28,43,37,.45)}
.where h3{font-size:1.7rem;margin-top:10px}
.where>p{color:var(--ink-2);margin-top:6px}
.where dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.where dt{font:600 .7rem/1 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--clay)}
.where dd{margin:6px 0 0;font-weight:900}
.heads{margin-top:22px;padding:16px 18px;background:#F4E3B8;border-radius:16px;font-weight:700;color:var(--forest)}
.kids{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.kids div{padding:26px;border-radius:var(--r);background:rgba(243,236,226,.12);border:1px solid rgba(243,236,226,.2)}
.kids small{font:600 .7rem/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:#F4E3B8}
.kids h3{margin-top:10px;font-size:1.5rem}
.kids p{margin-top:8px;color:#E7E4DA}
@media (max-width:700px){.kids{grid-template-columns:1fr}}

/* ---------- faq */
.faq{max-width:860px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;cursor:pointer;list-style:none;font:900 1.3rem/1.25 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex-shrink:0;width:16px;height:16px;background:linear-gradient(var(--clay),var(--clay)) center/16px 2px no-repeat,linear-gradient(var(--clay),var(--clay)) center/2px 16px no-repeat;transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details.is-closing summary::after{transform:none}
.faq .acc-body p{padding:0 40px 24px 0;color:var(--ink-2)}

/* ---------- forms */
.formwrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,90px);align-items:start}
.formwrap ul{list-style:none;padding:0;margin-top:22px;display:grid;gap:10px;font-weight:700}
.formwrap li::before{content:"→";color:var(--clay);margin-right:10px}
.gform{background:var(--paper);color:var(--ink);border-radius:var(--r);padding:clamp(22px,3vw,40px);box-shadow:0 30px 60px -34px rgba(28,43,37,.45)}
.gform h3{font-size:1.8rem}
.gform__intro{margin-top:8px;color:var(--ink-2)}
.gform__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin:22px 0 24px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld--full{grid-column:1/-1}
.fld>span{font-weight:900;font-size:.9rem}
.fld i{font-style:normal;color:var(--clay)}
.fld input,.fld select,.fld textarea{width:100%;font:400 1rem/1.4 var(--sans);color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;min-height:50px;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.fld select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23A65C3A' stroke-width='1.6'/%3E%3C/svg%3E") right 14px center/12px no-repeat;padding-right:36px}
.fld textarea{resize:vertical;min-height:110px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--sage);box-shadow:0 0 0 4px rgba(110,139,99,.18)}
.gform__note{margin-top:12px;font-size:.88rem;color:var(--muted)}
.note{padding:14px 16px;border-radius:14px;margin-top:16px}
.note small{display:block;opacity:.75}
.note--ok{background:var(--sage-tint);border:1px solid #C4D2BC}
.note--err{background:#F4E1D8;border:1px solid #E1BFAE}
@media (max-width:860px){.formwrap{grid-template-columns:1fr}}
@media (max-width:520px){.gform__grid{grid-template-columns:1fr}}

/* ---------- give */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.way{padding:clamp(24px,3vw,40px);border-radius:var(--r);background:var(--forest);color:var(--cream)}
.way:nth-child(2){background:var(--cream);color:var(--ink)}
.way h3{font-size:2rem}
.way p{margin-top:12px}
.way .btn{margin-top:22px}
.way address{font-style:normal;font-weight:900;margin-top:14px;line-height:1.5}
@media (max-width:760px){.ways{grid-template-columns:1fr}}

/* ---------- connect band (the gold slide) */
.connect{background:var(--gold);color:var(--forest);overflow:hidden}
.connect__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:40px;align-items:center}
.connect h2{font-size:clamp(3rem,1.6rem + 5vw,6rem);line-height:.92;color:var(--cream)}
.connect h2 span{display:block;color:var(--forest)}
.connect__social{display:flex;gap:12px;margin-top:26px}
.connect__social a{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:var(--cream);color:var(--forest);transition:transform .3s var(--ease)}
.connect__social a:hover{transform:translateY(-3px) rotate(-3deg)}
.connect__social svg{width:28px;height:28px}
.globe{width:100%;max-width:420px;justify-self:end;color:var(--forest)}
.globe path,.globe ellipse,.globe circle{fill:none;stroke:currentColor;stroke-width:2.2}
.js .globe{animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:760px){.connect__in{grid-template-columns:1fr}.globe{max-width:240px;justify-self:center}}

/* ---------- cta + footer */
.cta{padding:clamp(70px,9vw,120px) 0}
.cta--sage{background:var(--sage);color:var(--cream)}.cta--clay{background:var(--clay);color:var(--cream)}.cta--forest{background:var(--forest);color:var(--cream)}
.cta__in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:26px}
.cta h2{color:inherit;max-width:18ch}
.foot{background:var(--forest);color:#C3CCC5;padding:clamp(60px,7vw,90px) 0 110px;font-size:.95rem}
.foot__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:36px}
.foot__brand img{width:210px;height:auto}
.foot__line{margin-top:18px;max-width:30ch}
.foot__social{display:flex;align-items:center;gap:10px;margin-top:18px}
.foot__social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(243,236,226,.25);color:var(--cream);transition:background .3s,color .3s}
.foot__social a:hover{background:var(--cream);color:var(--forest)}
.foot__social svg{width:18px;height:18px}
.foot__social span{font-weight:900;color:var(--cream)}
.foot__col{display:flex;flex-direction:column;gap:8px}
.foot__col h3{font:600 .72rem/1 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.foot__col a{text-decoration:none;transition:color .2s}
.foot__col a:hover{color:#fff}
.foot__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:56px;padding-top:24px;border-top:1px solid rgba(243,236,226,.14);font-size:.82rem;color:#8F9C94}
@media (max-width:900px){.foot__top{grid-template-columns:1fr 1fr}.foot__brand{grid-column:1/-1}}
@media (min-width:1041px){.foot{padding-bottom:44px}}
.mbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:50;display:none;grid-template-columns:auto 1fr;gap:6px;padding:6px;background:var(--forest);border-radius:999px;border:1px solid rgba(255,255,255,.08);box-shadow:0 1px 2px rgba(28,43,37,.2),0 10px 22px -10px rgba(28,43,37,.55);transform:translateY(160%);transition:transform .45s var(--ease)}
.mbar.is-on{transform:none}
.mbar a{display:grid;place-items:center;min-height:46px;padding:0 22px;border-radius:999px;text-decoration:none;font-weight:900;color:var(--cream)}
.mbar__go{background:var(--clay)}
@media (max-width:1040px){.mbar{display:grid}}

.acc-body{overflow:hidden}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.js [data-reveal],.js [data-reveal-group]>*,.mnav__in>*{opacity:1;transform:none}.words__track{animation:none}}
.phero--sage .btn--ghost,.phero--forest .btn--ghost,.phero--clay .btn--ghost{color:var(--cream)}
.phero--sage .btn--ghost:hover,.phero--forest .btn--ghost:hover,.phero--clay .btn--ghost:hover{background:var(--cream);border-color:var(--cream);color:var(--forest)}
.prose p.big{font:900 clamp(1.9rem,1.2rem + 2.4vw,3.2rem)/1.08 var(--display);letter-spacing:-.02em;color:inherit;margin-top:0}
.sec--forest .prose p.big,.sec--sage .prose p.big{color:var(--cream)}
.where .kicker{color:var(--clay)}
.fact a{text-decoration:none}
.fact a:hover{color:var(--clay)}
.rb-s{display:none}@media (max-width:480px){.rb-l{display:none}.rb-s{display:inline}}
@media (min-width:901px){.words__track{position:absolute;left:clamp(18px,3vw,40px);right:clamp(18px,3vw,40px);top:clamp(28px,4vw,48px)}.hero h1{font-size:min(clamp(3.6rem,1.6rem + 8.4vw,9rem),12.5vh)}.hero{min-height:calc(100vh - 120px);max-height:none}}
/* hero photo: the church, toned into the sage like the slides */
.hero__main{background:var(--sage);isolation:isolate}
.hero__main>*{position:relative;z-index:1}
.hero__bg{position:absolute!important;inset:0;z-index:0!important;overflow:hidden}
.hero__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);mix-blend-mode:multiply;opacity:.62;transform-origin:60% 40%;animation:hzoom 28s var(--ease) both}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(94,121,85,.92) 0%,rgba(94,121,85,.7) 38%,rgba(94,121,85,.12) 75%),linear-gradient(0deg,rgba(28,43,37,.35),transparent 45%)}
.hero__main::after{z-index:0}
@keyframes hzoom{from{transform:scale(1.12)}to{transform:scale(1)}}
@media (max-width:900px){.hero__bg::after{background:linear-gradient(0deg,rgba(94,121,85,.95) 10%,rgba(94,121,85,.55) 70%,rgba(94,121,85,.35))}}
/* the word wall loops with no seam: the space after the last word matches the space between words */
.words__col{padding-bottom:.05em}
/* four copies, moving one copy's height: the wall never runs out on tall screens */
.words__track{animation-name:drift4;animation-duration:32s}
@keyframes drift4{to{transform:translateY(-25%)}}
/* shorter hero (about a quarter off) */
@media (min-width:901px){
  .hero{min-height:calc((100vh - 120px) * .75)}
  .hero__main{padding:clamp(34px,4vw,56px) var(--gut) clamp(36px,4vw,56px);gap:24px}
  .hero h1{font-size:min(clamp(3.2rem,1.4rem + 6.4vw,7.2rem),8.4vh)}
  .hero__sub{max-width:44ch;margin-top:18px}
  .hero__acts{margin-top:22px}
}
@media (max-width:900px){
  .hero h1{font-size:clamp(2.7rem,1.6rem + 5vw,3.6rem)}
  .hero__main{padding-top:30px;padding-bottom:34px;gap:22px}
  .hero__sub{margin-top:14px}.hero__acts{margin-top:20px}
  .words{height:190px;padding-top:18px}
}

/* ================= grain, like the slides =================
   A printed, speckled texture laid over the whole colour band — photos
   included — rather than tucked underneath it. */
.hero__main::after{display:none}
.grain::before{background:url('/assets/brand/grain.png') 0 0/256px 256px;mix-blend-mode:overlay;opacity:.38;z-index:3}
.sec--cream.grain::before,.sec--sand.grain::before{opacity:.2;mix-blend-mode:multiply;filter:contrast(.5) brightness(1.55)}
.hero.grain::before{opacity:.42}
.js .grain::before{animation:grainshift 1.2s steps(3) infinite}
@keyframes grainshift{0%{background-position:0 0}33%{background-position:-61px 37px}66%{background-position:43px -89px}100%{background-position:0 0}}

/* ================= micro-interactions for things you click that aren't buttons ================= */
/* text links: the gold rule stays, a clay one sweeps across it */
.tlink{border-bottom:0;padding-bottom:5px;background:linear-gradient(var(--clay),var(--clay)) 0 100%/0 2px no-repeat,linear-gradient(var(--gold),var(--gold)) 0 100%/100% 2px no-repeat;transition:background-size .45s var(--ease),color .25s}
.tlink:hover{background-size:100% 2px,100% 2px;color:var(--clay)}
.sec--forest .tlink:hover,.phero--forest .tlink:hover{color:var(--gold)}
.tlink:active{transform:translateY(1px)}

/* logo: the roots give a little */
.logo img{transition:transform .5s var(--ease)}
.logo:hover img{transform:rotate(-2deg) scale(1.03)}
.logo:active img{transform:scale(.97)}

/* launch ribbon */
.ribbon span[aria-hidden]{display:inline-block;transition:transform .35s var(--ease)}
.ribbon:hover span[aria-hidden]{transform:translateX(5px)}
.ribbon{transition:background .3s}.ribbon:hover{background:#D3B06A}

/* menu links: a small underline grows from the centre */
.nav__links a{position:relative}
.nav__links a::after{content:"";position:absolute;left:50%;right:50%;bottom:6px;height:2px;border-radius:2px;background:var(--clay);transition:left .35s var(--ease),right .35s var(--ease)}
.nav__links a:hover::after,.nav__links a.is-on::after{left:14px;right:14px}
.dd__menu a{transition:background .25s,color .25s,transform .3s var(--ease)}
.dd__menu a:hover{transform:translateX(4px)}

/* values pills: slide along, arrow leads */
.val{transition:transform .5s var(--ease),box-shadow .5s var(--ease),filter .3s}
a.val:hover{transform:translateX(10px);box-shadow:0 18px 34px -22px rgba(28,43,37,.6);filter:saturate(1.08)}
a.val:nth-child(even):hover{transform:translateX(-10px)}
a.val:active{transform:scale(.985)}
.val__arrow{transition:transform .45s var(--ease)}
a.val:hover .val__arrow{transform:translateX(8px) rotate(-12deg)}
a.val:hover h3 .bl{animation:blwobble .6s var(--ease)}
@keyframes blwobble{40%{transform:translateY(.03em) rotate(-8deg)}}

/* message cards */
.msg h3{transition:color .25s}
.msg:hover h3{color:var(--clay)}
.sec--forest .msg:hover h3,.phero--forest .msg:hover h3{color:var(--gold)}
.msg__th{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.msg:hover .msg__th{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(28,43,37,.7)}
.msg:active .msg__th{transform:scale(.985)}

/* event rows: the date tile tips, the row warms */
.ev{position:relative;transition:padding .45s var(--ease)}
.ev::before{content:"";position:absolute;inset:0 -14px;border-radius:18px;background:var(--sage-tint);opacity:0;transform:scaleY(.8);transition:opacity .3s,transform .45s var(--ease);z-index:-1}
.ev{isolation:isolate}
.ev:hover::before{opacity:.7;transform:none}
.ev__d{transition:transform .5s var(--ease),background .3s}
.ev:hover .ev__d{transform:rotate(-4deg) scale(1.05)}
.ev h3{transition:color .25s}.ev:hover h3{color:var(--clay)}
.ev:hover .btn--ghost{background:var(--forest);border-color:var(--forest);color:var(--cream)}

/* pray / give / go */
.pgg a .go{display:inline-block;transition:transform .4s var(--ease)}
.pgg a:hover .go{transform:translateX(6px)}
.pgg a h3{transition:transform .5s var(--ease);transform-origin:left bottom}
.pgg a:hover h3{transform:rotate(-2deg) scale(1.04)}
.pgg a:active{transform:scale(.985)}

/* footer + fact links */
.foot__col a{display:inline-block;align-self:flex-start;transition:color .2s,transform .35s var(--ease)}
.foot__col a:hover{transform:translateX(4px)}
.fact a,.where a:not(.tlink){background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .4s var(--ease),color .2s}
.fact a:hover{background-size:100% 2px}

/* FAQ questions */
.faq summary{transition:color .25s}
.faq summary:hover{color:var(--clay)}
.faq details:not([open]) summary:hover::after{transform:rotate(90deg)}

/* social tiles */
.foot__social a{transition:background .3s,color .3s,transform .35s var(--ease)}
.foot__social a:hover{transform:translateY(-2px) rotate(-6deg)}

/* keyboard focus looks intentional */
.tlink:focus-visible,.msg:focus-visible,.ev:focus-visible,.val:focus-visible,.pgg a:focus-visible,.foot__col a:focus-visible,.logo:focus-visible,.ribbon:focus-visible{outline:2px solid var(--clay);outline-offset:4px;border-radius:10px}

@media (prefers-reduced-motion:reduce){.js .grain::before{animation:none}}
@media (hover:none){a.val:hover,a.val:nth-child(even):hover,.msg:hover .msg__th{transform:none}}

/* grain, v2: about 30% lighter on the light green, gold and orange bands
   (the dark green keeps its grain), and still — no flicker */
.js .grain::before{animation:none}
.hero.grain::before{opacity:.29}
.sec--sage.grain::before,.phero--sage.grain::before,.cta--sage.grain::before,
.sec--gold.grain::before,.phero--gold.grain::before,.connect.grain::before,
.sec--clay.grain::before,.phero--clay.grain::before,.cta--clay.grain::before{opacity:.27}

/* ================= header, v2: floats over the page =================
   No bar at the top, just the logo and links on the first section; a glass
   bar fades in once you scroll. data-l / data-r (logo side / link side) are
   set by gcc.js from whatever is underneath: "dark" turns things cream. */
.nav{position:fixed;left:0;right:0;top:var(--nav-top,0px);background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid transparent;box-shadow:none;transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s,-webkit-backdrop-filter .4s,backdrop-filter .4s}
.nav.is-scrolled{border-color:transparent}
.nav.is-solid{background:color-mix(in srgb,var(--paper) 86%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 12px 30px -20px rgba(28,43,37,.45);border-color:rgba(28,43,37,.06)}
/* the first section slides up under the header */
#main>:first-child{padding-top:80px}
#main>.hero:first-child{padding-top:0}
#main>.hero:first-child .hero__main{padding-top:calc(80px + clamp(20px,3vw,40px))}
#main>.hero:first-child .words{padding-top:calc(80px + 18px)}
@media (min-width:901px){.hero{min-height:calc((100vh - 120px) * .75 + 80px)}}
@media (max-width:900px){#main>.hero:first-child .words{padding-top:18px}}
/* each item turns cream over a dark background (data-t set by gcc.js) */
.logo{position:relative}
.logo .logo--w{display:none}
.logo[data-t="dark"] .logo--d{display:none}
.logo[data-t="dark"] .logo--w{display:block}
.nav__links a,.dd__btn{transition:color .3s,background .2s}
.nav li[data-t="dark"]>a,.nav li[data-t="dark"]>.dd__btn{color:var(--cream)}
.nav li[data-t="dark"]>a:hover,.nav li[data-t="dark"]>.dd__btn:hover,.nav li.dd.is-open[data-t="dark"]>.dd__btn{background:rgba(243,236,226,.12);color:#fff}
.nav li[data-t="dark"]>a.is-on,.nav li.dd.is-on[data-t="dark"]>.dd__btn{color:var(--gold)}
.nav li[data-t="dark"]>a::after{background:var(--gold)}
.burger[data-t="dark"] span{background:var(--cream)}
.burger span{transition:transform .35s var(--ease),top .35s var(--ease),background .3s}
.nav.is-solid[data-tone="dark"]{background:color-mix(in srgb,var(--forest) 80%,transparent);border-color:rgba(243,236,226,.08);box-shadow:0 12px 30px -18px rgba(0,0,0,.5)}
/* the word wall starts below the floating header, and fades out under it */
@media (min-width:901px){#main>.hero:first-child .words__track{top:calc(80px + 14px)}#main>.hero:first-child .words::before{top:80px}}
.nav li[data-t="mix"]>a,.nav li[data-t="mix"]>.dd__btn{background:color-mix(in srgb,var(--paper) 78%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink)}

/* ---------- Plan your visit: the kids section gets its photos (2026-10-01) */
.kidsx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.kidsx__ph{position:relative;padding-bottom:18%}
.kidsx__ph figure{margin:0;overflow:hidden;border-radius:var(--r);box-shadow:0 24px 50px -24px rgba(20,12,6,.55)}
.kidsx__ph img{width:100%;height:100%;object-fit:cover}
.kidsx__a{aspect-ratio:4/3}
.kidsx__b{position:absolute;right:-3%;bottom:0;width:40%;aspect-ratio:3/4;border:6px solid var(--clay)}
@media (max-width:900px){.kidsx{grid-template-columns:1fr}.kidsx__ph{order:-1;max-width:560px;padding-bottom:22%}.kidsx__b{right:0}}

/* ---------- home hero fixes (2026-10-01)
   1. The word wall no longer scrolls up behind the floating header: the
      header's strip is solid cream, then the words fade in below it.
   2. The new hero photo sits to the right so the headline isn't printed over
      the shirt slogan, and the wash behind the headline is a touch deeper. */
@media (min-width:901px){
  #main>.hero:first-child .words::before{top:0;height:calc(80px + 70px);background:linear-gradient(var(--cream) 0,var(--cream) 88px,color-mix(in srgb,var(--cream) 0%,transparent) 100%)}
}
.hero__bg img{object-position:78% 28%!important}
.hero__bg::after{background:linear-gradient(100deg,rgba(94,121,85,.94) 0%,rgba(94,121,85,.8) 34%,rgba(94,121,85,.35) 58%,rgba(94,121,85,.1) 82%),linear-gradient(0deg,rgba(28,43,37,.35),transparent 45%)}
@media (max-width:900px){.hero__bg img{object-position:62% 25%!important}}
/* 3. On the home page the header spans the full width like the hero below it,
      so the logo lines up with the headline instead of floating mid-photo. */
@media (min-width:901px){body:has(#main>.hero:first-child) .nav__in{max-width:none}}
/* 4. On the home page the links sit across the photo AND the cream word wall,
      so item-by-item colouring left one odd pill on the seam. Instead, while
      the header floats over the hero, the links share one frosted capsule. */
@media (min-width:901px){
  body:has(#main>.hero:first-child) .nav:not(.is-solid) .nav__links>ul{background:color-mix(in srgb,var(--paper) 80%,transparent);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);border-radius:999px;padding:4px;box-shadow:0 10px 30px -18px rgba(28,43,37,.45)}
  body:has(#main>.hero:first-child) .nav:not(.is-solid) .nav__links li>a,
  body:has(#main>.hero:first-child) .nav:not(.is-solid) .nav__links li>.dd__btn{color:var(--ink);background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  body:has(#main>.hero:first-child) .nav:not(.is-solid) .nav__links li>a:hover,
  body:has(#main>.hero:first-child) .nav:not(.is-solid) .nav__links li>.dd__btn:hover,
  body:has(#main>.hero:first-child) .nav:not(.is-solid) .nav__links li.dd.is-open>.dd__btn{background:rgba(28,43,37,.07);color:var(--ink)}
  body:has(#main>.hero:first-child) .nav:not(.is-solid) .nav__links li>a.is-on{color:var(--clay)}
}

/* The platform's blocks (extras on built-in pages, pages built in the editor)
   use .lead for a lead paragraph, not this site's two-column .lead. */
:is(.apv-engine,.cmsextras) .lead{display:block}