/* ============================================================
   Faith for Life Church — stylesheet
   Design system matched to passioncitychurch.com:
   - Headline font: Helvetica Now Bold (system Helvetica Neue/Arial
     fallback), very tight negative tracking at large sizes
   - Body/nav font: "owners" (system Inter fallback)
   - Brand primary: cyan #00B7E3, ink #0E1216, page bg #F0F0F0
   - Fully-rounded pill buttons, uppercase 12px bold nav links
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg: #f0f0f0;
  --bg-soft: #e6e6e4;
  --surface: #ffffff;
  --surface-2: #f6f6f4;
  --line: rgba(14,18,22,0.1);
  --ink: #0e1216;
  --dim: #676263;
  --primary: #00b7e3;
  --primary-2: #0092b8;
  --tan: #e8d4a0;
  --dark: #0e1216;
  --dark-soft: #181c21;
  --radius: 16px;
  --maxw: 1600px;
  --font-head: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4{
  margin:0 0 .5em; font-weight:700; font-family:var(--font-head);
  letter-spacing:-0.045em; line-height:0.98; color:var(--ink);
}
h1{ letter-spacing:-0.09em; }
h2{ letter-spacing:-0.07em; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-body); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); font-weight:700; margin-bottom:1rem;
}
.eyebrow::before{ content:''; width:22px; height:2px; background:var(--primary); display:inline-block; }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 6vw; }
@media(min-width:1500px){ .container{ padding:0 4rem; } }

.grad-text{ color:var(--primary); }

/* ---------- top loader bar ---------- */
#scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--primary); z-index:9999; transition:width .08s linear;
}

/* ---------- header ---------- */
header.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1600;
  padding:26px 0;
  transition:background .35s ease, padding .35s ease, border-color .35s ease, box-shadow .35s ease;
  background:rgba(14,18,22,0.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
header.site-header.scrolled{
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 24px -18px rgba(0,0,0,.55);
}
header.site-header.menu-open{
  background:rgba(14,18,22,0.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:none; box-shadow:none;
}
.nav-inner{ display:flex; align-items:center; justify-content:flex-start; gap:2.5rem; }
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand img{ height:40px; width:auto; }
.brand .brand-icon{ display:none; }

nav.primary-nav{ display:flex; align-items:center; gap:1.9rem; margin-left:auto; }
nav.primary-nav a{
  font-family:var(--font-body); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; position:relative; padding:6px 0; transition:color .3s ease;
}
nav.primary-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--primary);
  transition:width .3s ease;
}
nav.primary-nav a:hover::after, nav.primary-nav a.active::after{ width:100%; }
nav.primary-nav a.active{ color:var(--primary); }

/* search bar lives in the header itself, only shown while the menu is open —
   this is the row that "replaces" the header, matching the reference site */
.nav-search{ display:none; position:relative; align-items:center; gap:.8rem; flex:1 1 380px; max-width:440px; margin-left:1rem; }
header.site-header.menu-open .nav-search{ display:flex; }
header.site-header.menu-open nav.primary-nav{ display:none; }
.nav-search .mega-search-icon{ flex-shrink:0; width:18px; height:18px; color:rgba(255,255,255,.65); }
.nav-search input{
  flex:1 1 auto; width:100%; background:transparent; border:1px solid rgba(255,255,255,.5); border-radius:3px;
  padding:10px 14px; color:#fff; font-family:var(--font-body); font-size:.9rem;
}
.nav-search input::placeholder{ color:rgba(255,255,255,.5); }
.nav-search input:focus{ outline:none; border-color:var(--primary); }

.nav-right{ display:flex; align-items:center; gap:1.1rem; flex-shrink:0; flex-wrap:nowrap; }
header.site-header.menu-open .nav-right{ margin-left:auto; }
header.site-header.menu-open .nav-cta{ display:none; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:16px 34px; border-radius:100px; font-size:.95rem; font-weight:400;
  font-family:var(--font-body); letter-spacing:.01em; border:1px solid transparent;
  transition:transform .2s var(--ease-out), box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--primary); color:var(--ink); }
