/* ============================================================================
   DUNUKOFIA LGA — public site stylesheet  (Design B "Paradise")
   Bricolage Grotesque display + Inter body, deep-green + sun-yellow palette.
   Shared by Site.master and every public page.
   ============================================================================ */
:root{
  --deep:#03271A; --pine:#06402B; --grass:#0E7A3F; --mint:#9FE3BC;
  --sun:#F2B33D; --clay:#D96A2B;
  --ink:#0B1712; --body:#4A5B51; --muted:#7E8F85; --line:#E3EBE5; --wash:#F4F8F5;
}
html{scroll-behavior:smooth;}
body{font-family:"Inter",sans-serif;color:var(--body);background:#fff;}
h1,h2,h3,h4,h5,h6,.disp{font-family:"Bricolage Grotesque",sans-serif;color:var(--ink);letter-spacing:-.02em;}
a{text-decoration:none;}
.btn{border-radius:8px;font-weight:700;font-family:"Bricolage Grotesque",sans-serif;}
.btn-sun{background:var(--sun);border-color:var(--sun);color:#2B1D02;}
.btn-sun:hover{background:#D99B22;border-color:#D99B22;color:#2B1D02;}
.btn-pine{background:var(--pine);border-color:var(--pine);color:#fff;}
.btn-pine:hover{background:var(--deep);border-color:var(--deep);color:#fff;}
.badge-sq{border-radius:5px;font-weight:800;font-size:.66rem;letter-spacing:.1em;padding:.45em .7em;}
.section{padding:96px 0;}
.kick{font-size:.72rem;letter-spacing:.3em;font-weight:800;color:var(--grass);text-transform:uppercase;}
img{max-width:100%;}
.rv{opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.2,.7,.3,1);}
.rv.in{opacity:1;transform:none;}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}

/* ---------- header (over hero on home, solid elsewhere via .hdr-solid) ---------- */
.site-hdr{position:absolute;top:0;left:0;right:0;z-index:100;}
.site-hdr.hdr-solid{position:sticky;background:var(--deep);}
.site-hdr .bar{background:rgba(3,39,26,.42);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.14);}
.site-hdr.hdr-solid .bar{background:var(--deep);}
.site-hdr .crest{width:46px;height:46px;object-fit:contain;background:#fff;border-radius:10px;padding:3px;}
.site-hdr .nm{color:#fff;font-weight:800;font-size:.98rem;letter-spacing:.01em;font-family:"Bricolage Grotesque",sans-serif;}
.site-hdr .st{color:var(--mint);font-size:.62rem;letter-spacing:.32em;font-weight:600;}
.main-nav .nav-link{color:#E7F6ED;font-weight:600;font-size:.85rem;padding:1.05rem .8rem;white-space:nowrap;}
.main-nav .nav-link:hover{color:var(--sun);}
/* The nav must stay on ONE line. Below ~1400px the padding tightens rather
   than letting an item wrap to a second row. */
.main-nav .nav{flex-wrap:nowrap;}
@media(max-width:1499px){.main-nav .nav-link{padding:1.05rem .62rem;font-size:.83rem;}}
@media(max-width:1399px){.main-nav .nav-link{padding:1.05rem .5rem;font-size:.8rem;}}
@media(max-width:1299px){.main-nav .nav-link{padding:1.05rem .42rem;font-size:.78rem;}}
/* Brand block must not steal width from the nav. */
.site-hdr .brand-link{flex:0 0 auto;}
.site-hdr .nm{white-space:nowrap;}
.site-hdr .st{white-space:nowrap;}
@media(max-width:1399px){.site-hdr .st{font-size:.56rem;letter-spacing:.24em;}}
@media(max-width:1299px){.site-hdr .crest{width:40px;height:40px;}.site-hdr .nm{font-size:.9rem;}}
/* Apply button keeps its shape instead of expanding to two lines. */
.site-hdr .btn-sun{white-space:nowrap;}
@media(max-width:1399px){.site-hdr .btn-sun{padding:.55rem .85rem;font-size:.82rem;}}
.main-nav .dropdown-menu{border:0;border-radius:12px;box-shadow:0 26px 60px rgba(3,39,26,.3);padding:.5rem;}
.main-nav .dropdown-item{font-size:.85rem;font-weight:500;border-radius:8px;padding:.55rem .9rem;}
.main-nav .dropdown-item:hover{background:#EAF6EE;color:var(--pine);}
.mnav-link{color:var(--ink);font-weight:600;border-bottom:1px solid var(--line);}
.mnav-link:hover{color:var(--grass);}

/* ---------- cinematic hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--deep);}
.hero .bg{position:absolute;inset:0;}
/* NOTE: .slide is a DIV using background-image, so object-fit does nothing on
   it — it needs background-size/repeat or the image tiles across the width. */
.hero .bg img,.hero .bg .slide{width:100%;height:100%;object-fit:cover;object-position:center;position:absolute;inset:0;
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  transform:scale(1.06);animation:kenburns 16s ease-in-out infinite alternate;opacity:0;transition:opacity 1.2s ease;}
.hero .bg .slide.active{opacity:1;}
@keyframes kenburns{from{transform:scale(1.06) translateY(0)}to{transform:scale(1.14) translateY(-14px)}}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,39,26,.5) 0%,rgba(3,39,26,.16) 40%,rgba(3,39,26,.94) 100%);}
.hero .content{position:relative;z-index:5;width:100%;padding:150px 0 0;}
.hero .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--mint);font-size:.74rem;letter-spacing:.34em;font-weight:700;}
.hero .eyebrow::before{content:"";width:44px;height:2px;background:var(--sun);}
.hero h1{color:#fff;font-weight:800;font-size:clamp(2.9rem,8.4vw,6.4rem);line-height:.98;letter-spacing:-.035em;margin:18px 0 10px;}
.hero h1 .sun{color:var(--sun);}
.hero p{color:#CFE9DA;max-width:620px;font-size:1.05rem;}
.hero .facts{border-top:1px solid rgba(255,255,255,.2);margin-top:44px;}
.hero .facts .f{padding:20px 0;color:#fff;}
.hero .facts .f b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.5rem;font-weight:800;display:block;letter-spacing:-.02em;}
.hero .facts .f span{font-size:.7rem;letter-spacing:.22em;color:var(--mint);font-weight:600;}
.hero .hero-dots{position:absolute;right:26px;bottom:26px;z-index:6;display:flex;gap:8px;}
.hero .hero-dots button{width:26px;height:4px;border-radius:2px;border:0;background:#fff;opacity:.4;cursor:pointer;}
.hero .hero-dots button.on{background:var(--sun);opacity:1;}
.hero .scrolldn{position:absolute;left:26px;bottom:26px;z-index:6;color:var(--mint);font-size:.68rem;letter-spacing:.3em;writing-mode:vertical-rl;}

/* ---------- Facebook feed band ---------- */
.fbband{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}



.fb-card .bi{color:#1877F2;}

/* ---------- community marquee ---------- */
.cm{background:var(--sun);overflow:hidden;white-space:nowrap;}
.cm .in2{display:inline-block;padding:14px 0;animation:mq 30s linear infinite;font-family:"Bricolage Grotesque",sans-serif;
  font-weight:800;font-size:1rem;letter-spacing:.06em;color:#2B1D02;}
.cm .in2 i{font-style:normal;margin:0 20px;color:#A8720F;}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- destination blocks ---------- */
.dest .lead-word{font-weight:800;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1;}
.dest .lead-word em{font-style:italic;color:var(--grass);}
.dcard{position:relative;border-radius:18px;overflow:hidden;display:block;height:440px;}
.dcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.5s;}
.dcard:hover img{transform:scale(1.06);}
.dcard .sh{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(3,39,26,.94));}
.dcard .c{position:absolute;left:0;right:0;bottom:0;padding:22px;}
.dcard .n{font-family:"Bricolage Grotesque",sans-serif;color:#fff;font-weight:800;font-size:1.5rem;letter-spacing:-.02em;}
.dcard .s{color:#BFE4CE;font-size:.82rem;}
.dcard .num{position:absolute;top:16px;left:18px;font-family:"Bricolage Grotesque",sans-serif;color:rgba(255,255,255,.9);
  font-weight:800;background:rgba(3,39,26,.5);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25);
  border-radius:8px;padding:4px 12px;font-size:.8rem;}
.dcard.short{height:210px;}

/* ---------- big statement ---------- */
.statement{background:var(--deep);color:#CFE9DA;position:relative;overflow:hidden;}
.statement .giant{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;color:#fff;
  font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.08;letter-spacing:-.03em;}
.statement .giant .sun{color:var(--sun);}
.statement .leaf{position:absolute;font-size:19rem;color:rgba(159,227,188,.05);right:-40px;top:-60px;}

/* ---------- services grid (public catalogue) ---------- */
.svcband{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.svc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;height:100%;display:block;transition:.16s;color:var(--body);}
.svc:hover{border-color:var(--grass);transform:translateY(-4px);box-shadow:0 18px 38px rgba(3,39,26,.09);}
.svc .ic{width:46px;height:46px;border-radius:10px;background:#EAF6EE;color:var(--pine);
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:12px;}
.svc h5{font-size:1rem;font-weight:800;}
.svc p{font-size:.8rem;color:var(--muted);margin:0;}
.svc .go{font-size:.8rem;font-weight:700;color:var(--grass);margin-top:10px;display:inline-block;}

/* ---------- projects (horizontal scroller) ---------- */
.pro{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.hscroll{display:flex;gap:18px;overflow-x:auto;padding:8px 4px 22px;scroll-snap-type:x mandatory;}
.hscroll::-webkit-scrollbar{height:8px;}
.hscroll::-webkit-scrollbar-thumb{background:var(--grass);border-radius:4px;}
.hscroll::-webkit-scrollbar-track{background:#DCE8DF;border-radius:4px;}
.pcard{flex:0 0 340px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.pcard img{height:200px;width:100%;object-fit:cover;}
.pcard .b{padding:18px;}
.pcard h5{font-size:1.05rem;font-weight:800;letter-spacing:-.02em;}
.pcard .m{font-size:.76rem;color:var(--muted);}
.progress{height:6px;border-radius:3px;background:#E7EFE9;margin-top:8px;}
.progress-bar{background:var(--grass);}

/* ---------- executives ---------- */
.exeb{background:#fff;}
.xrow{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
@media(max-width:991px){.xrow{grid-template-columns:repeat(3,1fr);}}
@media(max-width:575px){.xrow{grid-template-columns:repeat(2,1fr);}}
.x{position:relative;border-radius:14px;overflow:hidden;height:280px;}
.x img{width:100%;height:100%;object-fit:cover;object-position:top;transition:.45s;filter:grayscale(28%);}
.x:hover img{transform:scale(1.06);filter:none;}
.x .c{position:absolute;left:0;right:0;bottom:0;padding:32px 12px 10px;background:linear-gradient(transparent,rgba(3,39,26,.95));}
.x .c b{color:#fff;font-family:"Bricolage Grotesque",sans-serif;font-size:.8rem;display:block;line-height:1.15;}
.x .c span{color:var(--mint);font-size:.64rem;letter-spacing:.1em;}

/* ---------- invest CTA ---------- */
.invest{position:relative;border-radius:22px;overflow:hidden;min-height:380px;display:flex;align-items:center;}
.invest img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.invest .sh{position:absolute;inset:0;background:linear-gradient(100deg,rgba(3,39,26,.95) 22%,rgba(3,39,26,.4));}
.invest .c{position:relative;z-index:2;padding:44px;}
.invest h2{color:#fff;font-weight:800;font-size:clamp(1.7rem,3.6vw,2.7rem);letter-spacing:-.03em;}

/* ---------- generic inner-page header band ---------- */
/* Inner-page header. Deliberately compact — it states which section you are
   in, it should not consume the screen before the content starts.
   Top padding must clear the fixed header (~74px). */
.page-band{background:var(--deep);color:#CFE9DA;padding:78px 0 24px;position:relative;overflow:hidden;}
.page-band h1{color:#fff;font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.03em;margin:0;}
.page-band p{font-size:.92rem;margin-top:6px !important;}
.page-band .crumbs{color:var(--mint);font-size:.76rem;margin-bottom:4px !important;}
.page-band .crumbs a{color:var(--mint);}
.page-band .leaf{position:absolute;font-size:9rem;color:rgba(159,227,188,.05);right:-16px;top:-16px;}
/* Tab row inside the band sits tighter to the heading. */
.page-band .d-flex.gap-2{margin-top:14px !important;}
.page-band .btn-sm{padding:.34rem .8rem;font-size:.8rem;}
/* All band buttons match height regardless of which panel renders them - a
   Panel wrapper was making "Verify a certificate" sit taller than its siblings. */
.page-band .btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;line-height:1.15;}
.page-band .d-flex.gap-2 > .btn,
.page-band .d-flex.gap-2 > div > .btn{min-height:36px;}

/* ---------- cards / tiles used across inner pages ---------- */
.tile{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;height:100%;transition:.16s;display:block;color:var(--body);}
.tile:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(3,39,26,.09);}
.tile img{width:100%;height:200px;object-fit:cover;}
.tile .b{padding:16px;}
.tile h5,.tile h6{color:var(--ink);font-weight:800;}

/* ---------- Facebook embed wrap ---------- */


/* ---------- forms ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;}
.form-label{font-weight:600;color:var(--ink);font-size:.86rem;}
.form-control,.form-select{border-radius:8px;border:1px solid var(--line);padding:.6rem .8rem;}
.form-control:focus,.form-select:focus{border-color:var(--grass);box-shadow:0 0 0 .2rem rgba(14,122,63,.12);}

/* ---------- pager (mirrors FGCE .pager markup) ---------- */
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:28px;}
.pager .pgl{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--body);font-weight:700;font-size:.86rem;}
.pager a.pgl:hover{border-color:var(--grass);color:var(--grass);}
.pager .pgl.on{background:var(--pine);border-color:var(--pine);color:#fff;}
.pager .pgl.dis{opacity:.4;}
.pager .pgl.gap{border:0;background:transparent;}

/* ---------- footer ---------- */
.site-ftr{background:var(--deep);color:#8FB89F;font-size:.85rem;}
.site-ftr h6{color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.18em;}
.site-ftr a{color:#C4E2D0;display:block;padding:3px 0;}
.site-ftr a:hover{color:var(--sun);}
.site-ftr .ftr-crest{width:50px;height:50px;object-fit:contain;background:#fff;border-radius:12px;padding:4px;}
.site-ftr .ftr-motto{color:var(--sun);}
.site-ftr .social-row a{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.2);border-radius:9px;color:#C4E2D0;font-size:1rem;}
.site-ftr .social-row a:hover{background:var(--sun);border-color:var(--sun);color:#2B1D02;}
.ftr-bar{border-top:1px solid rgba(255,255,255,.12);font-size:.75rem;color:#5F8B70;}

/* ==========================================================================
   MOBILE REFINEMENTS
   Most visitors reach this site on a phone, so small screens are the priority
   rather than an afterthought.
   ========================================================================== */

/* Global guard: nothing may push the page sideways. */
html,body{max-width:100%;overflow-x:hidden;}
img,svg,video,iframe{max-width:100%;}

/* Simple key/value tables (verification, application detail) stay readable. */
.table td,.table th{word-break:break-word;}

@media(max-width:991px){
  .hero{min-height:78vh;}
  .page-band{padding:74px 0 22px;}
  .section{padding:52px 0;}
}

@media(max-width:767px){
  .hero{min-height:70vh;}
  .page-band{padding:70px 0 20px;}
  .page-band .leaf{font-size:9rem;opacity:.5;}
  .section{padding:42px 0;}

  /* Comfortable tap targets throughout. */
  .btn{padding:.6rem 1rem;}
  .btn-sm{padding:.4rem .75rem;}

  /* Facebook embed must never exceed the viewport. */
  .fb-embed,.fb_iframe_widget,.fb_iframe_widget span,.fb_iframe_widget iframe{max-width:100% !important;}

  /* Forms: stop iOS zooming in on focus (needs >=16px). */
  .form-control,.form-select{font-size:16px;}
}

@media(max-width:575px){
  .page-band{padding:66px 0 18px;}
  .page-band h1{font-size:1.4rem;}
  .section{padding:34px 0;}
  .form-card{padding:16px;}
  .tile img{height:170px;}

  /* Stack any button row on very small screens. */
  .d-flex.gap-2.flex-wrap > .btn{flex:1 1 100%;}
}

/* Account menu button in the header — an icon only, so the applicant's name
   never stretches the header or crowds the brand. The name sits inside the
   dropdown, which is the conventional place to look for it. */
.acct-btn{background:rgba(255,255,255,.12);color:#E7F6ED;border:1px solid rgba(255,255,255,.22);
  border-radius:8px;padding:.34rem .6rem;font-size:1rem;line-height:1;}
.acct-btn:hover,.acct-btn:focus{background:rgba(255,255,255,.2);color:#fff;}
.acct-btn::after{margin-left:.35rem;}
.hdr-solid .acct-btn{background:rgba(255,255,255,.14);}

/* ============================================================================
   Rich body content — Visit pages, News articles, Project detail.
   These render admin-entered prose through the .visit-body wrapper. Before,
   the text had no paragraph rhythm, justification or line-height and read as a
   single block. This gives it a proper reading measure.
   ============================================================================ */
.visit-body{
  color:var(--body);
  font-size:1.02rem;
  line-height:1.75;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}
.visit-body p{
  margin:0 0 1.15em;
}
.visit-body p:last-child{ margin-bottom:0; }

/* First paragraph gets a slightly larger lead for a considered opening. */
.visit-body > p:first-of-type{
  font-size:1.08rem;
  color:var(--ink);
}

.visit-body h2,.visit-body h3,.visit-body h4{
  color:var(--ink);
  margin:1.6em 0 .55em;
  line-height:1.25;
  text-align:left;
}
.visit-body h2{ font-size:1.5rem; }
.visit-body h3{ font-size:1.25rem; }
.visit-body h4{ font-size:1.08rem; }

.visit-body ul,.visit-body ol{
  margin:0 0 1.15em;
  padding-left:1.4em;
  text-align:left;
}
.visit-body li{ margin-bottom:.4em; }

.visit-body a{
  color:var(--grass);
  text-decoration:underline;
  text-underline-offset:2px;
}
.visit-body a:hover{ color:var(--pine); }

.visit-body blockquote{
  margin:1.4em 0;
  padding:.6em 1.1em;
  border-left:3px solid var(--grass);
  background:var(--wash);
  color:var(--ink);
  font-style:italic;
  text-align:left;
}

.visit-body img{
  max-width:100%;
  height:auto;
  border-radius:12px;
  margin:1.2em 0;
}

.visit-body strong,.visit-body b{ color:var(--ink); }

/* Justified text with hyphenation reads well on wide columns but produces ugly
   rivers of space on narrow phones — fall back to a natural left edge there. */
@media (max-width:575.98px){
  .visit-body{
    text-align:left;
    hyphens:manual;
    -webkit-hyphens:manual;
    font-size:1rem;
    line-height:1.7;
  }
  .visit-body > p:first-of-type{ font-size:1.02rem; }
}

/* ============================================================================
   MOBILE HEADER + HERO REFINEMENTS
   Desktop is deliberately untouched — everything below is inside a mobile
   media query or targets the burger, which only exists under xl.
   ============================================================================ */

/* ---- Burger menu button ----------------------------------------------------
   Was .btn-outline-light: a transparent button with a hairline white border,
   which all but vanished against the bright hero photograph. It is now a
   solid translucent chip with a clear border, so it reads on any background.
   Sized to the 44px minimum comfortable tap target. */
.burger-btn{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.42);
  color:#fff;
  border-radius:8px;
  min-width:42px;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.25rem;
  line-height:1;
  padding:.3rem .55rem;
  flex:0 0 auto;          /* never allowed to shrink or be pushed out of view */
}
.burger-btn:hover,.burger-btn:focus{
  background:rgba(255,255,255,.28);
  color:#fff;
  border-color:rgba(255,255,255,.6);
}
/* Once the header goes solid green the translucent chip needs a touch more
   contrast to stay obvious. */
.hdr-solid .burger-btn{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5);}

@media(max-width:1199.98px){
  /* The brand block must be allowed to shrink so the Apply button and the
     burger always fit; previously the brand held its width and squeezed the
     burger off the right edge. */
  .site-hdr .brand-link{min-width:0;flex:1 1 auto;}
  .site-hdr .brand-link .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .site-hdr .container{flex-wrap:nowrap;gap:.5rem !important;}
  .site-hdr .apply-btn{flex:0 1 auto;white-space:nowrap;}
}

@media(max-width:575.98px){
  /* On the narrowest phones the full "Apply for a Service" label is what
     crowds the burger out. The offcanvas menu carries the same action as a
     full-width button, so the header copy can shorten to just "Apply". */
  .site-hdr .apply-btn{font-size:.78rem;padding:.42rem .6rem;}
  .site-hdr .apply-btn .lbl-long{display:none;}
  .site-hdr .st{display:none;}          /* tagline line — frees real width */
  .site-hdr .nm{font-size:.86rem;}
  .site-hdr .crest{width:34px;height:34px;}
}

/* ---- Hero: let the photograph breathe on mobile ---------------------------
   On a phone the hero text stack (eyebrow + huge h1 + paragraph + two buttons
   + four stat blocks) filled essentially the whole frame, and the veil was
   94% opaque at the bottom, so the image behind was never really seen.
   Desktop keeps its cinematic full-bleed treatment. */
@media(max-width:767.98px){
  .hero{min-height:96vh;}

  /* Less top padding: the content starts lower down the image instead of
     being pushed into the middle of it. */
  .hero .content{padding:96px 0 0;}

  /* A lighter veil, and one that stays clear through the upper half so the
     photograph is visible where the faces usually are. */
  .hero .veil{
    background:linear-gradient(180deg,
      rgba(3,39,26,.42) 0%,
      rgba(3,39,26,.10) 34%,
      rgba(3,39,26,.16) 52%,
      rgba(3,39,26,.86) 100%);
  }

  /* Tame the display type so it stops dominating the frame. */
  .hero h1{font-size:clamp(2.1rem,10.5vw,3.1rem);line-height:1.02;margin:12px 0 8px;}
  .hero p{font-size:.95rem;max-width:100%;}
  .hero .eyebrow{font-size:.62rem;letter-spacing:.24em;}
  .hero .eyebrow::before{width:26px;}

  /* Buttons side by side rather than two full-width bars stacked. */
  .hero .content .d-flex.flex-wrap{gap:.5rem !important;margin-top:1.1rem !important;}
  .hero .content .btn-lg{font-size:.9rem;padding:.6rem 1rem;flex:1 1 auto;}

  .hero .facts{margin-top:22px;}
  .hero .facts .f{padding:12px 0;}
  .hero .facts .f b{font-size:1.15rem;}
  .hero .facts .f span{font-size:.58rem;letter-spacing:.16em;}

  /* The vertical SCROLL label overlapped the stat columns on narrow screens. */
  .hero .scrolldn{display:none;}
  .hero .hero-dots{right:14px;bottom:14px;}
}

@media(max-width:575.98px){
  .hero{min-height:100vh;}
  .hero .content{padding:88px 0 0;}
  .hero h1{font-size:clamp(1.95rem,10vw,2.6rem);}

  /* Four stat blocks in a 2x2 grid read better than a cramped single row. */
  .hero .facts .f{padding:10px 0;}
  .hero .facts .f b{font-size:1.05rem;}
}

/* ============================================================================
   PAGE BAND SPACING UNDER A SOLID HEADER

   .page-band carries padding-top:78px so that on the HOME page - where the
   header is position:absolute and floats over the content - the band still
   clears it. Inner pages add .hdr-solid, which makes the header position:sticky
   and therefore occupy its own ~62px of layout. Those pages were getting the
   header's height AND the 78px clearance, leaving a large empty gap above the
   title that the Hotels page (which was briefly overlay-mode) did not have.

   Since a sticky header already reserves its space, the clearance is redundant
   there: the padding drops to a normal breathing space. This keeps the tighter
   look while preserving the sticky navigation, which overlay mode would lose.
   ============================================================================ */
body:has(.site-hdr.hdr-solid) .page-band{ padding-top:18px; }

/* :has() is unsupported on older browsers. The master page also stamps a
   body-level class, so the same rule applies through a plain selector. */
body.has-solid-header .page-band{ padding-top:18px; }

@media(max-width:991px){
  body:has(.site-hdr.hdr-solid) .page-band,
  body.has-solid-header .page-band{ padding-top:16px; }
}
@media(max-width:767px){
  body:has(.site-hdr.hdr-solid) .page-band,
  body.has-solid-header .page-band{ padding-top:14px; }
}
@media(max-width:575px){
  body:has(.site-hdr.hdr-solid) .page-band,
  body.has-solid-header .page-band{ padding-top:12px; }
}

/* Link from a legislature listing to that member's own page. Shown only where
   the member actually has something there, so it never leads to an empty page. */
.gov-more{display:inline-block;margin-top:.5rem;font-size:.84rem;font-weight:700;
          color:var(--grass);text-decoration:none;}
.gov-more:hover{color:var(--pine);text-decoration:underline;}
.gov-more i{font-size:.78rem;}

/* ============================================================================
   COUNCIL NOTICE BAR

   Sits directly under the header. Deliberately in the council's sun colour
   rather than red: most notices are informational (a market day change, a
   deadline) and a permanent red bar teaches people to ignore it, which is
   exactly the wrong habit for the day something genuinely urgent appears.
   ============================================================================ */
.notice-bar{background:#FDF3DC;border-bottom:1px solid #EBD5A6;color:#6B4E10;}
.notice-inner{display:flex;align-items:center;gap:10px;padding:9px 0;min-height:44px;}
.notice-ico{flex:0 0 auto;color:#B5851F;font-size:1rem;}

/* Fixed height with the items stacked, so rotation cannot make the page jump. */
.notice-track{flex:1;min-width:0;position:relative;}
.notice-item{display:none;font-size:.88rem;line-height:1.45;}
.notice-item.on{display:block;}
.notice-item a{color:#6B4E10;text-decoration:underline;text-underline-offset:2px;}
.notice-item a:hover{color:#4A3607;}

.notice-tag{display:inline-block;background:#B5851F;color:#fff;font-size:.68rem;
            font-weight:800;letter-spacing:.05em;text-transform:uppercase;
            padding:.12rem .45rem;border-radius:4px;margin-right:.5rem;
            vertical-align:.08em;}

.notice-x{flex:0 0 auto;background:none;border:0;color:#B5851F;padding:.2rem .35rem;
          line-height:1;cursor:pointer;border-radius:4px;}
.notice-x:hover{background:rgba(181,133,31,.15);color:#6B4E10;}

@media(max-width:575.98px){
  .notice-item{font-size:.82rem;}
  .notice-tag{display:none;}   /* the megaphone already says what this is */
}


/* ----------------------------------------------------------------------------
   NOTICE BAR ON THE HOME PAGE

   Inner pages carry .hdr-solid, so the header occupies its own space and the
   notice bar sits neatly beneath it. The HOME page header is position:absolute
   and overlays the content - which meant the notice bar rendered at y=0 with
   the header painted straight over it. It was there, and invisible.

   Padding the bar down by the header's height on overlay pages puts the text
   clear of it. Only the padding sits under the header, so nothing is hidden.
   ---------------------------------------------------------------------------- */
body:not(.has-solid-header) .notice-bar{ padding-top:58px; }

@media(max-width:767.98px){
  body:not(.has-solid-header) .notice-bar{ padding-top:54px; }
}

/* ============================================================================
   HOME PAGE NEWS CARDS
   The whole card is the link, so the target is the card and not just the
   headline - which matters far more on a phone than on a desk.
   ============================================================================ */
.ncard{display:flex;flex-direction:column;height:100%;background:#fff;
       border:1px solid var(--line);border-radius:16px;overflow:hidden;
       text-decoration:none;color:inherit;transition:.25s;}
.ncard:hover{border-color:var(--grass);box-shadow:0 10px 28px rgba(3,39,26,.08);
             transform:translateY(-2px);color:inherit;}
.ncard-ph{position:relative;height:200px;overflow:hidden;background:var(--wash);}
.ncard-ph img{width:100%;height:100%;object-fit:cover;transition:.5s;}
.ncard:hover .ncard-ph img{transform:scale(1.05);}
.ncard-cat{position:absolute;left:12px;top:12px;background:var(--pine);color:#fff;
           font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
           padding:.2rem .55rem;border-radius:6px;}
.ncard-bd{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;}
.ncard-date{font-size:.74rem;color:var(--muted);margin-bottom:.35rem;}
.ncard-bd h5{font-size:1.02rem;font-weight:700;color:var(--ink);margin:0 0 .4rem;line-height:1.35;}
.ncard-bd p{font-size:.86rem;color:var(--body);line-height:1.55;margin:0 0 .8rem;}
.ncard-more{margin-top:auto;font-size:.84rem;font-weight:700;color:var(--grass);}
.ncard:hover .ncard-more{color:var(--pine);}

.btn-outline-pine{border:1px solid var(--pine);color:var(--pine);background:transparent;font-weight:700;}
.btn-outline-pine:hover{background:var(--pine);color:#fff;}

@media(max-width:575.98px){ .ncard-ph{height:180px;} }

/* Fallback shown when the Facebook plugin does not draw. Fills the same box so
   the two-column band keeps its shape instead of collapsing. */
.fb-fallback{display:none;flex-direction:column;align-items:center;justify-content:center;
             text-align:center;min-height:420px;padding:28px 24px;}
.fb-fallback i.bi-facebook{font-size:2.6rem;color:#1877F2;margin-bottom:.6rem;}
.fb-fallback h5{font-weight:800;color:var(--ink);margin:0 0 .5rem;}
.fb-fallback p{font-size:.88rem;color:var(--muted);line-height:1.6;max-width:340px;margin:0 0 1rem;}


/* ============================================================================
   FACEBOOK + NEWSROOM BAND

   The plugin draws its own bordered frame. Wrapping it in another bordered box
   gave a line inside a line, which is what made the panel look untidy - so the
   wrapper here has no border, no background and no padding of its own.
   ============================================================================ */
.fb-col{height:100%;display:flex;flex-direction:column;}

.fb-embed{
  border:0;                 /* the plugin supplies its own frame */
  background:transparent;
  border-radius:12px;
  overflow:hidden;          /* clips the plugin's square corners */
  min-height:0;             /* was forcing 500px even when empty */
}

/* display:block rather than line-height:0 on the wrapper. Both remove the
   descender gap under an iframe, but zeroing the wrapper's line-height also
   collapses the plain-text fallback that shows when the SDK cannot load. */
.fb-embed iframe{ display:block; }
.fb-embed .fb-page,
.fb-embed .fb-page span,
.fb-embed iframe{ width:100% !important; }

/* Fallback fills the same space so the column keeps its shape. */
.fb-embed .fb-fallback{
  display:none;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:380px;padding:28px 24px;line-height:1.5;
  background:#fff;border:1px solid var(--line);border-radius:12px;
}
.fb-fallback i.bi-facebook{font-size:2.4rem;color:#1877F2;margin-bottom:.5rem;}
.fb-fallback h5{font-weight:800;color:var(--ink);margin:0 0 .4rem;}
.fb-fallback p{font-size:.86rem;color:var(--muted);max-width:300px;margin:0 0 1rem;}

/* ---------- news rows (right column) ---------- */
.nrow{display:flex;gap:14px;align-items:flex-start;background:#fff;
      border:1px solid var(--line);border-radius:14px;padding:12px;
      margin-bottom:12px;text-decoration:none;color:inherit;transition:.2s;}
.nrow:hover{border-color:var(--grass);box-shadow:0 8px 22px rgba(3,39,26,.07);
            transform:translateY(-2px);color:inherit;}
.nrow-ph{flex:0 0 132px;height:100px;border-radius:10px;overflow:hidden;background:var(--wash);}
.nrow-ph img{width:100%;height:100%;object-fit:cover;transition:.4s;}
.nrow:hover .nrow-ph img{transform:scale(1.06);}
.nrow-bd{flex:1;min-width:0;}
.nrow-meta{font-size:.72rem;color:var(--muted);margin-bottom:.25rem;}
.nrow-cat{display:inline-block;background:var(--pine);color:#fff;font-size:.64rem;
          font-weight:800;letter-spacing:.05em;text-transform:uppercase;
          padding:.1rem .4rem;border-radius:4px;margin-right:.4rem;}
.nrow-bd h5{font-size:.95rem;font-weight:700;color:var(--ink);margin:0 0 .25rem;line-height:1.35;}
.nrow-bd p{font-size:.82rem;color:var(--body);line-height:1.5;margin:0;
           display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

@media(max-width:575.98px){
  .nrow{flex-direction:column;}
  .nrow-ph{flex:0 0 auto;width:100%;height:160px;}
  .nrow-bd p{-webkit-line-clamp:3;}
}