/* ==========================================================================
   Killian Community Management — shared stylesheet
   Green palette: darker forest tones through lighter mint tones
   ========================================================================== */

:root {
  /* Full green spectrum, dark -> light */
  --forest-950: #04120d;
  --forest-900: #081c15;
  --forest-800: #1b4332;
  --forest-700: #2d6a4f;
  --green-700:  #40916c;
  --green-600:  #52b788;
  --green-500:  #74c69d;
  --green-400:  #95d5b2;
  --green-300:  #b7e4c7;
  --green-200:  #d8f3dc;
  --green-100:  #f1faf4;
  --cream:      #fbfdfb;

  --text-dark:  #10261d;
  --text-muted: #4b6358;
  --white:      #ffffff;

  --shadow-sm: 0 2px 8px rgba(8, 28, 21, 0.08);
  --shadow-md: 0 10px 30px rgba(8, 28, 21, 0.14);
  --shadow-lg: 0 20px 50px rgba(8, 28, 21, 0.22);

  --radius: 14px;
  --max-width: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--text-dark);
  background: var(--cream);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  font-weight: 700;
  color: var(--forest-900);
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

a { color: var(--forest-700); text-decoration: none; }
a:hover { color: var(--green-600); }

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

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Top announcement bar ---------- */
.topbar {
  background: var(--forest-950);
  color: var(--green-200);
  font-size: 0.85rem;
  padding: 8px 16px;
  letter-spacing: 0.02em;
  /* Was text-align:center. The clover is now a real image rather than an emoji, and a
     centred block let it drift to the start of the line on its own. Centring the pair as
     one inline-flex row keeps the mark against the words it belongs to. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

/* ---------- Navigation ---------- */
.site-header {
  background: var(--white);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--forest-900);
}

.brand img { width: 44px; height: 44px; }

.brand .brand-sub {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--green-700);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--text-dark);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--forest-800);
  border-bottom-color: var(--green-600);
}

.nav-cta {
  background: linear-gradient(135deg, var(--green-600), var(--forest-700));
  color: var(--white) !important;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  border-bottom: none !important;
}

.nav-cta:hover {
  filter: brightness(1.08);
  color: var(--white) !important;
}

.nav-login {
  border: 2px solid var(--green-600);
  color: var(--forest-800) !important;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 600;
  border-bottom: 2px solid var(--green-600) !important;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-login:hover {
  background: var(--green-600);
  color: var(--white) !important;
  border-bottom-color: var(--green-600) !important;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-toggle-checkbox { display: none; }

.nav-toggle-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  cursor: pointer;
}
.nav-toggle-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--forest-900);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-checkbox:checked ~ .nav-right .nav-toggle-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle-checkbox:checked ~ .nav-right .nav-toggle-btn span:nth-child(2) { opacity: 0; }
.nav-toggle-checkbox:checked ~ .nav-right .nav-toggle-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero / Banner ---------- */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 15% 20%, rgba(149, 213, 178, 0.35), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(216, 243, 220, 0.25), transparent 40%),
    linear-gradient(135deg, var(--forest-950) 0%, var(--forest-800) 38%, var(--green-700) 72%, var(--green-500) 100%);
  padding: 110px 24px 130px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 92% 78%, rgba(255,255,255,0.10) 0, rgba(255,255,255,0.10) 2px, transparent 3px),
    radial-gradient(circle at 78% 92%, rgba(255,255,255,0.08) 0, rgba(255,255,255,0.08) 2px, transparent 3px);
  background-size: 140px 140px;
  opacity: 0.6;
  pointer-events: none;
}

/* The scroll artwork from the Verity sidebar, down the left edge of the hero. Masked so
   it fades out before it reaches the headline rather than being cropped at a hard line,
   and hidden entirely on narrow screens where there is no room beside the text. */
.hero-scroll {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 260px;
  background: url("clover-scroll.jpg") left top / cover no-repeat;
  opacity: 0.38;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 40%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 40%, transparent 100%);
  pointer-events: none;
}

@media (max-width: 1024px) {
  .hero-scroll { display: none; }
}

/* A clover used inline in a line of text — the topbar strapline, the hero eyebrow, the
   footer credit. These were emoji, which render as somebody else's clover in a different
   colour on every operating system. */
.clover-inline {
  height: 1.1em;
  width: auto;
  vertical-align: -0.2em;
  margin-right: 0.15em;
}

.hero-clover-bg {
  position: absolute;
  opacity: 0.10;
  filter: blur(0.5px);
}
.hero-clover-bg.c1 { width: 340px; top: -60px; right: -40px; transform: rotate(12deg); }
.hero-clover-bg.c2 { width: 200px; bottom: -50px; left: -30px; transform: rotate(-18deg); }

.hero-inner {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}

.hero-text { flex: 1 1 480px; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 22px;
  backdrop-filter: blur(4px);
}

