/*
  DESIGN PLAN — New Hope Church (Monochrome Edition)
  ------------------------------------------------------------
  Color (Strict Black & White)
    --ink         #000000  pure black, main background / high-contrast text
    --paper       #FFFFFF  pure white, surface / light background
    --ink-soft    #121212  deep off-black for subtle contrast surfaces
    --paper-soft  #F5F5F5  subtle off-white for muted backgrounds/cards
    --line        #E5E5E5  clean hairline border on light background
    --line-dark   #262626  clean hairline border on dark background
    --muted       #666666  mid-tone gray for secondary body text

  Type
    Display: 'Fraunces' — oversized stacked headlines
    UI/Body: 'Work Sans' — clean modern sans-serif
  
  Layout
    Oversized stacked display headlines, minimal structural grids,
    pill-shaped nav CTA, high-contrast monochrome aesthetic.

  Contrast notes
    The header and footer are solid black surfaces, so every element
    that lives inside them (logo mark, nav links, toggle, buttons) is
    explicitly flipped to white/paper here rather than inheriting the
    default ink-on-paper rules meant for the rest of the page. The
    mobile nav panel drops back onto a white surface, so its own text
    is flipped back to ink within that breakpoint.
  ------------------------------------------------------------
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --ink: #000000;
  --paper: #FFFFFF;
  --ink-soft: #121212;
  --paper-soft: #F5F5F5;
  --line: #E5E5E5;
  --line-dark: #262626;
  --muted: #666666;
  --max: 1600px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Work Sans', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}

p{ margin: 0 0 1em; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- hero entrance ---------- */

@keyframes rise-in{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}

.hero-in > *{
  opacity: 0;
  animation: rise-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-in > *:nth-child(1){ animation-delay: 0.05s; }
.hero-in > *:nth-child(2){ animation-delay: 0.2s; }
.hero-in > *:nth-child(3){ animation-delay: 0.35s; }
.hero-in > *:nth-child(4){ animation-delay: 0.5s; }

@media (prefers-reduced-motion: reduce){
  .hero-in > *{ animation: none; opacity: 1; }
}

/* ---------- scroll reveal ---------- */
/* script.js adds .reveal to content below the hero, then .in once it scrolls
   into view. Without JS nothing gets the class, so everything stays visible. */

.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.in{ opacity: 1; transform: none; }

/* ---------- header / nav (black bar, white content) ---------- */

.site-header{
  background: var(--ink);
  border-bottom: 1px solid var(--line-dark);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px;
  max-width: var(--max);
  margin: 0 auto;
  gap: 24px;
}

.logo{
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: var(--ink);
}

/* header logo sits on black, footer logo already sets its own inline color */
.site-header .logo{ color: var(--paper); }

.logo .mark{
  width: 40px;
  height: 50px;
  flex: none;
  position: relative;
  top: -4px; 
}

.nav-links{
  display: flex;
  align-items: center;
  gap: 44px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
}

.nav-links a{
  color: var(--paper);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}

.nav-links a:hover{ border-color: var(--paper); }

.nav-links a.active{ border-color: var(--paper); font-weight: 600; }

.nav-right{
  display: flex;
  align-items: center;
  gap: 16px;
}

.lang-toggle{
  border: 1px solid var(--paper);
  background: transparent;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--paper);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-toggle:hover{
  background: var(--paper);
  color: var(--ink);
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Work Sans', sans-serif;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.btn:hover{ transform: translateY(-1px); }

.btn-primary{ background: var(--ink); color: var(--paper); }
.btn-primary:hover{ background: var(--ink-soft); opacity: 0.85; }

.btn-ghost{ border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover{ background: var(--ink); color: var(--paper); }

.btn-on-dark{ border-color: var(--paper); color: var(--paper); background: transparent; }
.btn-on-dark:hover{ background: var(--paper); color: var(--ink); }

/* nav buttons sit on the black header — flip both variants to stay visible */
.site-header .btn-primary{ background: var(--paper); color: var(--ink); }
.site-header .btn-primary:hover{ background: var(--paper-soft); }

.site-header .btn-ghost{ border-color: var(--paper); color: var(--paper); }
.site-header .btn-ghost:hover{ background: var(--paper); color: var(--ink); }

.nav-toggle{
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span{
  display: block;
  width: 24px;
  height: 2px;
  background: var(--paper);
  margin: 5px 0;
}

/* --------church maps--------- */
.church-item{
  display:flex; flex-direction:column; gap:4px; text-align:left;
  padding:14px 16px; border:1px solid var(--line); border-radius:4px;
  background:var(--paper); cursor:pointer; font-family:'Work Sans', sans-serif;
  transition:border-color .15s ease, background .15s ease;
}
.church-item span{ font-size:13px; color:var(--muted); }
.church-item:hover{ border-color:var(--ink); }
.church-item.active{ border-color:var(--ink); background:var(--line); }

.map-picker{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.map-frame-wrap{
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper-soft);
}

.map-frame-wrap iframe{
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
}

.church-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.church-item strong{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
}

@media (max-width: 760px){
  .map-picker{ grid-template-columns:1fr !important; }
}


.connect-cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* ---------- clickable-feel cards (visit / groups / online / events) ---------- */
#visit, #groups, #online, #events{
  cursor: pointer;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Connect page card hover lift */
#visit:hover, #groups:hover, #online:hover, #events:hover{
  border-color: var(--ink);
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

#visit:active, #groups:active, #online:active, #events:active{
  transform: translateY(-1px);
}

/* ---------- footer ---------- */

.site-footer{
  background: var(--ink);
  color: var(--paper);
  padding: 64px 0 28px;
  margin-top: 120px;
}

.footer-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-dark);
}

.footer-grid h4{
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--paper);
  margin: 0 0 14px;
}

