/* ============================================================
   Barangay Can-untog, Ormoc City — Public Services Website
   Palette: Primary #215294 · Secondary #ECF4FF · Ink #18233F · White
   Type:    Zilla Slab (display) · Public Sans (body) · IBM Plex Mono (utility)
   ============================================================ */

:root {
  --paper: #FFFFFF;        /* Background */
  --paper-deep: #ECF4FF;   /* Secondary — alternating bands, fills */
  --folder: #C7D9F1;       /* Folder behind the certificate mock */
  --white: #FFFFFF;
  --ink: #18233F;          /* Text primary / links */
  --ink-soft: #55617D;
  --line: #D5E2F3;
  --blue: #215294;         /* Primary / accent */
  --blue-dark: #17406F;    /* Primary, pressed / hovered */
  --blue-deep: #18233F;    /* Deep surfaces: govbar, hero, footer */
  --blue-wash: #ECF4FF;    /* Secondary */
  --sky: #A9C7EE;          /* Accent for text on deep surfaces */
  --focus: #4F86D6;        /* Focus ring — legible on white and on navy */

  --font-display: "Zilla Slab", "Rockwell", "Georgia", serif;
  --font-body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", "Courier New", monospace;

  --radius: 6px;
  --shadow-paper: 0 1px 2px rgba(24, 35, 63, 0.06), 0 8px 24px rgba(24, 35, 63, 0.08);
  --shadow-lift: 0 2px 4px rgba(24, 35, 63, 0.18), 0 24px 48px rgba(24, 35, 63, 0.34);
  /* The container runs the full viewport; the gutter is what keeps content
     off the edges, and it widens with the screen instead of the container
     stopping at a fixed width and leaving rails of empty paper. */
  --wrap: 100%;
  --gutter: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* scroll-padding keeps anchor targets clear of the sticky masthead */
html { scroll-behavior: smooth; scroll-padding-top: 104px; }

/* Host styles for Lenis smooth scrolling (initialised in js/main.js).
   When Lenis drives the scroll it owns the easing, so the CSS smooth
   behavior steps aside to avoid double-easing every programmatic jump. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--ink); }
a:hover { color: var(--blue); }

/* removes the legacy 300ms tap delay on touch devices */
a, button, summary, label { touch-action: manipulation; }

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

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blue);
  color: #fff;
  padding: 10px 18px;
  font-weight: 700;
  z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Tonal stripe device (navy · primary · sky) ---------- */
.flag-stripe {
  height: 4px;
  background: linear-gradient(90deg,
    var(--blue-deep) 0 33.4%,
    var(--blue) 33.4% 66.7%,
    var(--sky) 66.7% 100%);
}

