:root {
  --occ-ivory: #F7F4ED;
  --occ-white: #FCFBF8;
  --occ-sea: #345d64;
  --occ-brown-gray: #736B60;
  --occ-charcoal: #272725;
  --occ-cardboard: #c59c71;
  --occ-gold: #C8A76B;
  --occ-border: rgba(39,39,37,.14);
  --occ-shadow: 0 14px 32px rgba(39,39,37,.08);
  --occ-radius: 10px;
  --occ-wrap: 1180px;
  --occ-body-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --occ-display-font: "OCC Arkibal", "Courier New", ui-monospace, monospace;
  --occ-script-font: "OCC Requited", "Brush Script MT", "Segoe Script", cursive;
}

html { scroll-behavior: smooth; }
body.occ-site-active {
  margin: 0;
  background: var(--occ-white);
  color: var(--occ-charcoal);
  font-family: var(--occ-body-font);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
body.occ-site-active * { box-sizing: border-box; }
body.occ-site-active a { color: var(--occ-sea); text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.occ-site-active a:hover { color: var(--occ-charcoal); }
body.occ-site-active img { max-width: 100%; height: auto; }

/* Suppress the active theme's shell; OCC supplies its own header/footer. */
body.occ-site-active #masthead,
body.occ-site-active #colophon,
body.occ-site-active .site-header:not(.occ-site-header),
body.occ-site-active .site-footer:not(.occ-site-footer) { display: none !important; }
body.occ-site-active .content-container.site-container,
body.occ-site-active .site-container,
body.occ-site-active .content-area,
body.occ-site-active .site-main { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
body.occ-site-active .entry-content-wrap { padding: 0 !important; margin: 0 !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important; }
body.occ-site-active .entry-header,
body.occ-site-active .page-header { display: none !important; }
body.occ-site-active .entry-content { margin: 0 !important; }

.occ-wrap { width: min(calc(100% - 40px), var(--occ-wrap)); margin: 0 auto; }
.occ-reading-width { max-width: 850px; }
.occ-section { padding: 84px 0; }
.occ-soft-section { background: var(--occ-ivory); border-top: 1px solid var(--occ-border); border-bottom: 1px solid var(--occ-border); }

.occ-page h1,
.occ-page h2,
.occ-page h3,
.occ-site-header,
.occ-site-footer h2 {
  font-family: var(--occ-display-font);
  color: var(--occ-charcoal);
  letter-spacing: -.025em;
  line-height: 1.12;
  margin-top: 0;
}
.occ-page h1 { font-size: clamp(2.7rem, 6vw, 5.5rem); margin-bottom: 24px; }
.occ-page h2 { font-size: clamp(2rem, 3.8vw, 3.5rem); margin-bottom: 22px; }
.occ-page h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); margin-bottom: 12px; }
.occ-page p { font-size: 1.07rem; margin: 0 0 1.15em; }
.occ-rich-copy p, .occ-history-copy p { margin-bottom: 1.45em; }
.occ-page small { color: var(--occ-brown-gray); font-size: .87em; }

.occ-eyebrow {
  font-family: var(--occ-display-font);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--occ-sea);
  font-weight: 700;
  font-size: .83rem !important;
  margin-bottom: 12px !important;
}
.occ-script-accent {
  font-family: var(--occ-script-font);
  color: var(--occ-cardboard);
  font-size: clamp(2rem, 4vw, 3.4rem) !important;
  line-height: 1;
  margin-bottom: 10px !important;
}
.occ-script-signature {
  font-family: var(--occ-script-font);
  color: var(--occ-sea);
  font-size: 2.8rem !important;
  line-height: 1;
}