.btn-primary:hover{ background:var(--tan); transform:translateY(-2px); }
.btn-primary:active{ transform:scale(.97); }
.btn-outline{ border-color:rgba(14,18,22,.28); color:var(--ink); background:transparent; }
.btn-outline:hover{ border-color:var(--ink); background:var(--ink); color:#fff; }
.btn-ghost{ color:var(--primary-2); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 20px; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }

.menu-toggle{
  display:flex; align-items:center; gap:.6rem; background:none; border:none;
  color:#fff; font-family:var(--font-body); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 4px;
}
.menu-toggle:hover{ color:var(--primary); }
.menu-toggle .bars{ display:inline-flex; flex-direction:column; gap:4px; }
.menu-toggle .bars span{ width:22px; height:2px; background:currentColor; display:block; transition:transform .25s ease, opacity .25s ease; }
.menu-toggle.is-open .bars span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-toggle.is-open .bars span:nth-child(2){ opacity:0; }
.menu-toggle.is-open .bars span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- mega menu overlay (dark, matches PCC menu panel) ---------- */
/* panel doesn't cover the full screen — angled bottom edge, page peeks through below, on every screen size */
.mega-overlay{
  position:fixed; top:0; left:0; right:0; bottom:auto; z-index:1500;
  height:min(80vh, 760px);
  background:var(--dark);
  opacity:0; visibility:hidden; transform:translateY(-16px);
  transition:opacity .22s ease-out, visibility .22s ease-out, transform .22s ease-out;
  overflow-y:auto;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}
.mega-overlay.open{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .4s var(--ease-out), visibility .4s var(--ease-out), transform .4s var(--ease-out);
}
.mega-inner{ padding-top:110px; padding-bottom:70px; min-height:100%; }
.mega-close{ display:none; }

/* search results dropdown (input itself now lives in the header, see .nav-search) */
.mega-search-results{
  position:absolute; left:0; right:0; top:calc(100% + 8px); background:var(--dark);
  border:1px solid rgba(255,255,255,.16); border-radius:8px; overflow:hidden; z-index:20; display:none;
}
.mega-search-results.show{ display:block; }
.mega-search-results a{
  display:block; padding:12px 18px; color:#fff; font-family:var(--font-body); font-weight:600;
  font-size:.92rem; border-bottom:1px solid rgba(255,255,255,.08);
}
.mega-search-results a:last-child{ border-bottom:none; }
.mega-search-results a:hover{ background:rgba(255,255,255,.06); color:var(--primary); }
.mega-search-results .no-results{ padding:12px 18px; color:rgba(255,255,255,.5); font-size:.85rem; }

.mega-toplinks{ display:flex; align-items:center; gap:1.8rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.mega-toplinks a{
  font-family:var(--font-body); font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  transition:color .2s ease;
}
.mega-toplinks a:hover{ color:var(--primary); }
.mega-toplinks a.upcoming{ color:var(--primary); }

.mega-top{ display:flex; align-items:baseline; gap:1.4rem; flex-wrap:nowrap; min-width:0; margin-bottom:.7rem; }
.mega-top h3{
  font-family:var(--font-head); font-weight:700; font-size:1.92rem; letter-spacing:-0.05em; color:#fff; margin:0; flex-shrink:0;
}
.mega-top span{ font-family:var(--font-body); font-size:clamp(.62rem,1vw,.96rem); color:#8b8688; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.mega-rule{ border:none; border-top:1px solid rgba(255,255,255,.18); margin:0 0 2.2rem; }

.mega-body{ display:flex; gap:4rem; align-items:flex-start; }

.mega-promo{ flex:0 0 680px; display:block; cursor:pointer; }
.mega-promo img{ border-radius:6px; margin-bottom:1.1rem; aspect-ratio:16/9; object-fit:cover; width:100%; transition:transform .4s ease; }
.mega-promo:hover img{ transform:scale(1.03); }
.mega-promo-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.mega-promo-meta .title{ font-family:var(--font-head); font-weight:700; font-size:1.4rem; letter-spacing:-0.03em; color:#fff; }
.mega-promo-meta .date{ font-family:var(--font-body); font-weight:700; font-size:1.4rem; color:#fff; white-space:nowrap; }

.mega-right{ flex:1 1 auto; min-width:0; }
.mega-cols{ display:flex; gap:3rem; flex-wrap:wrap; }
.mega-col{ flex:1 1 0; min-width:150px; }
.mega-col h4{
  font-family:var(--font-head); font-weight:700; font-size:1.3rem; letter-spacing:-0.03em;
  color:#8b8688; margin-bottom:1rem; text-transform:none;
}
.mega-col h4 a{ color:inherit; text-decoration:none; transition:color .2s ease; }
.mega-col h4 a:hover{ color:var(--primary); }
.mega-col ul li{ margin-bottom:.85rem; }
.mega-col ul a{
  font-family:var(--font-body); font-weight:700; font-size:.98rem; color:#fff;
  transition:color .2s ease; display:inline-block;
}
.mega-col ul a:hover{ color:var(--primary); }

.mega-bottom{ display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; gap:1rem; padding-top:2.4rem; }
.socials{ display:flex; align-items:center; gap:1rem; }
.socials a{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.32);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:border-color .2s ease, color .2s ease;
}
.socials a:hover{ border-color:var(--primary); color:var(--primary); }
.socials a svg{ width:16px; height:16px; }

@media(max-width:980px){
  .mega-inner{ padding-top:15px; }

  /* About / Visit / Give / Upcoming Events row removed on mobile */
  .mega-toplinks{ display:none; }

  /* mobile menu: simplified, link-forward layout, no promo image */
  .mega-top, .mega-rule, .mega-promo{ display:none; }
  .mega-body{ flex-direction:column; margin-top:85px; }

  /* Our House spans the full row; Ministries sits to the left of Get Involved on the row below */
  .mega-cols{ display:grid; grid-template-columns:1fr 1fr; column-gap:calc(1.4rem + 15px); row-gap:1.6rem; }
  .mega-col:first-child{ grid-column:1 / -1; }
  .mega-col h4{ font-size:1.18rem; margin-bottom:.5rem; }
  .mega-col ul a{ font-size:.75rem; font-weight:800; }
  .mega-col:first-child ul{ display:grid; grid-template-columns:1fr 1fr; column-gap:calc(1.4rem + 15px); row-gap:.6rem; }
  .mega-col:first-child ul li{ margin-bottom:0; }
  .mega-col ul li{ margin-bottom:.45rem; }

  .mega-bottom{ padding-top:1.2rem; }
  .mega-overlay{ height:min(86vh, 640px); }
}
@media(max-width:620px){
  .mega-inner{ padding-top:70px; }
}

/* ---------- hero (dark, video-style like PCC home) ---------- */
.hero{
  --hero-photo-w: clamp(260px, 32vw, 480px);
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:110px; overflow:hidden;
  background:
    radial-gradient(ellipse 70% 60% at 75% 15%, rgba(0,183,227,.28), transparent 60%),
    radial-gradient(ellipse 60% 50% at 15% 85%, rgba(0,183,227,.14), transparent 60%),
    var(--dark);
  color:#fff;
}
.hero .noise{ display:none; }
.hero-grid{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, black, transparent); }
.hero-photo{
  position:absolute; top:6%; bottom:8%; right:0; z-index:2; pointer-events:none;
  width:var(--hero-photo-w);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 170px), linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, black 170px), linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-composite: intersect;
  opacity:.92;
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; }
.hero-photo-2{
  top:6%; bottom:8%; right:calc(var(--hero-photo-w, clamp(260px, 32vw, 480px)) - 160px);
  width:clamp(220px, 27vw, 420px); z-index:1; opacity:.92;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 22%, black 100%), linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, black 22%, black 100%), linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-composite: intersect;
}
.hero-photo-3{
  top:6%; bottom:8%;
  right:calc(var(--hero-photo-w, clamp(260px, 32vw, 480px)) + clamp(220px, 27vw, 420px) - 320px);
  width:clamp(200px, 25vw, 380px); z-index:0; opacity:.92;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 22%, black 100%), linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, black 22%, black 100%), linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-composite: intersect;
}
.hero-photo-3 img{ object-position: center 18%; }
.hero-photo.reveal{
  opacity:0; transform:translateX(160px);
  transition:opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1);
}
.hero-photo.reveal.in{ opacity:.92; transform:none; }
@media(max-width:1150px){ .hero-photo{ display:none; } }
@media(max-width:1400px){ .hero-photo-3{ display:none; } }
.hero-content{ position:relative; z-index:2; max-width:none; width:100%; margin-top:210px; }
.hero .eyebrow{ color:var(--primary); font-size:.5rem; }
.hero .eyebrow::before{ background:var(--primary); }
.hero h1{ font-size:clamp(1.44rem, 4.13vw, 3.91rem); max-width:1440px; color:#fff; }
.hero p.lead{ font-family:var(--font-body); font-size:clamp(.73rem,1.18vw,.96rem); color:#c7c5c6; max-width:920px; margin-bottom:2.2rem; font-weight:400; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
@media(max-width:640px){
  .hero-actions{ gap:.6rem; }
  .hero-actions .btn{ padding:11px 24px; font-size:.67rem; }
  .hero-actions .btn-live{ padding:10px 18px; font-size:.6rem; gap:.45em; }
  .hero-actions .live-dot{ width:6px; height:6px; }
}
.hero .btn-outline{ border-color:rgba(255,255,255,.32); color:#fff; }
.hero .btn-outline:hover{ background:#fff; color:var(--ink); border-color:#fff; }

@media(max-width:980px){
  /* mobile hero copy — eyebrow, headline, lead — scaled up 2.5x, lead reduced 25% after, all reduced 30% after that */
  .hero .eyebrow{ font-size:.875rem; }
  .hero h1{ font-size:2.52rem; }
  .hero p.lead{ font-size:.72rem; }
  .hero-content{ margin-top:-10px; }
}
.hero-strip{
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  border-top:1px solid rgba(255,255,255,.14); background:rgba(14,18,22,.6); backdrop-filter:blur(10px);
  padding:18px 0;
}
.hero-strip .container{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:space-between; }
.marquee-tag{ display:flex; align-items:center; gap:.7rem; font-size:.82rem; color:#c7c5c6; }
.marquee-tag strong{ color:#fff; font-weight:700; }
.pulse-dot{ width:8px; height:8px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 0 rgba(0,183,227,.6); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(0,183,227,.45);} 70%{box-shadow:0 0 0 10px rgba(0,183,227,0);} 100%{box-shadow:0 0 0 0 rgba(0,183,227,0);} }

/* ---- YouTube "LIVE NOW" badge (homepage hero) ---- */
.btn-live{
  display:inline-flex; align-items:center; gap:.6em;
  padding:14px 26px; border-radius:100px; background:#e0273c; color:#fff; border:none;
  font-family:var(--font-body); font-weight:700; font-size:.85rem; letter-spacing:.03em; text-transform:uppercase;
  transition:transform .2s var(--ease-out), background .2s ease; cursor:pointer;
}
.btn-live:hover{ background:#c01f32; transform:translateY(-2px); }
.btn-live:active{ transform:scale(.97); }
.live-dot{ width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.6); animation:pulse-live 1.4s infinite; }
@keyframes pulse-live{ 0%{box-shadow:0 0 0 0 rgba(255,255,255,.55);} 70%{box-shadow:0 0 0 9px rgba(255,255,255,0);} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0);} }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }

/* ---------- sections ---------- */
section{ padding:20px 0; position:relative; }
.section-head{ max-width:760px; margin-bottom:3rem; }
.section-head h2{ font-size:clamp(2rem,4vw,3.2rem); }
.section-head p{ font-family:var(--font-body); color:var(--dim); font-size:1.05rem; }

.mission-head{ max-width:920px; }
.mission-head h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.22; }
.mission-word{ color:var(--primary); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
@media(max-width:900px){ .split{ grid-template-columns:1fr; gap:2.5rem; } }

.media-frame{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); display:block; }
.media-frame img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; transition:transform .6s ease; }
.media-frame:hover img{ transform:scale(1.05); }
.media-frame::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.4)); }

