/* ============================================================================
   EMORY SUSTAINABLE BUSINESS GROUP — SHARED STYLES
   ============================================================================
   Every page links to this one file, so a change here updates the whole site.

   Contents (search for the headings in capitals to jump to a block):
     1. DESIGN TOKENS     colors, fonts, sizes
     2. BASE              default element styles
     3. LAYOUT HELPERS    containers, sections, grids, buttons, cards
     4. HEADER / NAV
     5. HERO              large banner on the home page
     6. PAGE HEADER       smaller banner at the top of every other page
     7. HOME              stats bar, intro, page links
     8. ABOUT             pillars, process steps
     9. PEOPLE            executive board and board of directors cards
    10. PROJECTS          current and past projects (Our Clients page)
    11. EVENTS
    12. JOIN
    13. CONTACT           contact details and form
    14. FOOTER
    15. ANIMATION         fade-in on scroll (optional)
    16. RESPONSIVE        tablet and phone layouts
   ============================================================================ */


/* ==========================================================================
   1. DESIGN TOKENS — change colors, fonts and sizing for the whole site here
   ========================================================================== */
:root {
  --color-forest:   #12372a;   /* primary dark green                   */
  --color-forest-2: #1d4d3b;   /* lighter green used in gradients      */
  --color-sage:     #4f7c62;   /* accent green for buttons and links   */
  --color-mint:     #e6efe9;   /* pale green section background        */
  --color-sand:     #f7f5f0;   /* warm off-white section background    */
  --color-gold:     #c9a45c;   /* small highlight color                */
  --color-ink:      #1b1f1d;   /* body text                            */
  --color-muted:    #5d6862;   /* secondary text                       */
  --color-line:     #dfe5e1;   /* borders and dividers                 */
  --color-white:    #ffffff;
  --color-grey:     #c8c8c8;

  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --max-width: 1160px;
  --radius:    14px;
  --shadow:    0 10px 30px rgba(18, 55, 42, 0.08);
  --header-h:  76px;
}


/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-ink);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-forest);
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }
a { color: var(--color-sage); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }


/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

.section       { padding: 96px 0; }
.section--mint { background: var(--color-mint); }
.section--sand { background: var(--color-sand); }
.section--tight { padding: 64px 0; }

/* Small uppercase label above a heading */
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin-bottom: 14px;
}

/* Headings use the full width; only the intro paragraph is capped so lines stay readable */
.section-intro { margin-bottom: 48px; }
.section-intro p { max-width: 940px; }
.section-intro p { color: var(--color-muted); font-size: 1.06rem; }
.section-intro--center { margin-left: auto; margin-right: auto; text-align: center; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
  cursor: pointer;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary       { background: var(--color-sage); color: var(--color-white); }
.btn--primary:hover { background: var(--color-forest); }
.btn--light         { background: var(--color-white); color: var(--color-forest); }
.btn--light:hover   { background: var(--color-mint); }
.btn--outline-light       { border-color: rgba(255,255,255,0.6); color: var(--color-white); }
.btn--outline-light:hover { background: rgba(255,255,255,0.1); border-color: var(--color-white); }

/* Card */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 32px;
  transition: box-shadow 0.25s, transform 0.25s;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.card h3 { margin-bottom: 10px; }
.card p  { color: var(--color-muted); font-size: 0.97rem; }
.card p:last-child { margin-bottom: 0; }

/* Square icon badge */
.icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--color-mint);
  color: var(--color-forest);
  margin-bottom: 20px;
}
.icon svg { width: 24px; height: 24px; }

/* Grids */
.grid   { display: grid; gap: 24px; }
.grid > * { min-width: 0; }   /* lets columns shrink so long text wraps instead of widening the page */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Two-column text + side content */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: start; }
.split p { color: var(--color-muted); font-size: 1.05rem; }
/* Add "split--center" to a .split section to center the right-hand column
   vertically against the left one (used for Who We Are on the home page) */
.split--center > :last-child { align-self: center; }

/* Stacked layout: heading on its own line across the full width, text and buttons below */
.stack p { color: var(--color-muted); font-size: 1.05rem; max-width: 940px; }
.stack h2 { margin-bottom: 20px; }

/* Highlighted note box (used for "how to edit" hints that are visible on the page) */
.note {
  border: 1px dashed var(--color-gold);
  background: #fbf6ea;
  color: #6b5526;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 0.9rem;
}