.occ-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border: 2px solid var(--occ-sea);
  border-radius: 6px;
  background: var(--occ-sea);
  color: white !important;
  font-family: var(--occ-display-font);
  font-size: .98rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.occ-button:hover { transform: translateY(-1px); background: #294b51; color: white !important; }
.occ-button-secondary { background: transparent; color: var(--occ-sea) !important; }
.occ-button-secondary:hover { background: var(--occ-sea); color: white !important; }
.occ-text-link { font-family: var(--occ-display-font); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }

/* Header */
.occ-site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(252,251,248,.98);
  border-bottom: 1px solid var(--occ-border);
  backdrop-filter: blur(8px);
}
.admin-bar .occ-site-header { top: 32px; }
.occ-header-inner {
  width: min(calc(100% - 32px), 1240px);
  min-height: 82px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.occ-brand { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.occ-brand img { width: 176px; max-height: 62px; object-fit: contain; object-position: left center; }
.occ-primary-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.occ-primary-nav > a { color: var(--occ-charcoal) !important; font-size: .92rem; font-weight: 600; text-decoration: none !important; }
.occ-primary-nav > a:hover { color: var(--occ-sea) !important; }
.occ-primary-nav .occ-nav-cta { padding: 10px 14px; border: 1px solid var(--occ-sea); border-radius: 5px; color: var(--occ-sea) !important; }
.occ-primary-nav .occ-nav-cta:hover { background: var(--occ-sea); color: white !important; }
.occ-menu-toggle { display: none; background: transparent; border: 0; color: var(--occ-charcoal); font: inherit; cursor: pointer; }
.occ-menu-bars { width: 24px; display: inline-flex; flex-direction: column; gap: 4px; margin-left: 8px; }
.occ-menu-bars span { height: 2px; background: currentColor; width: 100%; display: block; }

/* Hero */
.occ-home-hero { background: var(--occ-ivory); border-bottom: 1px solid var(--occ-border); padding: 74px 0 68px; }
.occ-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 52px; align-items: center; }
.occ-hero-copy { padding: 16px 0; }
.occ-hero-lede { font-size: clamp(1.14rem, 1.8vw, 1.38rem) !important; max-width: 700px; color: #4c4a46; }
.occ-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 28px; }
.occ-service-summary { display: flex; gap: 18px 26px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--occ-border); color: var(--occ-brown-gray); font-size: .95rem; }
.occ-service-summary span { display: flex; flex-direction: column; gap: 2px; }
.occ-service-summary strong { color: var(--occ-charcoal); }
.occ-hero-image { position: relative; }
.occ-hero-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--occ-border); box-shadow: var(--occ-shadow); }
.occ-image-note { position: absolute; left: 18px; bottom: 18px; background: rgba(252,251,248,.94); padding: 10px 12px; border: 1px solid var(--occ-border); font-size: .86rem; font-weight: 600; }

.occ-page-hero { padding: 72px 0 60px; background: var(--occ-sea); color: white; border-bottom: 8px solid var(--occ-gold); }
.occ-page-hero h1, .occ-page-hero .occ-script-accent { color: white; }
.occ-page-hero .occ-script-accent { opacity: .9; }
.occ-page-hero-lede { color: rgba(255,255,255,.86); font-size: 1.15rem !important; }

/* Content layouts */
.occ-two-column { display: grid; grid-template-columns: .75fr 1.25fr; gap: 48px; align-items: start; }
.occ-two-column-balanced { grid-template-columns: 1fr 1fr; align-items: center; }
.occ-pastor-grid { display: grid; grid-template-columns: minmax(280px, .8fr) 1.5fr; gap: 54px; align-items: center; }
.occ-pastor-photo img { width: 100%; max-width: 420px; display: block; border: 1px solid var(--occ-border); box-shadow: var(--occ-shadow); }
.occ-photo-text-grid { display: grid; grid-template-columns: .85fr 1.4fr; gap: 48px; align-items: start; }
.occ-photo-stack { display: grid; gap: 18px; }
.occ-photo-stack img { width: 100%; border: 1px solid var(--occ-border); }
.occ-feature-image { width: 100%; display: block; border: 1px solid var(--occ-border); box-shadow: var(--occ-shadow); }
.occ-wide-copy { max-width: 920px; margin: 42px auto 0; text-align: center; }

