:root {
  --navy: #073642;
  --ocean: #0b7285;
  --teal: #2a9d8f;
  --sand: #e9c46a;
  --ochre: #c66a2b;
  --green: #557a46;
  --ink: #263238;
  --muted: #647278;
  --paper: #ffffff;
  --tint: #f3f7f5;
  --border: #dce6e2;
  --shadow: 0 16px 40px rgba(7, 54, 66, 0.12);
  --radius: 18px;
  --max-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: var(--ocean); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, textarea, select { font: inherit; }

.container {
  width: min(92%, var(--max-width));
  margin-inline: auto;
}
.content-narrow { max-width: 820px; }
.section { padding: 88px 0; }
.section-tint { background: var(--tint); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  background: white;
  padding: 10px 14px;
  z-index: 9999;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.header-inner {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  color: var(--navy);
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.logo {
  display: block;
  width: auto;
  height: 68px;
  max-width: 320px;
  object-fit: contain;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.site-nav a {
  color: var(--navy);
  font-weight: 650;
}
.site-nav a.active,
.site-nav a:hover {
  color: var(--ocean);
  text-decoration: none;
}
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  padding: 8px;
}
.menu-toggle span {
  display: block;
  height: 2px;
  margin: 6px 0;
  background: var(--navy);
}

.hero {
  padding: 96px 0;
  background:
    radial-gradient(circle at top right, rgba(233,196,106,.28), transparent 30%),
    linear-gradient(135deg, #edf8f6 0%, #f9fbf8 100%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 70px;
  align-items: center;
}
.hero-copy h1,
.page-hero h1 {
  margin: 0 0 24px;
  font-size: clamp(2.7rem, 6vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  color: var(--navy);
}
.lead {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--muted);
  max-width: 760px;
}
.eyebrow {
  color: var(--ochre);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .14em;
  font-size: .78rem;
  margin-bottom: 14px;
}
.eyebrow.light { color: var(--sand); }

.hero-art {
  min-height: 430px;
  border-radius: 36px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(#9dd9df 0 45%, #0b7285 45% 100%);
  box-shadow: var(--shadow);
}
.sun {
  position: absolute;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--sand);
  top: 48px; right: 70px;
}
.island {
  position: absolute;
  width: 72%; height: 32%;
  left: 14%; bottom: 29%;
  border-radius: 50% 50% 30% 30%;
  background: linear-gradient(150deg, var(--green), #78965f);
  transform: skewX(-8deg);
}
.wave {
  position: absolute;
  width: 120%; height: 70px;
  left: -10%;
  border-radius: 50%;
  border-top: 9px solid rgba(255,255,255,.9);
}
.wave-one { bottom: 62px; }
.wave-two { bottom: 12px; opacity: .65; }

.button-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 750;
  cursor: pointer;
}
.button:hover { text-decoration: none; transform: translateY(-1px); }
.button-primary { background: var(--ocean); color: white; }
.button-secondary { background: transparent; color: var(--ocean); border-color: var(--ocean); }
.button-light { background: white; color: var(--navy); }
.button-small { min-height: 40px; padding: 9px 16px; font-size: .92rem; }

.section-heading {
  max-width: 760px;
  margin-bottom: 38px;
}
.section h2,
.cta h2 {
  margin: 0 0 18px;
  color: var(--navy);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -.025em;
}

.card-grid {
  display: grid;
  gap: 24px;
}
.card-grid.three { grid-template-columns: repeat(3, 1fr); }
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  background: white;
  box-shadow: 0 8px 24px rgba(7,54,66,.06);
}
.card h3 { margin: 14px 0 10px; color: var(--navy); font-size: 1.35rem; }
.icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--tint);
  color: var(--ocean);
  font-weight: 800;
}
.tag {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: #e9f4f1;
  color: var(--ocean);
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.news-card a { font-weight: 750; }
.date { color: var(--muted); font-size: .92rem; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.stat-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.stat-panel div {
  min-height: 180px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  background: var(--navy);
  color: white;
  border-right: 1px solid rgba(255,255,255,.16);
}
.stat-panel div:nth-child(2) { background: var(--ocean); }
.stat-panel div:nth-child(3) { background: var(--teal); }
.stat-panel strong { font-size: 1.2rem; }
.stat-panel span { opacity: .78; }

.page-hero {
  position: relative;
  padding: 92px 0;
  min-height: 360px;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--navy), var(--ocean));
  color: white;
  overflow: hidden;
}

.page-hero > .container {
  position: relative;
  z-index: 2;
}

.page-hero h1 {
  color: white;
  max-width: 900px;
}

.page-hero .lead {
  color: rgba(255,255,255,.82);
}

.feature-list {
  padding: 0;
  list-style: none;
}
.feature-list li {
  margin: 14px 0;
  padding-left: 32px;
  position: relative;
}
.feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 900;
}
.feature-image{

width:100%;

border-radius:20px;

margin:40px 0;

box-shadow:0 10px 30px rgba(0,0,0,.15);

}
.resource-toolbar { margin-bottom: 26px; }
.resource-toolbar input {
  width: min(100%, 520px);
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.resource-list { display: grid; gap: 18px; }
.resource-card {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.resource-card h3 { margin: 10px 0 6px; color: var(--navy); }

.contact-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 64px;
}
.contact-form {
  display: grid;
  gap: 8px;
}
.contact-form label { font-weight: 750; margin-top: 10px; }
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: white;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: 3px solid rgba(42,157,143,.22);
  border-color: var(--teal);
}
.error { color: #a32626; min-height: 20px; font-size: .88rem; }
.form-status { font-weight: 700; }

.cta {
  padding: 68px 0;
  background: var(--navy);
  color: white;
}
.cta h2 { color: white; max-width: 760px; }
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.site-footer {
  padding: 60px 0 24px;
  background: #052c35;
  color: rgba(255,255,255,.78);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 42px;
}
.footer-grid h2,
.footer-grid h3 { color: white; margin-top: 0; }
.footer-grid a {
  display: block;
  color: rgba(255,255,255,.78);
  margin: 8px 0;
}
.footer-bottom {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .9rem;
}

/* =========================================
   SYMPOSIA PAGE
========================================= */

.page-hero.symposia-hero {
    position: relative;

    background:
        linear-gradient(
            rgba(5, 44, 53, 0.65),
            rgba(5, 44, 53, 0.50)
        ),
        url("../images/symposia/Kangaroo-Island-IA8.jpg")
        center / cover
        no-repeat;

    min-height: 500px;

    display: flex;
    align-items: center;

    color: white;
}

.symposia-hero h1 {
    color: white;
}

.symposia-hero .lead {
    color: rgba(255, 255, 255, 0.92);
    max-width: 800px;
}

.symposia-hero .eyebrow {
    color: var(--sand);
}


.symposia-highlight {
  padding: 38px;
  border-radius: var(--radius);
  background:
    linear-gradient(
      145deg,
      var(--ocean),
      var(--teal)
    );
  color: white;
  box-shadow: var(--shadow);
}


.symposia-highlight h3 {
  margin: 0 0 8px;
  color: white;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
}


.symposium-location {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 750;
}


.symposium-date {
  margin: 4px 0 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
}


.button-outline-light {
  color: white;
  border-color: rgba(255, 255, 255, 0.75);
  background: transparent;
}


.button-outline-light:hover {
  color: var(--navy);
  background: white;
}


.symposium-details-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}