/* ---------- GovPH strip ---------- */
.govbar {
  background: var(--blue-deep);
  color: #C7D4EE;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.govbar .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 7px;
}
.govbar .mini-flag {
  width: 22px;
  height: 14px;
  flex: none;
  border-radius: 2px;
  background:
    linear-gradient(180deg, var(--sky) 0 50%, var(--blue) 50% 100%);
  position: relative;
  overflow: hidden;
}
.govbar .mini-flag::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  clip-path: polygon(0 0, 46% 50%, 0 100%);
}
.govbar .gov-link {
  margin-left: auto;
  color: #C7D4EE;
  text-decoration: none;
  font-weight: 600;
}
.govbar .gov-link:hover { color: #fff; }

/* ---------- Masthead / letterhead ---------- */
.masthead {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 110;
  transition: box-shadow 0.25s ease;
}
/* once the page is scrolled the letterhead floats, so it casts a shadow */
.masthead.scrolled { box-shadow: 0 6px 24px rgba(24, 35, 63, 0.12); }
.masthead .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  text-decoration: none;
  color: var(--ink);
}
.brand .seal { width: 58px; height: 58px; flex: none; }
.brand-lines { display: block; }
.brand-lines > span { display: block; white-space: nowrap; }
.brand-lines .republic {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.brand-lines .bname {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
}
.brand-lines .locality {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* City seal closes the letterhead on the right, opposite the barangay seal */
.masthead-mark {
  flex: none;
  display: flex;
  align-items: center;
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}
.masthead-mark .seal { width: 54px; height: 54px; display: block; }

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 14px;
  border-radius: var(--radius);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav a:hover { background: var(--blue-wash); }
.nav a.active {
  color: var(--blue);
  box-shadow: inset 0 -3px 0 var(--blue);
  border-radius: 0;
}
.nav .btn { margin-left: 10px; white-space: nowrap; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--ink);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  text-align: center;
  border-radius: var(--radius);
  padding: 12px 22px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
/* press feedback: the button gives slightly under the finger */
.btn:active { transform: translateY(0) scale(0.98); }
/* Light button — for use on the navy hero and footer */
.btn-light {
  background: var(--paper-deep);
  color: var(--blue-deep);
}
.btn-light:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(10, 18, 38, 0.4);
}
.btn-blue {
  background: var(--blue);
  color: #fff;
}
.btn-blue:hover { background: var(--blue-dark); transform: translateY(-1px); }
.btn-ghost {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.btn-ghost:hover { border-color: var(--sky); color: var(--sky); }
.btn-outline {
  border-color: var(--blue);
  color: var(--blue);
  background: transparent;
}
.btn-outline:hover { background: var(--blue-wash); }

/* ---------- Bilingual signage eyebrow ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  border: 1.5px solid currentColor;
  border-radius: 3px;
  padding: 4px 10px;
  margin-bottom: 14px;
}
.eyebrow.on-dark { color: var(--sky); }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; }

.section { padding-block: 72px; }
.section-head { max-width: 640px; margin-bottom: 36px; }
.section-head h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 10px;
}
.section-head p { color: var(--ink-soft); }

/* ---------- Calachuchi ground ----------
   The banner motif: plumeria blossoms and leaves in line art. One tile serves
   every surface — it is applied as a mask, so each band picks its own paint.
   Ink on the pale bands, white on the navy hero. */
.hero,
.page-hero,
.section-alt { position: relative; }

.hero > .wrap,
.page-hero > .wrap,
.section-alt > .wrap { position: relative; }

@supports ((mask-image: url("../img/calachuchi.svg")) or (-webkit-mask-image: url("../img/calachuchi.svg"))) {
  .hero::before,
  .page-hero::before,
  .section-alt::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-mask: url("../img/calachuchi.svg") center / 620px 620px repeat;
    mask: url("../img/calachuchi.svg") center / 620px 620px repeat;
  }
  .hero::before { background: #fff; opacity: 0.06; }
  .section-alt::before { background: var(--blue); opacity: 0.13; }

  /* The banner band carries the motif hardest, but it clears out of the
     column the heading and lede occupy — a second gradient mask intersects
     the first, so no line ever crosses body copy at full strength. */
  .page-hero::before {
    background: var(--blue);
    opacity: 0.26;
    -webkit-mask-image: url("../img/calachuchi.svg"),
      linear-gradient(100deg, transparent 6%, rgba(0, 0, 0, 0.28) 38%, #000 68%);
    mask-image: url("../img/calachuchi.svg"),
      linear-gradient(100deg, transparent 6%, rgba(0, 0, 0, 0.28) 38%, #000 68%);
    -webkit-mask-size: 460px 460px, cover;
    mask-size: 460px 460px, cover;
    -webkit-mask-repeat: repeat, no-repeat;
    mask-repeat: repeat, no-repeat;
    -webkit-mask-position: center, center;
    mask-position: center, center;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  /* Copy runs the full width below 960px, so the band steps back. */
  @media (max-width: 960px) {
    .page-hero::before { opacity: 0.13; }
  }
}

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(52rem 30rem at 78% 20%, rgba(169, 199, 238, 0.16), transparent 60%),
    linear-gradient(180deg, var(--blue-deep), #1D4176);
  color: #fff;
  overflow: hidden;
}
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: center;
  padding-block: 80px;
}
.hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 3.6rem);
  font-weight: 700;
  margin-bottom: 6px;
}
.hero .h1-sub {
  display: block;
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  font-weight: 600;
  color: #BFD0F0;
  margin-top: 6px;
}
.hero .lede {
  margin-top: 16px;
  max-width: 46ch;
  color: #D4DEF4;
  font-size: 1.08rem;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
.hero-hours {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: #AFC2E8;
  line-height: 1.9;
}
.hero-hours strong { color: var(--sky); font-weight: 600; }

/* Certificate mock — the signature element */
.cert-stage {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* one scale for the whole mock (widescreen bumps it), one lift for hover */
  --cert-scale: 1;
  --cert-lift: 0px;
}
/* the sheet eases out of its folder when the cursor passes over the desk */
.cert-stage:hover { --cert-lift: -10px; }
.cert-folder {
  position: absolute;
  width: 372px;
  height: 484px;
  background: var(--folder);
  border-radius: 4px 14px 4px 4px;
  transform: rotate(-3deg) translate(-14px, 14px) scale(var(--cert-scale));
  box-shadow: 0 18px 40px rgba(4, 16, 42, 0.4);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.cert-folder::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 22px;
  width: 110px;
  height: 26px;
  background: var(--folder);
  border-radius: 6px 6px 0 0;
}
/* Short bond paper is 8.5 x 11, so the sheet is held to that ratio rather
   than left to collapse around its content. */
.cert-paper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 340px;
  min-height: 440px;
  background: var(--white);
  color: var(--ink);
  padding: 26px 26px 30px;
  transform: rotate(1.6deg) translateY(var(--cert-lift)) scale(var(--cert-scale));
  box-shadow: var(--shadow-lift);
  border-radius: 2px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Both seals flank the letterhead, barangay left and city right, the way
   they sit on the real paper. The centre column is what's left of 340px
   after them, so the type below is set to fit that width without wrapping. */
.cert-letterhead {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 8px;
  text-align: center;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 12px;
}
.cert-letterhead .seal { width: 34px; height: 34px; display: block; }
.cert-letterhead .lh-line {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.7;
}
.cert-letterhead .lh-brgy {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--blue);
  margin-top: 2px;
}
.cert-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  text-align: center;
  margin: 18px 0 14px;
}
.cert-body .line {
  height: 7px;
  border-radius: 3px;
  background: var(--paper-deep);
  margin-bottom: 9px;
}
.cert-body .line.w80 { width: 80%; }
.cert-body .line.w90 { width: 90%; }
.cert-body .line.w60 { width: 60%; }
/* Signs off at the foot of the sheet, level with the dry-seal ring */
.cert-sig {
  margin-top: auto;
  margin-left: auto;
  margin-bottom: 30px;
  width: 55%;
  text-align: center;
}
.cert-sig .sig-rule { border-top: 1.5px solid var(--ink); padding-top: 5px; }
.cert-sig .sig-name {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cert-sig .sig-role {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cert-dryseal {
  position: absolute;
  bottom: 26px;
  left: 24px;
  width: 84px;
  height: 84px;
  border: 2px solid rgba(33, 82, 148, 0.32);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.cert-dryseal::before {
  content: "";
  width: 62px;
  height: 62px;
  border: 1px solid rgba(33, 82, 148, 0.32);
  border-radius: 50%;
}
.stamp {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  border: 3px double var(--blue);
  border-radius: 4px;
  padding: 6px 14px;
  display: inline-block;
  transform: rotate(-7deg);
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.6);
}
.cert-paper .stamp {
  position: absolute;
  top: 186px;
  right: -20px;
  font-size: 0.78rem;
}

/* ---------- Bulletin / announcements ---------- */
.bulletin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 32px;
  align-items: start;
}
.notice-pinned {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 5px solid var(--blue);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-paper);
}
.notice-pinned .stamp { font-size: 0.68rem; margin-bottom: 14px; }
.notice-pinned h3 { font-size: 1.35rem; margin-bottom: 8px; }
.notice-pinned p { color: var(--ink-soft); font-size: 0.97rem; }
.notice-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-top: 16px;
}