.footer-grid ul{ list-style: none; margin: 0; padding: 0; }
.footer-grid li{ margin-bottom: 10px; font-size: 15px; }
.footer-grid a{ opacity: 0.7; transition: opacity 0.15s ease; }
.footer-grid a:hover{ opacity: 1; }

.footer-brand p{
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  max-width: 32ch;
}

.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- generic section utilities ---------- */

section{ padding: 96px 0; }
section.tight{ padding: 64px 0; }

.section-head{
  max-width: 640px;
  margin-bottom: 48px;
}

.section-head h2{ font-size: clamp(32px, 4vw, 44px); }

.section-head p{
  margin-top: 14px;
  font-size: 17px;
  color: var(--muted);
}

.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.card-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card .tag{
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.card h3{ font-size: 22px; }

.card p{ color: var(--muted); font-size: 15px; margin-bottom: 0; }

.card .btn{ margin-top: auto; align-self: flex-start; }

.art-block{
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-soft);
  border: 1px solid var(--line);
}

/* small laptops / tablets in landscape: the full nav is slightly too wide, so tighten it */
@media (min-width: 901px) and (max-width: 1100px){
  .nav-links{ gap: 26px; }
  .nav-right .btn-ghost{ display: none; }
}

/* ---------- mobile nav ---------- */

@media (max-width: 900px){
  .nav-links{
    position: fixed;
    inset: 91px 0 0 0;
    background: var(--paper);
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 32px;
    gap: 20px;
    font-size: 20px;
    display: none;
    overflow-y: auto;
  }
  .nav-links.open{ display: flex; }
  .nav-links a{ color: var(--ink); }
  .nav-links a:hover{ border-color: var(--ink); }
  .nav-links a.active{ border-color: var(--ink); }
  .nav-toggle{ display: block; }
  .nav-right .btn-ghost{ display: none; }
  .two-col, .card-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  section{ padding: 64px 0; }
}

@media (max-width: 560px){
  .wrap{ padding: 0 20px; }
  .nav{ padding: 16px 20px; gap: 12px; }
  .nav-links{ top: 83px; }
  /* not enough room for it on a phone; Connect in the menu leads to the same page */
  .nav-right .btn-primary{ display: none; }
  .connect-cards{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
}

/*GROUPS PAGE*/

/* ── Hero: light background, text left / art-block right ── */
.groups-hero { 
  padding: 96px 0;
}

.groups-hero h1 { color: var(--ink-soft) }

.groups-hero p {
  color: var(--ink-soft);
  line-height: 1.65;
}

.groups-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
}

.groups-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Group types section ── */
.group-types {
  padding: 96px 0;
  background: var(--paper);
}

.group-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 40px;
  align-items: stretch; 
  margin-top: 52px;
}