.detail-card {
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: white;
  box-shadow: 0 8px 24px rgba(7, 54, 66, 0.06);
}


.detail-card h3 {
  margin: 10px 0 12px;
  color: var(--navy);
  font-size: 1.25rem;
}


.detail-label {
  color: var(--ochre);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


.schedule {
  display: grid;
  gap: 18px;
}


.schedule-day {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: white;
}


.schedule-date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px;
  background: var(--navy);
  color: white;
}


.schedule-date span {
  color: var(--sand);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


.schedule-date strong {
  margin-top: 6px;
  font-size: 1.15rem;
}


.schedule-content {
  padding: 28px 28px 28px 0;
}


.schedule-content h3 {
  margin: 0 0 8px;
  color: var(--navy);
}


.schedule-content p {
  margin-bottom: 0;
}


.symposia-archive {
  display: grid;
  gap: 20px;
}


.archive-card {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  align-items: start;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: white;
}


.archive-number {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      var(--ocean),
      var(--teal)
    );
  color: white;
  font-size: 1.25rem;
  font-weight: 800;
}


.archive-card h3 {
  margin: 0 0 4px;
  color: var(--navy);
}


.archive-meta {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 650;
}
/* =========================================
   HOMEPAGE IMAGE CAROUSEL
========================================= */

