/* ==========================================================================
   CEPFMS — Citizen Portal Design System
   Inspired by SJDM Legislative System reference.
   Dark navy base · Gold/Amber accent · Glassmorphism · Premium feel
   ========================================================================== */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  --c-navy:        #0c1a35;
  --c-navy-mid:    #122040;
  --c-navy-light:  #1a3060;
  --c-navy-border: rgba(255,255,255,0.08);
  --c-gold:        #e6b020;
  --c-gold-light:  #f5c842;
  --c-gold-dark:   #b8871a;
  --c-blue:        #2563eb;
  --c-blue-light:  #3b82f6;
  --c-white:       #ffffff;
  --c-muted:       rgba(255,255,255,0.55);
  --c-subtle:      rgba(255,255,255,0.35);
  --c-card-bg:     rgba(255,255,255,0.04);
  --c-card-border: rgba(255,255,255,0.10);
  --c-section-bg:  #f4f6fb;

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  --shadow-card: 0 4px 24px rgba(0,0,0,0.10);
  --shadow-gold: 0 0 32px rgba(230,176,32,0.22);
  --shadow-lg:   0 16px 40px rgba(12,26,53,0.22);
}

/* ── Reset / base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body.citizen-portal {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: var(--c-section-bg);
  color: #0c1a35;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  margin: 0;
}

/* ── Citizen Navbar ────────────────────────────────────────────────────── */
.c-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(12,26,53,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--c-navy-border);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.c-navbar.scrolled {
  background: rgba(8,17,36,0.98);
  box-shadow: 0 4px 32px rgba(0,0,0,0.25);
}
.c-navbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.c-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.c-brand-seal {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 2px solid rgba(230,176,32,0.45);
  box-shadow: 0 0 0 4px rgba(230,176,32,0.10);
  transition: box-shadow 0.2s;
}
.c-brand-seal:hover { box-shadow: 0 0 0 6px rgba(230,176,32,0.18); }
.c-brand-seal img { width: 100%; height: 100%; object-fit: contain; }
.c-brand-text { line-height: 1.25; }
.c-brand-name {
  font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.01em;
  display: block;
}
.c-brand-sub {
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-gold);
  opacity: 0.9;
  display: block;
}

/* Navbar-specific brand sizing — the government-title wording is a bit
   longer than the original brand name, so it gets a touch more room than
   the footer's use of the same .c-brand-* classes. */
