/* ==========================================================================
   Deshnok Nagar Palika — public website
   Brand from the municipal seal: coral #FE6077, deep brown #2C1B1A.

   Accessibility (measured contrast on white):
     #FE6077 = 2.94:1  -> decorative only (never text)
     #D91E43 = 4.98:1  -> links, buttons, headings (WCAG AA)
     #2C1B1A = 16.4:1  -> body ink
     #6B6360 = 5.87:1  -> muted text
   ========================================================================== */

:root {
    --brand:        #FE6077;
    --brand-strong: #D91E43;
    --brand-dark:   #B00E33;
    --brand-soft:   #FFF1F3;
    --brand-line:   #FFD9DF;

    --ink:     #2C1B1A;
    --ink-2:   #4A3B39;
    --muted:   #6B6360;
    --line:    #E7E3E1;
    --line-2:  #F1EEEC;
    --surface: #FFFFFF;
    --bg:      #F7F6F5;
    /* Alternating section band. Deep enough to be seen as a change of ground —
       #F7F6F5 against white was a 1% difference and read as one flat page. */
    --band:    #EFE9E6;
    --band-line: #E2D9D4;
    --dark:    #2C1B1A;
    --dark-2:  #3A2624;

    --radius:    14px;
    --radius-sm: 9px;
    --shadow:    0 1px 2px rgba(44,27,26,.05), 0 1px 3px rgba(44,27,26,.06);
    --shadow-md: 0 6px 18px rgba(44,27,26,.09), 0 2px 6px rgba(44,27,26,.05);
    --shadow-lg: 0 18px 44px rgba(44,27,26,.16);

    --gutter: clamp(1rem, 3vw, 2.5rem);
    --container: 100%;
    --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Devanagari", sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.65;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-strong); text-decoration: none; }
a:hover { color: var(--brand-dark); text-decoration: underline; }

h1,h2,h3,h4 { line-height: 1.2; margin: 0 0 .5rem; letter-spacing: -.02em; }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1rem; }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
    outline: 3px solid var(--brand-strong);
    outline-offset: 2px;
    border-radius: 4px;
}

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 1100px; margin-inline: auto; }
/* Pages that are mostly prose get more of the screen: 1100px left a lot of
   empty margin on a desktop monitor. */
.narrow.wide-read { max-width: 1320px; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--brand-strong); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Top utility strip
   ========================================================================== */
.topbar {
    background: var(--dark);
    color: #E9E2E0;
    font-size: .82rem;
    padding: .45rem 0;
}
.topbar .container { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.topbar a { color: #E9E2E0; }
.topbar a:hover { color: #fff; }
.topbar .sep { flex: 1 1 auto; }
.topbar .tb-item { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }

.lang-switch { display: inline-flex; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; overflow: hidden; }
.lang-switch a {
    padding: .12rem .6rem; font-size: .78rem; font-weight: 600; text-decoration: none;
    color: #E9E2E0; line-height: 1.5;
}
.lang-switch a.on { background: var(--brand); color: #2C1B1A; }
.lang-switch a:hover { text-decoration: none; background: rgba(255,255,255,.12); }
.lang-switch a.on:hover { background: var(--brand); }

/* ==========================================================================
   Header + navigation
   ========================================================================== */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(44,27,26,.04);
}
.site-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-strong) 55%, var(--brand) 100%);
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }

.site-brand { display: flex; align-items: center; gap: .8rem; color: var(--ink); text-decoration: none; min-width: 0; }
.site-brand:hover { text-decoration: none; color: var(--ink); }
.site-logo { width: 54px; height: 54px; flex: none; }
/* min-width:0 + ellipsis lets the brand shrink on narrow phones instead of
   pushing the header wider than the viewport */
.site-brand > span { display: block; min-width: 0; }
/* display:block is required for text-overflow to take effect on these spans */
.site-brand .en { display: block; font-size: 1.12rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-brand .hi { display: block; font-size: .84rem; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-spacer { flex: 1 1 auto; }

.mainnav { display: flex; align-items: center; gap: .1rem; }
.mainnav > li { list-style: none; position: relative; }
.mainnav ul { list-style: none; margin: 0; padding: 0; }
.mainnav > li > a, .mainnav > li > button {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .6rem .75rem; border-radius: var(--radius-sm);
    color: var(--ink-2); font-weight: 600; font-size: .93rem;
    background: none; border: 0; cursor: pointer; font-family: inherit; text-decoration: none;
    white-space: nowrap;
}
.mainnav > li > a:hover, .mainnav > li > button:hover,
.mainnav > li.open > button { background: var(--brand-soft); color: var(--brand-dark); text-decoration: none; }
.mainnav > li > a.active { color: var(--brand-dark); background: var(--brand-soft); }
.caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
         transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; }
.mainnav > li.open .caret { transform: rotate(-135deg) translateY(-2px); }

.dropdown {
    position: absolute; top: calc(100% + .35rem); left: 0; min-width: 250px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-md); padding: .5rem; display: none; z-index: 120;
}
/* Invisible bridge across the visual gap between the nav item and its panel.
   Without it the pointer crosses dead space on the way down, mouseleave fires
   on the <li>, and the menu closes before you can reach an option.
   The pseudo-element is a descendant of the <li>, so hovering it keeps it open. */
.dropdown::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -0.6rem;
    height: 0.6rem;
}
.mainnav > li.open .dropdown { display: block; }
.dropdown a {
    display: block; padding: .55rem .7rem; border-radius: var(--radius-sm);
    color: var(--ink-2); font-size: .92rem; font-weight: 500; text-decoration: none;
}
.dropdown a:hover { background: var(--brand-soft); color: var(--brand-dark); text-decoration: none; }

.nav-cta {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--brand-strong); color: #fff; border: 1px solid var(--brand-strong);
    padding: .6rem 1.1rem; border-radius: 999px; font-weight: 700; font-size: .9rem; white-space: nowrap;
}
.nav-cta:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; text-decoration: none; }

.nav-burger {
    display: none; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); cursor: pointer;
}
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
    display: block; width: 19px; height: 2px; background: var(--ink); border-radius: 2px; content: ""; position: relative;
}
.nav-burger span::before { position: absolute; top: -6px; }
.nav-burger span::after  { position: absolute; top: 6px; }
.nav-scrim { display: none; }

/* ==========================================================================
   HERO — full viewport, animated
   ========================================================================== */