.hero-carousel {
  position: relative;
  width: 100%;
  height: 78vh;
  min-height: 600px;
  overflow: hidden;
  background: var(--navy);
}


.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1s ease,
    visibility 1s ease;
}


.carousel-slide.active {
  opacity: 1;
  visibility: visible;
}


.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.carousel-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(5, 44, 53, 0.82) 0%,
      rgba(5, 44, 53, 0.58) 45%,
      rgba(5, 44, 53, 0.16) 100%
    );
}


.carousel-content {
  position: absolute;
  z-index: 2;

  top: 50%;
  left: 50%;

  transform:
    translate(-50%, -50%);

  color: white;
}


.carousel-content h1,
.carousel-title {
  max-width: 850px;
  margin: 0 0 22px;

  color: white;

  font-size:
    clamp(2.8rem, 6vw, 5.5rem);

  line-height: 1.02;

  letter-spacing: -0.045em;
}


.carousel-content .lead {
  max-width: 720px;

  color:
    rgba(255,255,255,0.92);
}


.carousel-control {
  position: absolute;
  z-index: 4;

  top: 50%;

  transform:
    translateY(-50%);

  width: 52px;
  height: 52px;

  border:
    1px solid rgba(255,255,255,0.5);

  border-radius: 50%;

  background:
    rgba(0,0,0,0.18);

  color: white;

  font-size: 1.7rem;

  cursor: pointer;

  transition: 0.25s ease;
}


.carousel-control:hover {
  background:
    rgba(255,255,255,0.95);

  color: var(--navy);
}


.carousel-prev {
  left: 28px;
}


.carousel-next {
  right: 28px;
}


.carousel-dots {
  position: absolute;
  z-index: 4;

  left: 50%;
  bottom: 28px;

  transform:
    translateX(-50%);

  display: flex;
  gap: 10px;
}


.carousel-dot {
  width: 11px;
  height: 11px;

  padding: 0;

  border:
    2px solid white;

  border-radius: 50%;

  background:
    transparent;

  cursor: pointer;
}


.carousel-dot.active {
  background: white;
}
/* =========================================
   HOMEPAGE IMAGE FEATURES
========================================= */

.image-feature {
  display: grid;

  grid-template-columns:
    1.05fr 0.95fr;

  gap: 64px;

  align-items: center;
}


.image-feature-photo img {
  width: 100%;
  height: 520px;

  object-fit: cover;

  border-radius: 24px;
}


.image-feature-content {
  max-width: 570px;
}


.symposium-feature {
  display: grid;

  grid-template-columns:
    0.9fr 1.1fr;

  gap: 64px;

  align-items: center;
}


.symposium-feature-content {
  max-width: 560px;
}


.symposium-feature-image img {
  width: 100%;
  height: 500px;

  object-fit: cover;

  border-radius: 24px;
}


.event-highlight {
  margin: 28px 0;

  padding: 18px 20px;

  border-left:
    4px solid var(--sand);

  background:
    var(--tint);
}
/* =========================================
   IMAGE CARDS
========================================= */

.image-card {
  padding: 0;
  overflow: hidden;
}