.notice-list { list-style: none; }
.notice-list li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  padding: 18px 4px;
  border-bottom: 1px dashed var(--line);
}
.notice-list li:first-child { padding-top: 4px; }
.notice-date {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--ink-soft);
  padding-top: 4px;
}
.notice-body h3 { font-size: 1.08rem; margin-bottom: 4px; }
.notice-body p { font-size: 0.93rem; color: var(--ink-soft); }
.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--ink-soft);
  color: var(--ink-soft);
  border-radius: 3px;
  padding: 2px 8px;
  margin-bottom: 6px;
}
.chip.health { border-color: var(--blue); background: var(--blue-wash); color: var(--blue); }
.chip.event { border-color: var(--blue-deep); color: var(--blue-deep); }

/* ---------- Services ---------- */
.section-alt { background: var(--paper-deep); border-block: 1px solid var(--line); }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.svc-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(24, 34, 56, 0.05);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.svc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-paper);
  border-color: var(--blue);
}
.svc-card h3 { font-size: 1.22rem; }
.svc-meta {
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.svc-meta .fee-free { color: var(--blue); font-weight: 600; }
.svc-card p { font-size: 0.92rem; color: var(--ink-soft); flex: 1; }
.svc-link {
  color: var(--blue);
  font-weight: 700;
  font-size: 0.94rem;
  text-decoration: none;
}
.svc-link:hover { text-decoration: underline; }
.svc-more { margin-top: 28px; text-align: center; }

/* Services page — detail cards */
.svc-detail {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(24, 34, 56, 0.05);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  margin-bottom: 22px;
  overflow: hidden;
}
.svc-detail-main { padding: 28px; }
.svc-detail-main h3 { font-size: 1.45rem; margin-bottom: 6px; }
.svc-detail-main .svc-desc { color: var(--ink-soft); font-size: 0.97rem; margin-bottom: 16px; }
.req-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.req-list { list-style: none; }
.req-list li {
  font-size: 0.93rem;
  padding: 4px 0 4px 26px;
  position: relative;
}
.req-list li::before {
  content: "□";
  position: absolute;
  left: 2px;
  top: 3px;
  color: var(--blue);
  font-size: 0.95rem;
}
.svc-detail-side {
  background: var(--blue-wash);
  border-left: 1px solid var(--line);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fact { line-height: 1.4; }
.fact dt {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.fact dd {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
}
.svc-detail-side .btn { margin-top: auto; }

/* ---------- How it works ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  counter-reset: step;
}
.step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  position: relative;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--blue);
  display: inline-block;
  border: 1.5px solid var(--blue);
  background: var(--blue-wash);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 37px;
  text-align: center;
  margin-bottom: 14px;
}
.step h3 { font-size: 1.18rem; margin-bottom: 6px; }
.step p { font-size: 0.93rem; color: var(--ink-soft); }

/* ---------- Officials ---------- */
.officials-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 20px;
  margin-bottom: 20px;
}
.official-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* lets the name/role block wrap instead of pushing past the card edge */
.official-card > div { min-width: 0; }
.official-card.captain {
  border-top: 4px solid var(--blue);
  flex-direction: column;
  text-align: center;
  justify-content: center;
  padding: 30px 20px;
}
.avatar {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  display: grid;
  place-items: center;
}
.official-card.captain .avatar { width: 84px; height: 84px; font-size: 1.6rem; }
.official-card.captain .captain-desc {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 10px;
  max-width: 30ch;
}
.official-card.captain .captain-desc + .captain-desc { margin-top: 8px; }
.official-name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.25; }
.official-role {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 3px;
}
.officials-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.officials-note {
  margin-top: 18px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- Visit ---------- */
.visit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.visit-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}
.visit-card h3 { font-size: 1.25rem; margin-bottom: 12px; }
.hours-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.hours-table td { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.hours-table td:last-child { text-align: right; font-family: var(--font-mono); font-size: 0.8rem; }
.hotline-list { list-style: none; }
.hotline-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.94rem;
}
.hotline-list .num { font-family: var(--font-mono); font-size: 0.8rem; white-space: nowrap; }
.visit-note { margin-top: 14px; font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background: var(--paper-deep);
  border-bottom: 1px solid var(--line);
  padding-block: 48px;
}
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.breadcrumb a { color: var(--ink-soft); }
.page-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 700; }
.page-hero .lede { margin-top: 10px; max-width: 60ch; color: var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; }
.faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  padding: 18px 22px;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  color: var(--blue);
  font-size: 1.2rem;
  transition: transform 0.25s ease;
}
/* the plus turns into a close mark instead of swapping glyphs */
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p {
  padding: 0 22px 18px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------- Request form ---------- */
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.form-sheet {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: var(--shadow-paper);
  padding: 36px 40px 40px;
}
.form-sheet-head {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 16px;
  margin-bottom: 28px;
}
.form-sheet-head .seal { width: 46px; height: 46px; flex: none; }
.form-no {
  margin-left: auto;
  white-space: nowrap;
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
  line-height: 1.7;
}
.form-sheet-head .lh-line {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.6;
}
.form-sheet-head .lh-brgy {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--blue);
}

