/* ==========================================================================
   St. Luke's C.O.U Ntinda Archdeaconry - shared design system
   Used by index.html and by the PHP portal layout (app/Views/layouts/site.php).
   Change tokens here only; nothing else defines the palette.
   ========================================================================== */

:root {
  /* brand - Awakenur theme: gold on deep brown, cream bands, teal accents.
     Variable names kept from the rose era so component rules need no edits. */
  --rose-700: #8a6d33;
  --rose-600: #a8823d;   /* hovers */
  --rose-500: #c29b53;   /* primary actions, icons, eyebrows */
  --rose-400: #d4b57a;
  --rose-100: #e8ded1;   /* cream buttons, borders */
  --rose-50:  #f8f5f0;   /* tinted bands */
  --teal:     #3b1f5e;   /* deep purple - date badges, feature strip, play buttons */
  --brown-900: #1c1611;  /* top bar, footer */
  --brown-800: #271f18;  /* sermons band */

  /* neutrals */
  --ink:     #1c1611;    /* headings */
  --body:    #4a443c;    /* paragraphs */
  --muted:   #6f695f;
  --surface: #ffffff;
  --line:    #e5ded3;

  --shadow-card: 0 1px 2px rgba(28, 22, 17, 0.04), 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-lift: 0 2px 6px rgba(28, 22, 17, 0.05), 0 24px 48px -24px rgba(28, 22, 17, 0.3);

  --radius:    14px;
  --radius-sm: 10px;
  --container: min(1200px, calc(100vw - 2.5rem));
  --nav-h:     80px;
  --section-y: clamp(3.5rem, 6vw, 5.5rem);
  --ease:      220ms cubic-bezier(0.22, 0.61, 0.36, 1);

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ui: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* -------------------------------------------------------------- base ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ui);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--body);
  background: var(--surface);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, iframe, svg { max-width: 100%; display: block; }
ul { list-style: none; }
section { padding: var(--section-y) 0; position: relative; }
.container { width: var(--container); margin: 0 auto; }
.band { background: var(--rose-50); }

h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); line-height: 1.16; font-weight: 600; }
h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.85rem); letter-spacing: -0.01em; }
h3 { font-size: 1.12rem; }
p { font-size: 1rem; }
.lead { font-size: 1.06rem; max-width: 58ch; }
.muted { color: var(--muted); }
strong { color: var(--ink); font-weight: 600; }

.eyebrow {
  display: block; font-family: var(--ui); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-500);
  margin-bottom: 1.1rem;
}
.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head p { margin-top: 1rem; }

/* ----------------------------------------------------------- buttons ---- */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 50px; padding: 0.8rem 1.6rem; border-radius: 999px;
  font-family: var(--ui); font-size: 0.94rem; font-weight: 600;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--rose-500); color: #fff; box-shadow: 0 10px 24px -12px rgba(224, 36, 107, 0.8); }