.card-image {
  width: 100%;
  height: 245px;

  object-fit: cover;

  transition:
    transform 0.5s ease;
}


.image-card:hover .card-image {
  transform:
    scale(1.04);
}


.card-body {
  padding: 28px;
}


.card-body .eyebrow {
  margin-bottom: 8px;
}


.card-body h3 {
  margin-top: 0;
}
@media (max-width: 900px) {
  .hero-grid,
  .split,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .hero-art { min-height: 340px; }
  .card-grid.three { grid-template-columns: repeat(2, 1fr); }
  .site-nav {
    position: absolute;
    left: 0; right: 0; top: 82px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: white;
    border-bottom: 1px solid var(--border);
    padding: 18px 4%;
  }
  .site-nav.open { display: flex; }
  .menu-toggle { display: block; }
  .symposium-details-grid {
  grid-template-columns: repeat(2, 1fr);
}
  .image-feature,
  .symposium-feature {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .image-feature-photo img,
  .symposium-feature-image img {
    height: 420px;
  }
  .project-intro-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .project-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .partner-grid {
    grid-template-columns: 1fr 1fr;
  }

  .project-downloads {
    grid-template-columns: 1fr;
  }

  .photo-gallery {
    grid-template-columns: 1fr 1fr;
  }  
}

@media (max-width: 620px) {
  .section {
    padding: 64px 0;
  }

  .card-grid.three {
    grid-template-columns: 1fr;
  }

  .stat-panel {
    grid-template-columns: 1fr;
  }

  .logo {
    height: 54px;
    max-width: 230px;
  }

  .stat-panel div {
    min-height: 120px;
  }

  .resource-card,
  .cta-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .symposium-details-grid {
    grid-template-columns: 1fr;
  }

  .schedule-day {
    grid-template-columns: 1fr;
  }

  .schedule-content {
    padding: 0 24px 24px;
  }

  .archive-card {
    grid-template-columns: 1fr;
  }

  .archive-number {
    width: 60px;
    height: 60px;
  }

  .symposia-highlight {
    padding: 28px;
  }

  .hero-carousel {
    height: 72vh;
    min-height: 540px;
  }

  .carousel-control {
    width: 42px;
    height: 42px;
    font-size: 1.3rem;
  }

  .carousel-prev {
    left: 12px;
  }

  .carousel-next {
    right: 12px;
  }

  .carousel-content {
    width: 86%;
  }

  .carousel-content h1,
  .carousel-title {
    font-size: 2.6rem;
  }

  .image-feature-photo img,
  .symposium-feature-image img {
    height: 300px;
  }

  .card-image {
    height: 220px;
  }
  .project-hero {
    min-height: 500px;
  }

  .project-gallery,
  .partner-grid,
  .photo-gallery {
    grid-template-columns: 1fr;
  }

  .project-gallery img,
  .photo-gallery img {
    height: 240px;
  }

  .project-map {
    height: 340px;
  }  
}

/* =========================================
   ABOUT HERO
========================================= */

.about-hero {
  position: relative;
  height: 70vh;
  min-height: 550px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--navy);
}

.about-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.about-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 40, 55, 0.55);
  z-index: 1;
}

.about-hero-content {
  position: relative;
  z-index: 2;
  color: white;
  max-width: 750px;
}

.about-hero-content h1 {
  color: white;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1.05;
  margin: 0 0 20px;
}

.about-hero-content .lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.25rem;
}

.about-hero-content .eyebrow {
  color: var(--sand);
}

.about-image {
  width: 100%;
  border-radius: 20px;
  margin: 40px auto;
  display: block;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.16);
}

@media (max-width: 620px) {
  .about-hero {
    height: 64vh;
    min-height: 430px;
  }

  .about-hero-content h1 {
    font-size: 2.6rem;
  }

  .about-hero-content .lead {
    font-size: 1.05rem;
  }
}

/* =========================================
   PROJECT CARD LINKS
========================================= */

.project-card{

    text-decoration:none;

    color:inherit;

    display:block;

}