/* ==========================================================================
   4. HEADER / NAV  (the header itself is inserted by assets/js/site.js)
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.site-header.is-scrolled { border-color: var(--color-line); box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
/* Logo on the left, page tabs on the right */
.site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; }

/* SBG logo (file paths are set in assets/js/site.js). Change the heights to resize it. */
.logo { display: block; flex-shrink: 0; }
.logo-img { height: 52px; width: auto; }               /* header */
.site-footer .logo-img { height: 64px; }               /* footer */

.nav { display: flex; align-items: center; gap: 36px; }
.nav a { color: var(--color-ink); font-size: 0.93rem; font-weight: 500; position: relative; }
.nav a:hover { color: var(--color-sage); text-decoration: none; }
/* Underline under the link for the page you are on */
.nav a.is-active { color: var(--color-forest); }
.nav a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--color-sage); border-radius: 2px;
}

.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--color-forest); }
.nav-toggle svg { width: 28px; height: 28px; }


/* ==========================================================================
   5. HERO (home page)
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--color-white);
  /* To use a photo instead, replace the background above with: */
  background: linear-gradient(rgba(14, 46, 35, 0.78), rgba(15, 50, 38, 0.78)), url("../../images/hero.jpg") center/cover; 
  /* background:
    radial-gradient(1200px 500px at 85% -10%, rgba(201,164,92,0.22), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(79,124,98,0.55), transparent 60%),
    linear-gradient(135deg, var(--color-forest) 0%, var(--color-forest-2) 100%); */
  padding: 120px 0 120px;
}

.hero h1 { color: var(--color-white); max-width: 1000px; }
.hero h1 em { font-style: italic; color: #cfe3d6; }
.hero .lead { font-size: 1.18rem; max-width: 600px; color: rgba(255,255,255,0.84); margin-bottom: 36px; }
.hero .eyebrow { color: var(--color-gold); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-leaf { position: absolute; right: -60px; bottom: -80px; width: 460px; opacity: 0.08; pointer-events: none; }


/* ==========================================================================
   6. PAGE HEADER (top banner on every page except home)
   ========================================================================== */
.page-header {
  color: var(--color-white);
  background:
    radial-gradient(800px 300px at 90% -20%, rgba(201,164,92,0.2), transparent 60%),
    linear-gradient(135deg, var(--color-forest) 0%, var(--color-forest-2) 100%);
  padding: 65px 0 70px;
}
.page-header h1 { color: var(--color-white); font-size: clamp(2.2rem, 4.4vw, 3.2rem); margin-bottom: 12px; }
.page-header p  { color: rgba(255,255,255,0.8); font-size: 1.12rem; max-width: 1075px; margin: 0; }
.page-header .eyebrow { color: var(--color-gold); }


/* ==========================================================================
   7. HOME
   ========================================================================== */
.stats { border-bottom: 1px solid var(--color-line); }
.stats .grid { padding: 48px 0; text-align: center; }
.stat-number { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 600; color: var(--color-forest); line-height: 1; }
.stat-label  { margin-top: 8px; font-size: 0.9rem; color: var(--color-muted); }

/* Cards that link to other pages */
.link-card { display: block; color: inherit; }
.link-card:hover { text-decoration: none; }
.link-card .more { font-weight: 600; font-size: 0.92rem; color: var(--color-sage); }


/* ==========================================================================
   8. ABOUT
   ========================================================================== */
.pillars { display: grid; gap: 16px; }
.pillar {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 24px; border-radius: var(--radius);
  background: var(--color-sand); border-left: 4px solid var(--color-sage);
}
.pillar h3 { margin-bottom: 4px; font-size: 1.12rem; }
.pillar p  { margin: 0; color: var(--color-muted); font-size: 0.97rem; }
.pillar .icon { margin: 0; flex-shrink: 0; background: var(--color-white); }

/* Numbered steps */
.steps { counter-reset: step; }
.step { position: relative; padding-top: 28px; border-top: 2px solid var(--color-line); }
.step::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; top: -14px; left: 0;
  background: inherit; padding-right: 12px;
  font-family: var(--font-heading); font-weight: 600; color: var(--color-sage);
}
.section--mint .step::before { background: var(--color-mint); }
.step h3 { font-size: 1.12rem; }
.step p  { color: var(--color-muted); font-size: 0.95rem; margin: 0; }


/* ==========================================================================
   9. PEOPLE (executive board, board of directors)
   ========================================================================== */
.person { text-align: center; }

/* Headshot box. Shows the person's initials until a photo file exists.
   The initials come from the data-initials attribute in the HTML. */
.avatar {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius);
  background: linear-gradient(145deg, var(--color-mint), #cfdfd5);
  margin-bottom: 16px; overflow: hidden;
}
.avatar::before {
  content: attr(data-initials);
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-heading); font-size: 2.3rem; color: var(--color-sage);
}
/* Photos are cut to a square from slightly above center, so uncropped portrait
   photos keep the top of the head. For an even look across the team, crop new
   photos with tools/crop_headshots.py (see images/README.md). */