/* compact ministry cards (ministries page) */
.ministry-card{
  display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; scroll-margin-top:150px; text-decoration:none; color:inherit;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.ministry-card:hover{ transform:translateY(-5px); border-color:var(--primary); box-shadow:0 18px 36px -22px rgba(14,18,22,.2); }
.ministry-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.ministry-card-body{ padding:1.6rem 1.7rem 1.8rem; }
.ministry-card-body h3{ font-size:1.15rem; margin-bottom:.5rem; letter-spacing:-0.02em; color:var(--ink); }
.ministry-card-body p{ font-family:var(--font-body); color:var(--dim); font-size:.88rem; margin:0 0 1rem; line-height:1.55; }
.ministry-card-link{ display:inline-flex; align-items:center; gap:.4em; font-family:var(--font-body); font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--primary-2); }
.ministry-card:hover .ministry-card-link{ color:var(--primary); }
.ministry-card-link svg{ width:13px; height:13px; transition:transform .3s ease; }
.ministry-card:hover .ministry-card-link svg{ transform:translateX(4px); }

/* pillar / feature cards */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; }
@media(max-width:900px){ .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr; } }

.card{
  background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:2.2rem; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.card:hover{ transform:translateY(-6px); border-color:var(--primary); box-shadow:0 20px 40px -22px rgba(14,18,22,.18); }
.card .num{ font-family:var(--font-head); font-weight:700; font-size:2.6rem; letter-spacing:-0.04em; color:var(--primary); margin-bottom:.6rem; display:block; }
.card h3{ font-size:1.25rem; margin-bottom:.6rem; letter-spacing:-0.03em; }
.card p{ font-family:var(--font-body); color:var(--dim); font-size:.95rem; margin:0; }

.tag-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.tag{ font-family:var(--font-body); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; padding:6px 14px; border-radius:100px; border:1px solid var(--line); color:var(--dim); }
.tag.on{ color:var(--ink); background:var(--primary); border-color:transparent; }

/* leadership */
.leader-card{ display:grid; grid-template-columns:180px 1fr; gap:1.4rem; align-items:center; }
.leader-card img{ width:180px; height:180px; object-fit:cover; border-radius:16px; border:1px solid var(--line); }
.leader-card h3{ margin-bottom:.2rem; }
.leader-role{ font-family:var(--font-body); color:var(--primary-2); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin-bottom:.6rem; }
@media(max-width:520px){ .leader-card{ grid-template-columns:1fr; } .leader-card img{ width:100%; height:220px; } }

/* CTA band */
.cta-band{ position:relative; border-radius:24px; overflow:hidden; padding:5rem 3rem; text-align:center;
  background:var(--dark); color:#fff;
}
.cta-band .eyebrow{ color:var(--primary); justify-content:center; }
.cta-band .eyebrow::before{ background:var(--primary); }
.cta-band h2{ font-size:clamp(1.9rem,4vw,3rem); max-width:800px; margin:0 auto .8rem; color:#fff; }
.cta-band p{ font-family:var(--font-body); color:#c7c5c6; max-width:560px; margin:0 auto 2rem; }
.cta-actions{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
.cta-band .btn-outline{ border-color:rgba(255,255,255,.32); color:#fff; }
.cta-band .btn-outline:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* forms */
.form-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:2.6rem; }
.field{ margin-bottom:1.3rem; }
.field label{ font-family:var(--font-body); display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--dim); margin-bottom:.55rem; }
.field input, .field select, .field textarea{
  width:100%; background:var(--bg); border:1px solid var(--line); color:var(--ink);
  font-family:var(--font-body); border-radius:10px; padding:13px 16px; font-size:.95rem; transition:border-color .25s ease, box-shadow .25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,183,227,.15);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media(max-width:600px){ .field-row{ grid-template-columns:1fr; } }
.checkbox-group{ display:flex; flex-direction:column; gap:.7rem; }
.checkbox-option{ display:flex; align-items:flex-start; gap:.7rem; padding:12px 14px; border:1px solid var(--line); border-radius:10px; cursor:pointer; transition:border-color .2s ease, background .2s ease; }
.checkbox-option:hover{ border-color:var(--primary); }
.checkbox-option input{ margin-top:3px; accent-color:var(--primary); width:16px; height:16px; }
.checkbox-option span{ font-family:var(--font-body); font-size:.9rem; color:var(--ink); }
.checkbox-option small{ display:block; color:var(--dim); font-size:.78rem; margin-top:2px; }

.success-msg{
  display:none; flex-direction:column; align-items:flex-start; gap:.4rem; padding:16px 20px; border-radius:12px;
  font-family:var(--font-body);
  background:rgba(0,183,227,.1); border:1px solid rgba(0,183,227,.35); color:var(--primary-2); font-size:.9rem; margin-top:1.2rem;
}
.success-msg.show{ display:flex; }
.cal-add-wrap{ display:flex; align-items:center; flex-wrap:wrap; }

/* belief teaser pills (home page) */
.belief-teaser{ display:flex; flex-wrap:wrap; gap:.9rem; }
.belief-teaser-item{
  display:flex; align-items:center; gap:.6rem; padding:.65rem 1.1rem 0.65rem .8rem;
  border:1px solid var(--line); border-radius:100px; background:var(--surface);
  font-family:var(--font-body); font-weight:700; font-size:.82rem; color:var(--ink);
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.belief-teaser-item:hover{ border-color:var(--primary); background:rgba(0,183,227,.07); transform:translateY(-2px); }
.belief-teaser-icon{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:rgba(0,183,227,.12); color:var(--primary); flex:0 0 auto; }
.belief-teaser-icon svg{ width:15px; height:15px; }

/* interactive statement-of-faith accordion (beliefs page) */
.belief-accordion{ display:flex; flex-direction:column; gap:1rem; }
.belief-item{
  position:relative; overflow:hidden; display:flex; align-items:center; gap:1.5rem;
  padding:1.5rem 3.4rem 1.5rem 1.6rem; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); cursor:pointer; isolation:isolate;
  transition:padding .4s ease, border-color .35s ease, background .4s ease, box-shadow .4s ease, transform .3s ease;
}
.belief-item:hover{ transform:translateY(-3px); border-color:rgba(0,183,227,.4); box-shadow:0 16px 34px -24px rgba(14,18,22,.28); }
.belief-item.open{
  padding:2.3rem 3.4rem 2.3rem 1.6rem; border-color:var(--primary);
  background:linear-gradient(135deg, rgba(0,183,227,.09), rgba(0,183,227,.02));
  box-shadow:0 22px 46px -22px rgba(0,183,227,.32);
}
.belief-item::after{
  content:attr(data-num); position:absolute; right:1.2rem; top:50%; z-index:0;
  transform:translateY(-50%) scale(.85); font-family:var(--font-head); font-weight:800;
  font-size:3rem; line-height:1; color:rgba(0,183,227,.08); pointer-events:none;
  transition:font-size .4s ease, color .4s ease, transform .4s ease;
}
.belief-item.open::after{ font-size:5.2rem; color:rgba(0,183,227,.15); transform:translateY(-50%) scale(1); }
.belief-icon{
  position:relative; z-index:1; flex:0 0 auto; width:54px; height:54px; border-radius:50%;
  background:rgba(0,183,227,.1); color:var(--primary); display:flex; align-items:center; justify-content:center;
  transition:background .35s ease, color .35s ease, transform .35s ease;
}
.belief-icon svg{ width:24px; height:24px; }
.belief-item.open .belief-icon{ background:var(--primary); color:#fff; transform:scale(1.08) rotate(-6deg); }
.belief-text{ position:relative; z-index:1; flex:1; font-family:var(--font-body); font-size:1rem; color:var(--ink); transition:font-size .35s ease; }
.belief-text strong{ font-family:var(--font-head); letter-spacing:-0.01em; }
.belief-item.open .belief-text{ font-size:1.1rem; }
.belief-caret{
  position:relative; z-index:1; flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--dim);
  transition:transform .4s ease, background .35s ease, border-color .35s ease, color .35s ease;
}
.belief-caret svg{ width:15px; height:15px; }
.belief-item.open .belief-caret{ transform:rotate(90deg); background:var(--primary); border-color:var(--primary); color:#fff; }
@media(max-width:600px){ .belief-item{ padding:1.3rem 3rem 1.3rem 1.2rem; gap:1rem; } .belief-item.open{ padding:1.8rem 3rem 1.8rem 1.2rem; } .belief-icon{ width:44px; height:44px; } }

/* ---- FAQ accordion: question always visible, answer hidden until clicked ---- */
.faq-accordion{ display:flex; flex-direction:column; gap:1rem; }
.faq-item{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.faq-item:hover{ border-color:rgba(0,183,227,.4); }
.faq-item.open{ border-color:var(--primary); box-shadow:0 16px 34px -24px rgba(0,183,227,.28); }
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.4rem 1.6rem; background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--font-body); font-weight:700; font-size:1rem; color:var(--ink);
}
.faq-caret{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--dim);
  transition:transform .3s ease, background .3s ease, border-color .3s ease, color .3s ease;
}
.faq-item.open .faq-caret{ transform:rotate(90deg); background:var(--primary); border-color:var(--primary); color:#fff; }
.faq-answer{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .4s ease, opacity .3s ease, padding .4s ease;
  padding:0 1.6rem;
}
.faq-answer p{ font-family:var(--font-body); color:var(--dim); font-size:.95rem; line-height:1.6; margin:0 0 1.4rem; }
.faq-item.open .faq-answer{ max-height:260px; opacity:1; padding:0 1.6rem; }

/* ---- serve/team photo tiles (Join A Service Team page) ---- */
a.serve-tile{ display:block; color:inherit; text-decoration:none; transition:transform .3s ease; }
a.serve-tile:hover{ transform:translateY(-5px); }
.serve-tile-media{ overflow:hidden; border-radius:10px; margin-bottom:1.4rem; }
.serve-tile-media img{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
  transition:transform .55s cubic-bezier(.16,.8,.24,1);
}
.serve-tile:hover .serve-tile-media img{ transform:scale(1.08); }
.serve-tile h3{ font-size:1.3rem; letter-spacing:-0.02em; margin-bottom:.6rem; color:var(--ink); }
.serve-tile p{ font-family:var(--font-body); color:var(--dim); font-size:.92rem; line-height:1.65; margin:0; }

/* events */
.filter-bar{ display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.filter-chip{ font-family:var(--font-body); padding:10px 22px; border-radius:100px; border:1px solid var(--line); font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); transition:background .2s ease-out, border-color .2s ease-out, color .2s ease-out; }
.filter-chip.active, .filter-chip:hover{ color:var(--ink); background:var(--primary); border-color:transparent; }

.event-card{
  position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  background:var(--surface); display:grid; grid-template-columns:220px 1fr auto; gap:1.6rem; align-items:center; padding:1.6rem;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
  cursor:pointer;
}
.event-card:hover{ transform:translateY(-4px); border-color:var(--primary); background:rgba(0,183,227,.06); box-shadow:0 16px 34px -22px rgba(14,18,22,.2); }
.event-date{ text-align:center; background:var(--bg); border-radius:12px; padding:1rem; border:1px solid var(--line); }
.event-date .d{ font-family:var(--font-head); font-weight:700; font-size:2.4rem; letter-spacing:-0.04em; color:var(--primary-2); line-height:1; }
.event-date .d.d-range{ font-size:1.55rem; letter-spacing:-0.02em; }
.event-date .m{ font-family:var(--font-body); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.event-info h3{ margin-bottom:.35rem; font-size:1.3rem; }
.event-meta{ font-family:var(--font-body); display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.82rem; color:var(--dim); margin-bottom:.5rem; }
.event-meta span{ display:flex; align-items:center; gap:.4rem; }
.seats{ font-family:var(--font-body); font-size:.78rem; color:var(--primary-2); font-weight:700; }
@media(max-width:800px){ .event-card{ grid-template-columns:1fr; text-align:left; } .event-date{ width:110px; } }

/* modal */
.modal-overlay{
  position:fixed; inset:0; background:rgba(14,18,22,.6); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; z-index:2000; padding:20px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease-out, visibility .25s ease-out;
}
.modal-overlay.open{ opacity:1; visibility:visible; pointer-events:auto; }
.modal{
  width:100%; max-width:560px; max-height:88vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:20px; padding:2.4rem; position:relative;
  box-shadow:0 30px 60px -20px rgba(14,18,22,.35);
  opacity:0; transform:translateY(16px) scale(.96);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.modal-overlay.open .modal{ opacity:1; transform:none; }
.modal-close{ position:absolute; top:18px; right:18px; background:none; border:none; color:var(--dim); font-size:1.4rem; }
.modal-close:hover{ color:var(--ink); }
.modal h3{ font-size:1.6rem; margin-bottom:.3rem; }
.modal .modal-sub{ font-family:var(--font-body); color:var(--dim); font-size:.9rem; margin-bottom:1.6rem; }
.modal-live{ max-width:min(94vw, 1400px); width:94vw; padding:1.6rem; }
.modal-live h3{ display:flex; align-items:center; gap:.6em; margin-left:calc(-8px - .6em); }
.modal-live h3 .live-dot{ background:#e0273c; box-shadow:0 0 0 0 rgba(224,39,60,.55); }
.modal-live h3 .live-dot{ animation:pulse-live-red 1.4s infinite; }
@keyframes pulse-live-red{ 0%{box-shadow:0 0 0 0 rgba(224,39,60,.55);} 70%{box-shadow:0 0 0 9px rgba(224,39,60,0);} 100%{box-shadow:0 0 0 0 rgba(224,39,60,0);} }
.modal-super-sunday{
  padding:2.2rem; overflow:hidden; max-width:min(94vw, 1200px); width:94vw;
  background:radial-gradient(120% 140% at 15% 10%, #d7f3f7 0%, #f3fbfc 45%, #ffffff 75%);
  border-radius:32px; border:none;
}
.modal-super-sunday .modal-close{
  background:rgba(255,255,255,.85); color:var(--ink); border:1px solid var(--line);
  border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  top:18px; right:18px; z-index:2; font-size:1rem; box-shadow:0 6px 16px -6px rgba(14,18,22,.25);
}
.modal-super-sunday .modal-close:hover{ background:#fff; color:var(--ink); }
.ss-visual{ border-radius:22px; overflow:hidden; box-shadow:0 24px 48px -20px rgba(14,18,22,.35); }
.super-sunday-flyer{ display:block; width:100%; height:auto; }
.ss-actions{ display:flex; gap:1.2rem; flex-wrap:wrap; align-items:center; justify-content:center; padding-top:1.8rem; }
.btn-pill{ border-radius:999px; padding:.9rem 2.2rem; font-weight:700; }
.ss-later{ background:none; border:none; cursor:pointer; color:var(--dim); font-family:var(--font-body); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; }
.ss-later:hover{ color:var(--ink); }
.live-video-frame{ position:relative; width:100%; aspect-ratio:16/9; max-height:82vh; border-radius:12px; overflow:hidden; background:#000; }
.live-video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* next steps (interactive clickable cards) */
.next-steps{ perspective:1400px; }
.next-step-card{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:1rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:2.4rem 2.2rem 2.2rem; text-decoration:none; will-change:transform;
  transition:transform .35s ease, box-shadow .4s ease, border-color .4s ease;
}
.next-step-card::after{
  content:''; position:absolute; top:-50%; right:-50%; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,183,227,.22), transparent 70%);
  opacity:0; transition:opacity .45s ease; pointer-events:none;
}
.next-step-card:hover{ box-shadow:0 30px 60px -26px rgba(0,183,227,.4); border-color:var(--primary); }
.next-step-card:hover::after{ opacity:1; }
.next-step-icon{
  position:relative; z-index:1; width:58px; height:58px; border-radius:50%; flex:0 0 auto;
  background:rgba(0,183,227,.1); color:var(--primary); display:flex; align-items:center; justify-content:center;
  transition:background .4s ease, color .4s ease, transform .4s ease;
}
.next-step-icon svg{ width:26px; height:26px; }
.next-step-card:hover .next-step-icon{ background:var(--primary); color:#fff; transform:scale(1.12) rotate(-8deg); }
.next-step-card h3{ position:relative; z-index:1; font-size:1.3rem; margin:0; letter-spacing:-0.02em; color:var(--ink); }
.next-step-card p{ position:relative; z-index:1; font-family:var(--font-body); color:var(--dim); font-size:.95rem; margin:0; flex:1; }
.next-step-arrow{
  position:relative; z-index:1; width:38px; height:38px; border-radius:50%; align-self:flex-start;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--dim);
  transition:background .25s ease-out, border-color .25s ease-out, color .25s ease-out, transform .25s ease-out;
}
.next-step-arrow svg{ width:16px; height:16px; }
.next-step-card:hover .next-step-arrow{ background:var(--primary); border-color:var(--primary); color:#fff; transform:translateX(6px); }

/* stats strip */
.stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.stat-strip .stat b{ display:block; font-family:var(--font-head); font-weight:700; font-size:2.8rem; letter-spacing:-0.04em; color:var(--primary); }
.stat-strip .stat span{ font-family:var(--font-body); color:var(--dim); font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; }
@media(max-width:700px){ .stat-strip{ grid-template-columns:repeat(2,1fr); } }

/* footer */
footer{ background:var(--dark); color:#fff; padding:70px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; margin-bottom:3rem; }
@media(max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ font-family:var(--font-head); font-weight:700; font-size:1.15rem; letter-spacing:-0.03em; color:#8b8688; margin-bottom:1.2rem; text-transform:none; }
.footer-grid ul li{ margin-bottom:.7rem; }
.footer-grid ul a{ font-family:var(--font-body); font-weight:600; color:#d8d6d7; font-size:.92rem; transition:color .2s ease; }
.footer-grid ul a:hover{ color:var(--primary); }
.footer-brand p{ font-family:var(--font-body); color:#a5a2a3; font-size:.9rem; max-width:320px; }
.socials{ display:flex; gap:.8rem; margin-top:1.2rem; }
.socials a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.18); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.85rem; transition:background .2s ease-out, color .2s ease-out, border-color .2s ease-out; }
.socials a:hover{ background:var(--primary); color:var(--ink); border-color:transparent; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; border-top:1px solid rgba(255,255,255,.14); padding-top:1.6rem; font-family:var(--font-body); font-size:.8rem; color:#8b8688; }

/* plan-a-visit page: "what to expect" cards */
.expect-card{ transition:transform .35s ease; }
.expect-card .media-frame{ margin-bottom:1.4rem; }
.expect-card .media-frame img{ aspect-ratio:3/4; }
.expect-card:hover{ transform:translateY(-6px); }
.expect-card h3{ font-size:1.3rem; margin-bottom:.6rem; letter-spacing:-0.02em; }
.expect-card p{ font-family:var(--font-body); color:var(--dim); font-size:.95rem; margin:0; }

/* plan-a-visit page: "all ages" panel */
.all-ages-panel{ background:var(--surface-2); border-radius:28px; padding:clamp(2.4rem,5vw,4.5rem) clamp(1.6rem,5vw,4.5rem); }
.all-ages-panel > .eyebrow{ margin-bottom:.6rem; }
.all-ages-panel h2.panel-title{ font-size:clamp(2.2rem,5vw,3.6rem); margin-bottom:3rem; }
.age-row{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; padding:2.6rem 0; border-top:1px solid var(--line); }
.age-row:first-of-type{ border-top:none; padding-top:0; }
.age-range{ font-family:var(--font-body); color:var(--dim); font-size:.85rem; margin-bottom:1rem; }
.age-row h3{ font-size:1.7rem; margin-bottom:.2rem; letter-spacing:-0.03em; }
.age-row p{ font-family:var(--font-body); color:var(--dim); font-size:.95rem; margin-bottom:1.4rem; }
.age-row .media-frame img{ aspect-ratio:4/3; }
@media(max-width:900px){ .age-row{ grid-template-columns:1fr; } .age-row .media-frame{ order:-1; } }

/* page hero (interior pages) */
.page-hero{ padding:170px 0 70px; position:relative; background:var(--bg); }
.page-hero h1{ font-size:clamp(2.4rem,5.5vw,4.6rem); }
.breadcrumb{ font-family:var(--font-body); color:var(--dim); font-size:.8rem; margin-bottom:1rem; }
.breadcrumb a:hover{ color:var(--primary-2); }

.quote-block{ font-family:var(--font-head); border-left:3px solid var(--primary); padding-left:1.6rem; font-size:1.5rem; font-weight:700; letter-spacing:-0.03em; color:var(--ink); margin:2rem 0; }

/* ---- leadership carousel (Our Leadership page) ---- */
.leader-hero{ padding-bottom:10px; }
.leader-hero-title{ font-size:clamp(3.2rem,7vw,5.6rem); margin:0; }
.leader-carousel{ background:var(--bg-soft); border-radius:28px; padding:64px; }
.leader-slide{ display:none; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.leader-slide.active{ display:grid; }
.leader-slide-text .eyebrow{ margin-bottom:1.2rem; }
.leader-slide-text h2{ font-size:clamp(1.8rem,2.6vw,2.5rem); margin-bottom:1.2rem; }
.leader-slide-text p{ color:var(--dim); font-size:1rem; line-height:1.75; max-width:480px; margin:0 0 2rem; }
.leader-slide-media{ border-radius:20px; overflow:hidden; }
.leader-slide-media img{ width:100%; aspect-ratio:16/11; object-fit:cover; display:block; }
.leader-carousel-nav{ display:flex; gap:14px; justify-content:flex-end; margin-top:48px; }
.leader-nav-btn{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:transparent; display:flex; align-items:center; justify-content:center; color:var(--ink); cursor:pointer; transition:background .2s ease, color .2s ease, opacity .2s ease; }
.leader-nav-btn:hover:not(:disabled){ background:var(--ink); color:#fff; border-color:var(--ink); }
.leader-nav-btn:disabled{ opacity:.3; cursor:default; }
.leader-nav-btn svg{ width:18px; height:18px; }
@media(max-width:900px){
  .leader-carousel{ padding:32px 24px; border-radius:20px; }
  .leader-slide{ grid-template-columns:1fr; gap:24px; }
  .leader-slide-media{ order:-1; }
  .leader-slide-text p{ max-width:none; }
}

@media(max-width:980px){
  nav.primary-nav{ display:none; }
  .nav-cta{ display:none; }
  .nav-right{ margin-left:auto; }
  .menu-toggle > span:not(.bars){ display:none; }
  .menu-toggle{ gap:0; padding:8px; }

  /* full logo shown on mobile when menu is closed; icon-only once the menu opens (to make room for search) */
  header.site-header.menu-open .brand-full{ display:none; }
  header.site-header.menu-open .brand-icon{ display:block; height:30px; }
  .nav-search{ margin-left:.8rem; max-width:none; }
}