.project-card:hover{

    text-decoration:none;

}

.project-card .card{

    transition:.3s;

}

.project-card:hover .card{

    transform:translateY(-6px);

    box-shadow:0 18px 45px rgba(0,0,0,.15);

}
/* =========================================
   PROJECT PAGE TEMPLATE
========================================= */

.project-hero {
  position: relative;
  min-height: 620px;

  display: flex;
  align-items: center;

  overflow: hidden;
}


.project-hero-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  z-index: 0;
}


.project-hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(5,44,53,.82),
      rgba(5,44,53,.50),
      rgba(5,44,53,.18)
    );

  z-index: 1;
}


.project-hero-content {
  position: relative;
  z-index: 2;

  color: white;

  max-width: 780px;
}


.project-hero-content h1 {
  margin: 0 0 22px;

  color: white;

  font-size:
    clamp(3rem, 6vw, 5.5rem);

  line-height: 1.02;
}


.project-hero-content .lead {
  color:
    rgba(255,255,255,.92);

  max-width: 700px;
}


.project-nav-section {
  padding: 24px 0;

  border-bottom:
    1px solid var(--border);
}


.back-projects {
  font-weight: 750;
}


.project-intro-grid {
  display: grid;

  grid-template-columns:
    1.4fr .6fr;

  gap: 64px;

  align-items: start;
}


.project-summary-card {
  padding: 28px;

  border-radius:
    var(--radius);

  background:
    var(--navy);

  color: white;
}


.project-summary-card h3 {
  margin-top: 0;

  color: white;
}


.project-facts {
  margin: 0;
}


.project-facts div {
  padding: 16px 0;

  border-bottom:
    1px solid rgba(255,255,255,.18);
}


.project-facts div:last-child {
  border-bottom: 0;
}


.project-facts dt {
  color:
    rgba(255,255,255,.65);

  font-size: .78rem;

  text-transform: uppercase;

  letter-spacing: .08em;

  font-weight: 750;
}


.project-facts dd {
  margin: 4px 0 0;

  font-weight: 700;
}


.project-gallery {
  display: grid;

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

  gap: 22px;
}


.project-gallery figure {
  margin: 0;
}


.project-gallery img {
  width: 100%;
  height: 320px;

  object-fit: cover;

  border-radius:
    var(--radius);
}


.project-gallery figcaption {
  margin-top: 8px;

  color:
    var(--muted);

  font-size: .9rem;
}