.avatar img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

.person h3   { font-size: 1.08rem; margin-bottom: 2px; }
.person .role { color: var(--color-muted); font-size: 0.9rem; margin: 0 0 4px; }
.person .org  { color: var(--color-sage); font-size: 0.85rem; font-weight: 500; margin: 0; }
.person .linkedin { font-size: 0.85rem; font-weight: 500; }


/* ==========================================================================
   PHOTOS — placeholder boxes for photos of SBG
   --------------------------------------------------------------------------
   Each photo is a <figure class="photo"> in the HTML. Until its image file
   exists, it shows as a light box with its label, like the headshots.
   Delete the whole <figure> to remove a photo; the section goes back to its
   layout without a photo automatically (see the .stack rules below).
   ========================================================================== */
.photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;                       /* box shape; change to 16 / 9 for wider photos */
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(145deg, var(--color-mint), #cfdfd5);
}
/* Placeholder text and camera icon, hidden behind the photo once it loads */
.photo::before {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: grid; place-items: center; align-content: center; gap: 10px;
  padding: 24px; text-align: center;
  font-size: 0.9rem; font-weight: 500; color: var(--color-sage);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f7c62' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center calc(50% - 26px) / 36px no-repeat;
  padding-top: 64px;
}
.photo img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.photo--wide { aspect-ratio: 16 / 9; }

/* A photo placed under the text in a two-column (.split) section (wider, so the columns stay balanced) */
.split .photo { margin-top: 32px; aspect-ratio: 16 / 9; }

/* A stacked section with a photo becomes two columns: text left, photo right.
   Remove the photo and it goes back to one full-width column. */
.stack:has(> .photo) { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: auto 1fr; column-gap: 72px; align-items: start; }
.stack:has(> .photo) > :not(.photo) { grid-column: 1; }
.stack:has(> .photo) > .photo { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* Gallery of photos in a row */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* Carousel (Events gallery): a row of photos that scrolls sideways, with
   arrow buttons on each side. Three photos show at a time on desktop. */
.carousel { position: relative; }
.carousel-track {
  display: flex; gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;                       /* hide the scrollbar (Firefox) */
}
.carousel-track::-webkit-scrollbar { display: none; }   /* hide the scrollbar (Chrome, Safari) */
.carousel-track:focus-visible { outline: 2px solid var(--color-sage); outline-offset: 4px; }
.gallery-item { flex: 0 0 calc((100% - 48px) / 3); margin: 0; scroll-snap-align: start; }
.gallery-item figcaption { padding-top: 14px; }
.gallery-item time { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-sage); }
.gallery-title { display: block; margin-top: 4px; font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; color: var(--color-forest); }
.carousel-btn {
  position: absolute; top: calc(50% - 40px); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.8rem; line-height: 1; padding-bottom: 4px; color: var(--color-forest);
  background: var(--color-white); border: 1px solid var(--color-line); box-shadow: var(--shadow);
  cursor: pointer; transition: opacity 0.2s, background 0.2s;
}
.carousel-btn:hover { background: var(--color-mint); }
.carousel-btn:disabled { opacity: 0; pointer-events: none; }   /* hidden at either end */
.carousel-btn--prev { left: -24px; }
.carousel-btn--next { right: -24px; }


/* ==========================================================================
   10. PROJECTS (Our Clients page)
   ========================================================================== */
/* Each project is an open row (logo left, details right) with a thin line
   between projects instead of a box around each one. */
.project-list { border-bottom: 1px solid var(--color-line); }
.project {
  display: grid; grid-template-columns: 200px 1fr; gap: 64px;
  padding: 48px 0;
  border-top: 1px solid var(--color-line);
}