.hero h1 {
  color: var(--white);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.12;
  margin-bottom: 20px;
  text-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

.hero h1 .accent { color: var(--green-200); }

.hero p.lead {
  font-size: 1.15rem;
  color: var(--green-100);
  max-width: 560px;
  margin-bottom: 34px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-figure {
  flex: 1 1 320px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-figure img {
  width: min(340px, 80%);
  filter: drop-shadow(0 25px 45px rgba(0,0,0,0.30));
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-14px); }
}

/* Wave divider under hero */
.wave-divider {
  display: block;
  margin-top: -6px;
  line-height: 0;
}
.wave-divider svg { width: 100%; height: auto; display: block; }

/* Smaller page-header banner (for interior pages) */
.page-banner {
  position: relative;
  color: var(--white);
  background: linear-gradient(120deg, var(--forest-900) 0%, var(--forest-700) 45%, var(--green-600) 100%);
  padding: 70px 24px 90px;
  text-align: center;
}
.page-banner h1 { color: var(--white); font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 10px; }
.page-banner p { color: var(--green-100); font-size: 1.05rem; max-width: 640px; margin: 0 auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: linear-gradient(135deg, var(--green-500), var(--green-700));
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { color: var(--white); box-shadow: var(--shadow-lg); }

.btn-outline {
  background: transparent;
  border-color: rgba(255,255,255,0.7);
  color: var(--white);
}
.btn-outline:hover { background: rgba(255,255,255,0.12); color: var(--white); }

.btn-solid-dark {
  background: var(--forest-900);
  color: var(--white);
}
.btn-solid-dark:hover { background: var(--forest-800); color: var(--white); }

/* ---------- Sections ---------- */
section { padding: 80px 0; }
.section-alt { background: var(--green-100); }

.section-heading { text-align: center; max-width: 680px; margin: 0 auto 50px; }
.section-heading .kicker {
  display: inline-block;
  color: var(--green-700);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.82rem;
  margin-bottom: 10px;
}
.section-heading h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.section-heading p { color: var(--text-muted); }

/* ---------- Cards / Grid ---------- */
.grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px 26px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--green-200);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.card-icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--green-400), var(--forest-700));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.card-icon svg { width: 26px; height: 26px; stroke: var(--white); }

.card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.card p { color: var(--text-muted); font-size: 0.96rem; margin-bottom: 0; }

/* ---------- Stats strip ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  background: var(--forest-900);
  color: var(--white);
  border-radius: var(--radius);
  padding: 40px 24px;
  margin-top: -76px;
  position: relative;
  z-index: 5;
  box-shadow: var(--shadow-lg);
}
.stats .stat { text-align: center; }
.stats .stat strong { display: block; font-size: 2rem; color: var(--green-300); }
.stats .stat span { font-size: 0.85rem; color: var(--green-100); letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- Two column content ---------- */
.two-col {
  display: flex;
  gap: 56px;
  align-items: center;
  flex-wrap: wrap;
}
.two-col > * { flex: 1 1 420px; }
.two-col img { border-radius: var(--radius); box-shadow: var(--shadow-md); }

.list-check { list-style: none; padding: 0; margin: 20px 0; }
.list-check li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
  color: var(--text-dark);
}
.list-check li::before {
  content: "✓";
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--green-500);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

/* ---------- Values grid (about page) ---------- */
.value-item { text-align: center; }
.value-item .card-icon { margin: 0 auto 18px; }

/* ---------- Team / leadership ---------- */
.team-card { text-align: center; }
.team-avatar {
  width: 92px; height: 92px;
  border-radius: 50%;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--green-300), var(--forest-700));
}

/* ---------- Timeline (about) ---------- */
.timeline {
  border-left: 3px solid var(--green-400);
  margin-left: 12px;
  padding-left: 28px;
}
.timeline .t-item { position: relative; padding-bottom: 34px; }
.timeline .t-item::before {
  content: "";
  position: absolute;
  left: -34px; top: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--forest-700);
  border: 3px solid var(--green-200);
}
.timeline .t-item h4 { margin-bottom: 4px; color: var(--forest-800); }
.timeline .t-item span { color: var(--green-700); font-weight: 600; font-size: 0.85rem; }

/* ---------- Service detail rows ---------- */
.service-row {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
  padding: 48px 0;
  border-bottom: 1px solid var(--green-200);
}
.service-row:last-child { border-bottom: none; }
.service-row .service-media {
  flex: 1 1 280px;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--green-200), var(--green-500));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