fieldset {
  border: none;
  margin-bottom: 30px;
}
legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 4px;
}
.legend-note { font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 16px; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field label .req-mark { color: var(--blue); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 4px;
  padding: 11px 12px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(33, 82, 148, 0.18);
}
.field .hint { font-size: 0.78rem; color: var(--ink-soft); }
.radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.radio-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 0.94rem;
  cursor: pointer;
}
.radio-pill:has(input:checked) {
  border-color: var(--blue);
  background: var(--blue-wash);
  font-weight: 600;
}
.radio-pill input { accent-color: var(--blue); }
.check-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.check-row input { margin-top: 4px; accent-color: var(--blue); }
.form-actions {
  border-top: 1px dashed var(--line);
  padding-top: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.form-actions .small-print { font-size: 0.8rem; color: var(--ink-soft); }

/* Sidebar on request page */
.aside-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
}
.aside-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.aside-card ul { padding-left: 20px; font-size: 0.9rem; color: var(--ink-soft); }
.aside-card li { margin-bottom: 6px; }
.aside-card .track-field { display: flex; gap: 8px; margin-top: 12px; }
.aside-card .track-field input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  padding: 10px 12px;
  text-transform: uppercase;
}
.aside-card .track-field input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(33, 82, 148, 0.18);
}
.track-result { margin-top: 14px; font-size: 0.9rem; }
.track-result .status-line {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.track-result .status-line .dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--blue);
  align-self: center;
}
.track-result .mono { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-soft); }