.c-navbar .c-brand-name { font-size: 14px; }
.c-navbar .c-brand-sub { font-size: 9.5px; letter-spacing: 0.08em; }
.c-nav-links {
  display: flex; align-items: center; gap: 2rem;
  list-style: none; margin: 0; padding: 0;
}
.c-nav-links a {
  font-size: 13.5px; font-weight: 500;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  padding: 4px 0;
  position: relative;
  transition: color 0.2s;
}
.c-nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 100%;
  height: 2px;
  background: var(--c-gold);
  border-radius: 2px;
  transition: right 0.25s ease;
}
.c-nav-links a:hover,
.c-nav-links a.c-nav-active { color: #fff; }
.c-nav-links a:hover::after,
.c-nav-links a.c-nav-active::after { right: 0; }

.c-btn-login {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700;
  color: var(--c-navy);
  background: var(--c-gold);
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  text-decoration: none; border: none; cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  letter-spacing: 0.01em;
}
.c-btn-login:hover {
  background: var(--c-gold-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(230,176,32,0.35);
}

/* Desktop: equal side columns keep the links centred on the page, not just
   in the space left after the brand. 1fr can't shrink below its content,
   so on narrower screens the links shift right instead of overlapping. */
@media (min-width: 769px) {
  .c-navbar-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .c-navbar-inner > :last-child { justify-self: end; }
  .c-navbar .c-brand-sub { white-space: nowrap; }
}

.c-nav-toggle {
  display: none;
  background: none; border: none; color: #fff; cursor: pointer;
  padding: 11px; /* 22px icon + padding = 44px touch target */
  align-items: center; justify-content: center;
}
@media (max-width: 768px) {
  .c-nav-links, .c-btn-login { display: none; }
  .c-nav-toggle { display: flex; }
  .c-navbar-inner { padding: 0 1rem; gap: 0.75rem; }
  /* Base .c-brand is flex-shrink:0, which would push the toggle past the
     viewport edge rather than letting the gov't sub-line give up space. */
  .c-navbar .c-brand { flex-shrink: 1; min-width: 0; }
  .c-navbar .c-brand-text { min-width: 0; }
  .c-navbar .c-brand-name { white-space: nowrap; }
  .c-navbar .c-brand-sub {
    font-size: 9px; letter-spacing: 0.05em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}
/* Right-side panel under the hamburger, floating over the page instead of
   pushing it down. Positioned against the sticky navbar (absolute, not fixed:
   the navbar's backdrop-filter would make fixed resolve against it anyway). */
.c-mobile-nav {
  position: absolute;
  top: calc(100% + 8px); right: 12px;
  width: min(280px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(10,20,42,0.98);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg);
  padding: 10px;
  /* Large spread shadow doubles as a backdrop dimming the page behind */
  box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 100vmax rgba(5,10,22,0.45);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.c-mobile-nav.open {
  opacity: 1; visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}
@media (min-width: 769px) { .c-mobile-nav { display: none; } }
.c-mobile-nav a {
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,0.70);
  text-decoration: none;
  padding: 10px 12px; border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}
.c-mobile-nav a:hover,
.c-mobile-nav a.c-nav-active { background: rgba(255,255,255,0.07); color: #fff; }
.c-mobile-nav .c-mobile-login {
  margin-top: 8px;
  border-top: 1px solid var(--c-navy-border);
  padding-top: 12px;
  color: var(--c-gold) !important;
  font-weight: 700 !important;
}

/* ── Hero Section ──────────────────────────────────────────────────────── */
.c-hero {
  position: relative;
  background: var(--c-navy);
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 1.5rem 60px;
}
.c-hero-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center top;
  z-index: 0;
  filter: brightness(0.85) saturate(1);
}
.c-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12,26,53,0.25) 0%,
    rgba(12,26,53,0.55) 55%,
    rgba(12,26,53,0.82) 100%
  );
  z-index: 1;
}
.c-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.16;
  pointer-events: none;
  z-index: 1;
  animation: c-orb-drift 14s ease-in-out infinite alternate;
}
.c-hero-orb-1 { width: 520px; height: 520px; background: var(--c-gold);   top:-140px; right:-80px; }
.c-hero-orb-2 { width: 420px; height: 420px; background: var(--c-blue);   bottom:-100px; left:-80px; animation-delay:-6s; }
@keyframes c-orb-drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(28px,18px) scale(1.07); }
}
.c-hero-content {
  position: relative; z-index: 2;
  max-width: 800px; margin: 0 auto;
}
.c-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  background: linear-gradient(180deg, rgba(230,176,32,0.14), rgba(230,176,32,0.06));
  border: 1px solid rgba(230,176,32,0.35);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 18px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 5px 18px 5px 5px;
  margin-bottom: 30px;
  animation: c-fade-up 0.6s ease both;
}
/* flex-shrink: 0 keeps the pin badge round once the label wraps. */
.c-hero-eyebrow-icon {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--c-gold); color: var(--c-navy);
}
.c-hero-eyebrow-sep {
  flex-shrink: 0;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(230,176,32,0.7);
}
.c-hero-eyebrow-city { color: var(--c-gold); }
@media (max-width: 640px) {
  .c-hero-eyebrow {
    font-size: 10px; letter-spacing: 0.05em;
    gap: 7px; padding: 4px 12px 4px 4px;
  }
  .c-hero-eyebrow-icon { width: 20px; height: 20px; }
}
.c-hero-title {
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.07;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
  animation: c-fade-up 0.6s 0.1s ease both;
}
.c-hero-title .c-gold-text { color: var(--c-gold); }
.c-hero-sub {
  font-size: 16px; font-weight: 400;
  color: rgba(255,255,255,0.60);
  max-width: 560px; margin: 0 auto 42px;
  line-height: 1.72;
  animation: c-fade-up 0.6s 0.2s ease both;
}
.c-hero-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 68px;
  animation: c-fade-up 0.6s 0.3s ease both;
}
.c-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700;
  color: var(--c-navy);
  background: var(--c-gold);
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  text-decoration: none; border: none; cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  letter-spacing: 0.01em;
}
.c-btn-primary:hover {
  background: var(--c-gold-light);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(230,176,32,0.42);
}
.c-btn-primary svg { transition: transform 0.2s; }
.c-btn-primary:hover svg { transform: translateX(3px); }

.c-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08);
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s, color 0.2s;
}
.c-btn-ghost:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.32);
  color: #fff; transform: translateY(-2px);
}