/* Logo column. Logos sit directly on the page, scaled to fit a fixed frame
   so every row lines up. */
.project-visual { align-self: start; }
.project-logo {
  position: relative;
  height: 120px;
  display: flex; align-items: center; justify-content: center;
}
.project-logo img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;   /* exact size is set by site.js (part 5) */
  mix-blend-mode: multiply;   /* hides white or off-white logo backgrounds on the white page */
}
/* Placeholder shown until the logo file exists */
.project-logo:not(:has(img))::before {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: grid; place-items: center; padding: 12px; text-align: center;
  border: 1px dashed var(--color-line); border-radius: 8px;
  font-size: 0.82rem; font-weight: 500; color: var(--color-muted);
}

.project-body { max-width: 780px; }
.project-body h3 { font-size: 1.45rem; margin-bottom: 12px; }
.project-body p { color: var(--color-muted); }

/* Status and industry, shown as small labels separated by a dot */
.project-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-bottom: 10px; }
.tag {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-sage);
}
.tag + .tag::before { content: "\00B7"; margin: 0 10px; color: var(--color-muted); }
.tag--gold { color: #9a7428; }

/* Details list with short dashes */
.bullets { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.bullets li { position: relative; padding-left: 22px; font-size: 0.95rem; color: var(--color-ink); }
.bullets li::before {
  content: ""; position: absolute; left: 0; top: 0.8em;
  width: 10px; height: 1.5px; background: var(--color-sage);
}

/* Sections that follow another list of projects directly need less space on top */
#past, .section--flush-top { padding-top: 24px; }

/* Logos link to the company's LinkedIn page */
.logo-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transition: opacity 0.2s, transform 0.2s; }
.logo-link:hover { opacity: 0.75; transform: translateY(-2px); }
.logo-link:focus-visible { outline: 2px solid var(--color-sage); outline-offset: 4px; border-radius: 6px; }
.project-logo .logo-link { justify-content: inherit; }

/* Previous Clients: a grid of logos with no boxes, matching the lines used
   for the projects above */
.logos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 56px;
  padding: 48px 0;
  border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line);
}
.logo-tile { position: relative; height: 84px; display: flex; align-items: center; justify-content: center; }
.logo-tile img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;   /* exact size is set by site.js (part 5) */
  mix-blend-mode: multiply;   /* hides white logo backgrounds */
}
/* Shows the client's name until its logo file exists */
.logo-tile:not(:has(img))::before {
  content: attr(data-label);
  font-weight: 600; color: var(--color-muted); text-align: center;
}


/* ==========================================================================
   11. EVENTS
   ========================================================================== */
.event { display: flex; gap: 24px; align-items: flex-start; }
.event-date {
  flex-shrink: 0; width: 72px; text-align: center;
  border-radius: 12px; background: var(--color-forest); color: var(--color-white); padding: 10px 0;
}
.event-date .month { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.event-date .day   { font-family: var(--font-heading); font-size: 1.8rem; line-height: 1.1; }
.event h3 { font-size: 1.12rem; margin-bottom: 4px; }
.event .meta { font-size: 0.88rem; color: var(--color-sage); font-weight: 500; margin-bottom: 8px; }


/* ==========================================================================
   12. JOIN
   ========================================================================== */
.cta {
  background: linear-gradient(135deg, var(--color-forest) 0%, var(--color-forest-2) 100%);
  color: var(--color-white);
}
.cta h2 { color: var(--color-white); }
.cta p  { color: rgba(255,255,255,0.8); font-size: 1.06rem; }
.cta .eyebrow { color: var(--color-gold); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.roles li { padding: 22px 24px; border-radius: 12px; background: var(--color-white); border: 1px solid var(--color-line); }
.roles strong { display: block; font-family: var(--font-heading); font-size: 1.12rem; color: var(--color-forest); margin-bottom: 4px; }
.roles span   { font-size: 0.95rem; color: var(--color-muted); }
.roles .role-how { display: block; margin-top: 8px; font-style: normal; font-size: 0.85rem; font-weight: 600; color: var(--color-sage); }

/* Org chart (Join page): a column of levels joined by a line, with a detail
   panel beside it that changes when a level is clicked */
.org { display: grid; grid-template-columns: minmax(260px, 1fr) 1.4fr; gap: 56px; align-items: start; }
.org-chart { display: flex; flex-direction: column; align-items: center; }
.org-node {
  position: relative; width: 100%; max-width: 320px;
  padding: 16px 20px; margin-bottom: 28px;
  font: inherit; font-weight: 600; font-size: 0.98rem; color: var(--color-forest);
  background: var(--color-white); border: 1.5px solid var(--color-line); border-radius: 12px;
  cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s;
}
.org-node:last-child { margin-bottom: 0; }
/* connector line to the next level */
.org-node:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 1.5px; height: 28px; background: var(--color-line);
}
.org-node--advise { border-style: dashed; }           /* advises, rather than manages */
.org-node:hover { border-color: var(--color-sage); transform: translateY(-1px); }
.org-node[aria-selected="true"] { background: var(--color-forest); border-color: var(--color-forest); color: var(--color-white); }
.org-node:focus-visible { outline: 2px solid var(--color-sage); outline-offset: 3px; }
.org-detail {
  background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius);
  padding: 36px 40px;
}
.org-detail h3 { font-size: 1.5rem; }
.org-detail p { color: var(--color-muted); }
.org-path { font-weight: 600; color: var(--color-sage) !important; font-size: 0.95rem; }
.org-more { font-weight: 600; font-size: 0.95rem; }