.btn-primary:hover { background: var(--rose-600); }
.btn-outline { border-color: var(--rose-100); color: var(--rose-500); background: #fff; }
.btn-outline:hover { border-color: var(--rose-500); }
.btn-sm { min-height: 42px; padding: 0.55rem 1.2rem; font-size: 0.87rem; }

/* ------------------------------------------------------------ header ---- */
.site-header {
  position: sticky; top: 0; z-index: 1000; background: #fff;
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--ease), border-color var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(23, 19, 32, 0.5); }
.nav-shell {
  width: var(--container); margin: 0 auto; min-height: var(--nav-h);
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1.5rem;
}
.brand { display: flex; align-items: center; gap: 0.85rem; }
.brand img { width: 62px; height: 62px; object-fit: contain; }
.brand-copy { font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.nav-links { display: flex; justify-content: center; gap: 1.9rem; font-size: 0.92rem; font-weight: 500; }
.nav-links a { position: relative; padding: 0.4rem 0; color: var(--body); transition: color var(--ease); }
.nav-links a:hover { color: var(--rose-500); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--rose-500); transform: scaleX(0); transition: transform var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.is-active { color: var(--rose-500); }
.nav-links a.is-active::after { transform: scaleX(1); }
.nav-toggle {
  display: none; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
}
.mobile-nav {
  max-height: 0; overflow: hidden; visibility: hidden; background: #fff;
  border-bottom: 1px solid var(--line); transition: max-height var(--ease);
}
.mobile-nav.is-open { visibility: visible; max-height: 560px; }
.mobile-nav nav { width: var(--container); margin: 0 auto; padding: 0.5rem 0 1.2rem; display: grid; }
.mobile-nav a { padding: 0.85rem 0.2rem; border-bottom: 1px solid var(--line); font-weight: 500; }

/* ------------------------------------------------------------ top bar ---- */
.top-bar {
  background: var(--brown-900); color: #b8ac9e; font-size: 0.8rem;
  padding: 8px 0; position: relative; z-index: 1001;
}
.top-bar::after { content: ""; display: block; clear: both; }
.top-bar-info, .top-bar-socials { display: flex; gap: 20px; align-items: center; }
.top-bar { display: flex; justify-content: space-between; align-items: center; padding-left: max(1.25rem, calc((100vw - 1200px) / 2)); padding-right: max(1.25rem, calc((100vw - 1200px) / 2)); }
.top-bar-socials { gap: 14px; }
.top-bar-socials a:hover { color: var(--rose-500); }
.top-bar i { margin-right: 4px; }

/* --------------------------------------------- theme buttons (cream) ---- */
.btn-cream {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rose-100); color: var(--brown-900);
  padding: 12px 26px; font-family: var(--ui); font-size: 0.83rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; border-radius: var(--radius);
  transition: background 0.2s, color 0.2s;
}
.btn-cream:hover { background: var(--rose-500); color: #fff; }
.btn-cream.sm { padding: 10px 20px; font-size: 0.78rem; }

/* -------------------------------------------------------------- hero ---- */
/* One dark photograph, centred serif type, one action - as in the theme.
   The type sits low rather than centred: the building's roof, cross and sky
   are the subject of the photograph, and text across the middle covered them.
   The bottom padding also clears the theme banner, which laps 40px up. */
.hero {
  position: relative; padding: 0 1.25rem clamp(4.5rem, 10vh, 7rem);
  /* Edge to edge, and the whole photograph. The box therefore takes the
     photograph's own shape exactly - 1200 x 643, the dimensions of
     assets/hero-sanctuary.webp. Any other height would either crop the roof
     and cross away or leave bars down the sides, and there is no max-height
     for the same reason: capping it would reintroduce the bars.
     Replacing the photograph with one of a different shape means changing
     this ratio to match it. */
  aspect-ratio: 1200 / 643; width: 100%; height: auto;
  display: flex; align-items: flex-end; justify-content: center; text-align: center;
  color: #fff; overflow: hidden; background: var(--brown-900);
}
.hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* No overlay. The wash existed to keep white headline text legible; with the
   text gone, the only thing on the photograph is the cream button, which
   carries its own solid background. The photograph is shown as it is. */
.hero-content h1, .hero-content p { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); }
.hero-content { position: relative; z-index: 2; max-width: 750px; }
.hero-content h1 {
  color: #fff; font-size: clamp(2.8rem, 5vw, 4.2rem); line-height: 1.1; margin-bottom: 16px;
}
.hero-content p { font-size: 1rem; color: #d8cebe; margin-bottom: 25px; }

/* ------------------------------------------- floating theme banner ---- */
.event-banner {
  width: min(1100px, var(--container));
  margin: -40px auto 0; position: relative; z-index: 10;
  background: #fff; box-shadow: var(--shadow-card); border: 1px solid #eaeaea;
  padding: 20px 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.event-badge {
  background: var(--teal); color: #fff; padding: 10px 16px; text-align: center;
  font-family: var(--display); font-weight: 700; line-height: 1.1; font-size: 1.3rem;
}
.event-badge span { display: block; font-family: var(--ui); font-size: 0.7rem; text-transform: uppercase; opacity: 0.8; letter-spacing: 1px; }
.event-info h4 { font-size: 1.25rem; color: var(--brown-900); margin-bottom: 4px; }
.event-info p { font-size: 0.82rem; color: var(--muted); }
.banner-stats { display: flex; gap: 18px; font-family: var(--display); font-size: 1.35rem; font-weight: 700; color: var(--brown-900); text-align: center; }
.banner-stats label { display: block; font-family: var(--ui); font-size: 0.66rem; text-transform: uppercase; color: var(--muted); font-weight: 600; letter-spacing: 0.5px; }

/* -------------------------------------------- quick cards under hero ---- */
.quick-cards {
  width: min(1100px, var(--container)); margin: 24px auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.quick-card {
  background: #fff; border: 1px solid #eaeaea; box-shadow: var(--shadow-card);
  padding: 18px 20px; display: flex; align-items: flex-start; gap: 14px;
}
.quick-card i { color: var(--rose-500); font-size: 1.15rem; margin-top: 3px; }
.quick-card h5 { font-family: var(--ui); font-size: 0.92rem; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.quick-card p { font-size: 0.83rem; color: var(--muted); }

/* --------------------------------------- feature cards (image-led) ---- */
.feature-grid {
  width: min(1100px, var(--container)); margin: 40px auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.feature-card { background: #fff; border: 1px solid #eaeaea; border-radius: var(--radius); overflow: hidden; display: block; color: var(--body); transition: transform var(--ease), box-shadow var(--ease); }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.feature-card img { width: 100%; height: 150px; object-fit: cover; }
.feature-card-body { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.feature-card-body h4 { font-size: 1.15rem; display: flex; align-items: center; gap: 9px; }
.feature-card-body h4 i { color: var(--rose-500); font-size: 0.9rem; }
.feature-card-body > i { color: var(--rose-500); font-size: 0.85rem; }

@media (max-width: 900px) {
  .quick-cards, .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .quick-cards, .feature-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- community ---- */
.community {
  width: min(1100px, var(--container)); margin: 0 auto;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center;
}
.community-images { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.community-images img { width: 100%; height: 240px; object-fit: cover; border-radius: var(--radius); }
.community-text h2 { margin-bottom: 16px; }
.community-text p { font-size: 0.95rem; color: var(--muted); margin-bottom: 22px; }

/* ------------------------------------------------------ sermons band ---- */
.sermons { background: var(--brown-800); color: #fff; text-align: center; }
.sermons h2 { color: #fff; margin-bottom: 6px; }
.sermons .sub { color: #b8ac9e; font-size: 0.9rem; margin-bottom: 40px; }
.sermons .video-shell { max-width: 880px; margin: 0 auto 28px; }
.gallery-band h2 { margin-bottom: 30px; text-align: center; }
.sermon-grid { width: min(1100px, var(--container)); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.sermon-card { background: #fff; color: var(--body); text-align: left; border-radius: var(--radius); overflow: hidden; display: block; }
.sermon-thumb { position: relative; height: 180px; }
.sermon-thumb img { width: 100%; height: 100%; object-fit: cover; }
.play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; background: var(--teal); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.sermon-card:hover .play-btn { background: var(--rose-500); }
.sermon-body { padding: 18px; }
.sermon-tag {
  display: inline-block; background: #111; color: #fff; font-size: 0.68rem; font-weight: 700;
  padding: 3px 8px; text-transform: uppercase; margin-bottom: 10px; letter-spacing: 0.5px;
}
.sermon-body h4 { font-size: 1.3rem; line-height: 1.25; margin-bottom: 10px; }
.sermon-meta { font-size: 0.8rem; color: var(--muted); border-top: 1px solid #eee; padding-top: 10px; display: flex; justify-content: space-between; }

/* ------------------------------------------------------------ clergy ---- */
.clergy { background: var(--rose-50); text-align: center; }
.clergy h2 { margin-bottom: 6px; }
.clergy .sub { color: var(--muted); font-size: 0.9rem; }
.clergy-grid { width: min(1100px, var(--container)); margin: 40px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.clergy-card { background: #fff; padding: 15px; border: 1px solid #eaeaea; }
.clergy-card img { width: 100%; height: 200px; object-fit: cover; margin-bottom: 12px; }
.clergy-card h4 { font-size: 1.25rem; margin-bottom: 2px; }
.clergy-card p { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }

/* --------------------------------------------------- teal feature strip -- */
.teal-strip { background: var(--teal); color: #fff; padding: 35px 0; }
.teal-grid { width: min(1100px, var(--container)); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.teal-item { display: block; padding: 6px 0; transition: transform var(--ease); }
.teal-item:hover { transform: translateY(-3px); }
.teal-item:hover h5 { color: var(--rose-400); }
.teal-item i { font-size: 1.8rem; color: var(--rose-500); margin-bottom: 10px; display: block; }
.teal-item h5 { font-family: var(--ui); font-size: 0.95rem; font-weight: 600; color: #fff; transition: color var(--ease); }

/* ------------------------------------------------------------ events ---- */
.events { width: min(1100px, var(--container)); margin: 0 auto; }
.events h2 { margin-bottom: 30px; }
.events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.event-card { background: #fff; border: 1px solid #eaeaea; overflow: hidden; display: block; color: var(--body); }
.event-card:hover h4 { color: var(--rose-600); }
.event-img { height: 160px; width: 100%; object-fit: cover; }
.event-body { padding: 16px; display: flex; gap: 15px; }
.event-date {
  background: var(--teal); color: #fff; padding: 8px 12px; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: 1.1rem; line-height: 1; height: max-content;
}
.event-date span { display: block; font-family: var(--ui); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.5px; }
.event-details h4 { font-size: 1.15rem; margin-bottom: 4px; }
.event-details p { font-size: 0.8rem; color: var(--muted); }

/* ------------------------------------------------------- help banner ---- */
.help-banner {
  width: min(1100px, var(--container)); margin: 0 auto var(--section-y);
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center;
  background: var(--rose-50); padding: 30px;
}
.help-banner img { width: 100%; height: 220px; object-fit: cover; }
.help-text h3 { font-size: 2rem; margin-bottom: 10px; }
.help-text p { font-size: 0.88rem; color: var(--muted); margin-bottom: 20px; }

/* --------------------------------------- theme homepage responsive ---- */
@media (max-width: 900px) {
  .sermon-grid, .clergy-grid, .teal-grid, .events-grid { grid-template-columns: repeat(2, 1fr); }
  .community, .help-banner { grid-template-columns: 1fr; }
  .event-banner { flex-direction: column; text-align: center; }
}
@media (max-width: 768px) {
  .top-bar { display: none; }
}
@media (max-width: 600px) {
  /* Phones keep two-up grids - a single column forces endless scrolling.
     Cards shrink instead. */
  .sermon-grid { grid-template-columns: 1fr; }
  .feature-grid, .clergy-grid, .teal-grid, .events-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .quick-cards { grid-template-columns: 1fr; gap: 10px; }
  .quick-card { padding: 12px 14px; }

  .feature-card img { height: 100px; }
  .feature-card-body { padding: 10px 12px; }
  .feature-card-body h4 { font-size: 0.9rem; gap: 6px; }

  .clergy-card img { height: 130px; }
  .clergy-card h4 { font-size: 1rem; }

  .teal-item i { font-size: 1.3rem; margin-bottom: 6px; }
  .teal-item h5 { font-size: 0.76rem; }

  .event-img { height: 110px; }
  .event-body { padding: 10px; gap: 8px; }
  .event-date { font-size: 0.9rem; padding: 6px 8px; }
  .event-details h4 { font-size: 0.95rem; }
  .event-details p { font-size: 0.72rem; }

  .banner-stats { flex-wrap: wrap; justify-content: center; gap: 14px; }

  /* the compact homepage timetable stays two-up; cards are just time + name */
  .services-grid.compact { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .services-grid.compact .service-card { padding: 0.9rem 1rem; }
  .services-grid.compact h3 { font-size: 0.92rem; }
  .services-grid.compact .service-time { font-size: 0.62rem; margin-bottom: 0.4rem; }

  /* the channel counters sit side by side under the video */
  .sermons .media-stats { grid-template-columns: repeat(2, 1fr); }
}

/* page hero for the inner PHP pages */
.page-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--rose-50), #fff 65%); padding: clamp(2.5rem, 5vw, 4rem) 0; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(224, 36, 107, 0.04) 0 1px, transparent 1px 46px);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); margin-bottom: 0.9rem; }
.page-hero p { max-width: 62ch; }

/* ------------------------------------------------------------- about ---- */
.about-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.about-grid img { width: 100%; height: clamp(280px, 30vw, 400px); object-fit: cover; border-radius: var(--radius); }
.about-grid p + p { margin-top: 0.9rem; }
.priorities { display: grid; gap: 0.55rem; margin: 1.4rem 0 1.8rem; }
.priorities li { display: flex; gap: 0.7rem; font-size: 0.96rem; }
.priorities i { color: var(--rose-500); font-size: 0.78rem; margin-top: 0.55rem; }

/* ------------------------------------------------------------- cards ---- */
/* Six narrow pillars by default; .three-up for wider cards carrying real copy.
   Never set grid-template-columns inline - an inline style outranks every
   media query below and the grid will not collapse on a phone. */
.card-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.card-row.three-up { grid-template-columns: repeat(3, 1fr); }
.card-row.three-up .pillar img { height: 200px; }
.card-row.flush { margin-top: 0; }
.pillar {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: box-shadow var(--ease), transform var(--ease);
}
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.pillar img { width: 100%; height: 132px; object-fit: cover; }
.pillar-body { padding: 1.1rem 1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.pillar h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; margin-bottom: 0.55rem; }
.pillar h3 i { color: var(--rose-500); font-size: 0.9rem; }
.pillar p { font-size: 0.86rem; line-height: 1.6; color: var(--muted); margin-bottom: 1rem; }
.pillar .go { margin-top: auto; color: var(--rose-500); font-size: 0.9rem; }
.pillar .go i { transition: transform var(--ease); }
.pillar:hover .go i { transform: translateX(4px); }

/* generic content tiles used by the inner pages */
.tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.tile-grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; box-shadow: var(--shadow-card);
}
.tile h3 { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.tile h3 i { color: var(--rose-500); font-size: 0.95rem; }
.tile p { font-size: 0.94rem; color: var(--body); }
.tile p + p { margin-top: 0.7rem; }
.stat-note {
  display: block; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line);
  font-size: 0.85rem; line-height: 1.55; color: var(--muted);
}
.stat-note strong { color: var(--rose-500); }
.pillar .stat-note { margin-bottom: 1rem; }

.list-check { display: grid; gap: 0.6rem; }
.list-check li { display: flex; gap: 0.7rem; font-size: 0.95rem; }
.list-check i { color: var(--rose-500); font-size: 0.8rem; margin-top: 0.5rem; }

/* --------------------------------------------------------------- cta ---- */
.cta-band { background: linear-gradient(120deg, var(--rose-50), #fff 70%); }
.cta-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.signup {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(115deg, var(--rose-600), var(--rose-400));
  color: #fff; padding: 2rem; display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: end;
}
.signup h3 { color: #fff; display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.signup p { font-size: 0.9rem; color: rgba(255, 255, 255, 0.86); margin-bottom: 1.2rem; }
.signup form { display: flex; align-items: center; background: #fff; border-radius: 999px; padding: 0.3rem 0.3rem 0.3rem 1.1rem; max-width: 360px; }
.signup input {
  flex: 1; border: 0; margin: 0; padding: 0; background: transparent; font: inherit;
  font-size: 0.9rem; color: var(--ink); min-width: 0;
}
.signup input:focus { outline: none; }
.signup button {
  width: 38px; height: 38px; min-height: 0; flex: none; padding: 0; border: 0; border-radius: 50%;
  background: var(--rose-500); color: #fff; cursor: pointer;
}
.signup > img { width: 210px; height: 210px; object-fit: cover; border-radius: var(--radius-sm); }

/* ------------------------------------------------------------ footer ---- */
.site-footer { background: var(--brown-900); color: #a89f91; padding: 3.5rem 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.footer-brand { display: flex; gap: 0.9rem; margin-bottom: 1.1rem; }
.footer-brand img { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 50%; padding: 4px; }
.footer-brand strong { font-family: var(--display); font-size: 1.05rem; color: #fff; display: block; line-height: 1.25; margin-bottom: 0.3rem; }
.footer-brand span { font-size: 0.84rem; }
.socials { display: flex; gap: 0.6rem; }
.socials a {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); color: #fff; transition: background var(--ease);
}
.socials a:hover { background: rgba(255, 255, 255, 0.32); }
.site-footer h4 {
  color: #fff; font-family: var(--ui); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.1rem;
}
.footer-links { display: grid; gap: 0.6rem; font-size: 0.9rem; }
.footer-links a:hover { color: #fff; }
.footer-contact { display: grid; gap: 0.85rem; font-size: 0.9rem; }
.footer-contact div { display: flex; gap: 0.7rem; }
.footer-contact i { margin-top: 0.35rem; }
.footer-contact a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.18); padding: 1.3rem 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 0.84rem;
}

/* ------------------------------------------------- portal / CMS pages ---- */
main h1 { margin-bottom: 1.4rem; }
.tag {
  display: inline-flex; padding: 0.3rem 0.8rem; margin-bottom: 0.9rem; border-radius: 999px;
  background: var(--rose-50); color: var(--rose-500); font-size: 0.78rem; font-weight: 600;
}
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.cards article, .form-shell, .card, .panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 1.6rem;
}
.cards article h2, .form-shell h2 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.cards article img { border-radius: var(--radius-sm); margin-bottom: 0.8rem; }
.form-shell { max-width: 780px; }
label { font-weight: 600; color: var(--ink); font-size: 0.92rem; }
input, select, textarea {
  width: 100%; margin-top: 0.35rem; padding: 0.8rem 1rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: #fff; font: inherit; font-size: 0.95rem; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--rose-400); outline-offset: 1px; border-color: transparent; }
textarea { min-height: 130px; }
.form-grid { display: grid; gap: 1rem; }
.form-grid .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: max-content; min-height: 48px; padding: 0.75rem 1.5rem; border: 0; border-radius: 999px;
  background: var(--rose-500); color: #fff; font: 600 0.92rem var(--ui); cursor: pointer;
  transition: background var(--ease);
}
button:hover, .button:hover { background: var(--rose-600); }
small { font-size: 0.84rem; }
small.muted { display: inline-block; margin-top: 0.35rem; }
.notice { padding: 1rem 1.15rem; border-radius: var(--radius-sm); margin-bottom: 1.2rem; background: #e9f7ee; color: #1a5c31; }
.notice.error, .notice.is-error { background: #fdecec; color: #7d1d1d; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.6rem; }
.tabs a { padding: 0.55rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 0.85rem; font-weight: 600; }
.tabs a:hover { border-color: var(--rose-500); color: var(--rose-500); }
.table-wrap { margin-bottom: 2rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { padding: 0.8rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: var(--ink); font-weight: 600; }
.badge { display: inline-flex; padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--rose-50); color: var(--rose-500); font-size: 0.78rem; font-weight: 600; }

/* ------------------------------------------------- section headers ---- */
.split-head {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem);
}
.split-head h2 { margin-top: 0.2rem; }
.split-head .lead { color: var(--muted); }

/* -------------------------------------------------------- stat strip ---- */
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 1.9rem; }
.stat-strip.two-up { grid-template-columns: repeat(2, 1fr); }
.stat-strip div { padding-top: 0.9rem; border-top: 2px solid var(--rose-500); }
.stat-strip strong {
  display: block; font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--ink); line-height: 1.1; margin-bottom: 0.35rem;
}
.stat-strip span { font-size: 0.82rem; line-height: 1.45; color: var(--muted); display: block; }

/* --------------------------------------------------------- timeline ---- */
.timeline { position: relative; padding-left: 1.9rem; display: grid; gap: 1.6rem; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, var(--rose-400), rgba(224, 36, 107, 0.08));
}
.timeline-item { position: relative; }
.timeline-item::before {
  content: ""; position: absolute; left: -1.9rem; top: 7px; width: 11px; height: 11px;
  border-radius: 50%; background: #fff; border: 2px solid var(--rose-500);
}
.timeline-year {
  font-family: var(--ui); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rose-500); margin-bottom: 0.3rem;
}
.timeline-item h3 { font-size: 1.04rem; margin-bottom: 0.3rem; }
.timeline-item p { font-size: 0.93rem; color: var(--muted); line-height: 1.6; }

/* --------------------------------------------------- service cards ---- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.service-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; box-shadow: var(--shadow-card); transition: transform var(--ease), box-shadow var(--ease);
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.service-time {
  display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--ui);
  font-size: 0.73rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--rose-500); margin-bottom: 0.8rem;
}
.service-card h3 { margin-bottom: 0.5rem; }
.service-card p { font-size: 0.93rem; color: var(--muted); }

/* -------------------------------------------------------- media band ---- */
.media-band { background: var(--brown-800); color: rgba(255, 255, 255, 0.88); }
.media-band h2, .media-band h3 { color: #fff; }
.media-band .eyebrow { color: var(--rose-100); }
.media-band .split-head .lead { color: rgba(255, 255, 255, 0.86); }
.media-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.video-shell { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(23, 19, 32, 0.6); }
.video-shell iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin: 1.6rem 0; }
.media-stats div { padding-top: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.media-stats strong { display: block; font-family: var(--display); font-size: 2rem; color: #fff; line-height: 1.1; }
.media-stats span { font-size: 0.82rem; color: rgba(255, 255, 255, 0.78); }
.media-band .btn-outline { background: transparent; border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.media-band .btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }
.media-band .btn-primary { background: #fff; color: var(--rose-600); }
.media-band .btn-primary:hover { background: var(--rose-50); }

/* ----------------------------------------------------------- gallery ---- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.gallery-grid figure {
  position: relative; overflow: hidden; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff;
}
.gallery-grid img { width: 100%; height: 190px; object-fit: cover; transition: transform 500ms var(--ease); }
.gallery-grid figure:hover img { transform: scale(1.05); }
.gallery-grid figcaption {
  padding: 0.7rem 0.85rem; font-size: 0.8rem; line-height: 1.45; color: var(--muted);
}
.gallery-grid figure.tall img { height: 260px; }

/* --------------------------------------------------------- give band ---- */
.give-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.give-points { display: grid; gap: 0.7rem; margin: 1.5rem 0; }
.give-points div { display: flex; gap: 0.75rem; font-size: 0.96rem; }
.give-points i { color: var(--rose-500); font-size: 0.82rem; margin-top: 0.5rem; }
.give-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.2rem); box-shadow: var(--shadow-lift);
}
.give-card h3 { margin-bottom: 0.7rem; }

/* ----------------------------------------------------------- contact ---- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.contact-stack { display: grid; gap: 1rem; }
.contact-card {
  display: flex; gap: 1rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-card);
}
.contact-card i { color: var(--rose-500); font-size: 1.05rem; margin-top: 0.3rem; }
.contact-card h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.contact-card p { font-size: 0.92rem; color: var(--muted); }
.map-shell { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.map-shell iframe { width: 100%; height: 420px; border: 0; display: block; }

/* ========================================================================
   MOBILE APP SHELL
   Below 768px the site stops behaving like a page and behaves like an app:
   a slim top bar and a full-screen slide-out menu. Both are display:none
   above the breakpoint - desktop never sees them.
   ======================================================================== */

.app-bar { display: none; }

/* Shown on one side of the breakpoint only. Used where the phone layout needs
   different words, not just a different arrangement. */
.only-mobile { display: none; }

/* ------------------------------------------------------------ app bar --- */
.app-bar {
  position: sticky; top: 0; z-index: 1100;
  background: #fff; border-bottom: 1px solid var(--line);
  align-items: center; gap: 0.5rem;
  grid-template-columns: 44px 1fr 44px;
  min-height: 56px; padding: 0 0.5rem;
}
.app-bar__button {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--ink); font-size: 1.15rem; cursor: pointer;
}
.app-bar__title {
  text-align: center; font-family: var(--ui); font-size: 0.95rem; font-weight: 600;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* On the homepage the title is replaced by the logo, centred. */
.app-bar__logo { justify-self: center; }
.app-bar__logo img { width: 44px; height: 44px; object-fit: contain; }

/* -------------------------------------------------------------- menu --- */
.app-menu {
  position: fixed; inset: 0; z-index: 1500;
  visibility: hidden; opacity: 0; transition: opacity var(--ease), visibility var(--ease);
}
.app-menu.is-open { visibility: visible; opacity: 1; }
.app-menu__scrim { position: absolute; inset: 0; background: rgba(23, 19, 32, 0.45); }
.app-menu__panel {
  position: absolute; inset: 0 12% 0 0; max-width: 420px;
  background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateX(-100%); transition: transform var(--ease);
  padding: 0 0 2rem;
}
.app-menu.is-open .app-menu__panel { transform: none; }
.app-menu__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line);
}
.app-menu__head img { width: 40px; height: 40px; object-fit: contain; }
.app-menu__close {
  width: 40px; height: 40px; display: grid; place-items: center; min-height: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink);
  font-size: 1.1rem; cursor: pointer; padding: 0;
}
.app-menu__link {
  display: grid; grid-template-columns: 26px 1fr 12px; align-items: center; gap: 0.9rem;
  padding: 0.95rem 1.1rem; border-bottom: 1px solid rgba(23, 19, 32, 0.05);
  font-family: var(--ui); font-size: 0.94rem; font-weight: 500; color: var(--ink);
}
.app-menu__link i:first-child { color: var(--rose-500); font-size: 0.98rem; justify-self: center; }
.app-menu__link i:last-child { color: var(--muted); font-size: 0.75rem; }
.app-menu__promo {
  margin: 1.1rem; padding: 1rem; border-radius: var(--radius);
  background: linear-gradient(115deg, var(--rose-600), var(--rose-400));
  color: #fff; display: grid; grid-template-columns: 56px 1fr; gap: 0.85rem; align-items: center;
}
.app-menu__promo img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.app-menu__promo strong { display: block; font-family: var(--display); font-size: 1rem; color: #fff; }
.app-menu__promo span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); display: block; margin-bottom: 0.6rem; }
.app-menu__promo .btn { background: #fff; color: var(--rose-600); min-height: 36px; padding: 0.35rem 1rem; font-size: 0.82rem; }
.app-menu__social { padding: 0 1.1rem; }
.app-menu__social p {
  font-family: var(--ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.7rem;
}
.app-menu__social div { display: flex; gap: 0.65rem; }
.app-menu__social a {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  background: var(--rose-50); color: var(--rose-500);
}

/* ----------------------------------------------------------- reveals ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.is-visible { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* -------------------------------------------------------- responsive ---- */
@media (max-width: 1100px) {
  .card-row, .card-row.three-up { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .split-head { grid-template-columns: 1fr; align-items: start; }
}
/* The app shell takes over. The desktop header, the footer's link columns and
   the old dropdown all step aside; the tab bar handles navigation instead. */
@media (max-width: 768px) {
  .site-header { display: none; }
  .app-bar { display: grid; }
  .mobile-nav { display: none; }
  .only-mobile { display: block; }
  .only-desktop { display: none; }
  .footer-grid { display: none; }
  .site-footer { padding: 0; }
  .footer-bottom { border-top: 0; justify-content: center; text-align: center; font-size: 0.78rem; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-shell { grid-template-columns: auto 1fr auto; }
  .nav-shell > .btn { display: none; }
  .nav-toggle { display: grid; place-items: center; justify-self: end; }
  .hero-grid { grid-template-columns: 1fr; padding-top: 2.5rem; }
  .hero::before { inset: 0; }
  .hero-media img {
    width: 100%; height: clamp(260px, 52vw, 380px); border-radius: var(--radius);
    -webkit-mask-image: none; mask-image: none;
  }
  .hero-facts { grid-template-columns: 1fr; margin-top: -2rem; }
  .hero-facts > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .about-grid, .cta-grid { grid-template-columns: 1fr; }
  .signup { grid-template-columns: 1fr; }
  .signup > img { display: none; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-grid, .give-grid, .contact-grid { grid-template-columns: 1fr; }
  .card-row.three-up { grid-template-columns: repeat(2, 1fr); }
  .map-shell iframe { height: 320px; }
}
@media (max-width: 640px) {
  /* One column for anything carrying real copy. Two-up cards on a 360px
     screen leave about 150px per card, which is unreadable. */
  .card-row, .card-row.three-up,
  .cards, .tile-grid, .tile-grid.two-up, .form-grid .two,
  .services-grid, .media-stats,
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid { gap: 2rem; }

  /* Figures stay side by side on a phone - stacked, three big numbers each
     with their own rule read as a list of unrelated facts. */
  .stat-strip { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
  .stat-strip.two-up { grid-template-columns: repeat(2, 1fr); }
  .stat-strip div { padding-top: 0.6rem; }
  .stat-strip strong { font-size: 1.45rem; margin-bottom: 0.2rem; }
  .stat-strip span { font-size: 0.7rem; line-height: 1.35; }

  .pillar img, .card-row.three-up .pillar img { height: 180px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid img, .gallery-grid figure.tall img { height: 140px; }

  /* The display face is high contrast; it needs to come down harder than a
     clamp on vw alone manages at phone widths. */
  h1 { font-size: clamp(1.95rem, 8vw, 2.4rem); }
  h2 { font-size: clamp(1.6rem, 6.5vw, 2rem); }
  .lead { font-size: 1rem; }
  section { padding: 2.75rem 0; }
  .hero-grid { gap: 1.75rem; }
  .hero-facts > div { padding: 1.15rem 1.25rem; }

  .btn { width: 100%; }
  .btn-row { gap: 0.65rem; }

  .brand-copy { font-size: 0.92rem; }
  .brand img { width: 52px; height: 52px; }
}

/* Questions and answers, on the ask-a-question page. */
.faq-list{display:grid;gap:.6rem}
.faq-list details{border:1px solid rgba(0,0,0,.1);border-radius:10px;padding:.85rem 1rem;background:#fff}
.faq-list summary{cursor:pointer;font-weight:600}
.faq-list details[open] summary{margin-bottom:.6rem}
.faq-list p{margin:0 0 .5rem}