:root {

  --bg: #e8f2ff;

  --bg-accent: #d6e7ff;

  --card: #f8fbff;

  --text: #0f1f3d;

  --muted: #4f677f;

  --line: #c9d7ec;

  --brand: #0f4f9f;

  --brand-2: #1d63c9;

  --focus: #1b4cb3;

}



* {

  box-sizing: border-box;

}



body {

  margin: 0;

  font-family: "Sora", "Segoe UI", sans-serif;

  color: var(--text);

  background:

    radial-gradient(circle at 20% 10%, #fefefe 0%, transparent 35%),

    radial-gradient(circle at 90% 80%, #e7f2e4 0%, transparent 30%),

    linear-gradient(120deg, var(--bg) 0%, var(--bg-accent) 100%);

  line-height: 1.6;

}



.bg-orb {

  position: fixed;

  z-index: -1;

  width: 32rem;

  height: 32rem;

  border-radius: 50%;

  filter: blur(70px);

  opacity: 0.2;

}



.orb-a {

  background: #3b82f6;

  left: -8rem;

  top: -10rem;

}



.orb-b {

  background: #60a5fa;

  right: -10rem;

  bottom: -12rem;

}



.sun-decoration {

  position: fixed;

  top: 2rem;

  right: 2.5rem;

  width: 3.5rem;

  height: 3.5rem;

  z-index: 10;

  pointer-events: none;

}



.decorative-solar-panel {

  position: fixed;

  top: 11rem;

  left: 84%;

  transform: translateX(-50%);

  width: 18rem;

  height: 9rem;

  z-index: 9;

  pointer-events: none;

  border-radius: 1.5rem;

  background: linear-gradient(180deg, #041f3e 0%, #061d3a 100%);

  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.52);

  border: 1px solid rgba(173, 216, 230, 0.08);

  background-image:

    linear-gradient(rgba(173,216,230,0.12) 1px, transparent 1px),

    linear-gradient(90deg, rgba(173,216,230,0.12) 1px, transparent 1px);

  background-size: 1.6rem 1.6rem, 1.6rem 1.6rem;

  background-position: 0 0, 0 0;

}



.decorative-solar-panel::before {

  content: "";

  position: absolute;

  inset: 0.65rem;

  border-radius: 0.8rem;

  background: rgba(255, 255, 255, 0.08);

}



.sun-decoration::before {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 50%;

  background: radial-gradient(circle at 35% 35%, #ffd700, #ffb700 40%, #ff9500);

  box-shadow: 0 0 2rem #ffb700, inset -0.15rem -0.15rem 0.5rem #ffffff88;

}



.sun-decoration::after {

  content: "";

  position: absolute;

  inset: -0.5rem;

  border-radius: 50%;

  background: 

    repeating-conic-gradient(from 0deg, transparent 0 15deg, #ffb700 15deg 16deg);

  opacity: 0.7;

}



.site-header,

.layout,

.site-footer {

  width: min(1150px, 92vw);

  margin-inline: auto;

}



.page-main {

  width: min(1150px, 92vw);

  margin-inline: auto;

  padding-bottom: 3rem;

}



.site-header {

  padding: 3rem 0 1.5rem;

}



.eyebrow {

  letter-spacing: 0.12em;

  text-transform: uppercase;

  font-size: 0.78rem;

  color: var(--brand);

  font-weight: 700;

}



.brand-logo {

  display: block;

  width: min(100%, 28rem);

  max-width: 28rem;

  height: auto;

  max-height: 9rem;

  margin-bottom: 0.8rem;

}



h1,

h2,

h3 {

  font-family: "Bricolage Grotesque", "Segoe UI", sans-serif;

  line-height: 1.2;

  text-transform: uppercase;

}



h1 {

  font-size: clamp(1.4rem, 2vw + 0.6rem, 2.35rem);

  margin: 0.45rem 0 1rem;

  max-width: 26ch;

}



.main-nav {

  display: flex;

  flex-wrap: wrap;

  gap: 0.45rem;

  margin: 1.25rem 0 0.85rem;

}



.main-nav a,

.socials a {

  text-decoration: none;

  color: var(--text);

  border: 1px solid var(--line);

  background: #ffffffbf;

  border-radius: 999px;

  padding: 0.46rem 0.88rem;

  font-size: 0.92rem;

  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;

}



.main-nav a[aria-current="page"] {

  background: #e6f5ef;

  border-color: #9ad2c5;

  color: #0f4f4a;

  font-weight: 600;

}



.main-nav a:hover,

.socials a:hover {

  transform: translateY(-1px);

  border-color: var(--brand);

  background: #f0faf8;

}



.socials {

  display: flex;

  gap: 0.5rem;

  flex-wrap: wrap;

}



.layout {

  display: grid;

  grid-template-columns: repeat(12, 1fr);

  gap: 1rem;

  padding-bottom: 3rem;

}



.card {

  grid-column: span 12;

  background: color-mix(in hsl, var(--card), white 20%);

  border: 1px solid var(--line);

  border-radius: 1.25rem;

  padding: 1.25rem;

  box-shadow: 0 14px 30px #11111114;

}



.card.solar-panel {

  background:

    linear-gradient(180deg, #ffffffeb, #ffffffeb),

    repeating-linear-gradient(

      120deg,

      #dceef8 0,

      #dceef8 14px,

      #c8e1ef 14px,

      #c8e1ef 28px

    );

}



.sunbar {

  display: inline-flex;

  align-items: center;

  gap: 0.55rem;

  font-size: 0.85rem;

  font-weight: 600;

  color: #875014;

  background: #fff3dd;

  border: 1px solid #f2cc98;

  border-radius: 999px;

  padding: 0.35rem 0.75rem;

}



.sunbar::before {

  content: "";

  width: 0.75rem;

  height: 0.75rem;

  border-radius: 50%;

  background: #f59e0b;

  box-shadow: 0 0 0 4px #ffe8bc;

}



.timeline {

  position: relative;

  padding-left: 1.25rem;

  margin: 0;

  list-style: none;

}



.timeline::before {

  content: "";

  position: absolute;

  top: 0.35rem;

  bottom: 0.35rem;

  left: 0.35rem;

  width: 2px;

  background: linear-gradient(180deg, #f8b450, #69b7a4);

}



.timeline li {

  position: relative;

  margin-bottom: 1rem;

  padding-left: 0.8rem;

}



.timeline li::before {

  content: "";

  position: absolute;

  left: -1.03rem;

  top: 0.36rem;

  width: 0.58rem;

  height: 0.58rem;

  border-radius: 50%;

  background: #fffdf8;

  border: 2px solid #0f766e;

}



.timeline .year {

  display: inline-block;

  font-size: 0.82rem;

  font-weight: 700;

  color: #0f5a54;

  background: #e7f5ef;

  border: 1px solid #b6dfd3;

  border-radius: 999px;

  padding: 0.2rem 0.55rem;

  margin-right: 0.45rem;

}



.project-log {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.75rem;

}



.project-log article {

  background: #fffef9;

  border: 1px solid #e4e5d8;

  border-radius: 0.9rem;

  padding: 0.85rem;

}



.project-log h3 {

  margin-top: 0;

  margin-bottom: 0.35rem;

  font-size: 1rem;

}



.projects-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.8rem;

  margin-top: 0.9rem;

}



.project-card {

  position: relative;

  overflow: hidden;

  background:

    radial-gradient(circle at 12% 12%, #fff4da 0%, #fff4da 17%, transparent 17.5%),

    linear-gradient(155deg, #fffef9 0%, #f2fbf6 55%, #eef6ff 100%);

  border: 1px solid #dbe2d3;

  border-radius: 1.05rem;

  padding: 0.95rem;

  box-shadow: inset 0 0 0 1px #ffffff99;

}



.project-image {

  width: 100%;

  aspect-ratio: 16 / 10;

  object-fit: cover;

  border-radius: 0.75rem;

  border: 1px solid #d8e3d8;

  margin-bottom: 0.7rem;

  background: #f4f7f1;

}



.project-card::after {

  content: "";

  position: absolute;

  right: -1.8rem;

  bottom: -1.8rem;

  width: 7.5rem;

  height: 7.5rem;

  border-radius: 1rem;

  background:

    repeating-linear-gradient(

      120deg,

      #d5e8f4 0,

      #d5e8f4 9px,

      #bfdced 9px,

      #bfdced 18px

    );

  transform: rotate(20deg);

  opacity: 0.6;

  pointer-events: none;

}



.project-card-top {

  display: flex;

  align-items: flex-start;

  gap: 0.75rem;

  margin-bottom: 0.55rem;

}



.project-card h3 {

  margin: 0;

  padding-right: 3rem;

}



.solar-glyph {

  position: relative;

  width: 2rem;

  height: 2rem;

  border-radius: 50%;

  border: 2px solid #ef9a2f;

  background: #ffd88f;

  box-shadow: 0 0 0 5px #ffeecf;

  flex-shrink: 0;

}



.solar-glyph::before {

  content: "";

  position: absolute;

  inset: -0.38rem;

  border-radius: 50%;

  border: 1px dashed #efb463;

}



.project-subtitle {

  margin: 0.22rem 0 0;

  font-size: 0.9rem;

  color: #466157;

}



.project-stats {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 0.45rem;

  margin: 0.55rem 0 0.35rem;

}



.project-stats > div {

  border: 1px solid #d8e3d8;

  border-radius: 0.75rem;

  background: #fcfff9;

  padding: 0.45rem;

}



.project-stats strong {

  display: block;

  font-size: 0.72rem;

  text-transform: uppercase;

  letter-spacing: 0.03em;

  color: #547068;

}



.project-stats span {

  display: block;

  margin-top: 0.08rem;

  font-weight: 600;

}



.project-card ul {

  margin: 0.4rem 0 0;

  padding-left: 1rem;

}



.project-empty {

  border: 1px dashed #cfd8c5;

  border-radius: 0.9rem;

  padding: 0.9rem;

  background: #fcfff8;

  color: #4d5f59;

}



.hidden {

  display: none !important;

}



.admin-grid {

  display: grid;

  grid-template-columns: 1.1fr 1.4fr;

  gap: 0.9rem;

}



.admin-panel-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.7rem;

}



.role-badge {

  border: 1px solid #bfd6ca;

  background: #ecf8f2;

  color: #0f5b4f;

  border-radius: 999px;

  padding: 0.25rem 0.6rem;

  font-size: 0.8rem;

  font-weight: 700;

}



.admin-items {

  display: grid;

  gap: 0.45rem;

  max-height: 26rem;

  overflow: auto;

  padding-right: 0.25rem;

}



.admin-item {

  text-align: left;

  border: 1px solid #d7e0d2;

  background: #fbfff8;

  border-radius: 0.7rem;

  padding: 0.55rem 0.65rem;

  cursor: pointer;

}



.admin-item:hover {

  border-color: #94c8b8;

  background: #f2fbf7;

}



.admin-form {

  display: grid;

  gap: 0.55rem;

}



.admin-form label {

  display: grid;

  gap: 0.25rem;

  font-size: 0.92rem;

}



.admin-form input,

.admin-form textarea {

  width: 100%;

  border: 1px solid #d2d9cb;

  border-radius: 0.55rem;

  padding: 0.52rem 0.62rem;

  font: inherit;

  background: #fffefa;

}



.admin-form button,

.button-ghost,

.button-danger {

  border: 1px solid #bed8ca;

  border-radius: 0.65rem;

  padding: 0.55rem 0.8rem;

  background: #e8f7f0;

  color: #0e4f44;

  font-weight: 600;

  cursor: pointer;

}



.button-ghost {

  background: #fffdf7;

  border-color: #d8dfce;

}



.button-danger {

  background: #fff1f2;

  border-color: #f2c7cf;

  color: #9f1239;

}



.admin-actions {

  display: flex;

  gap: 0.5rem;

  flex-wrap: wrap;

}



.admin-message {

  min-height: 1.3rem;

  margin: 0.25rem 0 0;

  font-size: 0.92rem;

}



.password-card {

  margin-top: 0.9rem;

  border-top: 1px dashed #cfd9c8;

  padding-top: 0.9rem;

}



.legacy-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 0.75rem;

  margin-top: 0.85rem;

}



.legacy-card {

  border: 1px solid #d9dfd0;

  border-radius: 0.85rem;

  padding: 0.75rem;

  background:

    linear-gradient(150deg, #fffef8 0%, #f2fbf5 55%, #edf7ff 100%);

}



.legacy-image {

  width: 100%;

  aspect-ratio: 4 / 3;

  object-fit: cover;

  border-radius: 0.65rem;

  border: 1px solid #d3dccf;

  margin-bottom: 0.5rem;

  background: #f3f6f0;

}



.legacy-card h3 {

  margin: 0.15rem 0 0.35rem;

  font-size: 0.98rem;

}



.legacy-meta {

  font-size: 0.78rem;

  color: #4f6a60;

}



.legacy-link {

  display: inline-block;

  margin-top: 0.45rem;

  font-size: 0.85rem;

}



.section-grid {

  display: grid;

  grid-template-columns: repeat(12, 1fr);

  gap: 1rem;

}



.section-grid > .card {

  grid-column: span 12;

}



.icon-title {

  display: flex;

  align-items: center;

  gap: 0.6rem;

}



.icon-title::before {

  content: "";

  width: 1.15rem;

  height: 1.15rem;

  border-radius: 50%;

  border: 2px solid #e08a37;

  box-shadow:

    0 0 0 4px #ffeac6,

    0 0 0 8px #fff6e8;

}



.kpi {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 0.7rem;

}



.kpi .card {

  background: #fffef8;

  padding: 0.9rem;

  border-radius: 0.9rem;

  box-shadow: none;

}



.kpi strong {

  display: block;

  font-family: "Bricolage Grotesque", "Segoe UI", sans-serif;

  color: #0d675f;

  font-size: 1.2rem;

}



.hero-card {

  grid-column: span 12;

  background:

    linear-gradient(125deg, #fff8e4 0%, #f0f8ed 45%, #e8f6f4 100%);

  border-color: #d3d8b5;

}



.tax-card {

  background: linear-gradient(120deg, #ffffff 0%, #f7fce9 100%);

}



.news-card article + article {

  border-top: 1px dashed #cdd4be;

  margin-top: 1rem;

  padding-top: 1rem;

}



.news-list {

  display: grid;

  gap: 1rem;

  margin-top: 0.9rem;

}



.news-item {

  background: #f8fbf7;

  border: 1px solid #d7e6d7;

  border-radius: 1rem;

  padding: 1rem;

}



.news-item-header {

  display: flex;

  flex-wrap: wrap;

  align-items: flex-start;

  justify-content: space-between;

  gap: 0.75rem;

}



.news-item h3 {

  margin: 0;

  font-size: 1.05rem;

}



.news-item-date {

  display: inline-block;

  margin-top: 0.25rem;

  color: #4f6d58;

  font-size: 0.88rem;

  font-weight: 700;

}



.news-item p {

  margin: 0.85rem 0 0;

  color: #32403a;

}



.news-image {

  width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;

  border-radius: 0.85rem;

  border: 1px solid #d4dfd9;

  margin-top: 0.85rem;

  background: #f3f7f1;

}



.news-link {

  display: inline-block;

  margin-top: 0.85rem;

  color: var(--focus);

  font-weight: 700;

}



.tag {

  display: inline-block;

  font-weight: 700;

  color: #8f2d12;

  letter-spacing: 0.04em;

  font-size: 0.8rem;

  border: 1px solid #f3b88d;

  border-radius: 999px;

  padding: 0.28rem 0.7rem;

  background: #fff4e7;

}



.subhead {

  color: var(--brand-2);

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



a {

  color: var(--focus);

}



a:hover {

  color: #0a5f49;

}



.site-footer {

  border-top: 1px solid var(--line);

  padding: 1rem 0 2.5rem;

  color: var(--muted);

  display: flex;

  justify-content: space-between;

  gap: 1rem;

  flex-wrap: wrap;

}



.reveal {

  opacity: 0;

  transform: translateY(16px);

  transition: opacity 650ms ease, transform 650ms ease;

}



.reveal.visible {

  opacity: 1;

  transform: translateY(0);

}



@media (min-width: 800px) {

  .hero-card {

    grid-column: span 8;

  }



  .layout > .card:nth-child(1),

  .layout > .card:nth-child(2),

  .news-card,

  .layout > .card:last-of-type {

    grid-column: span 6;

  }



  .section-grid > .card.half {

    grid-column: span 6;

  }

}



@media (max-width: 520px) {

  .main-nav a,

  .socials a {

    font-size: 0.82rem;

  }



  .card {

    border-radius: 1rem;

    padding: 1rem;

  }



  .kpi {

    grid-template-columns: 1fr;

  }



  .project-log {

    grid-template-columns: 1fr;

  }



  .projects-grid {

    grid-template-columns: 1fr;

  }



  .legacy-grid {

    grid-template-columns: 1fr;

  }



  .admin-grid {

    grid-template-columns: 1fr;

  }



  .project-stats {

    grid-template-columns: 1fr;

  }

}