/* ==========================================================================
   13. CONTACT
   ========================================================================== */
.contact-item { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.contact-item .icon { margin: 0; width: 42px; height: 42px; }

.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 6px; }
.form input, .form select, .form textarea {
  width: 100%; padding: 13px 16px;
  font: inherit; font-size: 0.95rem; color: var(--color-ink);
  border: 1px solid var(--color-line); border-radius: 10px; background: var(--color-white);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--color-sage); box-shadow: 0 0 0 3px rgba(79,124,98,0.15);
}
.form textarea { min-height: 140px; resize: vertical; }


/* ==========================================================================
   14. FOOTER  (inserted by assets/js/site.js)
   ========================================================================== */
.site-footer { background: #0d261d; color: rgba(255,255,255,0.7); padding: 72px 0 32px; font-size: 0.93rem; }
/* Two columns: logo and social icons on the left, "Get Involved" links on the right */
.footer-grid { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 48px; margin-bottom: 48px; }
.site-footer h4 { color: var(--color-white); font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: rgba(255,255,255,0.7); }
.site-footer a:hover { color: var(--color-white); }
.site-footer .logo { display: inline-block; }
.site-footer .logo-img { display: block; }   /* removes the stray gap under the image */
.socials { display: flex; gap: 12px; margin-top: 24px; }
.socials a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.2); }
.socials a:hover { background: rgba(255,255,255,0.08); text-decoration: none; }
.socials svg { width: 18px; height: 18px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.85rem;
}


/* ==========================================================================
   15. ANIMATION — elements with class="reveal" fade in on scroll.
       Delete this block (and part 3 of site.js) to turn it off.
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}


/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .logos  { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .split  { grid-template-columns: 1fr; gap: 48px; }
  .org    { grid-template-columns: 1fr; gap: 32px; }
  .project { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .project-logo { height: 90px; width: 180px; justify-content: flex-start; }
  .stack:has(> .photo) { display: block; }          /* photo drops below the text */
  .stack:has(> .photo) > .photo { margin-top: 32px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery-item { flex-basis: calc((100% - 24px) / 2); }    /* two photos at a time */
  .carousel-btn--prev { left: -8px; }
  .carousel-btn--next { right: -8px; }

  /* Collapse the nav into a drop-down menu */
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-white); border-bottom: 1px solid var(--color-line);
    padding: 8px 24px 24px; box-shadow: 0 12px 24px rgba(0,0,0,0.06);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--color-line); }
  .nav a:last-child { border-bottom: 0; }
  .nav a.is-active::after { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .container { padding: 0 16px; }
  .section { padding: 64px 0; }
  .hero { padding: 96px 0 88px; }
  .page-header { padding: 64px 0 52px; }
  .grid-2, .grid-3, .form-row { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery-item { flex-basis: 85%; }                        /* one photo, with the next peeking in */
  .carousel-btn { width: 40px; height: 40px; font-size: 1.5rem; }
  .carousel-btn--prev { left: 4px; }
  .carousel-btn--next { right: 4px; }
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 16px; }
  .grid-4.steps { grid-template-columns: 1fr; gap: 32px; }   /* steps need full width for long words */
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; }   /* stack copyright and "Back to top" */
  .logo-img { height: 42px; }
}