.c-hero-stats {
  display: flex; align-items: stretch; justify-content: center;
  animation: c-fade-up 0.6s 0.4s ease both;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 24px 0;
  width: fit-content;
  margin: 0 auto;
}
.c-stat-item {
  padding: 0 40px; text-align: center; position: relative;
}
.c-stat-item + .c-stat-item::before {
  content: '';
  position: absolute; left: 0; top: 10%; bottom: 10%;
  width: 1px; background: rgba(255,255,255,0.12);
}
.c-stat-number {
  font-size: 2.4rem; font-weight: 800;
  color: #fff; letter-spacing: -0.04em;
  line-height: 1; font-family: 'Roboto Mono', monospace;
}
.c-stat-number.gold { color: var(--c-gold); }
.c-stat-label {
  font-size: 10.5px; color: rgba(255,255,255,0.42);
  margin-top: 7px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.c-scroll-indicator {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 7px;
  animation: c-fade-up 0.6s 0.65s ease both;
}
.c-scroll-indicator span {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.28); font-family: 'Roboto Mono', monospace;
}
.c-scroll-mouse {
  width: 22px; height: 34px;
  border: 1.5px solid rgba(255,255,255,0.22); border-radius: 12px;
  display: flex; justify-content: center; padding-top: 6px;
}
.c-scroll-dot {
  width: 3px; height: 6px;
  background: rgba(255,255,255,0.45); border-radius: 3px;
  animation: c-scroll-bounce 1.7s ease infinite;
}
@keyframes c-scroll-bounce {
  0%   { transform: translateY(0);  opacity: 1; }
  60%  { transform: translateY(8px); opacity: 0.3; }
  100% { transform: translateY(0);  opacity: 1; }
}

/* ── Section wrapper ───────────────────────────────────────────────────── */
.c-section { padding: 80px 1.5rem; }
.c-section-inner { max-width: 1100px; margin: 0 auto; }
.c-section-header { margin-bottom: 44px; }
.c-section-header.centered { text-align: center; }
.c-section-header.centered .c-section-desc { margin: 0 auto; }

.c-section-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-family: 'Roboto Mono', monospace;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-gold-dark);
  background: rgba(184,135,26,0.10);
  border: 1px solid rgba(184,135,26,0.22);
  border-radius: var(--radius-pill);
  padding: 5px 14px; margin-bottom: 14px;
}
.c-section-title {
  font-size: clamp(1.65rem,3vw,2.3rem);
  font-weight: 800; color: var(--c-navy);
  letter-spacing: -0.03em; line-height: 1.12; margin: 0 0 10px;
}
.c-section-desc {
  font-size: 15px; color: #64748b;
  max-width: 520px; line-height: 1.65;
}

/* ── Submission-type cards ─────────────────────────────────────────────── */
.c-cards-bg {
  background: #fff;
  scroll-margin-top: 75px;
}
#submission-types,
#how-can-we-help,
#how-it-works,
#faq {
  scroll-margin-top: 75px;
}
.c-cards-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 22px;
}
@media (max-width: 820px) { .c-cards-grid { grid-template-columns: 1fr; gap: 14px; } }

/* Each card opens the form with its type chosen. */
.c-type-card {
  background: #fff;
  border: 1.5px solid #e8edf5;
  border-radius: var(--radius-lg);
  padding: 26px 24px 24px;
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.c-type-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,0.30); }
.c-type-card:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }
.c-card-arrow {
  margin-top: auto; padding-top: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--c-blue);
}
.c-card-arrow svg { transition: transform 0.2s; }
.c-type-card:hover .c-card-arrow svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .c-type-card, .c-card-arrow svg { transition: none; }
  .c-type-card:hover { transform: none; }
}