.hero {
    position: relative;
    min-height: calc(100svh - var(--header-h));
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(160deg, #3A2624 0%, #2C1B1A 45%, #4A1F2B 100%);
    color: #fff;
    text-align: center;
    padding: clamp(3rem, 8vh, 6rem) 0;
}

/* Layered animated background: drifting colour orbs + slow pan */
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-orb {
    position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
    will-change: transform;
}
.hero-orb.o1 { width: 46vmax; height: 46vmax; background: #FE6077; top: -14vmax; left: -10vmax; animation: drift1 26s ease-in-out infinite alternate; }
.hero-orb.o2 { width: 38vmax; height: 38vmax; background: #B00E33; bottom: -14vmax; right: -8vmax; animation: drift2 32s ease-in-out infinite alternate; }
.hero-orb.o3 { width: 26vmax; height: 26vmax; background: #FF9AAA; top: 32%; right: 22%; opacity: .32; animation: drift3 22s ease-in-out infinite alternate; }

@keyframes drift1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(9vmax,7vmax,0) scale(1.16); } }
@keyframes drift2 { from { transform: translate3d(0,0,0) scale(1.08); } to { transform: translate3d(-11vmax,-6vmax,0) scale(1); } }
@keyframes drift3 { from { transform: translate3d(0,0,0); } to { transform: translate3d(-7vmax,9vmax,0); } }

/* Subtle grid texture over the gradient */
.hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at 50% 45%, #000 15%, transparent 72%);
    animation: gridpan 40s linear infinite;
}
@keyframes gridpan { from { background-position: 0 0, 0 0; } to { background-position: 64px 64px, 64px 64px; } }

.hero-inner { position: relative; z-index: 2; max-width: 62rem; margin-inline: auto; padding-inline: var(--gutter); }

.hero-seal {
    width: clamp(96px, 12vw, 138px); height: auto; margin: 0 auto 1.5rem;
    filter: drop-shadow(0 10px 26px rgba(0,0,0,.42));
    animation: sealIn 1s cubic-bezier(.2,.7,.3,1) both, sealFloat 7s ease-in-out 1.1s infinite;
}
@keyframes sealIn   { from { opacity: 0; transform: translateY(24px) scale(.86) rotate(-9deg); } to { opacity: 1; transform: none; } }
@keyframes sealFloat{ 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }

.hero .eyebrow {
    display: inline-block; margin-bottom: 1rem; padding: .35rem 1rem;
    border: 1px solid rgba(255,255,255,.34); border-radius: 999px;
    font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    background: rgba(255,255,255,.09); backdrop-filter: blur(6px);
    color: #fff;
}
.hero h1 { color: #fff; margin-bottom: .6rem; text-shadow: 0 3px 22px rgba(0,0,0,.35); }
.hero .hero-hi { font-size: clamp(1.05rem, .9rem + .8vw, 1.6rem); color: #FFD9DF; font-weight: 600; margin-bottom: 1rem; }
.hero .hero-lead { font-size: clamp(1rem, .95rem + .35vw, 1.2rem); color: rgba(255,255,255,.9); max-width: 46rem; margin: 0 auto 2rem; }

.hero-actions { display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; }

/* Staggered entrance */
.reveal { opacity: 0; transform: translateY(22px); animation: revealUp .85s cubic-bezier(.2,.7,.3,1) both; }
.d1 { animation-delay: .12s; } .d2 { animation-delay: .26s; } .d3 { animation-delay: .40s; }
.d4 { animation-delay: .54s; } .d5 { animation-delay: .68s; }
@keyframes revealUp { to { opacity: 1; transform: none; } }

/* Scroll hint */
.hero-scroll {
    position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
    z-index: 2; color: rgba(255,255,255,.75); font-size: .78rem; letter-spacing: .1em;
    text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: .4rem;
    text-decoration: none;
}
.hero-scroll:hover { color: #fff; text-decoration: none; }
.hero-scroll .mouse {
    width: 22px; height: 34px; border: 2px solid rgba(255,255,255,.6); border-radius: 12px; position: relative;
}
.hero-scroll .mouse::after {
    content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; border-radius: 2px;
    background: #fff; transform: translateX(-50%); animation: wheel 1.8s ease-in-out infinite;
}
@keyframes wheel { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 12px); } }

/* --------------------------------------------------------------------------
   HERO SLIDESHOW (admin-controlled: images, text, transition, speed)
   Slides come from content.Banners with Placement = 'Hero'.
   -------------------------------------------------------------------------- */
.hero.has-slides {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #1F1312;
}

.hero-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-slide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity .9s ease, transform .9s ease;
    will-change: opacity, transform;
}
.hero-slide.on { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Readability wash so white text always passes contrast over any photo */
.hero-shade {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(28,17,16,.55) 0%, rgba(28,17,16,.30) 35%, rgba(28,17,16,.78) 100%),
        linear-gradient(90deg, rgba(176,14,51,.30), transparent 60%);
}

/* ---- Transition: fade (default) ---- */
.hero-slides.fx-fade .hero-slide { transform: none; }

/* ---- Transition: slide (horizontal) ---- */
.hero-slides.fx-slide .hero-slide { transform: translateX(6%); }
.hero-slides.fx-slide .hero-slide.on { transform: translateX(0); }
.hero-slides.fx-slide .hero-slide.leaving { transform: translateX(-6%); }

/* ---- Transition: zoom (Ken Burns on the active slide) ---- */
.hero-slides.fx-zoom .hero-slide img { transform: scale(1.04); transition: transform 1.2s ease; }
.hero-slides.fx-zoom .hero-slide.on img { animation: kenburns 9s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.14); } }