.service-row .service-media svg { width: 84px; height: 84px; stroke: var(--forest-900); }
.service-row .service-text { flex: 2 1 420px; }
.service-row .tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest-700);
  background: var(--green-200);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 44px;
}
.contact-info-card {
  background: var(--forest-900);
  color: var(--white);
  border-radius: var(--radius);
  padding: 40px 32px;
}
.contact-info-card h3 { color: var(--white); }
.contact-info-card .info-row {
  display: flex; gap: 14px; align-items: flex-start;
  margin-bottom: 22px;
}
.contact-info-card .info-row .icon-dot {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.contact-info-card .info-row svg { width: 18px; height: 18px; stroke: var(--green-200); }
.contact-info-card .info-row strong { display: block; color: var(--green-200); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px;}

.form-card {
  background: var(--white);
  border: 1px solid var(--green-200);
  border-radius: var(--radius);
  padding: 40px 32px;
  box-shadow: var(--shadow-sm);
}
.form-row { margin-bottom: 20px; }
.form-row label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 8px;
  color: var(--forest-800);
}
.form-row input,
.form-row textarea,
.form-row select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--green-300);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-dark);
  background: var(--green-100);
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--green-600);
  background: var(--white);
}
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.map-note {
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 28px;
  box-shadow: var(--shadow-sm);
  background: repeating-linear-gradient(135deg, var(--green-200), var(--green-200) 12px, var(--green-100) 12px, var(--green-100) 24px);
  padding: 34px;
  text-align: center;
  color: var(--forest-800);
  font-weight: 600;
  border: 1px dashed var(--green-500);
}

.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--green-200);
  line-height: 0;
}
.map-embed iframe {
  width: 100%;
  height: 280px;
  display: block;
  border: 0;
}

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--forest-900), var(--forest-700) 55%, var(--green-600));
  color: var(--white);
  border-radius: var(--radius);
  padding: 56px 40px;
  text-align: center;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: var(--green-100); max-width: 560px; margin: 0 auto 28px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--forest-950);
  color: var(--green-200);
  padding: 60px 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-brand img { width: 38px; height: 38px; }
.footer-brand span { color: var(--white); font-weight: 700; font-size: 1.1rem; }
.site-footer p { color: var(--green-300); font-size: 0.92rem; }
.site-footer h4 { color: var(--white); font-size: 0.95rem; margin-bottom: 16px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: var(--green-200); font-size: 0.92rem; }
.footer-links a:hover { color: var(--white); }
.footer-bottom {
  border-top: 1px solid rgba(216,243,220,0.15);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--green-300);
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav-toggle-btn { display: flex; }
  .nav-links {
    flex-direction: column;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    box-shadow: var(--shadow-md);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 24px;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
  }
  .nav-links a { display: block; padding: 12px 2px; border-bottom: 1px solid var(--green-200); }
  .nav-login {
    border: 0;
    padding: 12px 2px;
    border-radius: 0;
    color: var(--green-700) !important;
    border-bottom: 1px solid var(--green-200) !important;
  }
  .nav-login:hover { background: transparent; color: var(--forest-800) !important; }
  .nav-toggle-checkbox:checked ~ .nav-links {
    max-height: 420px;
    opacity: 1;
    padding: 12px 24px 20px;
  }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats { margin-top: -50px; }
}

@media (max-width: 560px) {
  .hero { padding: 80px 20px 100px; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-two { grid-template-columns: 1fr; }
  section { padding: 56px 0; }
  .nav-right .nav-cta { display: none; }
  .brand { font-size: 1.05rem; }
}


/* ---------- Artwork tile (About section) ---------- */
/* Was a plain two-colour gradient with the clover floating on it. Same artwork as the
   hero edge, so the two pages read as one piece rather than as a logo dropped onto a
   swatch. The clover keeps its own drift; see .float-slow. */
.art-tile {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* ONE image, not a repeat. The first attempt tiled the narrow sidebar strip across the
     box with repeat-x, which put a visible seam and a second half-clover every 300px.
     clover-band.jpg is a landscape composition of the same artwork — the scroll once on
     the left, dissolving into its own gradient — so cover crops it without ever showing
     a join. */
  background:
    linear-gradient(135deg, rgba(8,28,21,0.55), rgba(64,145,108,0.22)),
    url("clover-band.jpg") center / cover no-repeat;
}

/* No drop-shadow and no drift, both for the same reason and both measured rather than
   guessed: over this artwork the CSS drop-shadow painted a dark RECTANGLE the size of the
   image box plus its blur radius, instead of following the clover's outline. Comparing
   the tile rendered with and against without the image put the halo at 508x535 px around
   a 400px image with a 60px blur — which is the box, not the shape.

   The clover already has its own modelling and sits on a dark ground; it does not need a
   shadow under it. The hero clover keeps both its shadow and its drift, where the flat
   gradient behind it renders the shadow correctly. */
.art-tile img {
  width: 200px;
  max-width: 55%;
  /* THE ROUNDED BOX AROUND THE CLOVER CAME FROM HERE.
     `.two-col img` (further up this file) gives every image in this section a radius and
     a box-shadow, which is right for the photograph it was written for. A box-shadow is
     drawn around an element's BOX, not around the shape inside a transparent PNG — so on
     a cut-out clover it painted a rounded rectangle, and against this artwork it was
     plainly visible. Reset here rather than weakened there, so the rule still does its
     job everywhere else. */
  border-radius: 0;
  box-shadow: none;
  /* Its own soft shadow, following the clover's outline rather than its box. */
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.30));
  /* Drifts like the hero one, a beat slower so the two never sit in lockstep. */
  animation: float 7s ease-in-out infinite;
}

/* Respects a reader who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .hero-figure img,
  .art-tile img { animation: none; }
}