.c-icon-wrap {
  width: 50px; height: 50px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.c-type-card h3 { font-size: 16px; font-weight: 700; color: var(--c-navy); margin: 0; }
.c-type-card p  { font-size: 13px; color: #64748b; margin: 0; line-height: 1.65; }


/* ── How it Works (dark) ───────────────────────────────────────────────── */
.c-steps-section {
  background: var(--c-navy); position: relative; overflow: hidden;
  padding: 80px 1.5rem;
}
.c-steps-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 44px 44px;
}
.c-steps-section .c-section-title { color: #fff; }
.c-steps-section .c-section-desc  { color: rgba(255,255,255,0.48); }
.c-steps-section .c-section-inner { position: relative; z-index: 1; }

.c-steps-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 28px; margin-top: 48px; position: relative;
}
.c-steps-connector {
  position: absolute; top: 27px;
  left: calc(12.5% + 14px); right: calc(12.5% + 14px);
  height: 1px; background: rgba(255,255,255,0.10); z-index: 0;
}
@media (max-width: 820px) {
  .c-steps-grid { grid-template-columns: repeat(2,1fr); gap: 20px; }
  .c-steps-connector { display: none; }
}
@media (max-width: 480px) { .c-steps-grid { grid-template-columns: 1fr; } }

.c-step { position: relative; z-index: 1; text-align: center; }
.c-step-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-family: 'Roboto Mono', monospace; font-weight: 600;
  color: var(--c-gold); margin: 0 auto 18px;
  transition: background 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.c-step:hover .c-step-num {
  background: rgba(230,176,32,0.12);
  border-color: rgba(230,176,32,0.40);
  box-shadow: 0 0 28px rgba(230,176,32,0.20);
}
.c-step h3 { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.c-step p  { font-size: 12.5px; color: rgba(255,255,255,0.46); line-height: 1.65; margin: 0; }

/* ── Recently Resolved ─────────────────────────────────────────────────── */
.c-resolved-section { background: var(--c-section-bg); }
.c-resolved-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 36px;
}
@media (max-width: 640px) { .c-resolved-grid { grid-template-columns: 1fr; } }
.c-resolved-card {
  background: #fff; border: 1px solid #e8edf5;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.c-resolved-card:hover { box-shadow: 0 6px 20px rgba(12,26,53,0.08); border-color: #d0d9ea; }
.c-resolved-ref { font-size: 11px; font-family: 'Roboto Mono', monospace; color: #94a3b8; margin-bottom: 4px; }
.c-resolved-subject {
  font-size: 13.5px; font-weight: 600; color: var(--c-navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px;
}
.c-badge-resolved {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: #059669;
  background: rgba(5,150,105,0.10);
  border: 1px solid rgba(5,150,105,0.22);
  border-radius: var(--radius-pill);
  padding: 4px 12px; flex-shrink: 0;
}
.c-badge-resolved::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: #059669;
  display: inline-block;
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.c-faq-section { background: #fff; }
.c-faq-list { max-width: 720px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 10px; }
.c-faq-item {
  border: 1.5px solid #e8edf5;
  border-radius: var(--radius-md); overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.c-faq-item:hover,
.c-faq-item[open] { border-color: rgba(230,176,32,0.42); box-shadow: 0 4px 16px rgba(12,26,53,0.06); }
.c-faq-item summary {
  padding: 18px 20px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--c-navy);
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  user-select: none;
}
.c-faq-item summary::-webkit-details-marker { display: none; }
.c-faq-chevron { flex-shrink: 0; transition: transform 0.25s ease; color: #94a3b8; }
.c-faq-item[open] .c-faq-chevron { transform: rotate(180deg); color: var(--c-gold-dark); }
.c-faq-body {
  padding: 14px 20px 18px;
  font-size: 13.5px; color: #64748b; line-height: 1.72; margin: 0;
  border-top: 1px solid #f1f5f9;
}

/* ── SJDM photo sections (home: cards, FAQ, contact) ───────────────────── */
.c-section.c-photo-section {
  background:
    linear-gradient(rgba(12,26,53,0.82), rgba(12,26,53,0.82)),
    url('../images/site/city-hall-hero.jpg') center top / cover no-repeat;
}
/* Photo stays still while content scrolls over it. Desktop only: iOS/Android
   ignore or badly zoom background-attachment:fixed, so touch keeps normal scroll. */
@media (hover: hover) and (pointer: fine) {
  .c-section.c-photo-section { background-attachment: fixed; }
  /* Hero joins the same still photo so there's no seam where two copies meet.
     filter is dropped because it makes Chrome treat a fixed background as scroll. */
  .c-hero-photo {
    background-attachment: fixed;
    filter: none;
  }
}
.c-photo-section .c-section-title { color: #fff; }
.c-photo-section .c-section-desc  { color: rgba(255,255,255,0.72); }
.c-photo-section .c-section-tag {
  color: var(--c-gold-light);
  background: rgba(230,176,32,0.12);
  border-color: rgba(230,176,32,0.30);
}
.c-photo-section .c-faq-item { background: #fff; }
.c-photo-section .c-faq-item:not(:hover):not([open]) { border-color: transparent; }
.c-photo-section .c-type-card,
.c-photo-section .c-contact-card { border-color: transparent; box-shadow: var(--shadow-lg); }


/* ── Contact card ──────────────────────────────────────────────────────── */
.c-contact-section { background: var(--c-section-bg); }
.c-contact-card {
  background: #fff; border: 1px solid #e8edf5;
  border-radius: var(--radius-xl); padding: 42px;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 32px;
  box-shadow: var(--shadow-card);
}
@media (max-width: 640px) { .c-contact-card { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; } }
.c-contact-item { display: flex; gap: 16px; }
.c-contact-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: rgba(37,99,235,0.08);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.c-contact-label { font-size: 11.5px; font-weight: 700; color: var(--c-navy); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 5px; display: block; }
.c-contact-value { font-size: 13.5px; color: #64748b; line-height: 1.6; }

/* ── CTA banner ────────────────────────────────────────────────────────── */
.c-cta-banner {
  background: var(--c-navy); position: relative; overflow: hidden;
  text-align: center; padding: 80px 1.5rem;
}
.c-cta-banner::before {
  content: '';
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle,rgba(230,176,32,0.15) 0%,transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  pointer-events: none;
}
.c-cta-banner > * { position: relative; z-index: 1; }
.c-cta-banner h2 { font-size: clamp(1.8rem,3vw,2.6rem); font-weight: 800; color: #fff; letter-spacing: -0.03em; margin: 0 0 14px; }
.c-cta-banner p  { font-size: 15px; color: rgba(255,255,255,0.55); max-width: 480px; margin: 0 auto 32px; line-height: 1.65; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.c-footer { background: #07101f; padding: 36px 1.5rem 0; }
.c-footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1.8fr 1fr 1fr;
  gap: 40px; padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
@media (max-width: 720px) { .c-footer-inner { grid-template-columns: 1fr; gap: 24px; } }

.c-footer-brand-desc { font-size: 13px; color: rgba(255,255,255,0.38); line-height: 1.6; margin-top: 10px; max-width: 280px; }
.c-footer-col h4 {
  font-size: 10px; font-family: 'Roboto Mono', monospace;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.28); margin: 0 0 10px;
}
.c-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.c-footer-col ul a { font-size: 13px; color: rgba(255,255,255,0.48); text-decoration: none; transition: color 0.2s; }
.c-footer-col ul a:hover { color: var(--c-gold); }
.c-footer-col ul li { font-size: 13px; color: rgba(255,255,255,0.42); line-height: 1.6; }
.c-footer-bottom {
  max-width: 1100px; margin: 0 auto; padding: 14px 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
.c-footer-bottom p { font-size: 11.5px; color: rgba(255,255,255,0.20); margin: 0; }
.c-footer-legal { display: flex; align-items: center; gap: 8px; }
.c-footer-legal a { color: rgba(255,255,255,0.38); text-decoration: none; transition: color 0.2s; }
.c-footer-legal a:hover { color: var(--c-gold); }
.c-footer-legal span { color: rgba(255,255,255,0.15); }

/* ── Animations ────────────────────────────────────────────────────────── */
@keyframes c-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.c-reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.c-reveal.visible { opacity: 1; transform: translateY(0); }
.c-reveal-d1 { transition-delay: 0.07s; }
.c-reveal-d2 { transition-delay: 0.14s; }
.c-reveal-d3 { transition-delay: 0.21s; }
.c-reveal-d4 { transition-delay: 0.28s; }

/* ── Submit form (citizen/submit.php) ──────────────────────────────────── */
/* One white card over the city-hall photo; bold uppercase labels and large
   rounded fields so it reads well on phones. */
.sf-page, .tr-page { padding: 40px 16px 64px; }
/* Viewport-sized photo layer behind the card. `cover` on the (very tall)
   section itself zooms the photo far in; a fixed layer keeps it at screen
   size (background-attachment: fixed is ignored on iOS Safari). z-index -1
   without a stacking context on .sf-page keeps it under the opaque navbar
   and footer, and leaves the fixed location dialog free to cover the page. */
.sf-page::before,
.tr-page::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(12,26,53,0.84), rgba(12,26,53,0.84)),
    url('../images/site/city-hall-hero.jpg') center / cover no-repeat,
    var(--c-navy);
  pointer-events: none;
}
.sf-card {
  max-width: 720px; margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  padding: 36px 36px 32px;
}
@media (max-width: 640px) {
  .sf-page, .tr-page { padding: 20px 12px 40px; }
  .sf-card { padding: 26px 18px 22px; border-radius: var(--radius-lg); }
}
.sf-head { text-align: center; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid #e2e8f0; }
.sf-eyebrow {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-gold-dark);
}
.sf-title {
  margin-top: 6px; font-size: clamp(1.6rem, 4.5vw, 2rem); font-weight: 800;
  line-height: 1.15; color: var(--c-navy); letter-spacing: -0.01em;
}
.sf-sub { margin: 8px auto 0; max-width: 480px; font-size: 14px; line-height: 1.55; color: #64748b; }
/* Type chosen on the home page cards; the citizen's choice wins over the AI's guess. */
.sf-type {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px;
  margin-top: 12px; padding: 6px 14px; border-radius: var(--radius-pill);
  font-size: 13px; color: var(--c-navy); background: #eef4ff; border: 1px solid #d6e4ff;
}
.sf-type a { font-weight: 700; color: var(--c-blue); text-decoration: underline; text-underline-offset: 2px; }

.sf-group { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.sf-group-title {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-bottom: 16px; padding: 0;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-navy);
}
.sf-group-title::before {
  content: ''; width: 4px; height: 16px; border-radius: 2px; background: var(--c-gold); flex-shrink: 0;
}
.sf-group-note { margin: -8px 0 16px; }

.sf-field { margin-bottom: 18px; }
/* The section gap already spaces the last field; its own margin would double it. */
.sf-group > .sf-field:last-child { margin-bottom: 0; }
.sf-label {
  display: block; margin-bottom: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #1e293b;
}
.sf-label-inline { margin-bottom: 0; }
.sf-req { color: #dc2626; margin-left: 2px; }
.sf-opt { margin-left: 4px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #94a3b8; }
.sf-help { font-size: 12px; line-height: 1.5; color: #64748b; }
.sf-error { margin-top: 6px; font-size: 12px; color: #dc2626; }

.sf-input {
  display: block; width: 100%;
  padding: 13px 16px;
  font-size: 15px; color: var(--c-navy);
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.sf-input::placeholder { color: #94a3b8; }
.sf-input:hover { border-color: #cbd5e1; }
.sf-input:focus {
  outline: none; background: #fff;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.14);
}
textarea.sf-input { resize: vertical; min-height: 130px; }
.sf-input.border-red-400 { border-color: #f87171; background: #fff; }

.sf-map { width: 100%; height: 280px; border-radius: 12px; border: 1.5px solid #e2e8f0; overflow: hidden; }
@media (max-width: 640px) { .sf-map { height: 240px; } }
/* "Use my location" button on the map (added by citizen.js as a map control) */
.sf-locate-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--radius-pill);
  font: 600 13px/1 'Inter', ui-sans-serif, system-ui, sans-serif;
  color: var(--c-navy); background: #fff; border: 1px solid rgba(12,26,53,0.15);
  box-shadow: 0 2px 8px rgba(12,26,53,0.25); cursor: pointer;
}
.sf-locate-btn svg { color: var(--c-blue); }
.sf-locate-btn:hover { background: #f1f5f9; }
.sf-locate-btn:focus-visible { outline: 3px solid rgba(37,99,235,0.4); outline-offset: 2px; }
.sf-locate-btn:disabled { opacity: 0.6; cursor: default; }

.sf-dropzone {
  border: 2px dashed #93b4f8; border-radius: 14px;
  background: #f5f8ff;
}
.sf-dropzone:hover { border-color: var(--c-blue); }
.sf-dropzone.border-red-400 { border-color: #f87171; background: #fff7f7; }
.sf-drop-prompt {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 30px 16px 24px; text-align: center;
}
.sf-drop-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin-bottom: 8px; border-radius: 50%;
  background: var(--c-blue); color: #fff;
  box-shadow: 0 8px 20px rgba(37,99,235,0.30);
}
.sf-camera-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 9px 16px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 700; color: var(--c-navy);
  background: var(--c-gold); box-shadow: 0 6px 16px rgba(230,176,32,0.35);
  transition: background .15s, transform .15s;
}
.sf-camera-btn:hover { background: var(--c-gold-light); transform: translateY(-1px); }
.sf-camera-btn:focus-visible { outline: 3px solid rgba(37,99,235,0.4); outline-offset: 2px; }

.sf-note {
  display: flex; align-items: center; gap: 8px; margin-top: -4px;
  font-size: 12.5px; color: #64748b;
}
.sf-note svg { flex-shrink: 0; color: var(--c-blue); }

.sf-consent {
  margin-bottom: 22px; padding: 14px 16px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
}
.sf-check { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; accent-color: var(--c-blue); cursor: pointer; }

.sf-submit {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 15px 20px;
  font-size: 16px; font-weight: 800; letter-spacing: 0.01em; color: #fff;
  background: linear-gradient(180deg, #3b7bf7, var(--c-blue));
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(37,99,235,0.35);
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.sf-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(37,99,235,0.42); }
.sf-submit:focus-visible { outline: 3px solid rgba(37,99,235,0.45); outline-offset: 3px; }
.sf-submit:disabled { opacity: .75; transform: none; cursor: wait; }

/* Signed-in citizen shown on Submit / Track, in place of typed name + email */
.sf-account {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  padding: 12px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
}
.sf-account-text { min-width: 0; flex: 1; font-size: 13px; line-height: 1.4; color: #64748b; }
.sf-account-text strong { display: block; font-size: 14px; color: var(--c-navy); }
.sf-account-text strong, .sf-account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-account-email { display: block; }

/* Citizen sign-in page: fill the screen below the 68px navbar (+1px border)
   and centre the card, so the short card doesn't pull the footer into view. */
.sf-page.cl-page {
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - 69px);
  min-height: calc(100dvh - 69px);
}
.sf-card.cl-card { max-width: 460px; width: 100%; }
.cl-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 13px 20px;
  font-size: 15px; font-weight: 700; color: #1f2937; text-decoration: none;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 14px;
  box-shadow: 0 2px 6px rgba(15,30,61,0.08);
  transition: background .15s, box-shadow .15s;
}
.cl-google-btn:hover { background: #f8fafc; box-shadow: 0 6px 16px rgba(15,30,61,0.12); }
.cl-google-btn:focus-visible { outline: 3px solid rgba(37,99,235,0.45); outline-offset: 3px; }
.cl-flash {
  margin-bottom: 16px; padding: 10px 12px; font-size: 13px; border-radius: 10px;
  color: #b45309; background: rgba(217,119,6,0.10); border: 1px solid rgba(217,119,6,0.30);
}
.cl-setup { line-height: 1.6; overflow-wrap: anywhere; }
.cl-setup code { font-size: 12px; padding: 1px 4px; background: rgba(217,119,6,0.12); border-radius: 4px; }
.cl-fine { margin-top: 18px; font-size: 12.5px; line-height: 1.55; color: #64748b; text-align: center; }
.cl-fine a { font-weight: 600; color: var(--c-blue); }

/* Location field → opens the Select Location dialog */
.sf-loc-trigger {
  display: flex; align-items: center; gap: 12px;
  text-align: left; cursor: pointer; padding-top: 11px; padding-bottom: 11px;
}
.sf-loc-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(37,99,235,0.10); color: var(--c-blue);
}
.sf-loc-text { display: block; font-size: 15px; font-weight: 600; color: var(--c-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-loc-text.is-empty { font-weight: 400; color: #94a3b8; }
.sf-loc-sub { display: block; margin-top: 1px; font-size: 12px; color: #64748b; }
.sf-loc-chevron { flex-shrink: 0; color: #94a3b8; }
.sf-loc-trigger:hover .sf-loc-chevron { color: var(--c-blue); }

/* Phones: same fields, tighter spacing so the form is less of a scroll. */
@media (max-width: 640px) {
  .sf-page { padding: 12px 10px 28px; }
  .sf-card { padding: 20px 16px 18px; }
  .sf-head { padding-bottom: 14px; margin-bottom: 16px; }
  .sf-title { margin-top: 2px; font-size: 1.45rem; }
  .sf-sub { margin-top: 6px; font-size: 13px; line-height: 1.45; }
  .sf-group { margin-bottom: 18px; }
  .sf-group-title { margin-bottom: 10px; }
  .sf-field { margin-bottom: 12px; }
  .sf-label { margin-bottom: 5px; font-size: 11.5px; }
  .sf-input { padding: 10px 14px; font-size: 16px; border-radius: 10px; } /* 16px stops iOS zooming on focus */
  textarea.sf-input { min-height: 96px; height: 104px; }
  .sf-loc-trigger { padding-top: 8px; padding-bottom: 8px; }
  .sf-loc-icon { width: 28px; height: 28px; }
  .sf-drop-prompt { padding: 16px 12px 14px; gap: 2px; }
  .sf-drop-icon { width: 40px; height: 40px; margin-bottom: 4px; }
  .sf-drop-icon svg { width: 20px; height: 20px; }
  .sf-camera-btn { margin-top: 8px; padding: 7px 14px; }
  .sf-consent { margin-bottom: 14px; padding: 10px 12px; }
  .sf-submit { padding: 13px 18px; }
}

.sf-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background: rgba(12,26,53,0.62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.sf-modal.hidden { display: none; }
.sf-modal-panel {
  display: flex; flex-direction: column;
  width: 100%; max-width: 680px; max-height: calc(100dvh - 48px);
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  outline: none; overflow: hidden;
}
.sf-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid #e2e8f0;
}
.sf-modal-title { font-size: 17px; font-weight: 800; color: var(--c-navy); }
.sf-modal-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; color: #64748b;
}
.sf-modal-x:hover { background: #f1f5f9; color: var(--c-navy); }
.sf-modal-body { flex: 1; overflow-y: auto; padding: 20px; }
.sf-modal-body .sf-map { height: 340px; }
.sf-modal-foot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 14px 20px; border-top: 1px solid #e2e8f0; background: #f8fafc;
}
.sf-btn-ghost, .sf-btn-primary {
  padding: 13px 16px; border-radius: 12px; font-size: 15px; font-weight: 700; transition: background .15s;
}
.sf-btn-ghost { color: var(--c-navy); background: #fff; border: 1.5px solid #e2e8f0; }
.sf-btn-ghost:hover { background: #f1f5f9; }
.sf-btn-primary { color: #fff; background: var(--c-blue); }
.sf-btn-primary:hover { background: #1d4ed8; }
.sf-btn-ghost:focus-visible, .sf-btn-primary:focus-visible, .sf-modal-x:focus-visible { outline: 3px solid rgba(37,99,235,0.4); outline-offset: 2px; }

/* Phones: the dialog takes the whole screen and the map fills the free space. */
@media (max-width: 640px) {
  .sf-modal { padding: 0; }
  .sf-modal-panel { max-width: none; height: 100dvh; max-height: none; border-radius: 0; }
  .sf-modal-body { display: flex; flex-direction: column; padding: 16px; }
  .sf-modal-body > .sf-field:last-child { flex: 1; display: flex; flex-direction: column; }
  .sf-modal-body .sf-map { flex: 1; height: auto; min-height: 260px; }
  .sf-modal-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
}

/* Touch vs mouse: the camera button only helps on phones/tablets (desktop
   browsers ignore capture= and just open the file picker), and "drag" only
   makes sense with a mouse. */
.sf-mouse-only { display: none; }
@media (hover: hover) and (pointer: fine) {
  .sf-touch-only, .sf-camera-btn { display: none; }
  .sf-mouse-only { display: inline; }
}

/* ── Track Submission page: same card, fields and button as the submit form ── */
/* Search and result share one card; the result sits under a divider. */
.tr-results { margin-top: 24px; padding-top: 24px; border-top: 1px solid #e2e8f0; }
.tr-search-row { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 640px) {
  .tr-search-row { flex-direction: row; align-items: stretch; }
  .tr-search-btn { width: auto; flex-shrink: 0; padding: 0 22px; font-size: 15px; }
}
.tr-ref-input { padding-left: 44px; padding-right: 44px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.04em; }
.tr-ref-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.tr-ref-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 8px;
  font-size: 20px; line-height: 1; color: #64748b;
}
.tr-ref-clear:hover { background: #f1f5f9; color: var(--c-navy); }
.tr-accent { color: var(--c-blue); }
.tr-stage-time { margin-top: 4px; font-size: 11.5px; font-weight: 600; color: #64748b; font-variant-numeric: tabular-nums; }
.tr-chip {
  padding: 7px 14px; border-radius: var(--radius-pill);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--c-navy);
  background: #f8fafc; border: 1.5px solid #e2e8f0;
  transition: border-color .15s, color .15s;
}
.tr-chip:hover { border-color: var(--c-blue); color: var(--c-blue); }
/* Current step on the tracker timeline. A soft ring; while the step is still
   in progress (.is-live) the ring pulses outward. */
.tracker-dot-current { box-shadow: 0 0 0 4px rgba(5,150,105,0.18); }
.tracker-dot-current.is-live { animation: tr-pulse 2s ease-out infinite; }
@keyframes tr-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(5,150,105,0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(5,150,105,0); }
  100% { box-shadow: 0 0 0 0 rgba(5,150,105,0); }
}
@media (prefers-reduced-motion: reduce) {
  .tracker-dot-current.is-live { animation: none; }
}