/* ---- Captions (authored per slide in the admin portal) ---- */
.hero-captions {
    position: relative; z-index: 3;
    width: 100%; max-width: 64rem;
    padding-inline: var(--gutter);
    display: grid;                 /* every caption occupies the same cell */
    text-align: center;
}
.hero-caption {
    grid-area: 1 / 1;
    opacity: 0; visibility: hidden; transform: translateY(14px);
    transition: opacity .6s ease .15s, transform .6s ease .15s, visibility .6s;
}
.hero-caption.on { opacity: 1; visibility: visible; transform: none; }
.hero-caption h1 { color: #fff; text-shadow: 0 3px 26px rgba(0,0,0,.5); margin-bottom: .6rem; }
.hero-caption .hero-lead { color: rgba(255,255,255,.94); text-shadow: 0 2px 14px rgba(0,0,0,.45); margin-bottom: 1.5rem; }

.hero-inner.over-slides { position: relative; z-index: 3; margin-top: 1.6rem; padding-inline: var(--gutter); }

/* The slideshow controls own the bottom of the hero — drop the scroll hint
   so the two don't collide. */
.hero.has-slides .hero-scroll { display: none; }

/* ---- Controls ---- */
.hero-controls {
    position: absolute; left: 0; right: 0; bottom: 2rem; z-index: 4;
    display: flex; align-items: center; justify-content: center; gap: .75rem;
}
.hero-arrow, .hero-play {
    width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
    border: 1px solid rgba(255,255,255,.45); background: rgba(28,17,16,.35);
    color: #fff; font-size: 1.35rem; line-height: 1;
    display: grid; place-items: center; backdrop-filter: blur(6px);
    transition: background .15s ease, border-color .15s ease;
}
.hero-play { font-size: .7rem; }
.hero-arrow:hover, .hero-play:hover { background: var(--brand-strong); border-color: var(--brand-strong); }

.hero-dots { display: flex; gap: .45rem; align-items: center; }
.hero-dot {
    width: 10px; height: 10px; border-radius: 50%; padding: 0; cursor: pointer;
    border: 0; background: rgba(255,255,255,.45); transition: width .25s ease, background .25s ease;
}
.hero-dot.on { background: #fff; width: 30px; border-radius: 5px; }

@media (max-width: 720px) {
    .hero-controls { bottom: 3.6rem; gap: .5rem; }
    .hero-arrow, .hero-play { width: 36px; height: 36px; font-size: 1.1rem; }
    .hero-caption h1 { font-size: clamp(1.6rem, 1.2rem + 3vw, 2.4rem); }
}

/* A slide whose image is missing still needs a readable backdrop */
.hero-slide.media-missing { background: linear-gradient(160deg, #3A2624 0%, #2C1B1A 45%, #4A1F2B 100%); }
.card-media.media-missing, .gal-item.media-missing { background: linear-gradient(140deg, var(--brand-soft), var(--line-2)); }

/* Hero stat band */
.hero-stats { display: flex; gap: clamp(1rem,4vw,3.5rem); justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; }
.hero-stat .n { font-size: clamp(1.5rem,1.2rem+1vw,2.2rem); font-weight: 800; color: #fff; line-height: 1; }
.hero-stat .l { font-size: .8rem; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .08em; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .8rem 1.5rem; border-radius: 999px; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink-2);
    font-weight: 700; font-size: .95rem; cursor: pointer; text-decoration: none; font-family: inherit;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { border-color: var(--brand-strong); color: var(--brand-strong); background: var(--brand-soft); text-decoration: none; transform: translateY(-1px); }
.btn.primary { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn.ghost { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.45); color: #fff; backdrop-filter: blur(6px); }
.btn.ghost:hover { background: rgba(255,255,255,.2); border-color: #fff; color: #fff; }
.btn.sm { padding: .5rem 1rem; font-size: .86rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ==========================================================================
   Ticker
   ========================================================================== */
.ticker { background: var(--brand-soft); border-bottom: 1px solid var(--brand-line); overflow: hidden; }
.ticker .container { display: flex; align-items: center; gap: 1rem; }
.ticker .tag {
    background: var(--brand-strong); color: #fff; font-weight: 700; font-size: .76rem;
    text-transform: uppercase; letter-spacing: .08em; padding: .5rem .9rem; white-space: nowrap;
    margin-left: calc(var(--gutter) * -1);
}
.ticker-viewport { overflow: hidden; flex: 1 1 auto; }

/* Duration is a fallback only: site.js measures the strip and replaces it with a
   value derived from --ticker-rate (pixels per second), so the announcements move
   at the same pace whether there are two of them or ten. */
.ticker-track {
    display: inline-flex; gap: 3rem; white-space: nowrap; padding: .5rem 0;
    animation: tickerMove var(--ticker-duration, 38s) linear infinite;
}

/* Admin-controlled speed (Content -> Announcements -> Ticker settings). */
.ticker[data-speed="slow"]   { --ticker-rate: 40;  --ticker-duration: 64s; }
.ticker[data-speed="medium"] { --ticker-rate: 70;  --ticker-duration: 38s; }
.ticker[data-speed="fast"]   { --ticker-rate: 115; --ticker-duration: 23s; }

.ticker.pause-on-hover:hover .ticker-track { animation-play-state: paused; }
.ticker-track a, .ticker-track span { color: var(--ink-2); font-size: .9rem; font-weight: 500; }
@keyframes tickerMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   Sections
   ========================================================================== */
main { flex: 1 0 auto; }
/* Each section is a visual group: a band of its own colour, generous air above
   and below, and a hairline whenever two neighbours share the same ground and
   the colour change cannot do the separating on its own. */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; background: var(--surface); }
.section.alt { background: var(--band); }

.section:not(.alt):not(.dark) + .section:not(.alt):not(.dark) { border-top: 1px solid var(--line); }
.section.alt + .section.alt { border-top: 1px solid var(--band-line); }
.section.dark { background: var(--dark); color: #EFE9E7; }
.section.dark h2 { color: #fff; }
.section.dark .section-sub { color: rgba(255,255,255,.72); }

.section-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
/* A second group stacked inside one section — "Our Services" under the events
   list, for instance — is fenced off so it does not read as more of the group
   above it. */
.section-head:not(:first-child) {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: clamp(1.4rem, 3vw, 2rem);
    border-top: 1px solid var(--line);
}
.section.alt .section-head:not(:first-child) { border-top-color: var(--band-line); }
.section.dark .section-head:not(:first-child) { border-top-color: rgba(255,255,255,.16); }
.section-head.center { text-align: center; }
.section-head .kicker {
    display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--brand-strong); margin-bottom: .5rem;
}
.section-sub { color: var(--muted); font-size: 1.02rem; margin: 0; max-width: 52rem; }
.section-head.center .section-sub { margin-inline: auto; }
.section-head .rule { width: 56px; height: 4px; border-radius: 2px; background: var(--brand); margin-top: .9rem; }
.section-head.center .rule { margin-inline: auto; }

.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ==========================================================================
   Cards & grids
   ========================================================================== */
/* Column counts are explicit rather than repeat(auto-fit, …). auto-fit COLLAPSES
   empty tracks, so a section holding a single news item, album or officer gave
   that one card the entire row — on a laptop that meant a 1800px card with a
   1000px-tall photo. Fixed tracks keep every card the same size no matter how
   many the CMS happens to hold; a lone card simply sits in the first column. */
.grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.6rem);
    grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
}
.g2, .g3, .g4 { --cols: 1; }

@media (min-width: 600px)  { .g2 { --cols: 2; } .g3 { --cols: 2; } .g4 { --cols: 2; } }
@media (min-width: 900px)  { .g3 { --cols: 3; } .g4 { --cols: 3; } }
@media (min-width: 1200px) { .g4 { --cols: 4; } }
/* The site container is full-width, so very wide monitors get another column
   instead of ever-growing cards. */
@media (min-width: 1700px) { .g3 { --cols: 4; } .g4 { --cols: 5; } }
@media (min-width: 2300px) { .g3 { --cols: 5; } .g4 { --cols: 6; } }

/* The chairperson is the one card that should outrank its row-mates. */
@media (min-width: 900px) { .grid > .person.featured { grid-column: span 2; } }

.card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden; position: relative;
    display: flex; flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-line); }
.card .card-body { padding: 1.35rem 1.45rem; flex: 1 1 auto; }
.card h3 { margin: 0 0 .45rem; font-size: 1.1rem; }
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: var(--brand-dark); text-decoration: none; }
.card p { color: var(--muted); margin: 0 0 .75rem; font-size: .94rem; }
.card .meta { font-size: .8rem; color: var(--muted); display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.card-media { aspect-ratio: 16 / 9; background: var(--line-2); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card-media img { transform: scale(1.05); }

/* Service / quick-link tiles */
.service {
    display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); color: var(--ink); text-decoration: none; position: relative; overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.service::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--brand); opacity:0; transition: opacity .18s ease; }
.service:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; color: var(--ink); }
.service:hover::before { opacity: 1; }
.service .ico {
    width: 46px; height: 46px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-strong);
    display: grid; place-items: center; font-size: 1.35rem; margin-bottom: .35rem;
}
.service strong { font-size: 1.02rem; }
.service span { color: var(--muted); font-size: .89rem; }

/* Badges */
.badge {
    display: inline-block; padding: .18rem .6rem; border-radius: 999px;
    font-size: .74rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    background: var(--brand-soft); color: var(--brand-dark); border: 1px solid var(--brand-line);
}
.badge.blue   { background:#EAF1FE; color:#1D4ED8; border-color:#C7DAFB; }
.badge.amber  { background:#FDF3E7; color:#B45309; border-color:#F6DFC0; }
.badge.green  { background:#E7F6EC; color:#047857; border-color:#BFE3CD; }
.badge.violet { background:#F3EDFE; color:#6D28D9; border-color:#DECFFA; }
.badge.grey   { background:#F1EEEC; color:#6B6360; border-color:#E0DAD7; }

/* ==========================================================================
   Lists (notices, tenders, documents)
   ========================================================================== */
.doclist { display: flex; flex-direction: column; gap: .75rem; }
.docrow {
    display: flex; align-items: center; gap: 1rem; padding: 1.05rem 1.25rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); transition: border-color .15s ease, transform .15s ease;
}
.docrow:hover { border-color: var(--brand-line); transform: translateX(2px); }
.docrow .dl-main { flex: 1 1 auto; min-width: 0; }
.docrow .dl-title { font-weight: 600; color: var(--ink); margin: 0 0 .25rem; font-size: 1rem; }
.docrow .dl-title a { color: var(--ink); }
.docrow .dl-title a:hover { color: var(--brand-dark); }
.docrow .dl-meta { font-size: .82rem; color: var(--muted); display: flex; gap: .9rem; flex-wrap: wrap; }
.docrow .dl-actions { flex: none; display: flex; gap: .5rem; }
.filepill {
    display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700;
    color: var(--brand-dark); background: var(--brand-soft); border: 1px solid var(--brand-line);
    padding: .2rem .55rem; border-radius: 6px;
}

/* Filter chips */
.chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.chip {
    padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink-2); font-size: .88rem; font-weight: 600; text-decoration: none;
}
.chip:hover { border-color: var(--brand-strong); color: var(--brand-strong); text-decoration: none; }
.chip.on { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1rem; }
.gal-item {
    position: relative; display: block; aspect-ratio: 1/1; border-radius: var(--radius);
    overflow: hidden; background: var(--line-2); box-shadow: var(--shadow);
}
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gal-item:hover img { transform: scale(1.07); }
.gal-item figcaption {
    position: absolute; inset: auto 0 0 0; padding: 2rem .9rem .8rem;
    background: linear-gradient(transparent, rgba(44,27,26,.85));
    color: #fff; font-size: .85rem; font-weight: 500;
}
.gal-item .play {
    position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 2rem;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

/* Transparent hit area covering the tile: keeps the <figure>/<figcaption>
   markup intact while giving keyboard users a real, focusable control. */
.gal-open {
    position: absolute; inset: 0; z-index: 2;
    border: 0; background: none; padding: 0; cursor: zoom-in;
}
.gal-open:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: -3px; }

/* ==========================================================================
   Lightbox (gallery viewer)
   ========================================================================== */
.lightbox { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; }
.lightbox[hidden] { display: none; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(22, 13, 12, .93); }
body.lb-open { overflow: hidden; }

.lb-stage {
    position: relative; z-index: 1; margin: 0;
    display: flex; flex-direction: column; align-items: center; gap: .9rem;
    width: 100%; height: 100%; padding: clamp(3.5rem, 8vh, 5rem) clamp(1rem, 8vw, 5.5rem);
    box-sizing: border-box; justify-content: center;
}
.lb-media { display: flex; align-items: center; justify-content: center; min-height: 0; }
.lb-media img, .lb-media video {
    max-width: 100%; max-height: 78vh; width: auto; height: auto;
    border-radius: var(--radius); box-shadow: 0 24px 70px rgba(0,0,0,.55); background: #000;
}
.lb-missing { color: #E9DFDC; font-size: .95rem; }

.lb-cap {
    display: flex; align-items: baseline; justify-content: center; gap: .9rem; flex-wrap: wrap;
    color: #F1E9E7; font-size: .95rem; text-align: center; max-width: 60rem;
}
.lb-cap .lb-count { color: #B5A8A4; font-size: .84rem; font-variant-numeric: tabular-nums; }

.lb-btn {
    position: absolute; z-index: 2;
    width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); color: #fff;
    font-size: 1.9rem; line-height: 1; cursor: pointer; backdrop-filter: blur(6px);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.lb-btn:hover { background: var(--brand-strong); border-color: var(--brand-strong); transform: scale(1.06); }
.lb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lb-btn[hidden] { display: none; }
.lb-close { top: 1rem; right: 1rem; font-size: 1.7rem; }
.lb-prev { left: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.06); }

/* On a phone the side arrows would sit over the picture — move them under it. */
@media (max-width: 640px) {
    .lb-media img, .lb-media video { max-height: 62vh; }
    .lb-prev, .lb-next { top: auto; bottom: 1.1rem; transform: none; }
    .lb-prev { left: 25%; }
    .lb-next { right: 25%; }
    .lb-prev:hover, .lb-next:hover { transform: scale(1.06); }
    .lb-stage { padding-bottom: 5.5rem; }
}

/* ==========================================================================
   Banner slider
   ========================================================================== */
.slider {
    position: relative; border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-md); background: var(--line-2); aspect-ratio: 21 / 8;
}
.slider .slide {
    position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none;
}
.slider .slide.on { opacity: 1; pointer-events: auto; }
.slider .slide img { width: 100%; height: 100%; object-fit: cover; }
.slider .slide-cap {
    position: absolute; inset: auto 0 0 0; padding: 2.5rem 1.6rem 1.3rem;
    background: linear-gradient(transparent, rgba(44,27,26,.88));
    color: #fff; font-size: clamp(1rem, .9rem + .6vw, 1.4rem); font-weight: 700;
}
.slider-dots { position: absolute; left: 0; right: 0; bottom: .7rem; display: flex; justify-content: center; gap: .45rem; z-index: 3; }
.slider-dot {
    width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: rgba(255,255,255,.5);
}
.slider-dot.on { background: #fff; width: 26px; border-radius: 5px; }
@media (max-width: 720px) { .slider { aspect-ratio: 16 / 10; } }

/* ==========================================================================
   People (councillors / officers)
   ========================================================================== */
.person {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden; text-align: center; padding-bottom: 1.2rem;
}
.person .photo {
    width: 100%; aspect-ratio: 1/1; object-fit: cover; background: var(--line-2);
}
.person .ph-fallback {
    width: 100%; aspect-ratio: 1/1; display: grid; place-items: center;
    background: linear-gradient(140deg, var(--brand-soft), #fff); color: var(--brand-strong);
    font-size: 2.4rem; font-weight: 800;
}
.person h3 { margin: 1rem .8rem .15rem; font-size: 1.05rem; }
.person .role { color: var(--brand-dark); font-weight: 600; font-size: .88rem; margin-bottom: .5rem; }
.person .contact { font-size: .84rem; color: var(--muted); display: flex; flex-direction: column; gap: .15rem; }
.person.featured { border-color: var(--brand-line); box-shadow: var(--shadow-md); }

/* "Read message" — only rendered for people who have published one. */
.person .more {
    display: inline-flex; align-items: center; gap: .3rem; margin-top: .8rem;
    font-size: .85rem; font-weight: 700; color: var(--brand-strong);
}
.person .more:hover { color: var(--brand-dark); text-decoration: none; gap: .5rem; }
.person .more::after { content: '→'; transition: transform .18s ease; }

/* ==========================================================================
   Profile page (/profile/councillor/{id}, /profile/officer/{id})
   ========================================================================== */
.profile { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .profile { grid-template-columns: minmax(260px, 340px) 1fr; } }

.profile-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden; text-align: center; padding-bottom: 1.4rem;
    position: sticky; top: calc(var(--header-h) + 1rem);
}
@media (max-width: 899px) { .profile-card { position: static; } }

.profile-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--line-2); display: block; }
/* Same element carries both classes when there is no photo; .profile-photo's
   display:block would otherwise knock the initial out of the centre. */
.profile-card .ph-fallback { display: grid; place-items: center; font-size: 4rem; }
.profile-card h2 { margin: 1.1rem 1rem .2rem; font-size: 1.3rem; }
.profile-card .role { color: var(--brand-dark); font-weight: 600; font-size: .95rem; margin: 0 1rem .3rem; }
.profile-card .ward { color: var(--muted); font-size: .88rem; margin: 0 1rem .8rem; }

.profile-contact {
    display: flex; flex-direction: column; gap: .35rem; align-items: center;
    padding: .9rem 1rem 0; margin: 0 1rem; border-top: 1px solid var(--line); font-size: .9rem;
}

.profile-social { padding: 1rem 1rem 0; margin: .9rem 1rem 0; border-top: 1px solid var(--line); }
.profile-social .social-label {
    display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); margin-bottom: .6rem;
}
.social-links { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
.social-links .social {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .38rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
    border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.social-links .social svg { width: 14px; height: 14px; flex: none; }
.social-links .social:hover { color: #fff; text-decoration: none; }
/* Brand colours on hover only, so the row stays calm at rest and every pill
   keeps a readable contrast until the pointer is on it. */
.social-links .facebook:hover  { background: #1877F2; border-color: #1877F2; }
.social-links .twitter:hover   { background: #14171A; border-color: #14171A; }
.social-links .instagram:hover { background: #C13584; border-color: #C13584; }
.social-links .youtube:hover   { background: #C4302B; border-color: #C4302B; }
.social-links .linkedin:hover  { background: #0A66C2; border-color: #0A66C2; }
.social-links .website:hover   { background: var(--brand-strong); border-color: var(--brand-strong); }

.profile-message {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: clamp(1.5rem, 3vw, 2.6rem);
}
.profile-message .section-head { margin-bottom: 1.4rem; }
.message-body { font-size: 1.03rem; line-height: 1.85; color: var(--ink-2); max-width: 64ch; }
.message-body p { margin: 0 0 1.1rem; }
.message-body p:first-child::first-letter {
    float: left; font-size: 3.1rem; line-height: .86; font-weight: 700;
    color: var(--brand-strong); padding: .1rem .5rem 0 0;
}
.message-sign {
    margin: 1.8rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line);
    display: flex; flex-direction: column; gap: .15rem;
}
.message-sign strong { font-size: 1.02rem; color: var(--ink); }
.message-sign span { font-size: .88rem; color: var(--muted); }
.profile-back { margin: 1.8rem 0 0; }

/* ==========================================================================
   Page header (interior pages)
   ========================================================================== */
.pagehead {
    background: linear-gradient(150deg, #3A2624, #2C1B1A 60%, #4A1F2B);
    color: #fff; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3.5rem);
    position: relative; overflow: hidden;
}
.pagehead::before {
    content: ""; position: absolute; width: 40vmax; height: 40vmax; border-radius: 50%;
    background: var(--brand); filter: blur(80px); opacity: .34; top: -18vmax; right: -10vmax;
    animation: drift3 24s ease-in-out infinite alternate;
}
/* A department may put its own photograph behind the heading. The gradient
   stays on top of it, dark enough that white text keeps its contrast whatever
   the picture happens to be. */
.pagehead.has-banner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.pagehead.has-banner::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(150deg, rgba(58,38,36,.78), rgba(44,27,26,.70) 60%, rgba(74,31,43,.78));
}
.pagehead.has-banner .container { position: relative; z-index: 1; }

.pagehead h1 { color: #fff; margin-bottom: .35rem; position: relative; }
.pagehead .sub { color: rgba(255,255,255,.82); font-size: 1.02rem; margin: 0; position: relative; max-width: 50rem; }
.crumbs { position: relative; font-size: .84rem; color: rgba(255,255,255,.68); margin-bottom: .9rem; }
.crumbs a { color: rgba(255,255,255,.85); }
.crumbs a:hover { color: #fff; }

/* ==========================================================================
   Forms
   ========================================================================== */
.formcard {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: clamp(1.4rem, 3vw, 2.2rem);
}
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
.field > label { font-weight: 600; font-size: .88rem; color: var(--ink-2); }
.field .help { font-size: .8rem; color: var(--muted); }
.field input, .field select, .field textarea {
    padding: .7rem .85rem; border: 1px solid #D6D0CD; border-radius: var(--radius-sm);
    font-size: 1rem; font-family: inherit; color: var(--ink); background: var(--surface); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--brand-strong); box-shadow: 0 0 0 3px rgba(217,30,67,.15);
}
.field textarea { min-height: 130px; resize: vertical; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 1.1rem; }

/* --------------------------------------------------------------------------
   Download button for a content page's official PDF
   -------------------------------------------------------------------------- */
.page-download {
    display: flex; align-items: center; gap: 1rem;
    margin: 1.6rem 0; padding: 1rem 1.25rem;
    background: var(--surface); border: 1px solid var(--brand-line); border-radius: var(--radius);
    box-shadow: var(--shadow); text-decoration: none; max-width: 34rem;
    /* Never inherits the centring of a .section-head.center — the file name has
       to stay left-aligned to be scannable. */
    text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.page-download:hover {
    border-color: var(--brand-strong); box-shadow: var(--shadow-md);
    transform: translateY(-2px); text-decoration: none;
}
.page-download .pd-icon {
    flex: none; display: grid; place-items: center;
    width: 46px; height: 46px; border-radius: 10px;
    background: var(--brand-strong); color: #fff;
    font-size: .72rem; font-weight: 800; letter-spacing: .04em;
}
.page-download .pd-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.page-download .pd-text strong { color: var(--ink); font-size: .98rem; }
.page-download .pd-meta {
    color: var(--muted); font-size: .84rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-download .pd-arrow {
    margin-left: auto; flex: none; color: var(--brand-strong); font-size: 1.3rem; font-weight: 700;
}
.section.alt .page-download, .section.dark .page-download { background: var(--surface); }

/* --------------------------------------------------------------------------
   Citizen Charter
   -------------------------------------------------------------------------- */
.charter-list { margin: .6rem 0 0; padding-left: 1.15rem; color: var(--ink-2); }
.charter-list li { margin-bottom: .4rem; line-height: 1.6; }
.charter-list li::marker { color: var(--brand-strong); }

.dept-charter {
    margin: .9rem 0 0; font-size: .88rem; font-weight: 600;
    display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
}
.dept-charter:empty { display: none; }

/* The pointer from one page to its other half. */
.charter-more {
    margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
    color: var(--muted);
    font-size: .95rem;
}
.charter-more a { font-weight: 600; }

/* --------------------------------------------------------------------------
   Authored prose (standalone CMS pages at /p/{slug})
   The body is HTML written by an administrator, so every common tag needs to
   land somewhere sensible without a class on it.
   -------------------------------------------------------------------------- */
/* Authored text fills the width it is given rather than sitting in a narrow
   column — the container above it (.narrow, 1100px) is what bounds the line
   length. Longer lines need more leading and a slightly larger face to stay
   comfortable, hence the bump to both. */
.prose {
    font-size: 1.06rem; line-height: 1.85; color: var(--ink-2);
    max-width: none; margin-inline: auto;
}
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 1.5rem; color: var(--ink); margin: 2.2rem 0 .8rem; }
.prose h3 { font-size: 1.18rem; color: var(--ink); margin: 1.8rem 0 .6rem; }
.prose p { margin: 0 0 1.1rem; }
.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.prose li { margin-bottom: .45rem; }
.prose a { color: var(--brand-strong); font-weight: 600; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1rem 0; }
.prose blockquote {
    margin: 1.4rem 0; padding: .3rem 0 .3rem 1.2rem;
    border-left: 3px solid var(--brand-line); color: var(--muted); font-style: italic;
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .95rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: .6rem .75rem; text-align: left; }
.prose th { background: var(--brand-soft); color: var(--ink); font-weight: 700; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* Secondary links under a sign-in form: register, forgot password, OTP. */
.form-links {
    display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
    margin: 1.1rem 0 0; font-size: .9rem; font-weight: 600;
}
.alt-signin { margin-top: 1rem; text-align: center; }

/* --------------------------------------------------------------------------
   Captcha
   -------------------------------------------------------------------------- */
.captcha { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.captcha img {
    border: 1px solid var(--brand-line); border-radius: var(--radius-sm);
    background: var(--brand-soft); display: block; flex: none;
    user-select: none; -webkit-user-drag: none;
}
.captcha input[type="text"] {
    flex: 1 1 190px; min-width: 0;
    letter-spacing: .18em; font-weight: 600; text-transform: uppercase;
}
/* The typed answer is spaced-out upper case; the hint should read normally. */
.captcha input[type="text"]::placeholder {
    text-transform: none; letter-spacing: normal; font-weight: 400;
}
.captcha-reload {
    flex: none; width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface); color: var(--brand-strong);
    font-size: 1.25rem; line-height: 1; cursor: pointer;
    display: grid; place-items: center;
    transition: background .18s ease, border-color .18s ease, transform .3s ease;
}
.captcha-reload:hover { background: var(--brand-soft); border-color: var(--brand-line); transform: rotate(180deg); }
.captcha-reload:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }
.captcha-field .req { color: var(--brand-strong); }

/* Honeypot: reachable by a blind script, invisible and unfocusable for people.
   display:none is avoided on purpose — some bots skip hidden inputs. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

.alert { padding: .9rem 1.15rem; border-radius: var(--radius-sm); font-size: .93rem; margin-bottom: 1.2rem; font-weight: 500; }
.alert.err  { background:#FDECEA; color:#B3261E; border:1px solid #F5C6C2; }
.alert.ok   { background:#E7F6EC; color:#14663A; border:1px solid #BFE3CD; }
.alert.info { background:#EAF1FE; color:#1D4ED8; border:1px solid #C7DAFB; }

.field-val { color: #B3261E; font-size: .82rem; }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }

/* ==========================================================================
   Status timeline (complaint tracking)
   ========================================================================== */
.statusbar { display: flex; gap: .35rem; margin: 1.2rem 0 1.6rem; }
.statusbar .st { flex: 1 1 0; text-align: center; font-size: .78rem; color: var(--muted); }
.statusbar .st .dot { height: 6px; border-radius: 3px; background: var(--line); margin-bottom: .45rem; }
.statusbar .st.done .dot { background: var(--brand-strong); }
.statusbar .st.done { color: var(--brand-dark); font-weight: 600; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: .8rem 0 .8rem 1.6rem; border-bottom: 1px solid var(--line-2); }
.timeline li::before {
    content: ""; position: absolute; left: 0; top: 1.25rem; width: 9px; height: 9px;
    border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.timeline li:last-child { border-bottom: 0; }
.timeline .when { font-size: .8rem; color: var(--muted); }

.empty {
    text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
    background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted);
}
.empty .ico { font-size: 2.4rem; margin-bottom: .6rem; opacity: .55; }

/* ==========================================================================
   Footer — large, multi-column
   ========================================================================== */
.site-footer { background: var(--dark); color: #CFC6C3; margin-top: auto; }
.footer-top { padding: clamp(2.5rem, 5vw, 4rem) 0 2rem; }
/* Columns can be switched off in Content → Menus & footer, so the template
   follows the number actually rendered instead of assuming five. */
.footer-grid {
    display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr;
}
.footer-grid.cols-1 { grid-template-columns: minmax(0, 42rem); }
.footer-grid.cols-2 { grid-template-columns: 1.6fr 1.3fr; }
.footer-grid.cols-3 { grid-template-columns: 1.6fr 1fr 1.3fr; }
.footer-grid.cols-4 { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; }
.footer-col h4 {
    color: #fff; font-size: .88rem; text-transform: uppercase; letter-spacing: .1em;
    margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 2px solid rgba(254,96,119,.45); display: inline-block;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.footer-col a { color: #CFC6C3; font-size: .91rem; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-brand { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.footer-brand img { width: 58px; height: 58px; }
.footer-brand .en { color: #fff; font-weight: 700; font-size: 1.08rem; line-height: 1.25; }
.footer-brand .hi { color: #CFC6C3; font-size: .85rem; }
.footer-about { font-size: .91rem; line-height: 1.7; color: #BDB2AE; }
.footer-contact { display: flex; flex-direction: column; gap: .7rem; font-size: .91rem; }
.footer-contact .ci { display: flex; gap: .6rem; align-items: flex-start; }
.footer-contact .ci .k { color: var(--brand); flex: none; }
.footer-map { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid rgba(255,255,255,.14); margin-top: .9rem; }
.footer-map iframe { display: block; width: 100%; height: 170px; border: 0; filter: grayscale(.25); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12); padding: 1.2rem 0;
    font-size: .85rem; color: #A99E9A;
}
.footer-bottom .container { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
.footer-bottom a { color: #CFC6C3; }
/* Small-print links (privacy, disclaimer …), separated by thin rules. */
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
.footer-legal a { position: relative; }
.footer-legal a + a::before {
    content: ''; position: absolute; left: -.5rem; top: .15em; bottom: .15em;
    border-left: 1px solid rgba(255,255,255,.22);
}
/* Icons are rendered only for accounts configured in Content → Site settings,
   so this row can hold anything from one link to six — or be absent entirely. */
.footer-social { display: flex; gap: .6rem; flex-wrap: wrap; }
.footer-social a {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.08); color: #fff; text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}
.footer-social a svg { width: 19px; height: 19px; display: block; }
.footer-social a:hover { background: var(--brand-strong); text-decoration: none; transform: translateY(-2px); }
.footer-social a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Each network on its own colour at hover, so the row is identifiable at a glance. */
.footer-social a.facebook:hover  { background: #1877F2; }
.footer-social a.twitter:hover   { background: #000; }
.footer-social a.instagram:hover { background: #C13584; }
.footer-social a.youtube:hover   { background: #C4302B; }
.footer-social a.linkedin:hover  { background: #0A66C2; }
.footer-social a.whatsapp:hover  { background: #25D366; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
    /* The Information column is dropped at this width, so one fewer track. */
    .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.4fr; }
    .footer-grid.cols-4 { grid-template-columns: 1.5fr 1fr 1.4fr; }
    .footer-grid.cols-3 { grid-template-columns: 1.5fr 1.4fr; }
    .footer-grid.cols-2, .footer-grid.cols-1 { grid-template-columns: minmax(0, 42rem); }
    .footer-col.col-hide-lg { display: none; }
}

@media (max-width: 1080px) {
    .nav-burger { display: inline-flex; }
    .mainnav {
        position: fixed; top: 0; left: 0; bottom: 0; width: min(88vw, 340px);
        background: var(--surface); border-right: 1px solid var(--line);
        flex-direction: column; align-items: stretch; gap: .1rem;
        padding: 1.25rem 1rem; overflow-y: auto; z-index: 160;
        transform: translateX(-102%); transition: transform .24s ease; box-shadow: var(--shadow-lg);
        margin: 0;
    }
    body.nav-open .mainnav { transform: translateX(0); }
    /* z-index note: .site-header has z-index:100, which creates a stacking
       context — so the drawer's z-index:160 is scoped INSIDE the header and
       cannot beat a root-level scrim of 150. Keeping the scrim below the
       header (90) guarantees the drawer, which lives inside the header,
       always sits above it. */
    body.nav-open .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(44,27,26,.5); z-index: 90; }
    .mainnav > li > a, .mainnav > li > button { width: 100%; justify-content: space-between; padding: .75rem .8rem; }
    .dropdown {
        position: static; display: none; box-shadow: none; border: 0; border-left: 2px solid var(--brand-line);
        border-radius: 0; margin: .15rem 0 .4rem .8rem; padding: .2rem 0 .2rem .5rem; min-width: 0;
    }
    /* No floating panel on mobile, so the hover bridge isn't needed (and would
       otherwise sit as a stray absolute strip inside the accordion). */
    .dropdown::before { content: none; }
    .mainnav > li.open .dropdown { display: block; }
    .nav-cta { display: none; }
    .mainnav .nav-cta-mobile { display: inline-flex; margin-top: .8rem; justify-content: center; }
}
@media (min-width: 1081px) { .mainnav .nav-cta-mobile { display: none; } }

@media (max-width: 820px) {
    :root { --header-h: 66px; }
    .site-logo { width: 44px; height: 44px; }
    .site-brand .en { font-size: 1rem; }
    .site-brand .hi { font-size: .76rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .topbar .tb-item.hide-sm { display: none; }
    .statusbar { flex-wrap: wrap; }
    .statusbar .st { flex: 1 1 40%; }
}

@media (max-width: 560px) {
    body { font-size: 15px; }
    .site-brand .hi { display: none; }
    .footer-grid { grid-template-columns: 1fr; }
    .docrow { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .docrow .dl-actions { width: 100%; }
    .docrow .dl-actions .btn { flex: 1 1 auto; }
    .hero-actions .btn { width: 100%; }
    .footer-bottom .container { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Motion / print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
    .hero-orb, .hero-grid, .ticker-track { animation: none !important; }
}

@media print {
    .topbar, .site-header, .site-footer, .hero-scroll, .chips, .btn { display: none !important; }
    .hero, .pagehead { background: none !important; color: #000 !important; min-height: 0; padding: 1rem 0; }
    .hero h1, .pagehead h1 { color: #000 !important; }
    body { background: #fff; }
    .card, .docrow { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}

/* ==========================================================================
   Full-page welcome notice
   Shown INSTEAD of the site when the council has something every visitor must
   read: it fills the window rather than sitting in a dialog over a dimmed page.
   Colours and the background picture come from Content → Welcome notice and
   arrive as custom properties on the element itself.
   ========================================================================== */
body.has-notice { overflow: hidden; }

.site-notice {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;

    /* Overridden per notice by the style attribute; these are the fallbacks if
       the settings were never saved. */
    background: var(--nc-bg, #fff);
    color: var(--nc-text, var(--ink));
    animation: sn-in .3s ease-out both;
}

@keyframes sn-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- Leaving the screen ----
   Which animation runs is chosen in Content → Welcome notice; --nc-exit carries
   the chosen duration, and site.js waits for the animation to end before taking
   the notice out of the page. "No effect" sets the duration to 0ms, and the
   script removes it without adding the class at all. */
.site-notice.sn-closing {
    pointer-events: none;                /* a second click during the exit does nothing */
    animation: sn-out-fade var(--nc-exit, 450ms) ease forwards;
}
.site-notice[data-exit="up"].sn-closing   { animation-name: sn-out-up;   animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
.site-notice[data-exit="down"].sn-closing { animation-name: sn-out-down; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
.site-notice[data-exit="zoom"].sn-closing { animation-name: sn-out-zoom; }

@keyframes sn-out-fade {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes sn-out-up {
    from { transform: translateY(0); }
    to   { transform: translateY(-100%); }
}
@keyframes sn-out-down {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}
@keyframes sn-out-zoom {
    from { transform: scale(1); opacity: 1; }
    to   { transform: scale(1.08); opacity: 0; }
}

/* ---- Background picture ---- */
.site-notice .sn-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.site-notice .sn-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;          /* fills the window, never squashed */
    object-position: center;
    display: block;
}
/* The wash between picture and words. Its colour is chosen in the admin. */
.site-notice .sn-wash { position: absolute; inset: 0; display: block; }

/* ---- Content ---- */
.site-notice .sn-card {
    position: relative;
    z-index: 1;                 /* above the picture */
    width: min(860px, 100%);
    margin: auto;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    text-align: center;
}


.site-notice h2 {
    flex: none;
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    color: inherit;
    text-wrap: balance;
}

.site-notice .sn-image {
    flex: none;
    width: auto;
    max-width: 100%;
    max-height: 46vh;
    object-fit: contain;        /* a scanned circular is never cropped */
    border-radius: var(--radius-sm);
    margin: 0 auto 1.1rem;
    box-shadow: 0 10px 30px rgba(20, 12, 11, .22);
}

.site-notice .sn-body {
    margin: 0 auto 1.4rem;
    color: inherit;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.7;
    white-space: pre-line;      /* keeps the typist's line breaks */
    text-align: center;
    max-width: 62ch;
    /* The part that gives way when the notice is taller than the screen. */
    overflow-y: auto;
    min-height: 3.5rem;
}

/* Always the bottom of the page, and never scrolled away from. */
.site-notice .sn-actions {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.site-notice .sn-proceed {
    order: 2;                   /* the way out is always the last, biggest control */
    font: inherit;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--nc-btn-ink, #fff);
    background: var(--nc-btn, var(--brand-strong));
    border: 0;
    border-radius: 999px;
    padding: .9rem 2rem;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(20, 12, 11, .22);
    transition: transform .15s ease, box-shadow .15s ease;
}
.site-notice .sn-proceed:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(20, 12, 11, .28); }
.site-notice .sn-proceed:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* Secondary action: drawn from the text colour so it works on any background. */
.site-notice .sn-link {
    order: 1;
    font-weight: 600;
    color: inherit;
    padding: .9rem 1.3rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    opacity: .85;
}
.site-notice .sn-link:hover { opacity: 1; color: inherit; text-decoration: none; }

@media (max-width: 560px) {
    .site-notice .sn-image { max-height: 40vh; }
    .site-notice .sn-actions { flex-direction: column-reverse; align-items: stretch; }
    .site-notice .sn-link, .site-notice .sn-proceed { width: 100%; text-align: center; }
}

/* Short, wide windows (a laptop with many toolbars): give the picture less room
   rather than pushing the button off the screen. */
@media (max-height: 620px) {
    .site-notice .sn-image { max-height: 34vh; }
    .site-notice h2 { margin-bottom: .6rem; }
}

@media print {
    .site-notice { display: none !important; }
    body.has-notice { overflow: visible !important; }
}