/* Confirmation */
.confirm-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: var(--shadow-paper);
  padding: 48px 40px;
  text-align: center;
  position: relative;
}
.confirm-panel .stamp-big {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue);
  border: 4px double var(--blue);
  border-radius: 6px;
  padding: 12px 28px;
  display: inline-block;
  transform: rotate(-6deg);
  margin-bottom: 26px;
}
.confirm-panel.stamped .stamp-big { animation: stamp-thunk 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes stamp-thunk {
  0% { transform: rotate(-14deg) scale(2.6); opacity: 0; }
  60% { transform: rotate(-6deg) scale(0.94); opacity: 1; }
  100% { transform: rotate(-6deg) scale(1); opacity: 1; }
}
.confirm-panel h2 { font-size: 1.7rem; margin-bottom: 8px; }
.confirm-panel .ref-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 22px;
}
.confirm-panel .ref-no {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--blue);
  background: var(--blue-wash);
  border: 1.5px dashed var(--blue);
  border-radius: var(--radius);
  display: inline-block;
  padding: 10px 24px;
  margin: 8px 0 22px;
}
.confirm-panel .next-steps {
  text-align: left;
  max-width: 460px;
  margin: 0 auto 26px;
  font-size: 0.94rem;
  color: var(--ink-soft);
}
.confirm-panel .next-steps li { margin-bottom: 8px; }
.confirm-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

[hidden] { display: none !important; }