.project-map {
  width: 100%;
  height: 480px;

  overflow: hidden;

  border-radius:
    var(--radius);

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


.project-map iframe {
  width: 100%;
  height: 100%;

  border: 0;
}


.map-note {
  margin-top: 12px;

  color:
    var(--muted);

  font-size: .9rem;
}


.partner-grid {
  display: grid;

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

  gap: 20px;
}


.partner-card {
  min-height: 160px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 16px;

  padding: 24px;

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

  border-radius:
    var(--radius);

  text-align: center;
}


.partner-card img {
  max-width: 150px;

  max-height: 75px;

  object-fit: contain;
}


.partner-card p {
  margin: 0;

  font-weight: 700;
}


.project-downloads {
  display: grid;

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

  gap: 20px;
}


.download-card {
  display: flex;

  align-items: center;

  gap: 18px;

  padding: 22px;

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

  border-radius:
    var(--radius);

  background: white;

  color:
    var(--ink);
}


.download-card:hover {
  text-decoration: none;

  border-color:
    var(--teal);
}


.download-card div {
  display: flex;

  flex-direction: column;
}


.download-card span {
  color:
    var(--muted);

  font-size: .9rem;
}


.download-icon {
  width: 50px;
  height: 50px;

  display: grid;

  place-items: center;

  flex-shrink: 0;

  border-radius: 12px;

  background:
    var(--navy);

  color: white !important;

  font-size: .72rem !important;

  font-weight: 800;
}


.photo-gallery {
  display: grid;

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

  gap: 16px;
}


.photo-gallery img {
  width: 100%;
  height: 280px;

  object-fit: cover;

  border-radius:
    var(--radius);
}


.related-project {
  color: inherit;

  text-decoration: none;
}


.related-project:hover {
  text-decoration: none;
}


.related-project .card {
  height: 100%;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.related-project:hover .card {
  transform:
    translateY(-5px);

  box-shadow:
    var(--shadow);
}


.project-bottom-nav {
  padding: 50px 0 80px;

  text-align: center;
}
/* =========================================
   RESOURCES HERO IMAGE
========================================= */

.page-hero.resources-hero {
    position: relative;

    background:
        linear-gradient(
            rgba(5, 44, 53, 0.68),
            rgba(5, 44, 53, 0.55)
        ),
        url("../images/resources/ocean1.jpeg")
        center / cover
        no-repeat;

    min-height: 500px;

    display: flex;
    align-items: center;

    color: white;
}
.resources-hero h1 {
    color: white;
}

.resources-hero .lead {
    color: rgba(255,255,255,0.92);
    max-width: 750px;
}

.resources-hero .eyebrow {
    color: var(--sand);
}
/* =========================================
   PROJECT CARD IMAGES
========================================= */

.project-image-card {
  padding: 0;
  overflow: hidden;
}

.project-card-image {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.project-card-content {
  padding: 28px;
}

.project-card-content h3 {
  margin: 14px 0 10px;
  color: var(--navy);
}
/* =========================================
   NEWS HERO IMAGE
========================================= */

.page-hero.news-hero {
  position: relative;

  background:
    linear-gradient(
      rgba(5, 44, 53, 0.65),
      rgba(5, 44, 53, 0.50)
    ),
    url("../images/news/PI-IA7-workshop-a.jpg")
    center / cover
    no-repeat;

  min-height: 500px;

  display: flex;
  align-items: center;

  color: white;
}

.news-hero h1 {
  color: white;
}

.news-hero .lead {
  color: rgba(255, 255, 255, 0.92);
  max-width: 800px;
}

.news-hero .eyebrow {
  color: var(--sand);
}
/* =========================================
   CONTACT HERO IMAGE
========================================= */

.page-hero.contact-hero {
  position: relative;

  background:
    linear-gradient(
      rgba(5, 44, 53, 0.65),
      rgba(5, 44, 53, 0.50)
    ),
    url("../images/contact/Little-Penguin-Resilient-Landscape-Project-Philip-Island-Nature-Parks.jpg")
    center / cover
    no-repeat;

  min-height: 500px;

  display: flex;
  align-items: center;

  color: white;
}

.contact-hero h1 {
  color: white;
}

.contact-hero .lead {
  color: rgba(255, 255, 255, 0.92);
  max-width: 800px;
}

.contact-hero .eyebrow {
  color: var(--sand);
}
/* =========================================
   MEMBERSHIP HERO IMAGE
========================================= */

.page-hero.membership-hero {
  position: relative;

  background:
    linear-gradient(
      rgba(5, 44, 53, 0.65),
      rgba(5, 44, 53, 0.50)
    ),
    url("../images/membership/PI-IA7-workshop.jpg")
    center / cover
    no-repeat;

  min-height: 500px;

  display: flex;
  align-items: center;

  color: white;
}

.membership-hero h1 {
  color: white;
}

.membership-hero .lead {
  color: rgba(255, 255, 255, 0.92);
  max-width: 800px;
}

.membership-hero .eyebrow {
  color: var(--sand);
}
/* =========================================
   MEMBER ORGANISATIONS TABLE
========================================= */

.member-table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin-top: 32px;

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

  background: white;

  box-shadow: 0 8px 24px rgba(7, 54, 66, 0.08);
}

.member-table {
  width: 100%;
  min-width: 760px;

  border-collapse: collapse;
}

.member-table th {
  padding: 18px 20px;

  background: var(--navy);
  color: white;

  text-align: left;

  font-size: 0.85rem;
  font-weight: 750;

  letter-spacing: 0.03em;
}

.member-table td {
  padding: 20px;

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

  vertical-align: middle;
}

.member-table tbody tr:last-child td {
  border-bottom: 0;
}

.member-table tbody tr:hover {
  background: var(--tint);
}

.member-table td:first-child {
  color: var(--navy);
  font-weight: 750;
}

.member-table a {
  font-weight: 750;
  white-space: nowrap;
}
/* =========================================
   MEMBERSHIP REGISTRATION FORM
========================================= */

.membership-form-layout {
  display: grid;

  grid-template-columns:
    0.75fr 1.25fr;

  gap: 64px;

  align-items: start;
}


.membership-form-intro h3 {
  margin-top: 0;

  color: var(--navy);

  font-size: 1.6rem;
}


.membership-form-card {
  padding: 38px;

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

  border-radius: var(--radius);

  background: white;

  box-shadow:
    0 12px 32px rgba(7, 54, 66, 0.08);
}


.membership-form {
  display: grid;

  gap: 24px;
}


.form-field {
  display: grid;

  gap: 8px;
}


.form-field label {
  color: var(--navy);

  font-weight: 750;
}


.form-field label span {
  color: var(--ochre);
}


.form-field input,
.membership-form textarea {

  width: 100%;

  padding: 14px 16px;

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

  border-radius: 10px;

  background: white;

  color: var(--ink);

  font: inherit;
}


.form-field textarea {
  resize: vertical;
}


.form-field input:focus,
.membership-form textarea:focus {

  outline:
    3px solid rgba(42, 157, 143, 0.20);

  border-color:
    var(--teal);
}


.field-note {
  margin: 0;

  color: var(--muted);

  font-size: 0.85rem;
}


.form-consent {
  display: grid;

  grid-template-columns: auto 1fr;

  gap: 12px;

  align-items: start;

  padding: 18px;

  border-radius: 10px;

  background: var(--tint);
}


.form-consent input {
  width: 18px;
  height: 18px;

  margin-top: 4px;
}


.form-consent label {
  font-size: 0.92rem;

  line-height: 1.55;
}


.form-required-note {
  margin: 0;

  color: var(--muted);

  font-size: 0.85rem;
}


/* =========================================
   MEMBERSHIP FORM - TABLET
========================================= */

@media (max-width: 900px) {

  .membership-form-layout {
    grid-template-columns: 1fr;

    gap: 40px;
  }

}


/* =========================================
   MEMBERSHIP FORM - MOBILE
========================================= */

@media (max-width: 620px) {

  .membership-form-card {
    padding: 24px;
  }

}
/* =========================================
   TRADITIONAL OWNERS RESPECT BANNER
========================================= */

.traditional-owner-banner {
  padding: 38px 0;

  background:
    linear-gradient(
      135deg,
      #073642,
      #0b5f68
    );

  color: white;
}


.traditional-owner-inner {
  display: grid;

  grid-template-columns: 220px 1fr;

  gap: 36px;

  align-items: center;
}


.traditional-owner-content {
  max-width: 1000px;
}


.traditional-owner-heading {
  margin: 0 0 10px;

  color: var(--sand);

  font-size: 0.82rem;

  font-weight: 800;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


.traditional-owner-content p:not(.traditional-owner-heading) {
  margin: 0 0 10px;

  color: rgba(255, 255, 255, 0.92);

  line-height: 1.7;
}


.traditional-owner-content p:last-child {
  margin-bottom: 0;
}


/* Decorative island / Country symbol */

/* Traditional Owners banner image */

.traditional-owner-image {
  width: 220px;
  height: 150px;

  overflow: hidden;

  border-radius: 14px;
}

.traditional-owner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Mobile */

@media (max-width: 620px) {

  .traditional-owner-banner {
    padding: 32px 0;
  }

  .traditional-owner-inner {
    grid-template-columns: 1fr;

    gap: 20px;
  }

  .traditional-owner-symbol {
    width: 62px;
    height: 62px;
  }

}