.occ-inspo-panel { padding: 40px; margin-top: 46px; border: 1px solid rgba(197,156,113,.55); background: #fffaf1; position: relative; }
.occ-inspo-label { display: inline-block; margin-bottom: 20px; padding: 6px 10px; background: var(--occ-charcoal); color: white; font-family: var(--occ-display-font); font-size: .73rem; letter-spacing: .08em; text-transform: uppercase; }

.occ-card-grid { display: grid; gap: 20px; }
.occ-card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.occ-card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.occ-card { background: var(--occ-white); border: 1px solid var(--occ-border); padding: 28px; box-shadow: 0 8px 20px rgba(39,39,37,.035); }
.occ-card h2, .occ-card h3 { color: var(--occ-sea); }
.occ-card p:last-child { margin-bottom: 0; }
.occ-card-number { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--occ-sea); color: white; font-family: var(--occ-display-font); font-weight: 700; margin-bottom: 14px; }
.occ-belief-list .occ-card { min-height: 180px; }
.occ-numbered-list { padding-left: 1.4em; }
.occ-numbered-list li { margin: 0 0 16px; padding-left: .4em; }

.occ-photo-story { background: var(--occ-charcoal); color: white; }
.occ-photo-story h2, .occ-photo-story .occ-eyebrow { color: white; }
.occ-photo-grid { display: grid; grid-template-columns: 1.1fr .9fr 1fr; gap: 18px; }
.occ-photo-grid figure { margin: 0; background: #1c1c1a; border: 1px solid rgba(255,255,255,.12); }
.occ-photo-grid img { width: 100%; height: 360px; object-fit: cover; display: block; }
.occ-photo-grid figure:nth-child(2) img { object-position: center 35%; }
.occ-photo-grid figcaption { padding: 12px 14px; font-family: var(--occ-display-font); color: #f5efe5; }

.occ-pastor-home { background: var(--occ-white); }
.occ-youtube-section { padding-top: 0; }
.occ-youtube-card { display: grid; grid-template-columns: 78px 1fr auto; gap: 24px; align-items: center; background: var(--occ-ivory); border: 1px solid var(--occ-border); padding: 30px; }
.occ-youtube-mark { width: 64px; height: 64px; object-fit: contain; }

.occ-final-cta { background: var(--occ-cardboard); color: var(--occ-charcoal); text-align: center; }
.occ-final-cta .occ-wrap { max-width: 850px; }
.occ-final-cta .occ-script-accent { color: var(--occ-charcoal); }

/* Event */
.occ-event-section { background: var(--occ-ivory); }
.occ-event-card { display: grid; grid-template-columns: minmax(260px, 430px) 1fr; gap: 36px; align-items: center; background: var(--occ-white); border: 1px solid var(--occ-border); padding: 24px; }
.occ-event-image img { width: 100%; display: block; }
.occ-event-date { font-family: var(--occ-display-font); color: var(--occ-sea); font-weight: 700; }

/* Leadership / lists */
.occ-leadership-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.occ-list-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.occ-name-list { list-style: none; padding: 0; margin: 0; columns: 1; }
.occ-name-list li { padding: 8px 0; border-bottom: 1px solid var(--occ-border); }

/* History */
.occ-history-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 42px; align-items: center; }
.occ-history-intro img { width: 100%; border: 1px solid var(--occ-border); }
.occ-history-copy p:first-child::first-letter { float: left; font-family: var(--occ-display-font); font-size: 4.6rem; line-height: .8; padding-right: 10px; color: var(--occ-sea); }

/* Visit */
.occ-visit-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; }
.occ-visit-times { background: var(--occ-white); padding: 30px; border: 1px solid var(--occ-border); }
.occ-time-row { display: flex; justify-content: space-between; gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--occ-border); }
.occ-time-row:last-of-type { margin-bottom: 24px; }