/* ---------- Footer ---------- */
.footer {
  background: var(--blue-deep);
  color: #B9C7E6;
  margin-top: 72px;
}
.footer .wrap { padding-block: 52px 28px; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-seal { width: 66px; height: 66px; margin-bottom: 16px; }
.footer .brand-lines .republic { color: #8FA5D4; }
.footer .brand-lines .bname { color: #fff; font-size: 1.3rem; }
.footer .brand-lines .locality { color: #8FA5D4; }
.footer-tagline {
  margin-top: 14px;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--sky);
  font-size: 1.02rem;
}
.footer h4 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8FA5D4;
  margin-bottom: 14px;
}
.footer ul { list-style: none; }
.footer li { margin-bottom: 9px; }
.footer a { color: #D5DEF2; text-decoration: none; font-size: 0.92rem; overflow-wrap: anywhere; }
.footer a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding-top: 22px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: #8FA5D4;
}

/* ---------- Reveal on scroll ----------
   js/main.js staggers siblings that enter together, then strips the class
   once the transition ends so card hover transitions take back over. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- Page-load entrance ----------
   The banner content rises as the page opens: heading column first, then
   the certificate (home) or the lede (inner pages). Transform and opacity
   only, so nothing shifts layout. */
@media (prefers-reduced-motion: no-preference) {
  .hero .wrap > *,
  .page-hero .wrap > * {
    animation: rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  .hero .wrap > :nth-child(2),
  .page-hero .wrap > :nth-child(2) { animation-delay: 0.1s; }
  .page-hero .wrap > :nth-child(3) { animation-delay: 0.18s; }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .confirm-panel.stamped .stamp-big { animation: none; }
  .btn, .svc-card, .cert-paper, .cert-folder, .faq summary::after { transition: none; }
  .cert-stage:hover { --cert-lift: 0px; }
}

/* ---------- Wide screens ----------
   The container is full-bleed, so the job here is to spend the extra width on
   more content per row rather than on wider cards and longer lines. Prose
   blocks keep their own measure caps (.section-head, .lede, .step p). */
@media (min-width: 1000px) {
  /* two columns of questions rather than one narrow column beside a void */
  .faq { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start; }
}

@media (min-width: 1200px) {
  :root { --gutter: 48px; }
  /* Track count follows the space available: at 240px a card still fits its
     longest role ("Kagawad · Infrastructure") beside the avatar. */
  .officials-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (min-width: 1440px) {
  /* still inside the 60-75 char measure, but it no longer leaves the hero
     column half empty */
  .hero .lede { max-width: 58ch; }
}

@media (min-width: 1600px) {
  :root { --gutter: 72px; }
  .bulletin-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  /* give the sidebar more of the sheet's width so inputs stay a usable size */
  .form-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  /* scale the whole certificate rather than resizing its parts, so the
     letterhead type keeps the fit it was set for */
  .cert-stage { min-height: 650px; --cert-scale: 1.18; }
}

@media (min-width: 1920px) {
  :root { --gutter: 104px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 48px; padding-block: 60px; }
  .cert-stage { min-height: 500px; }
  .bulletin-grid,
  .visit-grid,
  .form-layout { grid-template-columns: 1fr; }
  .svc-grid, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .officials-lead { grid-template-columns: 1fr; }
  .svc-detail { grid-template-columns: 1fr; }
  .svc-detail-side { border-left: none; border-top: 1px solid var(--line); }
}

/* Two seals plus the full nav need ~1040px of letterhead; below that the
   nav folds into the menu button so the seals keep their corners. */
@media (max-width: 1040px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 24px 20px;
    gap: 6px;
    z-index: 100;
    box-shadow: 0 16px 32px rgba(24, 34, 56, 0.12);
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 14px; }
  .nav a.active { box-shadow: inset 4px 0 0 var(--blue); }
  .nav .btn { margin-left: 0; margin-top: 8px; }
  .nav-toggle { display: block; }
  /* the masthead is sticky, which already anchors the dropdown nav */
}

@media (max-width: 620px) {
  .section { padding-block: 52px; }
  .svc-grid, .steps, .officials-grid { grid-template-columns: minmax(0, 1fr); }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .form-sheet { padding: 26px 20px 30px; }
  .form-no { display: none; }
  .cert-folder { width: 312px; height: 406px; }
  .cert-paper { width: 285px; min-height: 369px; padding: 20px 18px 24px; }
  .cert-sig { margin-bottom: 22px; }
  /* narrower paper, so the seals give the letterhead type room to fit */
  .cert-letterhead { grid-template-columns: 30px 1fr 30px; gap: 6px; }
  .cert-letterhead .seal { width: 30px; height: 30px; }
  .cert-letterhead .lh-line { font-size: 0.44rem; letter-spacing: 0.06em; }
  .cert-letterhead .lh-brgy { font-size: 0.72rem; }
  .notice-list li { grid-template-columns: 1fr; gap: 4px; }
  .brand-lines .bname { font-size: 1.2rem; }
  .brand .seal { width: 48px; height: 48px; }
  .masthead-mark { margin-left: 12px; padding-left: 12px; }
  .masthead-mark .seal { width: 44px; height: 44px; }
  .govbar .gov-text { font-size: 0.62rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-ctas .btn { width: 100%; }
}