.group-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.group-card h3 {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

.group-card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}

/* ── Dark square button (group cards) ── */
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Work Sans', sans-serif;
  border-radius: 4px;
  text-decoration: none;
  align-self: flex-start;
  margin-top: 8px;
  transition: background 0.15s ease, transform 0.15s ease;
  border: none;
  cursor: pointer;
}

.btn-dark:hover {
  background: #333;
  transform: translateY(-1px);
}

/* ── Groups responsive ── */
@media (max-width: 900px) {
  .groups-hero  { padding: 64px 0; }
  .group-cards  { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

@media (max-width: 600px) {
  .groups-hero .two-col { grid-template-columns: 1fr; }
  .group-cards           { grid-template-columns: 1fr; }
  .group-types           { padding: 64px 0; }
}

/*GIVE PAGE — giving options*/

.giving{ background: var(--ink); color: var(--paper); }
.giving-in{ max-width: 860px; text-align: center; }
.giving h2, .giving h3{ color: var(--paper); }
.giving h2{ font-size: clamp(30px, 4vw, 44px); }
.giving :focus-visible{ outline-color: var(--paper); }

.giving-sub{ font-size: clamp(24px, 3vw, 32px); margin: 56px 0 24px; }

.seg{
  display: grid;
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  overflow: hidden;
  margin: 32px 0 0;
  background: var(--ink-soft);
}
.seg-2{ grid-template-columns: 1fr 1fr; }
.seg-3{ grid-template-columns: repeat(3, 1fr); margin-top: 0; }

.seg-btn{
  background: transparent;
  color: rgba(255,255,255,0.65);
  border: none;
  border-right: 1px solid var(--line-dark);
  padding: 22px 12px;
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.seg-btn:last-child{ border-right: none; }
.seg-btn:hover{ background: #1c1c1c; color: var(--paper); }
.seg-btn.active{ background: #333; color: var(--paper); }

.giving-desc{
  margin: 24px auto 0;
  max-width: 52ch;
  font-size: 18px;
  color: rgba(255,255,255,0.85);
}

/* fund toggle: show only the text that matches the chosen fund */
.giving[data-fund="tithe"] [data-fund-only="special"],
.giving[data-fund="special"] [data-fund-only="tithe"]{ display: none; }

.giving-panel{
  text-align: left;
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  background: var(--ink-soft);
  padding: 32px;
}
.giving-panel[hidden]{ display: none; }

.panel-lead{ font-size: 18px; color: var(--paper); margin-bottom: 8px; }
.panel-sub{ color: rgba(255,255,255,0.6); margin-bottom: 24px; }
.panel-note{ font-size: 14px; color: rgba(255,255,255,0.6); margin: 16px 0 0; }

.give-form .form-row{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.give-form label{ font-size: 14px; font-weight: 600; color: var(--paper); }
.give-form input, .give-form textarea, .give-form select{
  font-family: 'Work Sans', sans-serif;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
}
.give-form input::placeholder, .give-form textarea::placeholder{ color: rgba(255,255,255,0.4); }
.give-form textarea{ resize: vertical; min-height: 90px; }

/* pop-up message (built in script.js) */
.nh-popup{
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: clamp(24px, 6vw, 40px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.nh-popup::backdrop{ background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); }
.nh-popup[open]{ animation: nh-popup-in 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.nh-popup[open]::backdrop{ animation: nh-popup-fade 0.25s ease; }
@keyframes nh-popup-in{
  from{ opacity: 0; transform: translateY(18px) scale(0.97); }
  to{ opacity: 1; transform: none; }
}
@keyframes nh-popup-fade{ from{ opacity: 0; } to{ opacity: 1; } }

.nh-popup-icon{
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  margin-bottom: 20px;
}
.nh-popup h2{ font-size: clamp(26px, 6vw, 32px); }
.nh-popup-lead{ color: var(--muted); font-size: 16px; margin: 12px 0 0; overflow-wrap: anywhere; }
.nh-popup-steps{
  list-style: none;
  counter-reset: nh-step;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.nh-popup-steps li{
  counter-increment: nh-step;
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.5;
}
.nh-popup-steps li::before{
  content: counter(nh-step);
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
}
.nh-popup .btn{ margin-top: 24px; }

@media (max-width: 560px){
  .nh-popup .btn{ width: 100%; }
}
@media (prefers-reduced-motion: reduce){
  .nh-popup[open], .nh-popup[open]::backdrop{ animation: none; }
}

/* phone field: country-code dropdown + number (built in script.js) */
.phone-field{ display: flex; gap: 8px; }
.phone-field .phone-code{ flex: none; width: 104px; }
.phone-field input{ flex: 1; min-width: 0; }

.detail-list{ margin-top: 20px; border-top: 1px solid var(--line-dark); }
.detail-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-dark);
}
.detail-label{
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.55);
}
.detail-value{ display: block; font-size: 18px; font-weight: 600; word-break: break-all; }
.detail-value[data-placeholder]{ color: rgba(255,255,255,0.4); font-style: italic; font-weight: 500; }

.copy-btn{
  flex: none;
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--paper);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.copy-btn:hover:not(:disabled){ background: var(--paper); color: var(--ink); }
.copy-btn:disabled{ opacity: 0.3; cursor: not-allowed; }

.chips{ display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 24px; }
.chip{
  background: transparent;
  color: rgba(255,255,255,0.75);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 10px 20px;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chip:hover{ border-color: var(--paper); color: var(--paper); }
.chip.active{ background: var(--paper); color: var(--ink); border-color: var(--paper); }

.wallet-body{ display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: start; }
.wallet-body[hidden]{ display: none; }
.qr-box{
  aspect-ratio: 1 / 1;
  border: 2px dashed rgba(255,255,255,0.35);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
}
.wallet-body img{ width: 100%; border-radius: 12px; background: var(--paper); }
.wallet-help{ color: rgba(255,255,255,0.75); font-size: 15px; }
.wallet-info .detail-row:first-of-type{ border-top: 1px solid var(--line-dark); }

@media (max-width: 600px){
  .seg-btn{ font-size: 13px; padding: 18px 6px; }
  .giving-panel{ padding: 22px; }
  .wallet-body{ grid-template-columns: 1fr; }
  .qr-box{ max-width: 200px; }
}

.panel-lead + .wallet-body{ margin-top: 24px; }

/* PHOTO STRIP (home page) — continuous, seamless loop*/

.marquee{
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  height: clamp(220px, 38vw, 420px);
  background: var(--paper-soft);
  contain: layout paint;
  isolation: isolate;
}

.marquee-track{
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  animation: marquee-run var(--dur, 60s) linear infinite;
  animation-play-state: paused;
  opacity: 0;                       
  transition: opacity 0.1s linear;
}

.marquee.ready .marquee-track{ animation-play-state: running; opacity: 1; }
.marquee.offscreen .marquee-track{ animation-play-state: paused; }  
@keyframes marquee-run{
  from{ transform: translate3d(0, 0, 0); }
  to{ transform: translate3d(var(--shift, -50%), 0, 0); }
}

.marquee-item{
  flex: none;
  height: 100%;
  margin: 0;            
}

.marquee-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* dark hero: full-colour photos drift behind a dark gradient, text is white */
.hero-photo-section{ position: relative; overflow: hidden; background: var(--ink); }
.hero-photo-section > .wrap{ position: relative; z-index: 1; }

/* darker on the left where the text sits, lighter on the right so faces show */
.hero-photo-section::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.45) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.35) 100%);
}

.hero-photo-section h1{ color: var(--paper); }
.hero-photo-section .hero-in{ text-shadow: 0 1px 18px rgba(0,0,0,0.45); }
.hero-photo-section .btn{ text-shadow: none; }
.hero-photo-section :focus-visible{ outline-color: var(--paper); }

.hero-photo-section .btn-primary{ background: var(--paper); color: var(--ink); }
.hero-photo-section .btn-primary:hover{ background: var(--paper-soft); opacity: 1; }
.hero-photo-section .btn-ghost{ border-color: var(--paper); color: var(--paper); }
.hero-photo-section .btn-ghost:hover{ background: var(--paper); color: var(--ink); }

/* on phones the text spans the full width, so darken evenly */
@media (max-width: 900px){
  .hero-photo-section::after{
    background: linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.8) 100%);
  }
}

.marquee-bg{
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: 0;
  background: none;
  pointer-events: none;
  z-index: 0;
}

@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none !important; }
  .marquee{ overflow-x: auto; }
}