/* Footer */
.occ-site-footer { background: var(--occ-charcoal); color: #eee9e0; padding: 64px 0 0; }
.occ-footer-inner { width: min(calc(100% - 40px), var(--occ-wrap)); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr; gap: 36px; }
.occ-site-footer h2 { color: white; font-size: 1.15rem; margin-bottom: 16px; }
.occ-site-footer p { color: #d8d1c6; font-size: .94rem; line-height: 1.55; }
.occ-site-footer a { color: #f5efe5 !important; }
.occ-footer-brand img { width: 220px; max-height: 84px; filter: brightness(0) invert(1); opacity: .94; margin-bottom: 18px; }
.occ-social-links { display: flex; gap: 10px; margin-bottom: 20px; }
.occ-social-links a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.24); background: white; border-radius: 5px; }
.occ-social-links img { width: 28px; height: 28px; object-fit: contain; }
.occ-giving-note { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); }
.occ-footer-bottom { width: min(calc(100% - 40px), var(--occ-wrap)); margin: 44px auto 0; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 18px; font-size: .79rem; color: #bdb5aa; }

/* Focus */
.occ-site-active a:focus-visible,
.occ-menu-toggle:focus-visible { outline: 3px solid var(--occ-gold); outline-offset: 3px; }

@media (max-width: 1080px) {
  .occ-primary-nav { gap: 14px; }
  .occ-primary-nav > a { font-size: .86rem; }
  .occ-brand img { width: 150px; }
  .occ-card-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .occ-footer-inner { grid-template-columns: 1.5fr 1fr 1fr; }
  .occ-footer-inner > :last-child { grid-column: 2 / 4; }
}

@media (max-width: 900px) {
  .admin-bar .occ-site-header { top: 46px; }
  .occ-header-inner { min-height: 72px; }
  .occ-brand img { width: 146px; }
  .occ-menu-toggle { margin-left: auto; display: inline-flex; align-items: center; }
  .occ-primary-nav { position: absolute; left: 0; right: 0; top: 100%; display: none; background: var(--occ-white); border-bottom: 1px solid var(--occ-border); padding: 18px 20px 24px; flex-direction: column; align-items: stretch; gap: 0; box-shadow: 0 14px 24px rgba(39,39,37,.09); }
  .occ-primary-nav.is-open { display: flex; }
  .occ-primary-nav > a { padding: 12px 6px; border-bottom: 1px solid var(--occ-border); font-size: 1rem; }
  .occ-primary-nav .occ-nav-cta { margin-top: 12px; text-align: center; border: 1px solid var(--occ-sea); }

  .occ-hero-grid,
  .occ-two-column,
  .occ-two-column-balanced,
  .occ-pastor-grid,
  .occ-photo-text-grid,
  .occ-history-intro,
  .occ-visit-grid,
  .occ-event-card { grid-template-columns: 1fr; }
  .occ-hero-image { order: -1; }
  .occ-home-hero { padding-top: 36px; }
  .occ-photo-grid { grid-template-columns: 1fr 1fr; }
  .occ-photo-grid figure:first-child { grid-column: 1 / 3; }
  .occ-photo-grid img { height: 300px; }
  .occ-leadership-grid, .occ-list-columns { grid-template-columns: 1fr 1fr; }
  .occ-youtube-card { grid-template-columns: 64px 1fr; }
  .occ-youtube-card .occ-button { grid-column: 1 / 3; justify-self: start; }
  .occ-footer-inner { grid-template-columns: 1fr 1fr; }
  .occ-footer-inner > :last-child { grid-column: auto; }
}

@media (max-width: 620px) {
  .occ-wrap { width: min(calc(100% - 28px), var(--occ-wrap)); }
  .occ-section { padding: 62px 0; }
  .occ-page h1 { font-size: 2.9rem; }
  .occ-page h2 { font-size: 2.1rem; }
  .occ-page p { font-size: 1rem; }
  .occ-script-accent { font-size: 2.25rem !important; }
  .occ-service-summary { display: grid; grid-template-columns: 1fr; }
  .occ-hero-actions { align-items: stretch; flex-direction: column; }
  .occ-button { width: 100%; }
  .occ-inspo-panel { padding: 28px 22px; }
  .occ-card-grid-2, .occ-card-grid-4, .occ-leadership-grid, .occ-list-columns { grid-template-columns: 1fr; }
  .occ-photo-grid { grid-template-columns: 1fr; }
  .occ-photo-grid figure:first-child { grid-column: auto; }
  .occ-photo-grid img { height: 270px; }
  .occ-youtube-card { grid-template-columns: 1fr; text-align: left; }
  .occ-youtube-card .occ-button { grid-column: auto; }
  .occ-time-row { flex-direction: column; gap: 4px; }
  .occ-footer-inner { grid-template-columns: 1fr; }
  .occ-footer-bottom { flex-direction: column; }
  .occ-footer-brand img { filter: brightness(0) invert(1); }
}